fix a few tests

pull/1864/head
Rich Harris 7 years ago
parent 8f0a00dd36
commit b58d81b7e2

@ -1,7 +1,7 @@
import * as assert from 'assert'; import * as assert from 'assert';
import './main.html'; import './main.html';
export default function (target) { export default async function (target) {
target.innerHTML = '<my-app/>'; target.innerHTML = '<my-app/>';
const el = target.querySelector('my-app'); const el = target.querySelector('my-app');
const counter = el.shadowRoot.querySelector('my-counter'); const counter = el.shadowRoot.querySelector('my-counter');
@ -10,7 +10,7 @@ export default function (target) {
assert.equal(counter.count, 0); assert.equal(counter.count, 0);
assert.equal(counter.shadowRoot.innerHTML, `<button>count: 0</button>`); assert.equal(counter.shadowRoot.innerHTML, `<button>count: 0</button>`);
button.dispatchEvent(new MouseEvent('click')); await button.dispatchEvent(new MouseEvent('click'));
assert.equal(counter.count, 1); assert.equal(counter.count, 1);
assert.equal(counter.shadowRoot.innerHTML, `<button>count: 1</button>`); assert.equal(counter.shadowRoot.innerHTML, `<button>count: 1</button>`);

@ -10,7 +10,7 @@ export default {
}; };
}, },
test(assert, target, snapshot, component, window) { async test(assert, target, snapshot, component, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
const p = target.querySelector('p'); const p = target.querySelector('p');
@ -18,7 +18,7 @@ export default {
assert.equal(p, snapshot.p); assert.equal(p, snapshot.p);
input.value = 'everybody'; input.value = 'everybody';
input.dispatchEvent(new window.Event('input')); await input.dispatchEvent(new window.Event('input'));
assert.equal(component.name, 'everybody'); assert.equal(component.name, 'everybody');
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `

@ -11,11 +11,11 @@ export default {
}; };
}, },
test(assert, target, snapshot, component, window) { async test(assert, target, snapshot, component, window) {
const button = target.querySelector('button'); const button = target.querySelector('button');
assert.equal(button, snapshot.button); assert.equal(button, snapshot.button);
button.dispatchEvent(new window.MouseEvent('click')); await button.dispatchEvent(new window.MouseEvent('click'));
assert.ok(component.clicked); assert.ok(component.clicked);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `

@ -3,20 +3,20 @@ export default {
<button>action</button> <button>action</button>
`, `,
test ( assert, component, target, window ) { async test(assert, component, target, window) {
const button = target.querySelector( 'button' ); const button = target.querySelector('button');
const eventEnter = new window.MouseEvent( 'mouseenter' ); const eventEnter = new window.MouseEvent('mouseenter');
const eventLeave = new window.MouseEvent( 'mouseleave' ); const eventLeave = new window.MouseEvent('mouseleave');
button.dispatchEvent( eventEnter ); await button.dispatchEvent(eventEnter);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>action</button> <button>action</button>
<div class="tooltip">Perform an Action</div> <div class="tooltip">Perform an Action</div>
` ); `);
button.dispatchEvent( eventLeave ); await button.dispatchEvent(eventLeave);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>action</button> <button>action</button>
` ); `);
} }
}; };

@ -8,11 +8,11 @@ export default {
<h1></h1> <h1></h1>
`, `,
test(assert, component, target, window) { async test(assert, component, target, window) {
const header = target.querySelector('h1'); const header = target.querySelector('h1');
const click = new window.MouseEvent('click'); const click = new window.MouseEvent('click');
header.dispatchEvent(click); await header.dispatchEvent(click);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<h1>Hello World!</h1> <h1>Hello World!</h1>
`); `);

@ -3,18 +3,18 @@ export default {
<button>action</button> <button>action</button>
`, `,
test(assert, component, target, window) { async test(assert, component, target, window) {
const button = target.querySelector('button'); const button = target.querySelector('button');
const eventEnter = new window.MouseEvent('mouseenter'); const eventEnter = new window.MouseEvent('mouseenter');
const eventLeave = new window.MouseEvent('mouseleave'); const eventLeave = new window.MouseEvent('mouseleave');
button.dispatchEvent(eventEnter); await button.dispatchEvent(eventEnter);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>action</button> <button>action</button>
<div class="tooltip">Perform an Action</div> <div class="tooltip">Perform an Action</div>
`); `);
button.dispatchEvent(eventLeave); await button.dispatchEvent(eventLeave);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>action</button> <button>action</button>
`); `);

@ -11,14 +11,14 @@ export default {
</select> </select>
`, `,
test(assert, component, target, window) { async test(assert, component, target, window) {
const select = target.querySelector('select'); const select = target.querySelector('select');
const options = target.querySelectorAll('option'); const options = target.querySelectorAll('option');
const change = new window.Event('change'); const change = new window.Event('change');
options[1].selected = true; options[1].selected = true;
select.dispatchEvent(change); await select.dispatchEvent(change);
assert.equal(component.selected.letter, 'B'); assert.equal(component.selected.letter, 'B');
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `

@ -32,7 +32,7 @@ export default {
<p>shake it all about</p> <p>shake it all about</p>
`, `,
test(assert, component, target, window) { async test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
const select = target.querySelector('select'); const select = target.querySelector('select');
const options = target.querySelectorAll('option'); const options = target.querySelectorAll('option');
@ -40,7 +40,7 @@ export default {
const change = new window.Event('change'); const change = new window.Event('change');
input.checked = true; input.checked = true;
input.dispatchEvent(change); await input.dispatchEvent(change);
assert.ok(component.tasks[0].done); assert.ok(component.tasks[0].done);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
@ -62,12 +62,12 @@ export default {
`); `);
options[1].selected = true; options[1].selected = true;
select.dispatchEvent(change); await select.dispatchEvent(change);
assert.equal(component.selected, tasks[1]); assert.equal(component.selected, tasks[1]);
assert.ok(!input.checked); assert.ok(!input.checked);
input.checked = true; input.checked = true;
input.dispatchEvent(change); await input.dispatchEvent(change);
assert.ok(component.tasks[1].done); assert.ok(component.tasks[1].done);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `

@ -7,7 +7,7 @@ const values = [
export default { export default {
props: { props: {
values, values,
selected: [ values[1] ] selected: [values[1]]
}, },
html: ` html: `
@ -25,18 +25,18 @@ export default {
<p>Beta</p>`, <p>Beta</p>`,
test ( assert, component, target, window ) { async test(assert, component, target, window) {
const inputs = target.querySelectorAll( 'input' ); const inputs = target.querySelectorAll('input');
assert.equal( inputs[0].checked, false ); assert.equal(inputs[0].checked, false);
assert.equal( inputs[1].checked, true ); assert.equal(inputs[1].checked, true);
assert.equal( inputs[2].checked, false ); assert.equal(inputs[2].checked, false);
const event = new window.Event( 'change' ); const event = new window.Event('change');
inputs[0].checked = true; inputs[0].checked = true;
inputs[0].dispatchEvent( event ); await inputs[0].dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<label> <label>
<input type="checkbox" value="[object Object]"> Alpha <input type="checkbox" value="[object Object]"> Alpha
</label> </label>
@ -50,14 +50,14 @@ export default {
</label> </label>
<p>Alpha, Beta</p> <p>Alpha, Beta</p>
` ); `);
component.selected = [ values[1], values[2] ]; component.selected = [values[1], values[2]];
assert.equal( inputs[0].checked, false ); assert.equal(inputs[0].checked, false);
assert.equal( inputs[1].checked, true ); assert.equal(inputs[1].checked, true);
assert.equal( inputs[2].checked, true ); assert.equal(inputs[2].checked, true);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<label> <label>
<input type="checkbox" value="[object Object]"> Alpha <input type="checkbox" value="[object Object]"> Alpha
</label> </label>
@ -71,6 +71,6 @@ export default {
</label> </label>
<p>Beta, Gamma</p> <p>Beta, Gamma</p>
` ); `);
} }
}; };

@ -7,7 +7,7 @@ const values = [
export default { export default {
props: { props: {
values, values,
selected: [ values[1] ] selected: [values[1]]
}, },
html: ` html: `
@ -25,18 +25,18 @@ export default {
<p>Beta</p>`, <p>Beta</p>`,
test ( assert, component, target, window ) { async test(assert, component, target, window) {
const inputs = target.querySelectorAll( 'input' ); const inputs = target.querySelectorAll('input');
assert.equal( inputs[0].checked, false ); assert.equal(inputs[0].checked, false);
assert.equal( inputs[1].checked, true ); assert.equal(inputs[1].checked, true);
assert.equal( inputs[2].checked, false ); assert.equal(inputs[2].checked, false);
const event = new window.Event( 'change' ); const event = new window.Event('change');
inputs[0].checked = true; inputs[0].checked = true;
inputs[0].dispatchEvent( event ); await inputs[0].dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<label> <label>
<input type="checkbox" value="[object Object]"> Alpha <input type="checkbox" value="[object Object]"> Alpha
</label> </label>
@ -50,14 +50,14 @@ export default {
</label> </label>
<p>Alpha, Beta</p> <p>Alpha, Beta</p>
` ); `);
component.selected = [ values[1], values[2] ]; component.selected = [values[1], values[2]];
assert.equal( inputs[0].checked, false ); assert.equal(inputs[0].checked, false);
assert.equal( inputs[1].checked, true ); assert.equal(inputs[1].checked, true);
assert.equal( inputs[2].checked, true ); assert.equal(inputs[2].checked, true);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<label> <label>
<input type="checkbox" value="[object Object]"> Alpha <input type="checkbox" value="[object Object]"> Alpha
</label> </label>
@ -71,6 +71,6 @@ export default {
</label> </label>
<p>Beta, Gamma</p> <p>Beta, Gamma</p>
` ); `);
} }
}; };

@ -11,7 +11,7 @@ export default {
<p>indeterminate? true</p> <p>indeterminate? true</p>
`, `,
test(assert, component, target, window) { async test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
assert.equal(input.checked, false); assert.equal(input.checked, false);
assert.equal(input.indeterminate, true); assert.equal(input.indeterminate, true);
@ -20,7 +20,7 @@ export default {
input.checked = true; input.checked = true;
input.indeterminate = false; input.indeterminate = false;
input.dispatchEvent(event); await input.dispatchEvent(event);
assert.equal(component.indeterminate, false); assert.equal(component.indeterminate, false);
assert.equal(component.checked, true); assert.equal(component.checked, true);

@ -13,14 +13,14 @@ export default {
<p>number 42</p> <p>number 42</p>
`, `,
test(assert, component, target, window) { async test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
assert.equal(input.value, '42'); assert.equal(input.value, '42');
const event = new window.Event('input'); const event = new window.Event('input');
input.value = '43'; input.value = '43';
input.dispatchEvent(event); await input.dispatchEvent(event);
assert.equal(component.count, 43); assert.equal(component.count, 43);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
@ -37,7 +37,7 @@ export default {
// empty string should be treated as undefined // empty string should be treated as undefined
input.value = ''; input.value = '';
input.dispatchEvent(event); await input.dispatchEvent(event);
assert.equal(component.count, undefined); assert.equal(component.count, undefined);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `

@ -1,12 +1,12 @@
export default { export default {
test ( assert, component, target, window ) { test(assert, component, target, window) {
const allow = target.querySelector( '.allow-propagation' ); const allow = target.querySelector('.allow-propagation');
const stop = target.querySelector( '.stop-propagation' ); const stop = target.querySelector('.stop-propagation');
allow.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) ); allow.dispatchEvent(new window.MouseEvent('click', { bubbles: true }));
stop.dispatchEvent( new window.MouseEvent( 'click', { bubbles: true }) ); stop.dispatchEvent(new window.MouseEvent('click', { bubbles: true }));
assert.equal( component.foo, true ); assert.equal(component.foo, true);
assert.equal( component.bar, false ); assert.equal(component.bar, false);
} }
}; };

@ -8,7 +8,7 @@ export default {
<button>click me</button> <button>click me</button>
`, `,
test (assert, component, target, window) { test(assert, component, target, window) {
const button = target.querySelector('button'); const button = target.querySelector('button');
const event = new window.MouseEvent('click'); const event = new window.MouseEvent('click');

@ -1,16 +1,16 @@
export default { export default {
test ( assert, component, target, window ) { test(assert, component, target, window) {
// Click events don't focus elements in JSDOM obviously they would // Click events don't focus elements in JSDOM obviously they would
// in real browsers. More realistically, you'd use this for e.g. // in real browsers. More realistically, you'd use this for e.g.
// this.select(), but that's harder to test than this.focus() // this.select(), but that's harder to test than this.focus()
const wont = target.querySelector( '.wont-focus' ); const wont = target.querySelector('.wont-focus');
const will = target.querySelector( '.will-focus' ); const will = target.querySelector('.will-focus');
wont.dispatchEvent( new window.MouseEvent( 'click' ) ); wont.dispatchEvent(new window.MouseEvent('click'));
assert.equal( window.document.activeElement, window.document.body ); assert.equal(window.document.activeElement, window.document.body);
will.dispatchEvent( new window.MouseEvent( 'click' ) ); will.dispatchEvent(new window.MouseEvent('click'));
assert.equal( window.document.activeElement, will ); assert.equal(window.document.activeElement, will);
} }
}; };

@ -3,19 +3,19 @@ export default {
<button>toggle</button> <button>toggle</button>
`, `,
test ( assert, component, target, window ) { async test(assert, component, target, window) {
const button = target.querySelector( 'button' ); const button = target.querySelector('button');
const event = new window.MouseEvent( 'click' ); const event = new window.MouseEvent('click');
button.dispatchEvent( event ); await button.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>toggle</button> <button>toggle</button>
<p>hello!</p> <p>hello!</p>
` ); `);
button.dispatchEvent( event ); await button.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<button>toggle</button> <button>toggle</button>
` ); `);
} }
}; };

@ -1,15 +1,15 @@
export default { export default {
test ( assert, component, target, window ) { test(assert, component, target, window) {
const selects = document.querySelectorAll( 'select' ); const selects = document.querySelectorAll('select');
const event1 = new window.Event( 'change' ); const event1 = new window.Event('change');
selects[0].value = 'b'; selects[0].value = 'b';
selects[0].dispatchEvent(event1); selects[0].dispatchEvent(event1);
const event2 = new window.Event( 'change' ); const event2 = new window.Event('change');
selects[1].value = 'b'; selects[1].value = 'b';
selects[1].dispatchEvent(event2); selects[1].dispatchEvent(event2);
assert.deepEqual( component.log, [ 1, 2 ] ); assert.deepEqual(component.log, [1, 2]);
} }
}; };

@ -9,11 +9,11 @@ export default {
<input value=foo> <input value=foo>
`, `,
test (assert, component, target, window) { async test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
input.value = 'bar'; input.value = 'bar';
input.dispatchEvent(new window.Event('input')); await input.dispatchEvent(new window.Event('input'));
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<p>bar</p> <p>bar</p>

@ -2,15 +2,15 @@ export default {
html: `<div>1024x768</div>`, html: `<div>1024x768</div>`,
skip: true, // some weird stuff happening with JSDOM 11 skip: true, // some weird stuff happening with JSDOM 11
// skip: /^v4/.test( process.version ), // node 4 apparently does some dumb stuff // skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff
'skip-ssr': true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason 'skip-ssr': true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
test ( assert, component, target, window ) { async test(assert, component, target, window) {
const event = new window.Event( 'resize' ); const event = new window.Event('resize');
// JSDOM executes window event listeners with `global` rather than // JSDOM executes window event listeners with `global` rather than
// `window` (bug?) so we need to do this // `window` (bug?) so we need to do this
Object.defineProperties( global, { Object.defineProperties(global, {
innerWidth: { innerWidth: {
value: 567, value: 567,
configurable: true configurable: true
@ -21,9 +21,9 @@ export default {
} }
}); });
window.dispatchEvent( event ); await window.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<div>567x456</div> <div>567x456</div>
`); `);
} }

@ -1,12 +1,12 @@
export default { export default {
html: `<p>escaped: false</p>`, html: `<p>escaped: false</p>`,
test(assert, component, target, window) { async test(assert, component, target, window) {
const event = new window.KeyboardEvent('keydown', { const event = new window.KeyboardEvent('keydown', {
which: 27 which: 27
}); });
window.dispatchEvent(event); await window.dispatchEvent(event);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<p>escaped: true</p> <p>escaped: true</p>

@ -2,15 +2,15 @@ export default {
html: `<div>undefinedxundefined</div>`, html: `<div>undefinedxundefined</div>`,
skip: true, // some weird stuff happening with JSDOM 11 skip: true, // some weird stuff happening with JSDOM 11
// skip: /^v4/.test( process.version ), // node 4 apparently does some dumb stuff // skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff
'skip-ssr': true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason 'skip-ssr': true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
test ( assert, component, target, window ) { async test(assert, component, target, window) {
const event = new window.Event( 'resize' ); const event = new window.Event('resize');
// JSDOM executes window event listeners with `global` rather than // JSDOM executes window event listeners with `global` rather than
// `window` (bug?) so we need to do this // `window` (bug?) so we need to do this
Object.defineProperties( global, { Object.defineProperties(global, {
innerWidth: { innerWidth: {
value: 567, value: 567,
configurable: true configurable: true
@ -21,9 +21,9 @@ export default {
} }
}); });
window.dispatchEvent( event ); await window.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<div>567x456</div> <div>567x456</div>
`); `);
} }

Loading…
Cancel
Save