mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
committed by
GitHub
commit
f2e30c06c5
@ -0,0 +1,105 @@
|
||||
import assert from 'assert';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
|
||||
import {
|
||||
showOutput,
|
||||
loadConfig,
|
||||
loadSvelte,
|
||||
env,
|
||||
setupHtmlEqual
|
||||
} from '../helpers.js';
|
||||
|
||||
let compileOptions = null;
|
||||
|
||||
function getName(filename) {
|
||||
const base = path.basename(filename).replace('.html', '');
|
||||
return base[0].toUpperCase() + base.slice(1);
|
||||
}
|
||||
|
||||
const nodeVersionMatch = /^v(\d)/.exec(process.version);
|
||||
const legacy = +nodeVersionMatch[1] < 6;
|
||||
const babelrc = require('../../package.json').babel;
|
||||
|
||||
describe('hydration', () => {
|
||||
before(() => {
|
||||
const svelte = loadSvelte();
|
||||
|
||||
require.extensions['.html'] = function(module, filename) {
|
||||
const options = Object.assign(
|
||||
{ filename, name: getName(filename), hydratable: true },
|
||||
compileOptions
|
||||
);
|
||||
let { code } = svelte.compile(fs.readFileSync(filename, 'utf-8'), options);
|
||||
|
||||
if (legacy) code = require('babel-core').transform(code, babelrc).code;
|
||||
|
||||
return module._compile(code, filename);
|
||||
};
|
||||
|
||||
return setupHtmlEqual();
|
||||
});
|
||||
|
||||
function runTest(dir) {
|
||||
if (dir[0] === '.') return;
|
||||
|
||||
const config = loadConfig(`./hydration/samples/${dir}/_config.js`);
|
||||
|
||||
if (config.solo && process.env.CI) {
|
||||
throw new Error('Forgot to remove `solo: true` from test');
|
||||
}
|
||||
|
||||
(config.skip ? it.skip : config.solo ? it.only : it)(dir, () => {
|
||||
const cwd = path.resolve(`test/hydration/samples/${dir}`);
|
||||
|
||||
compileOptions = config.compileOptions || {};
|
||||
compileOptions.shared = path.resolve('shared.js');
|
||||
compileOptions.dev = config.dev;
|
||||
compileOptions.hydrate = true;
|
||||
|
||||
return env()
|
||||
.then(window => {
|
||||
global.window = window;
|
||||
|
||||
let SvelteComponent;
|
||||
|
||||
try {
|
||||
SvelteComponent = require(`${cwd}/main.html`).default;
|
||||
} catch (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
const target = window.document.body;
|
||||
target.innerHTML = fs.readFileSync(`${cwd}/_before.html`, 'utf-8');
|
||||
|
||||
const snapshot = config.snapshot ? config.snapshot(target) : {};
|
||||
|
||||
const component = new SvelteComponent({
|
||||
target,
|
||||
hydrate: true,
|
||||
data: config.data
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, fs.readFileSync(`${cwd}/_after.html`, 'utf-8'));
|
||||
|
||||
if (config.test) {
|
||||
config.test(assert, target, snapshot, component, window);
|
||||
} else {
|
||||
component.destroy();
|
||||
assert.equal(target.innerHTML, '');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
showOutput(cwd, { shared: 'svelte/shared.js' }); // eslint-disable-line no-console
|
||||
throw err;
|
||||
})
|
||||
.then(() => {
|
||||
if (config.show) showOutput(cwd, { shared: 'svelte/shared.js' });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
fs.readdirSync('test/hydration/samples').forEach(dir => {
|
||||
runTest(dir, null);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1,17 @@
|
||||
export default {
|
||||
snapshot(target) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
return {
|
||||
h1,
|
||||
text: h1.childNodes[0]
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
assert.equal(h1, snapshot.h1);
|
||||
assert.equal(h1.childNodes[0], snapshot.text);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1,2 @@
|
||||
<input>
|
||||
<p>Hello world!</p>
|
||||
@ -0,0 +1,2 @@
|
||||
<input>
|
||||
<p>Hello world!</p>
|
||||
@ -0,0 +1,29 @@
|
||||
export default {
|
||||
data: {
|
||||
name: 'world'
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
return {
|
||||
input: target.querySelector('input'),
|
||||
p: target.querySelector('p')
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot, component, window) {
|
||||
const input = target.querySelector('input');
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.equal(input, snapshot.input);
|
||||
assert.equal(p, snapshot.p);
|
||||
|
||||
input.value = 'everybody';
|
||||
input.dispatchEvent(new window.Event('input'));
|
||||
|
||||
assert.equal(component.get('name'), 'everybody');
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input>
|
||||
<p>Hello everybody!</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,2 @@
|
||||
<input bind:value='name'>
|
||||
<p>Hello {{name}}!</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>nested</p>
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<p>nested</p>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<p>nested</p>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
export default {
|
||||
snapshot(target) {
|
||||
const div = target.querySelector('div');
|
||||
const p = target.querySelector('p');
|
||||
|
||||
return {
|
||||
div,
|
||||
p,
|
||||
text: p.childNodes[0]
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const div = target.querySelector('div');
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.equal(div, snapshot.div);
|
||||
assert.equal(p, snapshot.p);
|
||||
assert.equal(p.childNodes[0], snapshot.text);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
<div>
|
||||
<Nested/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import Nested from './Nested.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Nested
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<p>nested</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>nested</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>nested</p>
|
||||
@ -0,0 +1,17 @@
|
||||
export default {
|
||||
snapshot(target) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
return {
|
||||
p,
|
||||
text: p.childNodes[0]
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.equal(p, snapshot.p);
|
||||
assert.equal(p.childNodes[0], snapshot.text);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<Nested/>
|
||||
|
||||
<script>
|
||||
import Nested from './Nested.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Nested
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello everybody!</h1>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1,21 @@
|
||||
export default {
|
||||
data: {
|
||||
name: 'everybody'
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
return {
|
||||
h1,
|
||||
text: h1.childNodes[0]
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
assert.equal(h1, snapshot.h1);
|
||||
assert.equal(h1.childNodes[0], snapshot.text);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello {{name}}!</h1>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1,21 @@
|
||||
export default {
|
||||
data: {
|
||||
name: 'world'
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
return {
|
||||
h1,
|
||||
text: h1.childNodes[0]
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
assert.equal(h1, snapshot.h1);
|
||||
assert.equal(h1.childNodes[0], snapshot.text);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello {{name}}!</h1>
|
||||
@ -0,0 +1,5 @@
|
||||
<ul>
|
||||
<li>animal</li>
|
||||
<li>vegetable</li>
|
||||
<li>mineral</li>
|
||||
</ul>
|
||||
@ -0,0 +1,5 @@
|
||||
<ul>
|
||||
<li>animal</li>
|
||||
<li>vegetable</li>
|
||||
<li>mineral</li>
|
||||
</ul>
|
||||
@ -0,0 +1,29 @@
|
||||
export default {
|
||||
data: {
|
||||
things: [
|
||||
'animal',
|
||||
'vegetable',
|
||||
'mineral'
|
||||
]
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const ul = target.querySelector('ul');
|
||||
const lis = ul.querySelectorAll('li');
|
||||
|
||||
return {
|
||||
ul,
|
||||
lis
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const ul = target.querySelector('ul');
|
||||
const lis = ul.querySelectorAll('li');
|
||||
|
||||
assert.equal(ul, snapshot.ul);
|
||||
assert.equal(lis[0], snapshot.lis[0]);
|
||||
assert.equal(lis[1], snapshot.lis[1]);
|
||||
assert.equal(lis[2], snapshot.lis[2]);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<ul>
|
||||
{{#each things as thing}}
|
||||
<li>{{thing}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
@ -0,0 +1 @@
|
||||
<div class='bar'></div>
|
||||
@ -0,0 +1 @@
|
||||
<div class='foo'></div>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
data: {
|
||||
class: 'bar'
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
return {
|
||||
div
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
assert.equal(div, snapshot.div);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<div class='{{class}}'></div>
|
||||
@ -0,0 +1 @@
|
||||
<div class='foo'></div>
|
||||
@ -0,0 +1 @@
|
||||
<div></div>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
data: {
|
||||
class: 'bar'
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
return {
|
||||
div
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
assert.equal(div, snapshot.div);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<div class='foo'></div>
|
||||
@ -0,0 +1 @@
|
||||
<div></div>
|
||||
@ -0,0 +1 @@
|
||||
<div class='foo'></div>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
data: {
|
||||
class: 'bar'
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
return {
|
||||
div
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
assert.equal(div, snapshot.div);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<div></div>
|
||||
@ -0,0 +1 @@
|
||||
<div class='foo'></div>
|
||||
@ -0,0 +1 @@
|
||||
<div class='foo'></div>
|
||||
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
snapshot(target) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
return {
|
||||
div
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
assert.equal(div, snapshot.div);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<div class='foo'></div>
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<p>nested</p>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<p>nested</p>
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
export default {
|
||||
snapshot(target) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
return {
|
||||
div,
|
||||
p: div.querySelector('p')
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const div = target.querySelector('div');
|
||||
|
||||
assert.equal(div, snapshot.div);
|
||||
assert.equal(div.querySelector('p'), snapshot.p);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
<div>
|
||||
<p>nested</p>
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1 @@
|
||||
<h1>Hello world!</h1>
|
||||
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
snapshot(target) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
return {
|
||||
h1,
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot, component) {
|
||||
const h1 = target.querySelector('h1');
|
||||
|
||||
assert.equal(h1, snapshot.h1);
|
||||
assert.equal(component.refs.h1, h1);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
<h1 ref:h1>Hello world!</h1>
|
||||
@ -0,0 +1 @@
|
||||
<button>click me</button>
|
||||
@ -0,0 +1 @@
|
||||
<button>click me</button>
|
||||
@ -0,0 +1,26 @@
|
||||
export default {
|
||||
data: {
|
||||
clicked: false
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const button = target.querySelector('button');
|
||||
|
||||
return {
|
||||
button
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot, component, window) {
|
||||
const button = target.querySelector('button');
|
||||
assert.equal(button, snapshot.button);
|
||||
|
||||
button.dispatchEvent(new window.MouseEvent('click'));
|
||||
|
||||
assert.ok(component.get('clicked'));
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<button>click me</button>
|
||||
<p>clicked!</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<button on:click='set({ clicked: true })'>click me</button>
|
||||
|
||||
{{#if clicked}}
|
||||
<p>clicked!</p>
|
||||
{{/if}}
|
||||
@ -0,0 +1,4 @@
|
||||
<div>
|
||||
<p>foo!</p>
|
||||
<p>bar!</p>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<div>
|
||||
<p>foo!</p>
|
||||
<p>bar!</p>
|
||||
</div>
|
||||
@ -0,0 +1,26 @@
|
||||
export default {
|
||||
data: {
|
||||
foo: true,
|
||||
bar: true
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const div = target.querySelector('div');
|
||||
const ps = target.querySelectorAll('p');
|
||||
|
||||
return {
|
||||
div,
|
||||
p0: ps[0],
|
||||
p1: ps[1]
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const div = target.querySelector('div');
|
||||
const ps = target.querySelectorAll('p');
|
||||
|
||||
assert.equal(div, snapshot.div);
|
||||
assert.equal(ps[0], snapshot.p0);
|
||||
assert.equal(ps[1], snapshot.p1);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<div>
|
||||
{{#if foo}}
|
||||
<p>foo!</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if bar}}
|
||||
<p>bar!</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
<p>before</p>
|
||||
<p>after</p>
|
||||
@ -0,0 +1,2 @@
|
||||
<p>before</p>
|
||||
<p>after</p>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
data: {
|
||||
foo: false
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
return {
|
||||
p
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.equal(p, snapshot.p);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<p>before</p>
|
||||
{{#if foo}}
|
||||
<p>foo!</p>
|
||||
{{/if}}
|
||||
<p>after</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>foo!</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>foo!</p>
|
||||
@ -0,0 +1,23 @@
|
||||
export default {
|
||||
data: {
|
||||
foo: true,
|
||||
bar: false
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
return {
|
||||
p
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot, component) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.equal(p, snapshot.p);
|
||||
|
||||
component.set({ foo: false, bar: true });
|
||||
assert.htmlEqual(target.innerHTML, `<p>bar!</p>`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
{{#if foo}}
|
||||
<p>foo!</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if bar}}
|
||||
<p>bar!</p>
|
||||
{{/if}}
|
||||
@ -0,0 +1 @@
|
||||
<p>foo!</p>
|
||||
@ -0,0 +1 @@
|
||||
<p>foo!</p>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
data: {
|
||||
foo: true
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
return {
|
||||
p
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const p = target.querySelector('p');
|
||||
|
||||
assert.equal(p, snapshot.p);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,3 @@
|
||||
{{#if foo}}
|
||||
<p>foo!</p>
|
||||
{{/if}}
|
||||
@ -0,0 +1,4 @@
|
||||
<noscript></noscript>
|
||||
<p>this is some html</p>
|
||||
<p>and so is this</p>
|
||||
<noscript></noscript>
|
||||
@ -0,0 +1,2 @@
|
||||
<p>this is some html</p>
|
||||
<p>and so is this</p>
|
||||
@ -0,0 +1,27 @@
|
||||
export default {
|
||||
skip: true, // existing nodes are blown away
|
||||
|
||||
data: {
|
||||
raw: `<p>this is some html</p> <p>and so is this</p>`
|
||||
},
|
||||
|
||||
snapshot(target) {
|
||||
const ps = target.querySelectorAll('p');
|
||||
|
||||
return {
|
||||
p0: ps[0],
|
||||
text0: ps[0].firstChild,
|
||||
p1: ps[1],
|
||||
text1: ps[1].firstChild
|
||||
};
|
||||
},
|
||||
|
||||
test(assert, target, snapshot) {
|
||||
const ps = target.querySelectorAll('p');
|
||||
|
||||
assert.equal(ps[0], snapshot.p0);
|
||||
assert.equal(ps[0].firstChild, snapshot.text0);
|
||||
assert.equal(ps[1], snapshot.p1);
|
||||
assert.equal(ps[1].firstChild, snapshot.text1);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
{{{raw}}}
|
||||
@ -0,0 +1 @@
|
||||
Text
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue