Skip to content

Commit f780284

Browse files
web-padawanweb-padawan
authored
test: update remaining a11y-base tests to also run with Lit (#9130)
1 parent 78bfab6 commit f780284

File tree

5 files changed

+181
-136
lines changed

5 files changed

+181
-136
lines changed

‎packages/a11y-base/test/active-mixin.test.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
import { expect } from '@vaadin/chai-plugins';
22
import { sendKeys } from '@vaadin/test-runner-commands';
3-
import { fixtureSync, isIOS, mousedown, mouseup, touchend, touchstart } from '@vaadin/testing-helpers';
4-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
3+
import {
4+
defineLit,
5+
definePolymer,
6+
fixtureSync,
7+
mousedown,
8+
mouseup,
9+
touchend,
10+
touchstart,
11+
} from '@vaadin/testing-helpers';
12+
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
13+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
514
import { ActiveMixin } from '../src/active-mixin.js';
615

7-
customElements.define(
8-
'active-mixin-element',
9-
class extends ActiveMixin(PolymerElement) {
10-
static get template() {
11-
return html`<div></div>`;
12-
}
13-
},
14-
);
16+
const runTests = (defineHelper, baseMixin) => {
17+
const tag = defineHelper('active-mixin', '<slot></slot>', (Base) => class extends ActiveMixin(baseMixin(Base)) {});
1518

16-
describe('active-mixin', () => {
1719
let element;
1820

1921
beforeEach(() => {
2022
// Sets tabindex to 0 in order to make the element focusable for the time of testing.
21-
element = fixtureSync(`<active-mixin-element tabindex="0"></active-mixin-element>`);
23+
element = fixtureSync(`<${tag} tabindex="0"></{tag}>`);
2224
element.focus();
2325
});
2426

25-
(isIOS ? describe.skip : describe)('mouse', () => {
27+
describe('mouse', () => {
2628
it('should set active attribute on mousedown', () => {
2729
mousedown(element);
2830
expect(element.hasAttribute('active')).to.be.true;
@@ -119,4 +121,12 @@ describe('active-mixin', () => {
119121
element.parentNode.removeChild(element);
120122
expect(element.hasAttribute('active')).to.be.false;
121123
});
124+
};
125+
126+
describe('ActiveMixin + Polymer', () => {
127+
runTests(definePolymer, ControllerMixin);
128+
});
129+
130+
describe('ActiveMixin + Lit', () => {
131+
runTests(defineLit, PolylitMixin);
122132
});

‎packages/a11y-base/test/focus-mixin.test.js‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,35 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { fixtureSync, focusin, focusout, keyDownOn, mousedown } from '@vaadin/testing-helpers';
3-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
2+
import {
3+
defineLit,
4+
definePolymer,
5+
fixtureSync,
6+
focusin,
7+
focusout,
8+
keyDownOn,
9+
mousedown,
10+
} from '@vaadin/testing-helpers';
11+
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
12+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
413
import { FocusMixin } from '../src/focus-mixin.js';
514

6-
customElements.define(
7-
'focus-mixin-element',
8-
class extends FocusMixin(PolymerElement) {
9-
static get template() {
10-
return html`<slot></slot>`;
11-
}
12-
13-
ready() {
14-
super.ready();
15-
const input = document.createElement('input');
16-
this.appendChild(input);
17-
}
18-
},
19-
);
20-
21-
describe('focus-mixin', () => {
15+
const runTests = (defineHelper, baseMixin) => {
16+
const tag = defineHelper(
17+
'focus-mixin',
18+
'<slot></slot>',
19+
(Base) =>
20+
class extends FocusMixin(baseMixin(Base)) {
21+
ready() {
22+
super.ready();
23+
const input = document.createElement('input');
24+
this.appendChild(input);
25+
}
26+
},
27+
);
28+
2229
let element, input;
2330

2431
beforeEach(() => {
25-
element = fixtureSync(`<focus-mixin-element></focus-mixin-element>`);
32+
element = fixtureSync(`<${tag}></${tag}>`);
2633
input = element.querySelector('input');
2734
});
2835

@@ -58,4 +65,12 @@ describe('focus-mixin', () => {
5865
focusin(input);
5966
expect(element.hasAttribute('focus-ring')).to.be.false;
6067
});
68+
};
69+
70+
describe('FocusMixin + Polymer', () => {
71+
runTests(definePolymer, ControllerMixin);
72+
});
73+
74+
describe('FocusMixin + Lit', () => {
75+
runTests(defineLit, PolylitMixin);
6176
});

‎packages/a11y-base/test/focus-trap-controller.test.js‎

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,11 @@
11
import { expect } from '@vaadin/chai-plugins';
22
import { sendKeys } from '@vaadin/test-runner-commands';
3-
import { fixtureSync } from '@vaadin/testing-helpers';
3+
import { defineLit, definePolymer, fixtureSync } from '@vaadin/testing-helpers';
44
import sinon from 'sinon';
5-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
65
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
6+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
77
import { FocusTrapController } from '../src/focus-trap-controller.js';
88

9-
customElements.define(
10-
'focus-trap-wrapper',
11-
class FocusTrapWrapper extends ControllerMixin(PolymerElement) {
12-
static get template() {
13-
return html`<slot></slot>`;
14-
}
15-
16-
ready() {
17-
super.ready();
18-
this.innerHTML = `
19-
<div id="outer-trap">
20-
<focus-trap-element></focus-trap-element>
21-
</div>
22-
`;
23-
}
24-
},
25-
);
26-
27-
customElements.define(
28-
'focus-trap-element',
29-
class FocusTrapElement extends ControllerMixin(PolymerElement) {
30-
static get template() {
31-
return html`<slot></slot>`;
32-
}
33-
34-
ready() {
35-
super.ready();
36-
this.innerHTML = `
37-
<div id="outside">
38-
<input id="outside-input-1" />
39-
40-
<div id="trap">
41-
<input id="trap-input-1" />
42-
<input id="trap-input-2" />
43-
<div id="parent">
44-
<textarea id="trap-input-3"></textarea>
45-
</div>
46-
</div>
47-
48-
<input id="outside-input-2" />
49-
</div>
50-
`;
51-
}
52-
},
53-
);
54-
559
async function tab() {
5610
await sendKeys({ press: 'Tab' });
5711
return document.activeElement;
@@ -62,12 +16,54 @@ async function shiftTab() {
6216
return document.activeElement;
6317
}
6418

65-
describe('focus-trap-controller', () => {
19+
const runTests = (defineHelper, baseMixin) => {
20+
const tag = defineHelper(
21+
'focus-trap',
22+
'<slot></slot>',
23+
(Base) =>
24+
class extends baseMixin(Base) {
25+
ready() {
26+
super.ready();
27+
this.innerHTML = `
28+
<div id="outside">
29+
<input id="outside-input-1" />
30+
31+
<div id="trap">
32+
<input id="trap-input-1" />
33+
<input id="trap-input-2" />
34+
<div id="parent">
35+
<textarea id="trap-input-3"></textarea>
36+
</div>
37+
</div>
38+
39+
<input id="outside-input-2" />
40+
</div>
41+
`;
42+
}
43+
},
44+
);
45+
46+
const wrapperTag = defineHelper(
47+
'focus-trap-wrapper',
48+
'<slot></slot>',
49+
(Base) =>
50+
class extends baseMixin(Base) {
51+
ready() {
52+
super.ready();
53+
this.innerHTML = `
54+
<div id="outer-trap">
55+
<${tag}></${tag}>
56+
</div>
57+
`;
58+
}
59+
},
60+
);
61+
6662
let element, controller, trap;
6763

6864
describe('trapFocus', () => {
6965
beforeEach(() => {
70-
element = fixtureSync(`<focus-trap-element></focus-trap-element>`);
66+
element = fixtureSync(`<${tag}></${tag}>`);
7167
controller = new FocusTrapController(element);
7268
element.addController(controller);
7369
trap = element.querySelector('#trap');
@@ -130,7 +126,7 @@ describe('focus-trap-controller', () => {
130126

131127
describe('releaseFocus', () => {
132128
beforeEach(() => {
133-
element = fixtureSync(`<focus-trap-element></focus-trap-element>`);
129+
element = fixtureSync(`<${tag}></${tag}>`);
134130
controller = new FocusTrapController(element);
135131
element.addController(controller);
136132
trap = element.querySelector('#trap');
@@ -145,7 +141,7 @@ describe('focus-trap-controller', () => {
145141
let trapInput1, trapInput2, trapInput3;
146142

147143
beforeEach(() => {
148-
element = fixtureSync(`<focus-trap-element></focus-trap-element>`);
144+
element = fixtureSync(`<${tag}></${tag}>`);
149145
controller = new FocusTrapController(element);
150146
element.addController(controller);
151147
trap = element.querySelector('#trap');
@@ -313,12 +309,12 @@ describe('focus-trap-controller', () => {
313309
let wrapper, wrapperController, wrapperTrap, trapInput1, trapInput2, trapInput3;
314310

315311
beforeEach(() => {
316-
wrapper = fixtureSync(`<focus-trap-wrapper></focus-trap-wrapper>`);
312+
wrapper = fixtureSync(`<${wrapperTag}></${wrapperTag}>`);
317313
wrapperController = new FocusTrapController(element);
318314
wrapper.addController(wrapperController);
319315
wrapperTrap = wrapper.querySelector('#outer-trap');
320316

321-
element = wrapper.querySelector('focus-trap-element');
317+
element = wrapper.querySelector(tag);
322318
controller = new FocusTrapController(element);
323319
element.addController(controller);
324320
trap = element.querySelector('#trap');
@@ -356,4 +352,12 @@ describe('focus-trap-controller', () => {
356352
expect(document.activeElement).to.equal(trapInput1);
357353
});
358354
});
355+
};
356+
357+
describe('FocusTrapController + Polymer', () => {
358+
runTests(definePolymer, ControllerMixin);
359+
});
360+
361+
describe('FocusTrapController + Lit', () => {
362+
runTests(defineLit, PolylitMixin);
359363
});

‎packages/a11y-base/test/keyboard-direction-mixin.test.js‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,57 @@ import {
44
arrowLeftKeyDown,
55
arrowRightKeyDown,
66
arrowUpKeyDown,
7+
defineLit,
8+
definePolymer,
79
endKeyDown,
810
fixtureSync,
911
homeKeyDown,
1012
tabKeyDown,
1113
} from '@vaadin/testing-helpers';
1214
import sinon from 'sinon';
13-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
15+
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
16+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
1417
import { KeyboardDirectionMixin } from '../src/keyboard-direction-mixin.js';
1518

16-
customElements.define(
17-
'keyboard-direction-mixin-element',
18-
class extends KeyboardDirectionMixin(PolymerElement) {
19-
static get template() {
20-
return html`
21-
<style>
22-
::slotted(.hidden) {
23-
display: none;
24-
}
25-
26-
:host(:not([vertical])) {
27-
display: flex;
28-
}
29-
</style>
30-
<slot></slot>
31-
`;
32-
}
33-
34-
get _vertical() {
35-
return this.hasAttribute('vertical');
36-
}
37-
38-
get _tabNavigation() {
39-
return this.hasAttribute('tab-navigation');
40-
}
41-
},
42-
);
43-
44-
describe('keyboard-direction-mixin', () => {
19+
const runTests = (defineHelper, baseMixin) => {
20+
const tag = defineHelper(
21+
'keyboard-direction-mixin',
22+
`
23+
<style>
24+
::slotted(.hidden) {
25+
display: none;
26+
}
27+
28+
:host(:not([vertical])) {
29+
display: flex;
30+
}
31+
</style>
32+
<slot></slot>
33+
`,
34+
(Base) =>
35+
class extends KeyboardDirectionMixin(baseMixin(Base)) {
36+
get _vertical() {
37+
return this.hasAttribute('vertical');
38+
}
39+
40+
get _tabNavigation() {
41+
return this.hasAttribute('tab-navigation');
42+
}
43+
},
44+
);
45+
4546
let element, items;
4647

4748
beforeEach(() => {
4849
element = fixtureSync(`
49-
<keyboard-direction-mixin-element>
50+
<${tag}>
5051
<div tabindex="0">Foo</div>
5152
<div tabindex="0">Bar</div>
5253
<div disabled>Baz</div>
5354
<div tabindex="0">Qux</div>
5455
<div tabindex="0">Xyz</div>
5556
<div tabindex="0">Abc</div>
56-
</keyboard-direction-mixin-element>
57+
</${tag}>
5758
`);
5859
items = element.children;
5960
});
@@ -245,4 +246,12 @@ describe('keyboard-direction-mixin', () => {
245246
expect(element.focused).to.not.equal(items[0]);
246247
});
247248
});
249+
};
250+
251+
describe('KeyboardDirectionMixin + Polymer', () => {
252+
runTests(definePolymer, ControllerMixin);
253+
});
254+
255+
describe('KeyboardDirectionMixin + Lit', () => {
256+
runTests(defineLit, PolylitMixin);
248257
});

0 commit comments

Comments
 (0)