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 './main.html';
export default function (target) {
export default async function (target) {
target.innerHTML = '<my-app/>';
const el = target.querySelector('my-app');
const counter = el.shadowRoot.querySelector('my-counter');
@ -10,7 +10,7 @@ export default function (target) {
assert.equal(counter.count, 0);
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.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 p = target.querySelector('p');
@ -18,7 +18,7 @@ export default {
assert.equal(p, snapshot.p);
input.value = 'everybody';
input.dispatchEvent(new window.Event('input'));
await input.dispatchEvent(new window.Event('input'));
assert.equal(component.name, 'everybody');
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');
assert.equal(button, snapshot.button);
button.dispatchEvent(new window.MouseEvent('click'));
await button.dispatchEvent(new window.MouseEvent('click'));
assert.ok(component.clicked);
assert.htmlEqual(target.innerHTML, `

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,15 +1,15 @@
export default {
test ( assert, component, target, window ) {
const selects = document.querySelectorAll( 'select' );
test(assert, component, target, window) {
const selects = document.querySelectorAll('select');
const event1 = new window.Event( 'change' );
const event1 = new window.Event('change');
selects[0].value = 'b';
selects[0].dispatchEvent(event1);
const event2 = new window.Event( 'change' );
const event2 = new window.Event('change');
selects[1].value = 'b';
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>
`,
test (assert, component, target, window) {
async test(assert, component, target, window) {
const input = target.querySelector('input');
input.value = 'bar';
input.dispatchEvent(new window.Event('input'));
await input.dispatchEvent(new window.Event('input'));
assert.htmlEqual(target.innerHTML, `
<p>bar</p>

@ -2,15 +2,15 @@ export default {
html: `<div>1024x768</div>`,
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
test ( assert, component, target, window ) {
const event = new window.Event( 'resize' );
async test(assert, component, target, window) {
const event = new window.Event('resize');
// JSDOM executes window event listeners with `global` rather than
// `window` (bug?) so we need to do this
Object.defineProperties( global, {
Object.defineProperties(global, {
innerWidth: {
value: 567,
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>
`);
}

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

@ -2,15 +2,15 @@ export default {
html: `<div>undefinedxundefined</div>`,
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
test ( assert, component, target, window ) {
const event = new window.Event( 'resize' );
async test(assert, component, target, window) {
const event = new window.Event('resize');
// JSDOM executes window event listeners with `global` rather than
// `window` (bug?) so we need to do this
Object.defineProperties( global, {
Object.defineProperties(global, {
innerWidth: {
value: 567,
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>
`);
}

Loading…
Cancel
Save