Skip to content

Commit 810429e

Browse files
web-padawanweb-padawan
authored
test: update remaining field-base tests to also run with Lit (#9131)
1 parent f780284 commit 810429e

File tree

4 files changed

+106
-88
lines changed

4 files changed

+106
-88
lines changed

‎packages/field-base/test/input-controller.test.js‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
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 { InputController } from '../src/input-controller.js';
88
import { InputMixin } from '../src/input-mixin.js';
99

10-
customElements.define(
11-
'input-controller-element',
12-
class extends InputMixin(ControllerMixin(PolymerElement)) {
13-
static get template() {
14-
return html`<slot name="input"></slot>`;
15-
}
16-
},
17-
);
10+
const runTests = (defineHelper, baseMixin) => {
11+
const tag = defineHelper(
12+
'input-mixin',
13+
`<slot name="input"></slot>`,
14+
(Base) => class extends InputMixin(baseMixin(Base)) {},
15+
);
1816

19-
describe('input-controller', () => {
2017
describe('default', () => {
2118
let element, controller, input;
2219

2320
beforeEach(() => {
24-
element = fixtureSync('<input-controller-element></input-controller-element>');
21+
element = fixtureSync(`<${tag}></${tag}>`);
2522
controller = new InputController(element, (node) => {
2623
element._setInputElement(node);
2724
});
@@ -50,7 +47,7 @@ describe('input-controller', () => {
5047
let element, input;
5148

5249
beforeEach(() => {
53-
element = fixtureSync('<input-controller-element value="foo"></input-controller-element>');
50+
element = fixtureSync(`<${tag} value="foo"></${tag}>`);
5451
});
5552

5653
it('should forward value attribute to the input', () => {
@@ -64,7 +61,7 @@ describe('input-controller', () => {
6461
let element, input;
6562

6663
beforeEach(() => {
67-
element = fixtureSync('<input-controller-element></input-controller-element>');
64+
element = fixtureSync(`<${tag}></${tag}>`);
6865
element.value = 'foo';
6966
});
7067

@@ -94,7 +91,7 @@ describe('input-controller', () => {
9491
let element, input;
9592

9693
beforeEach(() => {
97-
element = fixtureSync('<input-controller-element value="foo"></input-controller-element>');
94+
element = fixtureSync(`<${tag}></${tag}>`);
9895
});
9996

10097
it('should set input type based on the property', () => {
@@ -108,13 +105,13 @@ describe('input-controller', () => {
108105
describe('unique id', () => {
109106
let wrapper, elements;
110107

111-
const ID_REGEX = /^input-input-controller-element-\d+$/u;
108+
const ID_REGEX = new RegExp(`^input-${tag}-\\d+$`, 'u');
112109

113110
beforeEach(() => {
114111
wrapper = fixtureSync(`
115112
<div>
116-
<input-controller-element></input-controller-element>
117-
<input-controller-element></input-controller-element>
113+
<${tag}></${tag}>
114+
<${tag}></${tag}>
118115
</div>
119116
`);
120117
elements = wrapper.children;
@@ -130,4 +127,12 @@ describe('input-controller', () => {
130127
expect(input1.id).to.not.equal(input2.id);
131128
});
132129
});
130+
};
131+
132+
describe('InputController + Polymer', () => {
133+
runTests(definePolymer, ControllerMixin);
134+
});
135+
136+
describe('InputController + Lit', () => {
137+
runTests(defineLit, PolylitMixin);
133138
});

‎packages/field-base/test/labelled-input-controller.test.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,31 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
2+
import { defineLit, definePolymer, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
33
import sinon from 'sinon';
4-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
54
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
5+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
66
import { InputMixin } from '../src/input-mixin.js';
77
import { LabelMixin } from '../src/label-mixin.js';
88
import { LabelledInputController } from '../src/labelled-input-controller.js';
99

10-
customElements.define(
11-
'label-for-input-mixin-element',
12-
class extends LabelMixin(InputMixin(ControllerMixin(PolymerElement))) {
13-
static get template() {
14-
return html`<slot name="label"></slot><slot name="input"></slot>`;
15-
}
16-
},
17-
);
10+
const runTests = (defineHelper, baseMixin) => {
11+
const inputTag = defineHelper(
12+
'input',
13+
`<slot name="label"></slot><slot name="input"></slot>`,
14+
(Base) => class extends InputMixin(LabelMixin(baseMixin(Base))) {},
15+
);
1816

19-
customElements.define(
20-
'label-for-textarea-mixin-element',
21-
class extends LabelMixin(InputMixin(ControllerMixin(PolymerElement))) {
22-
static get template() {
23-
return html`<slot name="label"></slot><slot name="textarea"></slot>`;
24-
}
25-
},
26-
);
17+
const textareaTag = defineHelper(
18+
'textarea',
19+
`<slot name="label"></slot><slot name="textarea"></slot>`,
20+
(Base) => class extends InputMixin(LabelMixin(baseMixin(Base))) {},
21+
);
2722

28-
describe('labelled-input-controller', () => {
2923
let element, target, label;
3024

31-
['input', 'textarea'].forEach((el) => {
25+
Object.entries({ input: inputTag, textarea: textareaTag }).forEach(([el, tag]) => {
3226
describe(el, () => {
3327
beforeEach(() => {
34-
element = fixtureSync(`<label-for-${el}-mixin-element label="label"></label-for-${el}-mixin-element>`);
28+
element = fixtureSync(`<${tag} label="label"></${tag}>`);
3529
label = element.querySelector('[slot=label]');
3630
target = document.createElement(el);
3731
target.setAttribute('slot', el);
@@ -75,4 +69,12 @@ describe('labelled-input-controller', () => {
7569
});
7670
});
7771
});
72+
};
73+
74+
describe('LabelledInputController + Polymer', () => {
75+
runTests(definePolymer, ControllerMixin);
76+
});
77+
78+
describe('LabelledInputController + Lit', () => {
79+
runTests(defineLit, PolylitMixin);
7880
});

‎packages/field-base/test/text-area-controller.test.js‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { fixtureSync } from '@vaadin/testing-helpers';
3-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
2+
import { defineLit, definePolymer, fixtureSync } from '@vaadin/testing-helpers';
43
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
4+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
55
import { InputMixin } from '../src/input-mixin.js';
66
import { TextAreaController } from '../src/text-area-controller.js';
77

8-
customElements.define(
9-
'textarea-controller-element',
10-
class extends InputMixin(ControllerMixin(PolymerElement)) {
11-
static get template() {
12-
return html`<slot name="textarea"></slot>`;
13-
}
14-
},
15-
);
8+
const runTests = (defineHelper, baseMixin) => {
9+
const tag = defineHelper(
10+
'input-mixin',
11+
`<slot name="textarea"></slot>`,
12+
(Base) => class extends InputMixin(baseMixin(Base)) {},
13+
);
1614

17-
describe('text-area-controller', () => {
1815
describe('default', () => {
1916
let element, controller, textarea;
2017

2118
beforeEach(() => {
22-
element = fixtureSync('<textarea-controller-element></textarea-controller-element>');
19+
element = fixtureSync(`<${tag}></${tag}>`);
2320
controller = new TextAreaController(element, (node) => {
2421
element._setInputElement(node);
2522
});
@@ -48,7 +45,7 @@ describe('text-area-controller', () => {
4845
let element, textarea;
4946

5047
beforeEach(() => {
51-
element = fixtureSync('<textarea-controller-element name="foo"></textarea-controller-element>');
48+
element = fixtureSync(`<${tag} name="foo"></${tag}>`);
5249
});
5350

5451
it('should forward name attribute to the textarea', () => {
@@ -62,7 +59,7 @@ describe('text-area-controller', () => {
6259
let element, textarea;
6360

6461
beforeEach(() => {
65-
element = fixtureSync('<textarea-controller-element value="foo"></textarea-controller-element>');
62+
element = fixtureSync(`<${tag} value="foo"></${tag}>`);
6663
});
6764

6865
it('should forward value attribute to the textarea', () => {
@@ -75,13 +72,13 @@ describe('text-area-controller', () => {
7572
describe('unique id', () => {
7673
let wrapper, elements;
7774

78-
const ID_REGEX = /^textarea-textarea-controller-element-\d+$/u;
75+
const ID_REGEX = new RegExp(`^textarea-${tag}-\\d+$`, 'u');
7976

8077
beforeEach(() => {
8178
wrapper = fixtureSync(`
8279
<div>
83-
<textarea-controller-element></textarea-controller-element>
84-
<textarea-controller-element></textarea-controller-element>
80+
<${tag}></${tag}>
81+
<${tag}></${tag}>
8582
</div>
8683
`);
8784
elements = wrapper.children;
@@ -97,4 +94,12 @@ describe('text-area-controller', () => {
9794
expect(textarea1.id).to.not.equal(textarea2.id);
9895
});
9996
});
97+
};
98+
99+
describe('TextAreaController + Polymer', () => {
100+
runTests(definePolymer, ControllerMixin);
101+
});
102+
103+
describe('TextAreaController + Lit', () => {
104+
runTests(defineLit, PolylitMixin);
100105
});

‎packages/field-base/test/virtual-keyboard-controller.test.js‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
11
import { expect } from '@vaadin/chai-plugins';
22
import { sendKeys } from '@vaadin/test-runner-commands';
3-
import { fixtureSync, touchstart } from '@vaadin/testing-helpers';
4-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
3+
import { defineLit, definePolymer, fixtureSync, touchstart } from '@vaadin/testing-helpers';
54
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
5+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
66
import { VirtualKeyboardController } from '../src/virtual-keyboard-controller.js';
77

8-
customElements.define(
9-
'virtual-keyboard-controller-element',
10-
class extends ControllerMixin(PolymerElement) {
11-
static get template() {
12-
return html`<slot></slot>`;
13-
}
8+
const runTests = (defineHelper, baseMixin) => {
9+
const tag = defineHelper(
10+
'virtual-keyboard-controller',
11+
`<slot></slot>`,
12+
(Base) =>
13+
class extends baseMixin(Base) {
14+
constructor() {
15+
super();
16+
this.inputElement = document.createElement('input');
17+
this.appendChild(this.inputElement);
18+
}
1419

15-
constructor() {
16-
super();
17-
this.inputElement = document.createElement('input');
18-
this.appendChild(this.inputElement);
19-
}
20+
ready() {
21+
super.ready();
22+
this.addController(new VirtualKeyboardController(this));
23+
}
2024

21-
ready() {
22-
super.ready();
23-
this.addController(new VirtualKeyboardController(this));
24-
}
25+
open() {
26+
this.dispatchEvent(new CustomEvent('opened-changed', { detail: { value: true } }));
27+
}
2528

26-
open() {
27-
this.dispatchEvent(new CustomEvent('opened-changed', { detail: { value: true } }));
28-
}
29+
close() {
30+
this.dispatchEvent(new CustomEvent('opened-changed', { detail: { value: false } }));
31+
}
32+
},
33+
);
2934

30-
close() {
31-
this.dispatchEvent(new CustomEvent('opened-changed', { detail: { value: false } }));
32-
}
33-
},
34-
);
35-
36-
describe('virtual-keyboard-controller', () => {
3735
let element, input;
3836

3937
beforeEach(() => {
40-
element = fixtureSync(
41-
`<div>
42-
<virtual-keyboard-controller-element></virtual-keyboard-controller-element>
38+
element = fixtureSync(`
39+
<div>
40+
<${tag}></${tag}>
4341
<input id="last-global-focusable" />
44-
</div>`,
45-
).firstElementChild;
42+
</div>
43+
`).firstElementChild;
4644
input = element.inputElement;
4745
});
4846

@@ -67,4 +65,12 @@ describe('virtual-keyboard-controller', () => {
6765
await sendKeys({ press: 'Tab' });
6866
expect(input.inputMode).to.equal('');
6967
});
68+
};
69+
70+
describe('VirtualKeyboardController + Polymer', () => {
71+
runTests(definePolymer, ControllerMixin);
72+
});
73+
74+
describe('VirtualKeyboardController + Lit', () => {
75+
runTests(defineLit, PolylitMixin);
7076
});

0 commit comments

Comments
 (0)