improve preprocess tests

test/preprocess/index.js

@@ -1,226 +1,25 @@
+import * as fs from 'fs';
 import * as assert from 'assert';
-import { svelte } from '../helpers.js';
+import { loadConfig, svelte } from '../helpers.js';
 
-describe('preprocess', () => {
+describe.only('preprocess', () => {
-	it('preprocesses entire component', () => {
+	fs.readdirSync('test/preprocess/samples').forEach(dir => {
-		const source = `
+		if (dir[0] === '.') return;
-			<h1>Hello __NAME__!</h1>
-		`;
 
-		const expected = `
+		const config = loadConfig(`./preprocess/samples/${dir}/_config.js`);
-			<h1>Hello world!</h1>
-		`;
 
-		return svelte.preprocess(source, {
+		if (config.solo && process.env.CI) {
-			markup: ({ content }) => {
+			throw new Error('Forgot to remove `solo: true` from test');
-				return {
+		}
-					code: content.replace('__NAME__', 'world')
-				};
-			}
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
-		});
-	});
-
-	it('preprocesses style', () => {
-		const source = `
-			<div class='brand-color'>$brand</div>
-
-			<style>
-				.brand-color {
-					color: $brand;
-				}
-			</style>
-		`;
-
-		const expected = `
-			<div class='brand-color'>$brand</div>
-
-			<style>
-				.brand-color {
-					color: purple;
-				}
-			</style>
-		`;
-
-		return svelte.preprocess(source, {
-			style: ({ content }) => {
-				return {
-					code: content.replace('$brand', 'purple')
-				};
-			}
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
-		});
-	});
-
-	it('preprocesses style asynchronously', () => {
-		const source = `
-			<div class='brand-color'>$brand</div>
-
-			<style>
-				.brand-color {
-					color: $brand;
-				}
-			</style>
-		`;
-
-		const expected = `
-			<div class='brand-color'>$brand</div>
-
-			<style>
-				.brand-color {
-					color: purple;
-				}
-			</style>
-		`;
-
-		return svelte.preprocess(source, {
-			style: ({ content }) => {
-				return Promise.resolve({
-					code: content.replace('$brand', 'purple')
-				});
-			}
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
-		});
-	});
-
-	it('preprocesses script', () => {
-		const source = `
-			<script>
-				console.log(__THE_ANSWER__);
-			</script>
-		`;
-
-		const expected = `
-			<script>
-				console.log(42);
-			</script>
-		`;
-
-		return svelte.preprocess(source, {
-			script: ({ content }) => {
-				return {
-					code: content.replace('__THE_ANSWER__', '42')
-				};
-			}
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
-		});
-	});
-
-	it('preprocesses multiple matching tags', () => {
-		const source = `
-			<script>
-				REPLACEME
-			</script>
-			<style>
-				SHOULD NOT BE REPLACED
-			</style>
-			<script>
-				REPLACEMETOO
-			</script>
-		`;
-
-		const expected = `
-			<script>
-				replaceme
-			</script>
-			<style>
-				SHOULD NOT BE REPLACED
-			</style>
-			<script>
-				replacemetoo
-			</script>
-		`;
-
-		return svelte.preprocess(source, {
-			script: ({ content }) => {
-				return {
-					code: content.toLowerCase()
-				};
-			}
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
-		});
-	});
-
-	it('parses attributes', () => {
-		const source = `
-			<style type='text/scss' data-foo="bar" bool></style>
-		`;
-
-		const expected = `
-			<style type='text/scss' data-foo="bar" bool>PROCESSED</style>
-		`;
-
-		return svelte.preprocess(source, {
-			style: ({ attributes }) => {
-				assert.deepEqual(attributes, {
-					type: 'text/scss',
-					'data-foo': 'bar',
-					bool: true
-				});
-				return { code: 'PROCESSED' };
-			}
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
-		});
-	});
-
-	it('provides filename to processing hooks', () => {
-		const source = `
-			<h1>Hello __MARKUP_FILENAME__!</h1>
-			<style>.red { color: __STYLE_FILENAME__; }</style>
-			<script>console.log('__SCRIPT_FILENAME__');</script>
-		`;
-
-		const expected = `
-			<h1>Hello file.html!</h1>
-			<style>.red { color: file.html; }</style>
-			<script>console.log('file.html');</script>
-		`;
-
-		return svelte.preprocess(source, {
-			filename: 'file.html',
-			markup: ({ content, filename }) => {
-				return {
-					code: content.replace('__MARKUP_FILENAME__', filename)
-				};
-			},
-			style: ({ content, filename }) => {
-				return {
-					code: content.replace('__STYLE_FILENAME__', filename)
-				};
-			},
-			script: ({ content, filename }) => {
-				return {
-					code: content.replace('__SCRIPT_FILENAME__', filename)
-				};
-			}
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
-		});
-	});
 
-	it('ignores null/undefined returned from preprocessor', () => {
+		(config.skip ? it.skip : config.solo ? it.only : it)(dir, async () => {
-		const source = `
+			const input = fs.readFileSync(`test/preprocess/samples/${dir}/input.html`, 'utf-8');
-			<script>
+			const expected = fs.readFileSync(`test/preprocess/samples/${dir}/output.html`, 'utf-8');
-				console.log('ignore me');
-			</script>
-		`;
 
-		const expected = `
+			const actual = await svelte.preprocess(input, config.preprocess);
-			<script>
+			fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.html`, actual);
-				console.log('ignore me');
-			</script>
-		`;
 
-		return svelte.preprocess(source, {
+			assert.equal(actual, expected);
-			script: () => null
-		}).then(processed => {
-			assert.equal(processed.toString(), expected);
 		});
 	});
 });

test/preprocess/samples/filename/_config.js

@@ -0,0 +1,20 @@
+export default {
+	preprocess: {
+		filename: 'file.html',
+		markup: ({ content, filename }) => {
+			return {
+				code: content.replace('__MARKUP_FILENAME__', filename)
+			};
+		},
+		style: ({ content, filename }) => {
+			return {
+				code: content.replace('__STYLE_FILENAME__', filename)
+			};
+		},
+		script: ({ content, filename }) => {
+			return {
+				code: content.replace('__SCRIPT_FILENAME__', filename)
+			};
+		}
+	}
+};

test/preprocess/samples/filename/input.html

@@ -0,0 +1,3 @@
+<h1>Hello __MARKUP_FILENAME__!</h1>
+<style>.red { color: __STYLE_FILENAME__; }</style>
+<script>console.log('__SCRIPT_FILENAME__');</script>

test/preprocess/samples/filename/output.html

@@ -0,0 +1,3 @@
+<h1>Hello file.html!</h1>
+<style>.red { color: file.html; }</style>
+<script>console.log('file.html');</script>

test/preprocess/samples/ignores-null/_config.js

@@ -0,0 +1,5 @@
+export default {
+	preprocess: {
+		script: () => null
+	}
+};

test/preprocess/samples/ignores-null/input.html

@@ -0,0 +1,3 @@
+<script>
+	console.log('ignore me');
+</script>

test/preprocess/samples/ignores-null/output.html

@@ -0,0 +1,3 @@
+<script>
+	console.log('ignore me');
+</script>

test/preprocess/samples/markup/_config.js

@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		markup: ({ content }) => {
+			return {
+				code: content.replace('__NAME__', 'world')
+			};
+		}
+	}
+};

test/preprocess/samples/markup/input.html

@@ -0,0 +1 @@
+<h1>Hello __NAME__!</h1>

test/preprocess/samples/markup/output.html

@@ -0,0 +1 @@
+<h1>Hello world!</h1>

test/preprocess/samples/script-multiple/_config.js

@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		script: ({ content }) => {
+			return {
+				code: content.toLowerCase()
+			};
+		}
+	}
+};

test/preprocess/samples/script-multiple/input.html

@@ -0,0 +1,9 @@
+<script>
+	REPLACEME
+</script>
+<style>
+	SHOULD NOT BE REPLACED
+</style>
+<script>
+	REPLACEMETOO
+</script>

test/preprocess/samples/script-multiple/output.html

@@ -0,0 +1,9 @@
+<script>
+	replaceme
+</script>
+<style>
+	SHOULD NOT BE REPLACED
+</style>
+<script>
+	replacemetoo
+</script>

test/preprocess/samples/script/_config.js

@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		script: ({ content }) => {
+			return {
+				code: content.replace('__THE_ANSWER__', '42')
+			};
+		}
+	}
+};

test/preprocess/samples/script/input.html

@@ -0,0 +1,3 @@
+<script>
+	console.log(__THE_ANSWER__);
+</script>

test/preprocess/samples/script/output.html

@@ -0,0 +1,3 @@
+<script>
+	console.log(42);
+</script>

test/preprocess/samples/style-async/_config.js

@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		style: ({ content }) => {
+			return Promise.resolve({
+				code: content.replace('$brand', 'purple')
+			});
+		}
+	}
+};

test/preprocess/samples/style-async/input.html

@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: $brand;
+	}
+</style>

test/preprocess/samples/style-async/output.html

@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: purple;
+	}
+</style>

test/preprocess/samples/style-attributes/_config.js

@@ -0,0 +1,14 @@
+import * as assert from 'assert';
+
+export default {
+	preprocess: {
+		style: ({ attributes }) => {
+			assert.deepEqual(attributes, {
+				type: 'text/scss',
+				'data-foo': 'bar',
+				bool: true
+			});
+			return { code: 'PROCESSED' };
+		}
+	}
+};

test/preprocess/samples/style-attributes/input.html

@@ -0,0 +1 @@
+<style type='text/scss' data-foo="bar" bool></style>

test/preprocess/samples/style-attributes/output.html

@@ -0,0 +1 @@
+<style type='text/scss' data-foo="bar" bool>PROCESSED</style>

test/preprocess/samples/style/_config.js

@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		style: ({ content }) => {
+			return {
+				code: content.replace('$brand', 'purple')
+			};
+		}
+	}
+};

test/preprocess/samples/style/input.html

@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: $brand;
+	}
+</style>

test/preprocess/samples/style/output.html

@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: purple;
+	}
+</style>