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