@spectrum-web-components/menu 0.11.0 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/custom-elements.json +19 -1
  2. package/package.json +8 -8
  3. package/src/MenuItem.d.ts +7 -4
  4. package/src/MenuItem.js +14 -3
  5. package/src/MenuItem.js.map +1 -1
  6. package/test/menu-group.test-vrt.js +0 -15
  7. package/test/menu-group.test-vrt.js.map +0 -1
  8. package/test/menu-group.test.js +0 -226
  9. package/test/menu-group.test.js.map +0 -1
  10. package/test/menu-item.test-vrt.js +0 -15
  11. package/test/menu-item.test-vrt.js.map +0 -1
  12. package/test/menu-item.test.js +0 -127
  13. package/test/menu-item.test.js.map +0 -1
  14. package/test/menu-selects.test.js +0 -535
  15. package/test/menu-selects.test.js.map +0 -1
  16. package/test/menu.test-vrt.js +0 -15
  17. package/test/menu.test-vrt.js.map +0 -1
  18. package/test/menu.test.js +0 -339
  19. package/test/menu.test.js.map +0 -1
package/test/menu-item.test.js DELETED
@@ -1,127 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import '../sp-menu.js';
13
- import '../sp-menu-item.js';
14
- import '@spectrum-web-components/menu';
15
- import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
16
- import { executeServerCommand } from '@web/test-runner-commands';
17
- import { spy } from 'sinon';
18
- describe('Menu item', () => {
19
- it('renders', async () => {
20
- const el = await fixture(html `
21
- <sp-menu>
22
- <sp-menu-item selected>Selected</sp-menu-item>
23
- </sp-menu>
24
- `);
25
- await waitUntil(() => el.childItems.length == 1, 'expected menu group to manage 1 child');
26
- await elementUpdated(el);
27
- await expect(el).to.be.accessible();
28
- });
29
- it('can be disabled', async () => {
30
- const el = await fixture(html `
31
- <sp-menu selects="single">
32
- <sp-menu-item selected label="This is not disabled">
33
- Selected
34
- </sp-menu-item>
35
- <sp-menu-item disabled>Disabled</sp-menu-item>
36
- </sp-menu>
37
- `);
38
- await elementUpdated(el);
39
- expect(el.value).to.equal('Selected');
40
- const disabled = el.querySelector('[disabled]');
41
- const boundingRect = disabled.getBoundingClientRect();
42
- executeServerCommand('send-mouse', {
43
- steps: [
44
- {
45
- type: 'move',
46
- position: [
47
- boundingRect.x + boundingRect.width / 2,
48
- boundingRect.y + boundingRect.height / 2,
49
- ],
50
- },
51
- {
52
- type: 'down',
53
- },
54
- {
55
- type: 'up',
56
- },
57
- ],
58
- });
59
- await elementUpdated(el);
60
- expect(el.value).to.equal('Selected');
61
- disabled.click();
62
- await elementUpdated(el);
63
- expect(el.value).to.equal('Selected');
64
- disabled.dispatchEvent(new Event('click', {
65
- bubbles: true,
66
- composed: true,
67
- }));
68
- await elementUpdated(el);
69
- expect(el.value).to.equal('Selected');
70
- });
71
- it('proxies `click()`', async () => {
72
- const clickTargetSpy = spy();
73
- const el = await fixture(html `
74
- <sp-menu
75
- @click=${(event) => {
76
- clickTargetSpy(event.composedPath()[0]);
77
- event.stopPropagation();
78
- event.preventDefault();
79
- }}
80
- >
81
- <sp-menu-item
82
- href="https://opensource.adobe.com/spectrum-web-components"
83
- >
84
- Selected Text
85
- </sp-menu-item>
86
- </sp-menu>
87
- `);
88
- await elementUpdated(el);
89
- const item = el.querySelector('sp-menu-item');
90
- const { anchorElement } = item;
91
- item.click();
92
- expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;
93
- });
94
- it('value attribute', async () => {
95
- const el = await fixture(html `
96
- <sp-menu-item value="selected" selected>
97
- Selected Text
98
- </sp-menu-item>
99
- `);
100
- expect(el.itemText).to.equal('Selected Text');
101
- expect(el.value).to.equal('selected');
102
- });
103
- it('no value attribute', async () => {
104
- const el = await fixture(html `
105
- <sp-menu-item selected>Selected Text</sp-menu-item>
106
- `);
107
- expect(el.itemText).to.equal('Selected Text');
108
- expect(el.value).to.equal('Selected Text');
109
- });
110
- it('value property', async () => {
111
- const el = await fixture(html `
112
- <sp-menu-item selected>Selected Text</sp-menu-item>
113
- `);
114
- expect(el.itemText).to.equal('Selected Text');
115
- expect(el.value).to.equal('Selected Text');
116
- expect(el.hasAttribute('value')).to.be.false;
117
- el.value = 'Selected Text';
118
- await elementUpdated(el);
119
- expect(el.value).to.equal('Selected Text');
120
- expect(el.getAttribute('value')).to.equal('Selected Text');
121
- el.value = '';
122
- await elementUpdated(el);
123
- expect(el.value).to.equal('Selected Text');
124
- expect(el.hasAttribute('value')).to.be.false;
125
- });
126
- });
127
- //# sourceMappingURL=menu-item.test.js.map
package/test/menu-item.test.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"menu-item.test.js","sourceRoot":"","sources":["menu-item.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAE5B,OAAO,+BAA+B,CAAC;AAEvC,OAAO,EACH,cAAc,EACd,MAAM,EACN,OAAO,EACP,IAAI,EACJ,SAAS,GACZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACrB,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;;aAIH,CACJ,CAAC;QAEF,MAAM,SAAS,CACX,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,EAC/B,uCAAuC,CAC1C,CAAC;QACF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;;;;;aAOH,CACJ,CAAC;QACF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEtC,MAAM,QAAQ,GAAG,EAAE,CAAC,aAAa,CAAC,YAAY,CAAa,CAAC;QAC5D,MAAM,YAAY,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;QACtD,oBAAoB,CAAC,YAAY,EAAE;YAC/B,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,MAAM;oBACZ,QAAQ,EAAE;wBACN,YAAY,CAAC,CAAC,GAAG,YAAY,CAAC,KAAK,GAAG,CAAC;wBACvC,YAAY,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC;qBAC3C;iBACJ;gBACD;oBACI,IAAI,EAAE,MAAM;iBACf;gBACD;oBACI,IAAI,EAAE,IAAI;iBACb;aACJ;SACJ,CAAC,CAAC;QACH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEtC,QAAQ,CAAC,KAAK,EAAE,CAAC;QACjB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEtC,QAAQ,CAAC,aAAa,CAClB,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CACL,CAAC;QACF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;QAC7B,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;6BAEa,CAAC,KAAY,EAAE,EAAE;YACtB,cAAc,CACV,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAsB,CAC/C,CAAC;YACF,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QAC3B,CAAC;;;;;;;;aAQR,CACJ,CAAC;QAEF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,IAAI,GAAG,EAAE,CAAC,aAAa,CAAC,cAAc,CAAa,CAAC;QAC1D,MAAM,EAAE,aAAa,EAAE,GAAG,IAEzB,CAAC;QACF,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,CAAC,cAAc,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAChE,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;;aAIH,CACJ,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;aAEH,CACJ,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC5B,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;aAEH,CACJ,CAAC;QACF,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC3C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAE7C,EAAE,CAAC,KAAK,GAAG,eAAe,CAAC;QAC3B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC3C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAE3D,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC;QACd,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC3C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IACjD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '../sp-menu.js';\nimport '../sp-menu-item.js';\nimport { MenuItem } from '../';\nimport '@spectrum-web-components/menu';\nimport { Menu } from '@spectrum-web-components/menu';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n waitUntil,\n} from '@open-wc/testing';\nimport { executeServerCommand } from '@web/test-runner-commands';\nimport { spy } from 'sinon';\n\ndescribe('Menu item', () => {\n it('renders', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu>\n <sp-menu-item selected>Selected</sp-menu-item>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => el.childItems.length == 1,\n 'expected menu group to manage 1 child'\n );\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('can be disabled', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu selects=\"single\">\n <sp-menu-item selected label=\"This is not disabled\">\n Selected\n </sp-menu-item>\n <sp-menu-item disabled>Disabled</sp-menu-item>\n </sp-menu>\n `\n );\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n const disabled = el.querySelector('[disabled]') as MenuItem;\n const boundingRect = disabled.getBoundingClientRect();\n executeServerCommand('send-mouse', {\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n disabled.click();\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n\n disabled.dispatchEvent(\n new Event('click', {\n bubbles: true,\n composed: true,\n })\n );\n await elementUpdated(el);\n expect(el.value).to.equal('Selected');\n });\n it('proxies `click()`', async () => {\n const clickTargetSpy = spy();\n const el = await fixture<Menu>(\n html`\n <sp-menu\n @click=${(event: Event) => {\n clickTargetSpy(\n event.composedPath()[0] as HTMLAnchorElement\n );\n event.stopPropagation();\n event.preventDefault();\n }}\n >\n <sp-menu-item\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n Selected Text\n </sp-menu-item>\n </sp-menu>\n `\n );\n\n await elementUpdated(el);\n\n const item = el.querySelector('sp-menu-item') as MenuItem;\n const { anchorElement } = item as unknown as {\n anchorElement: HTMLAnchorElement;\n };\n item.click();\n\n expect(clickTargetSpy.calledWith(anchorElement)).to.be.true;\n });\n it('value attribute', async () => {\n const el = await fixture<MenuItem>(\n html`\n <sp-menu-item value=\"selected\" selected>\n Selected Text\n </sp-menu-item>\n `\n );\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('selected');\n });\n it('no value attribute', async () => {\n const el = await fixture<MenuItem>(\n html`\n <sp-menu-item selected>Selected Text</sp-menu-item>\n `\n );\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('Selected Text');\n });\n it('value property', async () => {\n const el = await fixture<MenuItem>(\n html`\n <sp-menu-item selected>Selected Text</sp-menu-item>\n `\n );\n expect(el.itemText).to.equal('Selected Text');\n expect(el.value).to.equal('Selected Text');\n expect(el.hasAttribute('value')).to.be.false;\n\n el.value = 'Selected Text';\n await elementUpdated(el);\n\n expect(el.value).to.equal('Selected Text');\n expect(el.getAttribute('value')).to.equal('Selected Text');\n\n el.value = '';\n await elementUpdated(el);\n\n expect(el.value).to.equal('Selected Text');\n expect(el.hasAttribute('value')).to.be.false;\n });\n});\n"]}
package/test/menu-selects.test.js DELETED
@@ -1,535 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import '../sp-menu.js';
13
- import '../sp-menu-group.js';
14
- import '../sp-menu-item.js';
15
- import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
16
- import { executeServerCommand, sendKeys } from '@web/test-runner-commands';
17
- import { spy } from 'sinon';
18
- describe('Menu [selects]', () => {
19
- let el;
20
- let options;
21
- beforeEach(async () => {
22
- el = await fixture(html `
23
- <sp-menu selects="single">
24
- <sp-menu-item value="1">Option 1</sp-menu-item>
25
- <sp-menu-item value="2">Option 2</sp-menu-item>
26
- <sp-menu-item value="3">Option 3</sp-menu-item>
27
- </sp-menu>
28
- `);
29
- options = [...el.querySelectorAll('sp-menu-item')];
30
- });
31
- describe('fires `change` events', async () => {
32
- it('on browser clicks', async () => {
33
- const item1 = options[0];
34
- const boundingRect = item1.getBoundingClientRect();
35
- const change = oneEvent(el, 'change');
36
- executeServerCommand('send-mouse', {
37
- steps: [
38
- {
39
- type: 'move',
40
- position: [
41
- boundingRect.x + boundingRect.width / 2,
42
- boundingRect.y + boundingRect.height / 2,
43
- ],
44
- },
45
- {
46
- type: 'down',
47
- },
48
- {
49
- type: 'up',
50
- },
51
- ],
52
- });
53
- await change;
54
- expect(el.value).to.equal('1');
55
- });
56
- it('on JS clicks', async () => {
57
- const item1 = options[0];
58
- const change = oneEvent(el, 'change');
59
- item1.click();
60
- await change;
61
- expect(el.value).to.equal('1');
62
- });
63
- });
64
- it('manages a single selection when [selects="single"]', async () => {
65
- expect(el.value).to.equal('');
66
- let change = oneEvent(el, 'change');
67
- options[0].click();
68
- await change;
69
- expect(el.value).to.equal('1');
70
- change = oneEvent(el, 'change');
71
- options[1].click();
72
- await change;
73
- await elementUpdated(el);
74
- expect(el.value).to.equal('2');
75
- change = oneEvent(el, 'change');
76
- options[2].click();
77
- await change;
78
- await elementUpdated(el);
79
- expect(el.value).to.equal('3');
80
- });
81
- it('manages multiple selections when [selects="multiple"]', async () => {
82
- el.selects = 'multiple';
83
- await elementUpdated(el);
84
- expect(el.value).to.equal('');
85
- let change = oneEvent(el, 'change');
86
- options[0].click();
87
- await change;
88
- expect(el.value).to.equal('1');
89
- change = oneEvent(el, 'change');
90
- options[1].click();
91
- await change;
92
- await elementUpdated(el);
93
- expect(el.value).to.equal('1,2');
94
- change = oneEvent(el, 'change');
95
- options[2].click();
96
- await change;
97
- await elementUpdated(el);
98
- expect(el.value).to.equal('1,2,3');
99
- change = oneEvent(el, 'change');
100
- options[0].click();
101
- await change;
102
- expect(el.value).to.equal('2,3');
103
- change = oneEvent(el, 'change');
104
- options[1].click();
105
- await change;
106
- await elementUpdated(el);
107
- expect(el.value).to.equal('3');
108
- change = oneEvent(el, 'change');
109
- options[2].click();
110
- await change;
111
- await elementUpdated(el);
112
- expect(el.value).to.equal('');
113
- });
114
- });
115
- describe('Menu [selects] w/ group', () => {
116
- let el;
117
- let options;
118
- beforeEach(async () => {
119
- el = await fixture(html `
120
- <sp-menu selects="single">
121
- <sp-menu-group selects="inherit">
122
- <sp-menu-item value="1">Option 1</sp-menu-item>
123
- <sp-menu-item value="2">Option 2</sp-menu-item>
124
- <sp-menu-item value="3">Option 3</sp-menu-item>
125
- </sp-menu-group>
126
- </sp-menu>
127
- `);
128
- options = [...el.querySelectorAll('sp-menu-item')];
129
- });
130
- describe('fires `change` events', async () => {
131
- it('on browser clicks', async () => {
132
- const item1 = options[0];
133
- const boundingRect = item1.getBoundingClientRect();
134
- const change = oneEvent(el, 'change');
135
- executeServerCommand('send-mouse', {
136
- steps: [
137
- {
138
- type: 'move',
139
- position: [
140
- boundingRect.x + boundingRect.width / 2,
141
- boundingRect.y + boundingRect.height / 2,
142
- ],
143
- },
144
- {
145
- type: 'down',
146
- },
147
- {
148
- type: 'up',
149
- },
150
- ],
151
- });
152
- await change;
153
- expect(el.value).to.equal('1');
154
- });
155
- it('on JS clicks', async () => {
156
- const item1 = options[0];
157
- const change = oneEvent(el, 'change');
158
- item1.click();
159
- await change;
160
- expect(el.value).to.equal('1');
161
- });
162
- });
163
- it('manages a single selection when [selects="single"]', async () => {
164
- expect(el.value).to.equal('');
165
- let change = oneEvent(el, 'change');
166
- options[0].click();
167
- await change;
168
- expect(el.value).to.equal('1');
169
- change = oneEvent(el, 'change');
170
- options[1].click();
171
- await change;
172
- await elementUpdated(el);
173
- expect(el.value).to.equal('2');
174
- change = oneEvent(el, 'change');
175
- options[2].click();
176
- await change;
177
- await elementUpdated(el);
178
- expect(el.value).to.equal('3');
179
- });
180
- it('manages multiple selections when [selects="multiple"]', async () => {
181
- el.selects = 'multiple';
182
- await elementUpdated(el);
183
- expect(el.value).to.equal('');
184
- let change = oneEvent(el, 'change');
185
- options[0].click();
186
- await change;
187
- expect(el.value).to.equal('1');
188
- change = oneEvent(el, 'change');
189
- options[1].click();
190
- await change;
191
- await elementUpdated(el);
192
- expect(el.value).to.equal('1,2');
193
- change = oneEvent(el, 'change');
194
- options[2].click();
195
- await change;
196
- await elementUpdated(el);
197
- expect(el.value).to.equal('1,2,3');
198
- change = oneEvent(el, 'change');
199
- options[0].click();
200
- await change;
201
- expect(el.value).to.equal('2,3');
202
- change = oneEvent(el, 'change');
203
- options[1].click();
204
- await change;
205
- await elementUpdated(el);
206
- expect(el.value).to.equal('3');
207
- change = oneEvent(el, 'change');
208
- options[2].click();
209
- await change;
210
- await elementUpdated(el);
211
- expect(el.value).to.equal('');
212
- });
213
- });
214
- describe('Menu w/ group [selects]', () => {
215
- let el;
216
- let group;
217
- let options;
218
- beforeEach(async () => {
219
- el = await fixture(html `
220
- <sp-menu>
221
- <sp-menu-group selects="single">
222
- <sp-menu-item value="1">Option 1</sp-menu-item>
223
- <sp-menu-item value="2">Option 2</sp-menu-item>
224
- <sp-menu-item value="3">Option 3</sp-menu-item>
225
- </sp-menu-group>
226
- </sp-menu>
227
- `);
228
- group = el.querySelector('sp-menu-group');
229
- options = [...el.querySelectorAll('sp-menu-item')];
230
- });
231
- describe('fires `change` events', async () => {
232
- it('on browser clicks', async () => {
233
- const item1 = options[0];
234
- const boundingRect = item1.getBoundingClientRect();
235
- const change = oneEvent(group, 'change');
236
- executeServerCommand('send-mouse', {
237
- steps: [
238
- {
239
- type: 'move',
240
- position: [
241
- boundingRect.x + boundingRect.width / 2,
242
- boundingRect.y + boundingRect.height / 2,
243
- ],
244
- },
245
- {
246
- type: 'down',
247
- },
248
- {
249
- type: 'up',
250
- },
251
- ],
252
- });
253
- await change;
254
- expect(group.value).to.equal('1');
255
- });
256
- it('on JS clicks', async () => {
257
- const item1 = options[0];
258
- const change = oneEvent(group, 'change');
259
- item1.click();
260
- await change;
261
- expect(group.value).to.equal('1');
262
- });
263
- });
264
- it('manages a single selection when [selects="single"]', async () => {
265
- expect(group.value).to.equal('');
266
- let change = oneEvent(el, 'change');
267
- options[0].click();
268
- await change;
269
- expect(group.value).to.equal('1');
270
- change = oneEvent(el, 'change');
271
- options[1].click();
272
- await change;
273
- await elementUpdated(el);
274
- expect(group.value).to.equal('2');
275
- change = oneEvent(el, 'change');
276
- options[2].click();
277
- await change;
278
- await elementUpdated(el);
279
- expect(group.value).to.equal('3');
280
- });
281
- it('manages multiple selections when [selects="multiple"]', async () => {
282
- group.selects = 'multiple';
283
- await elementUpdated(group);
284
- expect(group.value).to.equal('');
285
- let change = oneEvent(el, 'change');
286
- options[0].click();
287
- await change;
288
- expect(group.value).to.equal('1');
289
- change = oneEvent(el, 'change');
290
- options[1].click();
291
- await change;
292
- await elementUpdated(el);
293
- expect(group.value).to.equal('1,2');
294
- change = oneEvent(el, 'change');
295
- options[2].click();
296
- await change;
297
- await elementUpdated(el);
298
- expect(group.value).to.equal('1,2,3');
299
- change = oneEvent(el, 'change');
300
- options[0].click();
301
- await change;
302
- expect(group.value).to.equal('2,3');
303
- change = oneEvent(el, 'change');
304
- options[1].click();
305
- await change;
306
- await elementUpdated(el);
307
- expect(group.value).to.equal('3');
308
- change = oneEvent(el, 'change');
309
- options[2].click();
310
- await change;
311
- await elementUpdated(el);
312
- expect(group.value).to.equal('');
313
- });
314
- });
315
- describe('Menu w/ groups [selects]', () => {
316
- let el;
317
- let groupA;
318
- let groupB;
319
- let options;
320
- beforeEach(async () => {
321
- el = await fixture(html `
322
- <sp-menu>
323
- <sp-menu-group selects="single" id="group-1">
324
- <sp-menu-item value="1a">Option 1a</sp-menu-item>
325
- <sp-menu-item value="2a">Option 2a</sp-menu-item>
326
- <sp-menu-item value="3a">Option 3a</sp-menu-item>
327
- </sp-menu-group>
328
- <sp-menu-group selects="single" id="group-2">
329
- <sp-menu-item value="1b">Option 1b</sp-menu-item>
330
- <sp-menu-item value="2b">Option 2b</sp-menu-item>
331
- <sp-menu-item value="3b">Option 3b</sp-menu-item>
332
- </sp-menu-group>
333
- </sp-menu>
334
- `);
335
- groupA = el.querySelector('sp-menu-group:first-child');
336
- groupB = el.querySelector('sp-menu-group:last-child');
337
- options = [...el.querySelectorAll('sp-menu-item')];
338
- });
339
- describe('fires `change` events', async () => {
340
- it('on browser clicks', async () => {
341
- const item1a = options[0];
342
- const item1b = options[3];
343
- const boundingRectA = item1a.getBoundingClientRect();
344
- expect(groupA.value).to.equal('');
345
- expect(groupB.value).to.equal('');
346
- let change = oneEvent(el, 'change');
347
- executeServerCommand('send-mouse', {
348
- steps: [
349
- {
350
- type: 'move',
351
- position: [
352
- boundingRectA.x + boundingRectA.width / 2,
353
- boundingRectA.y + boundingRectA.height / 2,
354
- ],
355
- },
356
- {
357
- type: 'down',
358
- },
359
- {
360
- type: 'up',
361
- },
362
- ],
363
- });
364
- await change;
365
- await elementUpdated(item1a);
366
- expect(groupA.value).to.equal('1a');
367
- expect(groupB.value).to.equal('');
368
- change = oneEvent(el, 'change');
369
- const boundingRectB = item1b.getBoundingClientRect();
370
- executeServerCommand('send-mouse', {
371
- steps: [
372
- {
373
- type: 'move',
374
- position: [
375
- boundingRectB.x + boundingRectB.width / 2,
376
- boundingRectB.y + boundingRectB.height / 2,
377
- ],
378
- },
379
- {
380
- type: 'down',
381
- },
382
- {
383
- type: 'up',
384
- },
385
- ],
386
- });
387
- await change;
388
- expect(groupA.value).to.equal('1a');
389
- expect(groupB.value).to.equal('1b');
390
- });
391
- it('on JS clicks', async () => {
392
- const item1a = options[0];
393
- const item1b = options[3];
394
- let change = oneEvent(el, 'change');
395
- item1a.click();
396
- await change;
397
- expect(groupA.value).to.equal('1a');
398
- change = oneEvent(el, 'change');
399
- item1b.click();
400
- await change;
401
- expect(groupB.value).to.equal('1b');
402
- });
403
- it('can have them `preventDefault()`ed', async () => {
404
- const preventSpy = spy();
405
- expect(groupA.value).to.equal('');
406
- expect(groupB.value).to.equal('');
407
- const item1a = options[0];
408
- const item1b = options[3];
409
- groupA.addEventListener('change', (event) => {
410
- event.preventDefault();
411
- preventSpy();
412
- });
413
- const change = oneEvent(el, 'change');
414
- item1a.click();
415
- item1b.click();
416
- await change;
417
- expect(preventSpy.callCount).to.equal(1);
418
- expect(groupA.value).to.equal('');
419
- expect(groupB.value).to.equal('1b');
420
- });
421
- });
422
- it('manages a single selection when [selects="single"]', async () => {
423
- expect(groupA.value).to.equal('');
424
- expect(groupB.value).to.equal('');
425
- let change = oneEvent(el, 'change');
426
- options[0].click();
427
- await change;
428
- expect(groupA.value).to.equal('1a');
429
- change = oneEvent(el, 'change');
430
- options[3].click();
431
- await change;
432
- expect(groupB.value).to.equal('1b');
433
- change = oneEvent(el, 'change');
434
- options[1].click();
435
- await change;
436
- expect(groupA.value).to.equal('2a');
437
- change = oneEvent(el, 'change');
438
- options[4].click();
439
- await change;
440
- expect(groupB.value).to.equal('2b');
441
- change = oneEvent(el, 'change');
442
- options[2].click();
443
- await change;
444
- expect(groupA.value).to.equal('3a');
445
- change = oneEvent(el, 'change');
446
- options[5].click();
447
- await change;
448
- expect(groupB.value).to.equal('3b');
449
- });
450
- it('manages multiple selections when [selects="multiple"]', async () => {
451
- groupA.selects = 'multiple';
452
- groupB.selects = 'multiple';
453
- await elementUpdated(groupA);
454
- await elementUpdated(groupB);
455
- expect(groupA.value).to.equal('');
456
- expect(groupB.value).to.equal('');
457
- let change = oneEvent(el, 'change');
458
- options[0].click();
459
- await change;
460
- expect(groupA.value).to.equal('1a');
461
- expect(groupB.value).to.equal('');
462
- change = oneEvent(el, 'change');
463
- options[3].click();
464
- await change;
465
- expect(groupA.value).to.equal('1a');
466
- expect(groupB.value).to.equal('1b');
467
- change = oneEvent(el, 'change');
468
- options[1].click();
469
- await change;
470
- expect(groupA.value).to.equal('1a,2a');
471
- expect(groupB.value).to.equal('1b');
472
- change = oneEvent(el, 'change');
473
- options[4].click();
474
- await change;
475
- expect(groupA.value).to.equal('1a,2a');
476
- expect(groupB.value).to.equal('1b,2b');
477
- change = oneEvent(el, 'change');
478
- options[2].click();
479
- await change;
480
- expect(groupA.value).to.equal('1a,2a,3a');
481
- expect(groupB.value).to.equal('1b,2b');
482
- change = oneEvent(el, 'change');
483
- options[5].click();
484
- await change;
485
- expect(groupA.value).to.equal('1a,2a,3a');
486
- expect(groupB.value).to.equal('1b,2b,3b');
487
- change = oneEvent(el, 'change');
488
- options[0].click();
489
- await change;
490
- expect(groupA.value).to.equal('2a,3a');
491
- expect(groupB.value).to.equal('1b,2b,3b');
492
- change = oneEvent(el, 'change');
493
- options[3].click();
494
- await change;
495
- expect(groupA.value).to.equal('2a,3a');
496
- expect(groupB.value).to.equal('2b,3b');
497
- change = oneEvent(el, 'change');
498
- options[1].click();
499
- await change;
500
- expect(groupA.value).to.equal('3a');
501
- expect(groupB.value).to.equal('2b,3b');
502
- change = oneEvent(el, 'change');
503
- options[4].click();
504
- await change;
505
- expect(groupA.value).to.equal('3a');
506
- expect(groupB.value).to.equal('3b');
507
- change = oneEvent(el, 'change');
508
- options[2].click();
509
- await change;
510
- expect(groupA.value).to.equal('');
511
- expect(groupB.value).to.equal('3b');
512
- change = oneEvent(el, 'change');
513
- options[5].click();
514
- await change;
515
- expect(groupA.value).to.equal('');
516
- expect(groupB.value).to.equal('');
517
- });
518
- it('manages focus', async () => {
519
- await elementUpdated(groupA);
520
- await elementUpdated(groupB);
521
- options[0].focus();
522
- await elementUpdated(el);
523
- await sendKeys({ press: 'ArrowDown' });
524
- await sendKeys({ press: 'ArrowUp' });
525
- for (const option of options) {
526
- const parentElement = option.parentElement;
527
- expect(document.activeElement, 'parent focused').to.equal(parentElement);
528
- expect(option.focused, 'option visually focused').to.be.true;
529
- await sendKeys({ press: 'Space' });
530
- expect(parentElement.value).to.equal(option.value);
531
- await sendKeys({ press: 'ArrowDown' });
532
- }
533
- });
534
- });
535
- //# sourceMappingURL=menu-selects.test.js.map