use nightmare to test custom element stuff

.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

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",

src/generators/dom/index.ts

@@ -208,29 +208,36 @@ export default function dom(
 
 		this._fragment = @create_main_fragment(this._state, this);
 
-		if (options.target) {
-			${generator.hydratable
-				? deindent`
-					var nodes = @children(options.target);
-					options.hydrate ? this._fragment.claim(nodes) : this._fragment.create();
-					nodes.forEach(@detachNode);
-				` :
-				deindent`
-					${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
-					this._fragment.create();
+		${generator.customElement ? deindent`
+			this._fragment.create();
+			this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}(this.shadowRoot, null);
+
+			if (options.target) this._mount(options.target, options.anchor || null);
+		` : deindent`
+			if (options.target) {
+				${generator.hydratable
+					? deindent`
+						var nodes = @children(options.target);
+						options.hydrate ? this._fragment.claim(nodes) : this._fragment.create();
+						nodes.forEach(@detachNode);
+					` :
+					deindent`
+						${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
+						this._fragment.create();
+					`}
+				this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}(options.target, options.anchor || null);
+
+				${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
+					${generator.hasComponents && `this._lock = true;`}
+					${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
+					${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
+					${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
+					${generator.hasComponents && `this._lock = false;`}
 				`}
-			${generator.customElement ?
-				`this._mount(options.target, options.anchor || null);` :
-				`this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}(options.target, options.anchor || null);`}
-
-			${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
-				${generator.hasComponents && `this._lock = true;`}
-				${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
-				${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
-				${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
-				${generator.hasComponents && `this._lock = false;`}
-			`}
-		}
+			}
+		`}
+
+
 	`;
 
 	if (generator.customElement) {
@@ -272,7 +279,6 @@ export default function dom(
 			customElements.define("${generator.tag}", ${name});
 			@assign(${prototypeBase}, ${proto}, {
 				_mount(target, anchor) {
-					this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}(this.shadowRoot, null);
 					target.insertBefore(this, anchor);
 				},
 

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}`);
+}

test/custom-elements/index.js

@@ -0,0 +1,97 @@
+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 { loadSvelte } 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('custom-elements', function() {
+	this.timeout(10000);
+
+	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);
+						});
+				});
+
+
+		});
+	});
+});

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);
+}

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!');
+}

test/js/samples/custom-element-styled/input.html → test/custom-elements/samples/new-styled/main.html

@@ -1,7 +1,7 @@
-<h1>Hello {{name}}!</h1>
+<p>styled</p>
 
 <style>
-	h1 {
+	p {
 		color: red;
 	}
 </style>

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)');
+}

test/custom-elements/samples/new/main.html

@@ -0,0 +1,7 @@
+<h1>Hello {{name}}!</h1>
+
+<script>
+	export default {
+		tag: 'custom-element'
+	};
+</script>

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!');
+}