mirror of
				https://github.com/KevinMidboe/inline-html.git
				synced 2025-10-29 17:40:29 +00:00 
			
		
		
		
	Add support for script elements. Update tests. Update docs.
This commit is contained in:
		
							
								
								
									
										12
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										12
									
								
								README.md
									
									
									
									
									
								
							| @@ -9,6 +9,8 @@ This library parses HTML, embeds the contents of local assets that are reference | ||||
|  | ||||
| The following HTML elements and CSS data types are inlined: | ||||
|  | ||||
| - Scripts - The source path is read and inlined. | ||||
|  | ||||
| - Images - The source path is replaced with a datauri. | ||||
|  | ||||
| - Linked LESS stylesheets - The LESS is compiled and the result is inlined within a `<style>` element. Note that `@imports` are processed as well. | ||||
| @@ -21,6 +23,12 @@ Also, `inline-html` calls can be statically evaluated and included in Browserify | ||||
|  | ||||
| Assuming ... | ||||
|  | ||||
| - `main.js` | ||||
|  | ||||
| 	```js | ||||
| 	var a = 1; | ||||
| 	``` | ||||
|  | ||||
| - `main.less` | ||||
|  | ||||
| 	```css | ||||
| @@ -42,6 +50,7 @@ var inline = require('inline-html'); | ||||
|  | ||||
| co(function * () { | ||||
| 	var html = ` | ||||
| 		<script src="main.js"></script> | ||||
| 		<link rel="stylesheet/less" href="main.less"/> | ||||
| 		<style> div { background-image: url('path/to/file'); } </style> | ||||
| 		<div style="background-image: url('path/to/file');"></div> | ||||
| @@ -50,6 +59,9 @@ co(function * () { | ||||
| 	html = yield inline.html(html); | ||||
| 	console.log(html); | ||||
| 	/** | ||||
| 		<script> | ||||
| 			var a = 1; | ||||
| 		</script> | ||||
| 		<style> | ||||
| 			@font-face { src: url('data:...'); } | ||||
| 			div { background-image: url('data:...'); } | ||||
|   | ||||
| @@ -4,6 +4,7 @@ const fs = require('mz/fs'); | ||||
| const inlineCssUrl = require('./css-url'); | ||||
| const inlineImg = require('./img'); | ||||
| const inlineLess = require('./link-less'); | ||||
| const inlineScript = require('./script'); | ||||
| const R = require('ramda'); | ||||
| const Ru = require('@panosoft/ramda-utils'); | ||||
|  | ||||
| @@ -33,11 +34,15 @@ inline.html = co.wrap(function * (html, options) { | ||||
| 		$ = result.$; | ||||
| 		files = R.concat(files, result.files); | ||||
|  | ||||
| 		result = inlineCssUrl($, filename); | ||||
| 		result = inlineCssUrl($, filename, options); | ||||
| 		$ = result.$; | ||||
| 		files = R.concat(files, result.files); | ||||
|  | ||||
| 		result = yield inlineImg($, filename); | ||||
| 		result = yield inlineImg($, filename, options); | ||||
| 		$ = result.$; | ||||
| 		files = R.concat(files, result.files); | ||||
|  | ||||
| 		result = yield inlineScript($, filename, options); | ||||
| 		$ = result.$; | ||||
| 		files = R.concat(files, result.files); | ||||
|  | ||||
|   | ||||
							
								
								
									
										36
									
								
								lib/script.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										36
									
								
								lib/script.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,36 @@ | ||||
| const co = require('co'); | ||||
| const fs = require('mz/fs'); | ||||
| const isLocalPath = require('is-local-path'); | ||||
| const isTemplateExpression = require('./is-template-expression'); | ||||
| const path = require('path'); | ||||
| const R = require('ramda'); | ||||
|  | ||||
| const forEachIndexed = R.addIndex(R.forEach); | ||||
|  | ||||
| const inlineScript = co.wrap(function * ($, filename) { | ||||
|   var basedir = path.dirname(filename); | ||||
|   var files; | ||||
|   try { | ||||
|     const scripts = $('script') | ||||
|       .filter((index, element) => { | ||||
|         const source = $(element).attr('src'); | ||||
|         return isLocalPath(source) && !isTemplateExpression(source); | ||||
|       }) | ||||
|       .toArray(); | ||||
|     const getFilename = element => path.resolve(basedir, $(element).attr('src')); | ||||
|     const filenames = R.map(getFilename, scripts); | ||||
|     files = R.uniq(filenames); | ||||
|     const readFile = filename => fs.readFile(filename, 'utf8'); | ||||
|     const contents = yield R.map(readFile, filenames); | ||||
|     const replaceScript = (script, index) => $(script).attr('src', null).html(contents[index]); | ||||
|     forEachIndexed(replaceScript, scripts); | ||||
|     return { $, files }; | ||||
|   } | ||||
|   catch (error) { | ||||
|     error.filename = filename; | ||||
| 		error.files = files; | ||||
| 		throw error; | ||||
|   } | ||||
| }); | ||||
|  | ||||
| module.exports = inlineScript; | ||||
							
								
								
									
										452
									
								
								test/index.js
									
									
									
									
									
								
							
							
						
						
									
										452
									
								
								test/index.js
									
									
									
									
									
								
							| @@ -18,12 +18,12 @@ describe('inline-html', () => { | ||||
| 			return expect(inline.file(filename)).to.eventually.equal(content); | ||||
| 		}); | ||||
|  | ||||
| 		it('options.filename: ignored for css url path resolution', () => { | ||||
| 		it('options.filename: always reset to current filename and used for css url path resolution', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/css-url.html'); // file contains url path relative to itself | ||||
| 			var options = { filename: __filename }; // sets filename relative to this test file | ||||
| 			return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/); | ||||
| 		}); | ||||
| 		it('options.filename: ignored for img src path resolution', () => { | ||||
| 		it('options.filename:  always reset to current filename and used for img src path resolution', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/img.html'); // file contains src relative to itself | ||||
| 			var options = { filename: __filename }; // sets filename relative to this test file | ||||
| 			return expect(inline.file(filename, options)).to.eventually.match(/"data:.*,.*"/); | ||||
| @@ -39,32 +39,72 @@ describe('inline-html', () => { | ||||
| 			var html = 'HTML'; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('preserve self closing tags', () => { | ||||
| 			var html = '<br/>'; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('preserve partials', () => { | ||||
| 			var html = '{{> partial}}'; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('preserve helpers', () => { | ||||
| 			var html = '{{helper}}'; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
|  | ||||
| 		it('inline link less', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/basic.less'); | ||||
| 			var html = `<link rel="stylesheet/less" href="${filename}"/>`; | ||||
| 			return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/); | ||||
| 		it('options.filename: default to cwd for css url path resolution', () => { | ||||
| 			var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd | ||||
| 			var uri = datauri(url); | ||||
|  | ||||
| 			var html = (path) => `<style>div { background-image: url('${path}'); }</style>`; | ||||
| 			return expect(inline.html(html(url))).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('inline link less imports', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/import.less'); | ||||
| 			var html = `<link rel="stylesheet/less" href="${filename}"/>`; | ||||
| 			return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/) | ||||
| 				.and.not.match(/@import/); | ||||
| 		it('options.filename: set basepath for css url path resolution', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/fake.html'); | ||||
| 			var dirname = path.dirname(filename); | ||||
|  | ||||
| 			var url = 'file.txt'; // Note: path relative to filename's dirname | ||||
| 			var uri = datauri(path.resolve(dirname, url)); | ||||
|  | ||||
| 			var html = (path) => `<style>div { background-image: url('${path}'); }</style>`; | ||||
| 			var options = { filename: filename }; | ||||
| 			return expect(inline.html(html(url), options)).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('inline css url path in style element', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 			var html = `<style>div {background-image: url("${filename}");}</style>`; | ||||
| 			return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); | ||||
|  | ||||
| 		it('options.filename: default to cwd for img src path resolution', () => { | ||||
| 			var url = 'test/fixtures/file.txt'; // Note: path relative to cwd | ||||
| 			var uri = datauri(url); | ||||
|  | ||||
| 			var html = (path) => `<img src="${path}"/>`; | ||||
| 			return expect(inline.html(html(url))).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('inline css url path in element style attribute', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 			var html = `<div style="background-image: url('${filename}');"></div>`; | ||||
| 			return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); | ||||
| 		it('options.filename: set basepath for img src path resolution', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/fake.html'); | ||||
| 			var dirname = path.dirname(filename); | ||||
|  | ||||
| 			var url = 'file.txt'; // Note: path relative to filename's dirname | ||||
| 			var uri = datauri(path.resolve(dirname, url)); | ||||
|  | ||||
| 			var html = (path) => `<img src="${path}"/>`; | ||||
| 			var options = { filename: filename }; | ||||
| 			return expect(inline.html(html(url), options)).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('inline img src', () => { | ||||
|  | ||||
| 		it('options.filename: included in results.files for img src if options.verbose true', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 			var html = `<img src="${filename}"/>`; | ||||
| 			return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); | ||||
| 			var options = { verbose: true }; | ||||
| 			return expect(inline.html(html, options)).to.eventually.have.property('files') | ||||
| 				.that.is.an('array') | ||||
| 				.that.contains(filename); | ||||
| 		}); | ||||
| 		it('options.filename: included in results.files for css url path if options.verbose true', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 			var html = `<style>div { background-image: url('${filename}'); }</style>`; | ||||
| 			var options = { verbose: true }; | ||||
| 			return expect(inline.html(html, options)).to.eventually.have.property('files') | ||||
| 				.that.is.an('array') | ||||
| 				.that.contains(filename); | ||||
| 		}); | ||||
|  | ||||
|  | ||||
| @@ -88,146 +128,39 @@ describe('inline-html', () => { | ||||
| 		}); | ||||
|  | ||||
|  | ||||
| 		it('options.filename: set basepath for css url path resolution', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/fake.html'); | ||||
| 			var dirname = path.dirname(filename); | ||||
|  | ||||
| 			var url = 'file.txt'; // Note: path relative to filename's dirname | ||||
| 			var uri = datauri(path.resolve(dirname, url)); | ||||
|  | ||||
| 			var html = (path) => `<style>div { background-image: url('${path}'); }</style>`; | ||||
| 			var options = { filename: filename }; | ||||
| 			return expect(inline.html(html(url), options)).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('options.filename: set basepath for img src path resolution', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/fake.html'); | ||||
| 			var dirname = path.dirname(filename); | ||||
|  | ||||
| 			var url = 'file.txt'; // Note: path relative to filename's dirname | ||||
| 			var uri = datauri(path.resolve(dirname, url)); | ||||
|  | ||||
| 			var html = (path) => `<img src="${path}"/>`; | ||||
| 			var options = { filename: filename }; | ||||
| 			return expect(inline.html(html(url), options)).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('options.filename: default to cwd for css url path resolution', () => { | ||||
| 			var url = 'test/fixtures/file.txt'; // Note: this is relative to cwd | ||||
| 			var uri = datauri(url); | ||||
|  | ||||
| 			var html = (path) => `<style>div { background-image: url('${path}'); }</style>`; | ||||
| 			return expect(inline.html(html(url))).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('options.filename: default to cwd for img src path resolution', () => { | ||||
| 			var url = 'test/fixtures/file.txt'; // Note: path relative to cwd | ||||
| 			var uri = datauri(url); | ||||
|  | ||||
| 			var html = (path) => `<img src="${path}"/>`; | ||||
| 			return expect(inline.html(html(url))).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('options.filename: included in results.files for img src if options.verbose true', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 			var html = `<img src="${filename}"/>`; | ||||
| 			var options = { verbose: true }; | ||||
| 			return expect(inline.html(html, options)).to.eventually.have.property('files') | ||||
| 				.that.is.an('array') | ||||
| 				.that.contains(filename); | ||||
| 		}); | ||||
| 		it('options.filename: included in results.files for css url path if options.verbose true', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 			var html = `<style>div { background-image: url('${filename}'); }</style>`; | ||||
| 			var options = { verbose: true }; | ||||
| 			return expect(inline.html(html, options)).to.eventually.have.property('files') | ||||
| 				.that.is.an('array') | ||||
| 				.that.contains(filename); | ||||
| 		}); | ||||
|  | ||||
|  | ||||
| 		it('preserve self closing tags', () => { | ||||
| 			var html = '<br/>'; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('preserve partials', () => { | ||||
| 			var html = '{{> partial}}'; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('preserve helpers', () => { | ||||
| 			var html = '{{helper}}'; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
|  | ||||
| 		it('ignore css url remote paths', () => { | ||||
| 			var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('ignore img src remote paths', () => { | ||||
| 			var html = `<img src="http://test.com/file.txt?query=string#hash"/>`; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('ignore css url template expression paths', () => { | ||||
| 			var html = `<style> div { background-image: url({{path}}); }</style>`; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('ignore img src template expression paths', () => { | ||||
| 			var html = `<img src="{{path}}"/>`; | ||||
| 			return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 		}); | ||||
| 		it('ignore query strings and hashes on local paths', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 			var url = `${filename}?query=string#hash`; | ||||
| 			var uri = datauri(filename); | ||||
| 			var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; | ||||
| 			return expect(inline.html(html(url))).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
| 		it('handle assets with a space in their filename', () => { | ||||
| 			var filename = path.resolve(__dirname, 'fixtures/file space.txt'); | ||||
| 			var uri = datauri(filename); | ||||
| 			var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; | ||||
| 			return expect(inline.html(html(filename))).to.eventually.equal(html(uri)); | ||||
| 		}); | ||||
|  | ||||
| 		// Error handling | ||||
| 		// inline-img | ||||
| 		it('throw error when html image source invalid', () => { | ||||
| 			return co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var source = 'missing.png'; | ||||
| 				var html = `<img src="${source}" >`; | ||||
| 				var resolvedSource = path.resolve(path.dirname(filename), source); | ||||
| 				try { | ||||
| 					yield inline.html(html, {filename}); | ||||
| 					throw new Error('No error thrown'); | ||||
| 				} | ||||
| 				catch (error) { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedSource); | ||||
| 				} | ||||
| 		describe('css-url', () => { | ||||
| 			it('inline local url in style element', () => { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 				var html = `<style>div {background-image: url("${filename}");}</style>`; | ||||
| 				return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('image: include all sources in error.files up until and including invalid source', () => { | ||||
| 			return co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var valid = 'fixtures/file.txt'; | ||||
| 				var invalid = 'missing.png'; | ||||
| 				var resolvedInvalid = path.resolve(path.dirname(filename), invalid); | ||||
| 				var resolvedValid = path.resolve(path.dirname(filename), valid); | ||||
| 				var html = ` | ||||
| 					<img src="${valid}" > | ||||
| 					<img src="${invalid}" > | ||||
| 				`; | ||||
| 				try { | ||||
| 					yield inline.html(html, {filename}); | ||||
| 					throw new Error('No error thrown'); | ||||
| 				} | ||||
| 				catch (error) { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedValid); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedInvalid); | ||||
| 				} | ||||
| 			it('inline local url in style attribute', () => { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 				var html = `<div style="background-image: url('${filename}');"></div>`; | ||||
| 				return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); | ||||
| 			}); | ||||
| 		}); | ||||
| 		// inline-style | ||||
| 		it('throw error when style element syntax invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			it('ignore remote url', () => { | ||||
| 				var html = `<style> div { background-image: url('http://test.com/file.txt?query=string#hash'); }</style>`; | ||||
| 				return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 			}); | ||||
| 			it('ignore template expression url', () => { | ||||
| 				var html = `<style> div { background-image: url({{path}}); }</style>`; | ||||
| 				return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 			}); | ||||
| 			it('ignore url query strings and hashes', () => { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 				var url = `${filename}?query=string#hash`; | ||||
| 				var uri = datauri(filename); | ||||
| 				var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; | ||||
| 				return expect(inline.html(html(url))).to.eventually.equal(html(uri)); | ||||
| 			}); | ||||
| 			it('handle url with spaces', () => { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/file space.txt'); | ||||
| 				var uri = datauri(filename); | ||||
| 				var html = (source) => `<style> div { background-image: url('${source}'); }</style>`; | ||||
| 				return expect(inline.html(html(filename))).to.eventually.equal(html(uri)); | ||||
| 			}); | ||||
| 			it('throw when syntax invalid in style element', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var html = `<style>div {</style>`; | ||||
| 				try { | ||||
| @@ -238,10 +171,20 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(filename); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('throw error when html style url invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 			it('throw when syntax invalid in style attribute', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var html = `<div style="background url()"></div>`; | ||||
| 				try { | ||||
| 					yield inline.html(html, {filename}); | ||||
| 					throw new Error('No error thrown'); | ||||
| 				} | ||||
| 				catch (error) { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(filename); | ||||
| 				} | ||||
| 			})); | ||||
| 			it('throw when url invalid in style element', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var url = 'missing.png'; | ||||
| 				var resolvedUrl = path.resolve(path.dirname(filename), url); | ||||
| @@ -254,24 +197,8 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedUrl); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('throw error when style attribute syntax invalid', () => { | ||||
| 			return co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var html = `<div style="background url()"></div>`; | ||||
| 				try { | ||||
| 					yield inline.html(html, {filename}); | ||||
| 					throw new Error('No error thrown'); | ||||
| 				} | ||||
| 				catch (error) { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(filename); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('throw error when html style attribute url invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 		it('throw when url invalid in style attribute ', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var url = 'missing.png'; | ||||
| 				var resolvedUrl = path.resolve(path.dirname(filename), url); | ||||
| @@ -284,18 +211,16 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedUrl); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('include valid and invalid paths in error.files when html style url invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 			it('include all urls in error.files up until and including invalid url in style element', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var validUrl = 'fixtures/file.txt'; | ||||
| 				var invalidUrl = 'missing.png'; | ||||
| 				var resolvedInvalidUrl = path.resolve(path.dirname(filename), invalidUrl); | ||||
| 				var resolvedValidUrl = path.resolve(path.dirname(filename), validUrl); | ||||
| 				var html = ` | ||||
| 					<style>div {background-image: url("${validUrl}");}</style> | ||||
| 					<style>div { background-image: url('${invalidUrl}'); }</style> | ||||
| 					<style>div {background-image: url('${validUrl}');}</style> | ||||
| 					<style>div {background-image: url('${invalidUrl}');}</style> | ||||
| 				`; | ||||
| 				try { | ||||
| 					yield inline.html(html, {filename}); | ||||
| @@ -306,10 +231,8 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedValidUrl); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedInvalidUrl); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('include valid and invalid paths in error.files when html attribute url invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 			it('include all urls in error.files up until and including invalid url in style attribute', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var validUrl = 'fixtures/file.txt'; | ||||
| 				var invalidUrl = 'missing.png'; | ||||
| @@ -328,10 +251,8 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedValidUrl); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedInvalidUrl); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('include valid and invalid paths in error.files when style element valid and html attribute invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 			it('include all urls in error.files up until and including invalid url when style element valid and style attribute invalid', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var validUrl = 'fixtures/file.txt'; | ||||
| 				var invalidUrl = 'missing.png'; | ||||
| @@ -350,11 +271,72 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedValidUrl); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedInvalidUrl); | ||||
| 				} | ||||
| 			}); | ||||
| 			})); | ||||
| 		}); | ||||
| 		// inline-link-less | ||||
| 		it('throw error when link href invalid', () => { | ||||
| 			return co(function * () { | ||||
|  | ||||
| 		describe('img', () => { | ||||
| 			it('inline img src', () => { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 				var html = `<img src="${filename}"/>`; | ||||
| 				return expect(inline.html(html)).to.eventually.match(/data:.*,.*/); | ||||
| 			}); | ||||
| 			it('ignore img src remote paths', () => { | ||||
| 				var html = `<img src="http://test.com/file.txt?query=string#hash"/>`; | ||||
| 				return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 			}); | ||||
| 			it('ignore img src template expression paths', () => { | ||||
| 				var html = `<img src="{{path}}"/>`; | ||||
| 				return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 			}); | ||||
| 			it('throw when src invalid', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var source = 'missing.png'; | ||||
| 				var html = `<img src="${source}" >`; | ||||
| 				var resolvedSource = path.resolve(path.dirname(filename), source); | ||||
| 				try { | ||||
| 					yield inline.html(html, {filename}); | ||||
| 					throw new Error('No error thrown'); | ||||
| 				} | ||||
| 				catch (error) { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedSource); | ||||
| 				} | ||||
| 			})); | ||||
| 			it('include all sources in error.files up until and including invalid source', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var valid = 'fixtures/file.txt'; | ||||
| 				var invalid = 'missing.png'; | ||||
| 				var resolvedInvalid = path.resolve(path.dirname(filename), invalid); | ||||
| 				var resolvedValid = path.resolve(path.dirname(filename), valid); | ||||
| 				var html = ` | ||||
| 					<img src="${valid}"> | ||||
| 					<img src="${invalid}"> | ||||
| 				`; | ||||
| 				try { | ||||
| 					yield inline.html(html, {filename}); | ||||
| 					throw new Error('No error thrown'); | ||||
| 				} | ||||
| 				catch (error) { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedValid); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedInvalid); | ||||
| 				} | ||||
| 			})); | ||||
| 		}); | ||||
|  | ||||
| 		describe('link-less', () => { | ||||
| 			it('inline link less', () => { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/basic.less'); | ||||
| 				var html = `<link rel="stylesheet/less" href="${filename}"/>`; | ||||
| 				return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/); | ||||
| 			}); | ||||
| 			it('inline link less imports', () => { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/import.less'); | ||||
| 				var html = `<link rel="stylesheet/less" href="${filename}"/>`; | ||||
| 				return expect(inline.html(html)).to.eventually.match(/<style>[^]*<\/style>/) | ||||
| 					.and.not.match(/@import/); | ||||
| 			}); | ||||
| 			it('throw error when link href invalid', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'index.html'); | ||||
| 				var href = 'missing.less'; | ||||
| 				var resolvedHref = path.resolve(path.dirname(filename), href); | ||||
| @@ -367,10 +349,8 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(resolvedHref); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('throw error when less import invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 			it('throw error when less import invalid', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/index.html'); | ||||
| 				var lessBasename = 'invalidImport.less'; | ||||
| 				var lessFilename = path.resolve(path.dirname(filename), lessBasename); | ||||
| @@ -383,10 +363,8 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('filename').that.equals(lessFilename); | ||||
| 					expect(error).to.have.property('files').that.contains(lessFilename); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('throw error when less syntax invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 			it('throw error when less syntax invalid', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/index.html'); | ||||
| 				var lessBasename = 'invalidSyntax.less'; | ||||
| 				var lessFilename = path.resolve(path.dirname(filename), lessBasename); | ||||
| @@ -399,10 +377,8 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('filename').that.equals(lessFilename); | ||||
| 					expect(error).to.have.property('files').that.contains(lessFilename); | ||||
| 				} | ||||
| 			}); | ||||
| 		}); | ||||
| 		it('throw error when less url invalid', () => { | ||||
| 			return co(function * () { | ||||
| 			})); | ||||
| 			it('throw error when less url invalid', () => co(function * () { | ||||
| 				var filename = path.resolve(__dirname, 'fixtures/index.html'); | ||||
| 				var lessBasename = 'invalidUrl.less'; | ||||
| 				var badUrl = path.resolve(path.dirname(filename), 'missing.png'); | ||||
| @@ -417,6 +393,60 @@ describe('inline-html', () => { | ||||
| 					expect(error).to.have.property('filename').that.equals(filename); | ||||
| 					expect(error).to.have.property('files').that.contains(badUrl); | ||||
| 				} | ||||
| 			})); | ||||
| 		}); | ||||
|  | ||||
| 		describe('script', () => { | ||||
| 			it('inline local src', () => { | ||||
| 				var source = path.resolve(__dirname, 'fixtures/file.txt'); | ||||
| 				var html = `<script src="${source}"></script>`; | ||||
| 				var contents = fs.readFileSync(source, 'utf8'); | ||||
| 				return expect(inline.html(html)).to.eventually.equal(`<script>${contents}</script>`); | ||||
| 			}); | ||||
| 			it('ignore remote src', () => { | ||||
| 				var html = `<script src="http://test.com/file.txt?query=string#hash"/>`; | ||||
| 				return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 			}); | ||||
| 			it('ignore template expression src', () => { | ||||
| 				var html = `<script src="{{path}}"/>`; | ||||
| 				return expect(inline.html(html)).to.eventually.equal(html); | ||||
| 			}); | ||||
| 			it('throw when source invalid', () => co(function * () { | ||||
| 					var filename = path.resolve(__dirname, 'index.html'); | ||||
| 					var source = 'missing.js'; | ||||
| 					var html = `<script src="${source}"></script>`; | ||||
| 					var resolvedSource = path.resolve(path.dirname(filename), source); | ||||
| 					try { | ||||
| 						yield inline.html(html, {filename}); | ||||
| 						throw new Error('No error thrown'); | ||||
| 					} | ||||
| 					catch (error) { | ||||
| 						expect(error).to.have.property('filename').that.equals(filename); | ||||
| 						expect(error).to.have.property('files').that.contains(resolvedSource); | ||||
| 					} | ||||
| 				}) | ||||
| 			); | ||||
| 			it('include all sources in error.files up until and including invalid source', () => { | ||||
| 				return co(function * () { | ||||
| 					var filename = path.resolve(__dirname, 'index.html'); | ||||
| 					var valid = 'fixtures/file.txt'; | ||||
| 					var invalid = 'missing.js'; | ||||
| 					var resolvedInvalid = path.resolve(path.dirname(filename), invalid); | ||||
| 					var resolvedValid = path.resolve(path.dirname(filename), valid); | ||||
| 					var html = ` | ||||
| 						<script src="${valid}"></script> | ||||
| 						<script src="${invalid}"></script> | ||||
| 					`; | ||||
| 					try { | ||||
| 						yield inline.html(html, {filename}); | ||||
| 						throw new Error('No error thrown'); | ||||
| 					} | ||||
| 					catch (error) { | ||||
| 						expect(error).to.have.property('filename').that.equals(filename); | ||||
| 						expect(error).to.have.property('files').that.contains(resolvedValid); | ||||
| 						expect(error).to.have.property('files').that.contains(resolvedInvalid); | ||||
| 					} | ||||
| 				}); | ||||
| 			}); | ||||
| 		}); | ||||
| 	}); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user