use nightmare to test custom element stuff

sveltejs · Sep 10, 2017 · ef2a2b3 · ef2a2b3
1 parent 35637d8
commit ef2a2b3
Show file tree

Hide file tree

Showing 22 changed files with 555 additions and 1,119 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,8 +2,19 @@ language: node_js
 node_js:
   - "6"
   - "node"
+
 env:
   global:
     - BUILD_TIMEOUT=10000
-install: npm install
+
+addons:
+  apt:
+    packages:
+      - xvfb
+
+install:
+  - export DISPLAY=':99.0'
+  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+  - npm install
+
 after_success: npm run codecov
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "locate-character": "^2.0.0",
     "magic-string": "^0.22.3",
     "mocha": "^3.2.0",
+    "nightmare": "^2.10.0",
     "node-resolve": "^1.3.3",
     "nyc": "^11.1.0",
     "prettier": "^1.4.1",
@@ -65,6 +66,7 @@
     "rollup-plugin-json": "^2.1.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-typescript": "^0.8.1",
+    "rollup-plugin-virtual": "^1.0.1",
     "rollup-watch": "^4.3.1",
     "source-map": "^0.5.6",
     "source-map-support": "^0.4.8",

diff --git a/test/custom-elements/assert.js b/test/custom-elements/assert.js
@@ -0,0 +1,3 @@
+export function equal(a, b, message) {
+	if (a != b) throw new Error(message || `Expected ${a} to equal ${b}`);
+}
diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js
@@ -0,0 +1,102 @@
+import * as fs from 'fs';
+import * as http from 'http';
+import { rollup } from 'rollup';
+import virtual from 'rollup-plugin-virtual';
+import Nightmare from 'nightmare';
+import {
+	showOutput,
+	loadConfig,
+	loadSvelte,
+	env,
+	setupHtmlEqual,
+	spaces
+} from "../helpers.js";
+
+const page = `
+<body>
+	<main></main>
+	<script src='/bundle.js'></script>
+</body>
+`;
+
+const assert = fs.readFileSync('test/custom-elements/assert.js', 'utf-8');
+
+describe.only('custom-elements', () => {
+	const nightmare = new Nightmare({ show: false });
+
+	let svelte;
+	let server;
+	let bundle;
+
+	before(() => {
+		svelte = loadSvelte();
+
+		return new Promise((fulfil) => {
+			server = http.createServer((req, res) => {
+				if (req.url === '/') {
+					res.end(page);
+				}
+
+				if (req.url === '/bundle.js') {
+					res.end(bundle);
+				}
+			});
+
+			server.listen('6789', () => {
+				fulfil();
+			});
+		});
+	});
+
+	after(() => {
+		server.close();
+	});
+
+	fs.readdirSync('test/custom-elements/samples').forEach(dir => {
+		if (dir[0] === '.') return;
+
+		it(dir, () => {
+			return rollup({
+				input: `test/custom-elements/samples/${dir}/test.js`,
+				plugins: [
+					{
+						transform(code, id) {
+							if (id.endsWith('.html')) {
+								const compiled = svelte.compile(code, {
+									customElement: true
+								});
+
+								return {
+									code: compiled.code,
+									map: compiled.map
+								};
+							}
+						}
+					},
+
+					virtual({
+						assert
+					})
+				]
+			})
+				.then(bundle => bundle.generate({ format: 'iife', name: 'test' }))
+				.then(generated => {
+					bundle = generated.code;
+
+					return nightmare
+						.goto('http://localhost:6789')
+						.evaluate(() => {
+							return test(document.querySelector('main'));
+						})
+						.then(result => {
+							if (result) console.log(result);
+						})
+						.catch(message => {
+							throw new Error(message);
+						});
+				});
+
+
+		});
+	});
+});
diff --git a/...js/samples/custom-element-slot/input.html → ...tom-elements/samples/html-slots/main.html b/...js/samples/custom-element-slot/input.html → ...tom-elements/samples/html-slots/main.html
diff --git a/test/custom-elements/samples/html-slots/test.js b/test/custom-elements/samples/html-slots/test.js
@@ -0,0 +1,17 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+	target.innerHTML = `
+		<custom-element>
+			<strong>slotted</strong>
+		</custom-element>`;
+
+	const el = target.querySelector('custom-element');
+
+	const div = el.shadowRoot.children[0];
+	const [slot0, slot1] = div.children;
+
+	assert.equal(slot0.assignedNodes()[1], target.querySelector('strong'));
+	assert.equal(slot1.assignedNodes().length, 0);
+}
diff --git a/...s/samples/custom-element-basic/input.html → test/custom-elements/samples/html/main.html b/...s/samples/custom-element-basic/input.html → test/custom-elements/samples/html/main.html
diff --git a/test/custom-elements/samples/html/test.js b/test/custom-elements/samples/html/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.equal(el.get('name'), 'world');
+
+	const h1 = el.shadowRoot.querySelector('h1');
+	assert.equal(h1.textContent, 'Hello world!');
+}
diff --git a/.../samples/custom-element-styled/input.html → ...tom-elements/samples/new-styled/main.html b/.../samples/custom-element-styled/input.html → ...tom-elements/samples/new-styled/main.html
@@ -1,7 +1,7 @@
-<h1>Hello {{name}}!</h1>
+<p>styled</p>
 
 <style>
-	h1 {
+	p {
 		color: red;
 	}
 </style>

diff --git a/test/custom-elements/samples/new-styled/test.js b/test/custom-elements/samples/new-styled/test.js
@@ -0,0 +1,19 @@
+import * as assert from 'assert';
+import CustomElement from './main.html';
+
+export default function (target) {
+	target.innerHTML = '<p>unstyled</p>';
+
+	new CustomElement({
+		target
+	});
+
+	const unstyled = target.querySelector('p');
+	const styled = target.querySelector('custom-element').shadowRoot.querySelector('p');
+
+	assert.equal(unstyled.textContent, 'unstyled');
+	assert.equal(styled.textContent, 'styled');
+
+	assert.equal(getComputedStyle(unstyled).color, 'rgb(0, 0, 0)');
+	assert.equal(getComputedStyle(styled).color, 'rgb(255, 0, 0)');
+}
diff --git a/test/custom-elements/samples/new/main.html b/test/custom-elements/samples/new/main.html
@@ -0,0 +1,7 @@
+<h1>Hello {{name}}!</h1>
+
+<script>
+	export default {
+		tag: 'custom-element'
+	};
+</script>
diff --git a/test/custom-elements/samples/new/test.js b/test/custom-elements/samples/new/test.js
@@ -0,0 +1,18 @@
+import * as assert from 'assert';
+import CustomElement from './main.html';
+
+export default function (target) {
+	new CustomElement({
+		target,
+		data: {
+			name: 'world'
+		}
+	});
+
+	assert.equal(target.innerHTML, '<custom-element></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	const h1 = el.shadowRoot.querySelector('h1');
+
+	assert.equal(h1.textContent, 'Hello world!');
+}
diff --git a/test/js/samples/custom-element-basic/_config.js b/test/js/samples/custom-element-basic/_config.js