@spectrum-web-components/checkbox 1.1.0 → 1.1.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.
- package/package.json +6 -6
- package/sp-checkbox.d.ts +6 -0
- package/sp-checkbox.dev.js +5 -0
- package/sp-checkbox.dev.js.map +7 -0
- package/sp-checkbox.js +2 -0
- package/sp-checkbox.js.map +7 -0
- package/src/Checkbox.d.ts +43 -0
- package/src/Checkbox.dev.js +192 -0
- package/src/Checkbox.dev.js.map +7 -0
- package/src/Checkbox.js +49 -0
- package/src/Checkbox.js.map +7 -0
- package/src/CheckboxBase.d.ts +9 -0
- package/src/CheckboxBase.dev.js +9 -0
- package/src/CheckboxBase.dev.js.map +7 -0
- package/src/CheckboxBase.js +2 -0
- package/src/CheckboxBase.js.map +7 -0
- package/src/CheckboxMixin.d.ts +14 -0
- package/src/CheckboxMixin.dev.js +71 -0
- package/src/CheckboxMixin.dev.js.map +7 -0
- package/src/CheckboxMixin.js +11 -0
- package/src/CheckboxMixin.js.map +7 -0
- package/src/checkbox-overrides.css.d.ts +2 -0
- package/src/checkbox-overrides.css.dev.js +7 -0
- package/src/checkbox-overrides.css.dev.js.map +7 -0
- package/src/checkbox-overrides.css.js +4 -0
- package/src/checkbox-overrides.css.js.map +7 -0
- package/src/checkbox.css.d.ts +2 -0
- package/src/checkbox.css.dev.js +7 -0
- package/src/checkbox.css.dev.js.map +7 -0
- package/src/checkbox.css.js +4 -0
- package/src/checkbox.css.js.map +7 -0
- package/src/index.d.ts +1 -0
- package/src/index.dev.js +3 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -0
- package/src/index.js.map +7 -0
- package/src/spectrum-checkbox.css.d.ts +2 -0
- package/src/spectrum-checkbox.css.dev.js +7 -0
- package/src/spectrum-checkbox.css.dev.js.map +7 -0
- package/src/spectrum-checkbox.css.js +4 -0
- package/src/spectrum-checkbox.css.js.map +7 -0
- package/stories/checkbox-sizes.stories.js +43 -0
- package/stories/checkbox-sizes.stories.js.map +7 -0
- package/stories/checkbox.stories.js +137 -0
- package/stories/checkbox.stories.js.map +7 -0
- package/test/benchmark/test-basic.js +10 -0
- package/test/benchmark/test-basic.js.map +7 -0
- package/test/checkbox-memory.test.js +5 -0
- package/test/checkbox-memory.test.js.map +7 -0
- package/test/checkbox-sizes.test-vrt.js +5 -0
- package/test/checkbox-sizes.test-vrt.js.map +7 -0
- package/test/checkbox.test-vrt.js +5 -0
- package/test/checkbox.test-vrt.js.map +7 -0
- package/test/checkbox.test.js +298 -0
- package/test/checkbox.test.js.map +7 -0
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
3
|
+
import "@spectrum-web-components/field-group/sp-field-group.js";
|
|
4
|
+
import { html } from "@spectrum-web-components/base";
|
|
5
|
+
export default {
|
|
6
|
+
component: "sp-checkbox",
|
|
7
|
+
title: "Checkbox"
|
|
8
|
+
};
|
|
9
|
+
export const Default = () => {
|
|
10
|
+
return html`
|
|
11
|
+
<sp-checkbox>Checkbox</sp-checkbox>
|
|
12
|
+
`;
|
|
13
|
+
};
|
|
14
|
+
export const readonly = () => {
|
|
15
|
+
return html`
|
|
16
|
+
<sp-checkbox checked readonly>Checkbox</sp-checkbox>
|
|
17
|
+
`;
|
|
18
|
+
};
|
|
19
|
+
export const Indeterminate = () => {
|
|
20
|
+
return html`
|
|
21
|
+
<sp-checkbox indeterminate>
|
|
22
|
+
Checkbox, indeterminate, not checked
|
|
23
|
+
</sp-checkbox>
|
|
24
|
+
<br />
|
|
25
|
+
<sp-checkbox indeterminate checked>
|
|
26
|
+
Checkbox, indeterminate, checked
|
|
27
|
+
</sp-checkbox>
|
|
28
|
+
`;
|
|
29
|
+
};
|
|
30
|
+
export const Checked = () => {
|
|
31
|
+
return html`
|
|
32
|
+
<sp-checkbox checked>Checkbox</sp-checkbox>
|
|
33
|
+
`;
|
|
34
|
+
};
|
|
35
|
+
export const emphasized = () => {
|
|
36
|
+
return html`
|
|
37
|
+
<sp-checkbox emphasized>Checkbox</sp-checkbox>
|
|
38
|
+
`;
|
|
39
|
+
};
|
|
40
|
+
export const emphasizedIndeterminate = () => {
|
|
41
|
+
return html`
|
|
42
|
+
<sp-checkbox emphasized indeterminate>Checkbox</sp-checkbox>
|
|
43
|
+
`;
|
|
44
|
+
};
|
|
45
|
+
export const emphasizedChecked = () => {
|
|
46
|
+
return html`
|
|
47
|
+
<sp-checkbox emphasized checked>Checkbox</sp-checkbox>
|
|
48
|
+
`;
|
|
49
|
+
};
|
|
50
|
+
export const emphasizedInvalid = () => {
|
|
51
|
+
return html`
|
|
52
|
+
<sp-checkbox emphasized invalid>Checkbox</sp-checkbox>
|
|
53
|
+
`;
|
|
54
|
+
};
|
|
55
|
+
export const emphasizedInvalidIndeterminate = () => {
|
|
56
|
+
return html`
|
|
57
|
+
<sp-checkbox emphasized invalid indeterminate>Checkbox</sp-checkbox>
|
|
58
|
+
`;
|
|
59
|
+
};
|
|
60
|
+
export const emphasizedInvalidChecked = () => {
|
|
61
|
+
return html`
|
|
62
|
+
<sp-checkbox emphasized invalid checked>Checkbox</sp-checkbox>
|
|
63
|
+
`;
|
|
64
|
+
};
|
|
65
|
+
export const Invalid = () => {
|
|
66
|
+
return html`
|
|
67
|
+
<sp-checkbox invalid>Checkbox</sp-checkbox>
|
|
68
|
+
`;
|
|
69
|
+
};
|
|
70
|
+
export const invalidIndeterminate = () => {
|
|
71
|
+
return html`
|
|
72
|
+
<sp-checkbox invalid indeterminate>Checkbox</sp-checkbox>
|
|
73
|
+
`;
|
|
74
|
+
};
|
|
75
|
+
export const invalidChecked = () => {
|
|
76
|
+
return html`
|
|
77
|
+
<sp-checkbox invalid checked>Checkbox</sp-checkbox>
|
|
78
|
+
`;
|
|
79
|
+
};
|
|
80
|
+
export const Autofocus = () => {
|
|
81
|
+
return html`
|
|
82
|
+
<sp-checkbox autofocus>Checkbox</sp-checkbox>
|
|
83
|
+
`;
|
|
84
|
+
};
|
|
85
|
+
export const Disabled = () => {
|
|
86
|
+
return html`
|
|
87
|
+
<sp-checkbox disabled>Checkbox</sp-checkbox>
|
|
88
|
+
`;
|
|
89
|
+
};
|
|
90
|
+
export const disabledChecked = () => {
|
|
91
|
+
return html`
|
|
92
|
+
<sp-checkbox disabled checked>Checkbox</sp-checkbox>
|
|
93
|
+
`;
|
|
94
|
+
};
|
|
95
|
+
export const disabledIndeterminate = () => {
|
|
96
|
+
return html`
|
|
97
|
+
<sp-checkbox disabled indeterminate>Checkbox</sp-checkbox>
|
|
98
|
+
`;
|
|
99
|
+
};
|
|
100
|
+
export const emphasizedDisabled = () => {
|
|
101
|
+
return html`
|
|
102
|
+
<sp-checkbox emphasized disabled>Checkbox</sp-checkbox>
|
|
103
|
+
`;
|
|
104
|
+
};
|
|
105
|
+
export const emphasizedDisabledIndeterminate = () => {
|
|
106
|
+
return html`
|
|
107
|
+
<sp-checkbox emphasized disabled indeterminate>Checkbox</sp-checkbox>
|
|
108
|
+
`;
|
|
109
|
+
};
|
|
110
|
+
export const emphasizedDisabledChecked = () => {
|
|
111
|
+
return html`
|
|
112
|
+
<sp-checkbox emphasized checked>Checkbox</sp-checkbox>
|
|
113
|
+
`;
|
|
114
|
+
};
|
|
115
|
+
export const tabIndexExample = () => {
|
|
116
|
+
return html`
|
|
117
|
+
<sp-field-group horizontal>
|
|
118
|
+
<sp-checkbox tabindex="0">Checkbox 0</sp-checkbox>
|
|
119
|
+
<sp-checkbox disabled tabindex="3">Checkbox 3</sp-checkbox>
|
|
120
|
+
<sp-checkbox tabindex="4">Checkbox 4</sp-checkbox>
|
|
121
|
+
<sp-checkbox tabindex="2" autofocus>Checkbox 2</sp-checkbox>
|
|
122
|
+
<sp-checkbox tabindex="1">Checkbox 1</sp-checkbox>
|
|
123
|
+
</sp-field-group>
|
|
124
|
+
`;
|
|
125
|
+
};
|
|
126
|
+
export const verticalTabIndexExample = () => {
|
|
127
|
+
return html`
|
|
128
|
+
<sp-field-group vertical>
|
|
129
|
+
<sp-checkbox tabindex="0">Checkbox 0</sp-checkbox>
|
|
130
|
+
<sp-checkbox disabled tabindex="3">Checkbox 3</sp-checkbox>
|
|
131
|
+
<sp-checkbox tabindex="4">Checkbox 4</sp-checkbox>
|
|
132
|
+
<sp-checkbox tabindex="2" autofocus>Checkbox 2</sp-checkbox>
|
|
133
|
+
<sp-checkbox tabindex="1">Checkbox 1</sp-checkbox>
|
|
134
|
+
</sp-field-group>
|
|
135
|
+
`;
|
|
136
|
+
};
|
|
137
|
+
//# sourceMappingURL=checkbox.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["checkbox.stories.ts"],
|
|
4
|
+
"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*/\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport '@spectrum-web-components/field-group/sp-field-group.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nexport default {\n component: 'sp-checkbox',\n title: 'Checkbox',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-checkbox>Checkbox</sp-checkbox>\n `;\n};\n\nexport const readonly = (): TemplateResult => {\n return html`\n <sp-checkbox checked readonly>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Indeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox indeterminate>\n Checkbox, indeterminate, not checked\n </sp-checkbox>\n <br />\n <sp-checkbox indeterminate checked>\n Checkbox, indeterminate, checked\n </sp-checkbox>\n `;\n};\n\nexport const Checked = (): TemplateResult => {\n return html`\n <sp-checkbox checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasized = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalid = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedInvalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Invalid = (): TemplateResult => {\n return html`\n <sp-checkbox invalid>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox invalid indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const invalidChecked = (): TemplateResult => {\n return html`\n <sp-checkbox invalid checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Autofocus = (): TemplateResult => {\n return html`\n <sp-checkbox autofocus>Checkbox</sp-checkbox>\n `;\n};\n\nexport const Disabled = (): TemplateResult => {\n return html`\n <sp-checkbox disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox disabled checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const disabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabled = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledIndeterminate = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized disabled indeterminate>Checkbox</sp-checkbox>\n `;\n};\n\nexport const emphasizedDisabledChecked = (): TemplateResult => {\n return html`\n <sp-checkbox emphasized checked>Checkbox</sp-checkbox>\n `;\n};\n\nexport const tabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group horizontal>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n\nexport const verticalTabIndexExample = (): TemplateResult => {\n return html`\n <sp-field-group vertical>\n <sp-checkbox tabindex=\"0\">Checkbox 0</sp-checkbox>\n <sp-checkbox disabled tabindex=\"3\">Checkbox 3</sp-checkbox>\n <sp-checkbox tabindex=\"4\">Checkbox 4</sp-checkbox>\n <sp-checkbox tabindex=\"2\" autofocus>Checkbox 2</sp-checkbox>\n <sp-checkbox tabindex=\"1\">Checkbox 1</sp-checkbox>\n </sp-field-group>\n `;\n};\n"],
|
|
5
|
+
"mappings": ";AAWA,OAAO;AACP,OAAO;AACP,SAAS,YAA4B;AAErC,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,gBAAgB,MAAsB;AAC/C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iCAAiC,MAAsB;AAChE,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,uBAAuB,MAAsB;AACtD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,YAAY,MAAsB;AAC3C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,wBAAwB,MAAsB;AACvD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,qBAAqB,MAAsB;AACpD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kCAAkC,MAAsB;AACjE,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,4BAA4B,MAAsB;AAC3D,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;AAEO,aAAM,0BAA0B,MAAsB;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASX;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
3
|
+
import { html } from "lit";
|
|
4
|
+
import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
|
|
5
|
+
measureFixtureCreation(html`
|
|
6
|
+
<sp-checkbox id="checkbox1">Component</sp-checkbox>
|
|
7
|
+
<sp-checkbox id="checkbox2" checked>Component</sp-checkbox>
|
|
8
|
+
<sp-checkbox id="checkbox3" indeterminate>Component</sp-checkbox>
|
|
9
|
+
`);
|
|
10
|
+
//# sourceMappingURL=test-basic.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["test-basic.ts"],
|
|
4
|
+
"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 '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-checkbox id=\"checkbox1\">Component</sp-checkbox>\n <sp-checkbox id=\"checkbox2\" checked>Component</sp-checkbox>\n <sp-checkbox id=\"checkbox3\" indeterminate>Component</sp-checkbox>\n`);\n"],
|
|
5
|
+
"mappings": ";AAYA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA,CAItB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["checkbox-memory.test.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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\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 { Default } from '../stories/checkbox.stories.js';\nimport { testForMemoryLeaks } from '../../../test/testing-helpers.js';\n\ntestForMemoryLeaks(Default());\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAEnC,mBAAmB,QAAQ,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["checkbox-sizes.test-vrt.ts"],
|
|
4
|
+
"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 * as stories from '../stories/checkbox-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('CheckboxSizesStories', stories as unknown as TestsType);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,wBAAwB,OAA+B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["checkbox.test-vrt.ts"],
|
|
4
|
+
"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 * as stories from '../stories/checkbox.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('CheckboxStories', stories as unknown as TestsType);\n"],
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,mBAAmB,OAA+B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import "@spectrum-web-components/checkbox/sp-checkbox.js";
|
|
3
|
+
import {
|
|
4
|
+
elementUpdated,
|
|
5
|
+
expect,
|
|
6
|
+
fixture,
|
|
7
|
+
html,
|
|
8
|
+
triggerBlurFor,
|
|
9
|
+
waitUntil
|
|
10
|
+
} from "@open-wc/testing";
|
|
11
|
+
import "@spectrum-web-components/shared/src/focus-visible.js";
|
|
12
|
+
import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
|
|
13
|
+
import { a11ySnapshot, findAccessibilityNode } from "@web/test-runner-commands";
|
|
14
|
+
function inputForCheckbox(checkbox) {
|
|
15
|
+
if (!checkbox.shadowRoot) throw new Error("No shadowRoot");
|
|
16
|
+
return checkbox.shadowRoot.querySelector("#input");
|
|
17
|
+
}
|
|
18
|
+
function labelForCheckbox(checkbox) {
|
|
19
|
+
if (!checkbox.shadowRoot) throw new Error("No shadowRoot");
|
|
20
|
+
const labelEl = checkbox.shadowRoot.querySelector("label");
|
|
21
|
+
if (!labelEl) {
|
|
22
|
+
throw new Error("Failed to find label in shadowRoot");
|
|
23
|
+
}
|
|
24
|
+
return labelEl;
|
|
25
|
+
}
|
|
26
|
+
function labelNodeForCheckbox(checkbox) {
|
|
27
|
+
if (!checkbox.shadowRoot) throw new Error("No shadowRoot");
|
|
28
|
+
const slotEl = checkbox.shadowRoot.querySelector("slot");
|
|
29
|
+
if (!slotEl) {
|
|
30
|
+
throw new Error("Failed to find slot in shadowRoot");
|
|
31
|
+
}
|
|
32
|
+
return slotEl.assignedNodes()[0];
|
|
33
|
+
}
|
|
34
|
+
describe("Checkbox", () => {
|
|
35
|
+
let testFixture;
|
|
36
|
+
beforeEach(async () => {
|
|
37
|
+
testFixture = await fixture(html`
|
|
38
|
+
<div>
|
|
39
|
+
<div id="test-checkbox">
|
|
40
|
+
<sp-checkbox id="checkbox0" tabindex="5">
|
|
41
|
+
Component
|
|
42
|
+
</sp-checkbox>
|
|
43
|
+
<sp-checkbox id="checkbox1" tabindex="2" checked>
|
|
44
|
+
Check 1
|
|
45
|
+
</sp-checkbox>
|
|
46
|
+
<sp-checkbox id="checkbox2" tabindex="3" disabled>
|
|
47
|
+
Check 2
|
|
48
|
+
</sp-checkbox>
|
|
49
|
+
<sp-checkbox id="checkbox3" tabindex="1" autofocus>
|
|
50
|
+
Check 3
|
|
51
|
+
</sp-checkbox>
|
|
52
|
+
<sp-checkbox id="checkbox4" tabindex="0">
|
|
53
|
+
Check 4
|
|
54
|
+
</sp-checkbox>
|
|
55
|
+
<sp-checkbox id="checkbox5" tabindex="-1">
|
|
56
|
+
Check 5
|
|
57
|
+
</sp-checkbox>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
`);
|
|
61
|
+
});
|
|
62
|
+
it("loads", async () => {
|
|
63
|
+
const el = testFixture.querySelector("sp-checkbox");
|
|
64
|
+
expect(el).to.not.equal(void 0);
|
|
65
|
+
const textNode = labelNodeForCheckbox(el);
|
|
66
|
+
const content = (textNode.textContent || "").trim();
|
|
67
|
+
expect(content).to.equal("Component");
|
|
68
|
+
});
|
|
69
|
+
testForLitDevWarnings(
|
|
70
|
+
async () => await fixture(html`
|
|
71
|
+
<sp-checkbox>Not Checked</sp-checkbox>
|
|
72
|
+
`)
|
|
73
|
+
);
|
|
74
|
+
it("loads default checkbox accessibly", async () => {
|
|
75
|
+
const el = await fixture(html`
|
|
76
|
+
<sp-checkbox>Not Checked</sp-checkbox>
|
|
77
|
+
`);
|
|
78
|
+
await elementUpdated(el);
|
|
79
|
+
await expect(el).to.be.accessible();
|
|
80
|
+
const labelEl = labelForCheckbox(el);
|
|
81
|
+
const inputEl = inputForCheckbox(el);
|
|
82
|
+
expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
|
|
83
|
+
expect(inputEl.checked).to.be.false;
|
|
84
|
+
expect(inputEl.indeterminate).to.be.false;
|
|
85
|
+
const snapshot = await a11ySnapshot(
|
|
86
|
+
{}
|
|
87
|
+
);
|
|
88
|
+
expect(
|
|
89
|
+
findAccessibilityNode(
|
|
90
|
+
snapshot,
|
|
91
|
+
(node) => node.role === "checkbox" && !node.checked && node.name === "Not Checked"
|
|
92
|
+
),
|
|
93
|
+
'Has a named and not checked "checkbox" element'
|
|
94
|
+
).to.not.be.null;
|
|
95
|
+
});
|
|
96
|
+
it("loads `checked` checkbox accessibly", async () => {
|
|
97
|
+
const el = await fixture(html`
|
|
98
|
+
<sp-checkbox checked>Checked</sp-checkbox>
|
|
99
|
+
`);
|
|
100
|
+
await elementUpdated(el);
|
|
101
|
+
await expect(el).to.be.accessible();
|
|
102
|
+
const labelEl = labelForCheckbox(el);
|
|
103
|
+
const inputEl = inputForCheckbox(el);
|
|
104
|
+
expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
|
|
105
|
+
expect(inputEl.checked).to.be.true;
|
|
106
|
+
expect(inputEl.indeterminate).to.be.false;
|
|
107
|
+
const snapshot = await a11ySnapshot(
|
|
108
|
+
{}
|
|
109
|
+
);
|
|
110
|
+
expect(
|
|
111
|
+
findAccessibilityNode(
|
|
112
|
+
snapshot,
|
|
113
|
+
(node) => node.role === "checkbox" && node.checked && node.name === "Checked"
|
|
114
|
+
),
|
|
115
|
+
'Has a named and checked "checkbox" element'
|
|
116
|
+
).to.not.be.null;
|
|
117
|
+
});
|
|
118
|
+
it("is `invalid` checkbox accessibly", async () => {
|
|
119
|
+
const el = await fixture(html`
|
|
120
|
+
<sp-checkbox invalid>Invalid Not Checked</sp-checkbox>
|
|
121
|
+
`);
|
|
122
|
+
await elementUpdated(el);
|
|
123
|
+
await expect(el).to.be.accessible();
|
|
124
|
+
const labelEl = labelForCheckbox(el);
|
|
125
|
+
const inputEl = inputForCheckbox(el);
|
|
126
|
+
expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
|
|
127
|
+
expect(inputEl).to.have.attribute("aria-invalid", "true");
|
|
128
|
+
});
|
|
129
|
+
it("autofocuses", async () => {
|
|
130
|
+
const autoElement = testFixture.querySelector(
|
|
131
|
+
"sp-checkbox[autofocus]"
|
|
132
|
+
);
|
|
133
|
+
expect(autoElement).to.exist;
|
|
134
|
+
await waitUntil(
|
|
135
|
+
() => document.activeElement === autoElement,
|
|
136
|
+
"Autofocused"
|
|
137
|
+
);
|
|
138
|
+
await triggerBlurFor(autoElement);
|
|
139
|
+
expect(document.activeElement).to.not.equal(autoElement);
|
|
140
|
+
});
|
|
141
|
+
it("`click()`ing host clicks `focusElement`", async () => {
|
|
142
|
+
const el = await fixture(html`
|
|
143
|
+
<sp-checkbox checked autofocus>Checked</sp-checkbox>
|
|
144
|
+
`);
|
|
145
|
+
await elementUpdated(el);
|
|
146
|
+
expect(el.checked, "checked initially").to.be.true;
|
|
147
|
+
el.click();
|
|
148
|
+
await elementUpdated(el);
|
|
149
|
+
expect(el.checked, "unchecked").to.be.false;
|
|
150
|
+
el.click();
|
|
151
|
+
await elementUpdated(el);
|
|
152
|
+
expect(el.checked, "checked again").to.be.true;
|
|
153
|
+
});
|
|
154
|
+
it("respects checked attribute", () => {
|
|
155
|
+
let el = testFixture.querySelector("#checkbox0");
|
|
156
|
+
expect(el.checked).to.be.false;
|
|
157
|
+
el = testFixture.querySelector("#checkbox1");
|
|
158
|
+
expect(el.checked).to.be.true;
|
|
159
|
+
});
|
|
160
|
+
it("has name attribute", () => {
|
|
161
|
+
let el = testFixture.querySelector("#checkbox0");
|
|
162
|
+
el = testFixture.querySelector("#checkbox1");
|
|
163
|
+
expect(el.hasAttribute("name"));
|
|
164
|
+
expect(el.name).to.be.undefined;
|
|
165
|
+
el.setAttribute("name", "test");
|
|
166
|
+
expect(el.name).to.be.equal("test");
|
|
167
|
+
});
|
|
168
|
+
it("handles click events", async () => {
|
|
169
|
+
const el = testFixture.querySelector("#checkbox1");
|
|
170
|
+
expect(el.checked).to.be.true;
|
|
171
|
+
inputForCheckbox(el).click();
|
|
172
|
+
await elementUpdated(el);
|
|
173
|
+
expect(el.checked).to.be.false;
|
|
174
|
+
});
|
|
175
|
+
it("can have `change` events cancelled", async () => {
|
|
176
|
+
const el = testFixture.querySelector("#checkbox0");
|
|
177
|
+
await elementUpdated(el);
|
|
178
|
+
expect(el.checked).to.be.false;
|
|
179
|
+
inputForCheckbox(el).click();
|
|
180
|
+
await elementUpdated(el);
|
|
181
|
+
expect(el.checked).to.be.true;
|
|
182
|
+
el.addEventListener("change", (event) => event.preventDefault());
|
|
183
|
+
inputForCheckbox(el).click();
|
|
184
|
+
await elementUpdated(el);
|
|
185
|
+
expect(el.checked).to.be.true;
|
|
186
|
+
});
|
|
187
|
+
it("should recognize readonly property", async () => {
|
|
188
|
+
const el = await fixture("<sp-checkbox></sp-checkbox>");
|
|
189
|
+
expect(el.readonly).to.not.throw;
|
|
190
|
+
expect(el.readonly).to.be.a("boolean");
|
|
191
|
+
});
|
|
192
|
+
it("maintains its value when [readonly]", async () => {
|
|
193
|
+
const el = await fixture(html`
|
|
194
|
+
<sp-checkbox id="checkbox0" checked readonly>Component</sp-checkbox>
|
|
195
|
+
`);
|
|
196
|
+
expect(el.checked).to.be.true;
|
|
197
|
+
inputForCheckbox(el).click();
|
|
198
|
+
await elementUpdated(el);
|
|
199
|
+
expect(el.checked).to.be.true;
|
|
200
|
+
});
|
|
201
|
+
it("`indeterminate, checked` becomes `not checked` on click", async () => {
|
|
202
|
+
const el = await fixture(html`
|
|
203
|
+
<sp-checkbox checked .indeterminate=${true}>
|
|
204
|
+
indeterminate, checked
|
|
205
|
+
</sp-checkbox>
|
|
206
|
+
`);
|
|
207
|
+
expect(el.checked).to.be.true;
|
|
208
|
+
expect(el.indeterminate).to.be.true;
|
|
209
|
+
const inputEl = inputForCheckbox(el);
|
|
210
|
+
expect(inputEl.checked).to.be.true;
|
|
211
|
+
expect(inputEl.indeterminate).to.be.true;
|
|
212
|
+
el.click();
|
|
213
|
+
await elementUpdated(el);
|
|
214
|
+
expect(el.checked).to.be.false;
|
|
215
|
+
expect(el.indeterminate).to.be.false;
|
|
216
|
+
expect(inputEl.checked).to.be.false;
|
|
217
|
+
expect(inputEl.indeterminate).to.be.false;
|
|
218
|
+
});
|
|
219
|
+
it("`indeterminate, not checked` becomes `checked` on click", async () => {
|
|
220
|
+
const el = await fixture(html`
|
|
221
|
+
<sp-checkbox .indeterminate=${true}>
|
|
222
|
+
indeterminate, checked
|
|
223
|
+
</sp-checkbox>
|
|
224
|
+
`);
|
|
225
|
+
expect(el.checked).to.be.false;
|
|
226
|
+
expect(el.indeterminate).to.be.true;
|
|
227
|
+
const inputEl = inputForCheckbox(el);
|
|
228
|
+
expect(inputEl.checked).to.be.false;
|
|
229
|
+
expect(inputEl.indeterminate).to.be.true;
|
|
230
|
+
el.click();
|
|
231
|
+
await elementUpdated(el);
|
|
232
|
+
expect(el.checked).to.be.true;
|
|
233
|
+
expect(el.indeterminate).to.be.false;
|
|
234
|
+
expect(inputEl.checked).to.be.true;
|
|
235
|
+
expect(inputEl.indeterminate).to.be.false;
|
|
236
|
+
});
|
|
237
|
+
it("updates checkmark icons in response to size", async function() {
|
|
238
|
+
const el = await fixture(html`
|
|
239
|
+
<sp-checkbox checked>sizes checkbox</sp-checkbox>
|
|
240
|
+
`);
|
|
241
|
+
const getCheckmarkLocalName = () => {
|
|
242
|
+
return el.shadowRoot.querySelector("#checkmark").localName;
|
|
243
|
+
};
|
|
244
|
+
expect(el.size).to.equal("m");
|
|
245
|
+
let checkmarkLocalname = getCheckmarkLocalName();
|
|
246
|
+
el.size = "s";
|
|
247
|
+
await elementUpdated(el);
|
|
248
|
+
expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname);
|
|
249
|
+
checkmarkLocalname = getCheckmarkLocalName();
|
|
250
|
+
el.size = "l";
|
|
251
|
+
await elementUpdated(el);
|
|
252
|
+
expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname);
|
|
253
|
+
checkmarkLocalname = getCheckmarkLocalName();
|
|
254
|
+
el.size = "xl";
|
|
255
|
+
await elementUpdated(el);
|
|
256
|
+
expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname);
|
|
257
|
+
});
|
|
258
|
+
it("updates partialCheckmark icons in response to size", async function() {
|
|
259
|
+
const el = await fixture(html`
|
|
260
|
+
<sp-checkbox indeterminate>sizes checkbox</sp-checkbox>
|
|
261
|
+
`);
|
|
262
|
+
const getPartialCheckmarkLocalName = () => {
|
|
263
|
+
return el.shadowRoot.querySelector("#partialCheckmark").localName;
|
|
264
|
+
};
|
|
265
|
+
expect(el.size).to.equal("m");
|
|
266
|
+
let partialCheckmarkLocalname = getPartialCheckmarkLocalName();
|
|
267
|
+
el.size = "s";
|
|
268
|
+
await elementUpdated(el);
|
|
269
|
+
expect(getPartialCheckmarkLocalName()).to.not.equal(
|
|
270
|
+
partialCheckmarkLocalname
|
|
271
|
+
);
|
|
272
|
+
partialCheckmarkLocalname = getPartialCheckmarkLocalName();
|
|
273
|
+
el.size = "l";
|
|
274
|
+
await elementUpdated(el);
|
|
275
|
+
expect(getPartialCheckmarkLocalName()).to.not.equal(
|
|
276
|
+
partialCheckmarkLocalname
|
|
277
|
+
);
|
|
278
|
+
partialCheckmarkLocalname = getPartialCheckmarkLocalName();
|
|
279
|
+
el.size = "xl";
|
|
280
|
+
await elementUpdated(el);
|
|
281
|
+
expect(getPartialCheckmarkLocalName()).to.not.equal(
|
|
282
|
+
partialCheckmarkLocalname
|
|
283
|
+
);
|
|
284
|
+
});
|
|
285
|
+
it("updates tabindex when no longer disabled", async function() {
|
|
286
|
+
const el = await fixture(html`
|
|
287
|
+
<sp-checkbox disabled>disabled checkbox</sp-checkbox>
|
|
288
|
+
`);
|
|
289
|
+
el.click();
|
|
290
|
+
await elementUpdated(el);
|
|
291
|
+
expect(el.checked).to.be.false;
|
|
292
|
+
expect(el.tabIndex).to.equal(-1);
|
|
293
|
+
el.removeAttribute("disabled");
|
|
294
|
+
await elementUpdated(el);
|
|
295
|
+
expect(el.tabIndex).to.equal(0);
|
|
296
|
+
});
|
|
297
|
+
});
|
|
298
|
+
//# sourceMappingURL=checkbox.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["checkbox.test.ts"],
|
|
4
|
+
"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 '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport { Checkbox } from '../';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n triggerBlurFor,\n waitUntil,\n} from '@open-wc/testing';\nimport '@spectrum-web-components/shared/src/focus-visible.js';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { a11ySnapshot, findAccessibilityNode } from '@web/test-runner-commands';\n\nfunction inputForCheckbox(checkbox: Checkbox): HTMLInputElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n return checkbox.shadowRoot.querySelector('#input') as HTMLInputElement;\n}\n\nfunction labelForCheckbox(checkbox: Checkbox): HTMLLabelElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n const labelEl = checkbox.shadowRoot.querySelector('label');\n if (!labelEl) {\n throw new Error('Failed to find label in shadowRoot');\n }\n return labelEl;\n}\n\nfunction labelNodeForCheckbox(checkbox: Checkbox): Node {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n const slotEl = checkbox.shadowRoot.querySelector('slot');\n if (!slotEl) {\n throw new Error('Failed to find slot in shadowRoot');\n }\n return slotEl.assignedNodes()[0];\n}\ndescribe('Checkbox', () => {\n let testFixture: HTMLDivElement;\n\n beforeEach(async () => {\n testFixture = await fixture<HTMLDivElement>(html`\n <div>\n <div id=\"test-checkbox\">\n <sp-checkbox id=\"checkbox0\" tabindex=\"5\">\n Component\n </sp-checkbox>\n <sp-checkbox id=\"checkbox1\" tabindex=\"2\" checked>\n Check 1\n </sp-checkbox>\n <sp-checkbox id=\"checkbox2\" tabindex=\"3\" disabled>\n Check 2\n </sp-checkbox>\n <sp-checkbox id=\"checkbox3\" tabindex=\"1\" autofocus>\n Check 3\n </sp-checkbox>\n <sp-checkbox id=\"checkbox4\" tabindex=\"0\">\n Check 4\n </sp-checkbox>\n <sp-checkbox id=\"checkbox5\" tabindex=\"-1\">\n Check 5\n </sp-checkbox>\n </div>\n </div>\n `);\n });\n\n it('loads', async () => {\n const el = testFixture.querySelector('sp-checkbox') as Checkbox;\n expect(el).to.not.equal(undefined);\n const textNode = labelNodeForCheckbox(el);\n const content = (textNode.textContent || '').trim();\n expect(content).to.equal('Component');\n });\n testForLitDevWarnings(\n async () =>\n await fixture<Checkbox>(html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `)\n );\n\n it('loads default checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox>Not Checked</sp-checkbox>\n `);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForCheckbox(el);\n const inputEl = inputForCheckbox(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n expect(inputEl.checked).to.be.false;\n expect(inputEl.indeterminate).to.be.false;\n\n type NamedRoledAndCheckedNode = {\n name: string;\n role: string;\n checked: boolean;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as NamedRoledAndCheckedNode & {\n children: NamedRoledAndCheckedNode[];\n };\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.role === 'checkbox' &&\n !node.checked &&\n node.name === 'Not Checked'\n ),\n 'Has a named and not checked \"checkbox\" element'\n ).to.not.be.null;\n });\n\n it('loads `checked` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox checked>Checked</sp-checkbox>\n `);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForCheckbox(el);\n const inputEl = inputForCheckbox(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n expect(inputEl.checked).to.be.true;\n expect(inputEl.indeterminate).to.be.false;\n\n type NamedRoledAndCheckedNode = {\n name: string;\n role: string;\n checked: boolean;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as NamedRoledAndCheckedNode & {\n children: NamedRoledAndCheckedNode[];\n };\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.role === 'checkbox' &&\n node.checked &&\n node.name === 'Checked'\n ),\n 'Has a named and checked \"checkbox\" element'\n ).to.not.be.null;\n });\n\n it('is `invalid` checkbox accessibly', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox invalid>Invalid Not Checked</sp-checkbox>\n `);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForCheckbox(el);\n const inputEl = inputForCheckbox(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n expect(inputEl).to.have.attribute('aria-invalid', 'true');\n });\n\n it('autofocuses', async () => {\n const autoElement = testFixture.querySelector(\n 'sp-checkbox[autofocus]'\n ) as Checkbox;\n\n expect(autoElement).to.exist;\n await waitUntil(\n () => document.activeElement === autoElement,\n 'Autofocused'\n );\n\n await triggerBlurFor(autoElement);\n\n expect(document.activeElement).to.not.equal(autoElement);\n });\n\n it('`click()`ing host clicks `focusElement`', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox checked autofocus>Checked</sp-checkbox>\n `);\n\n await elementUpdated(el);\n\n expect(el.checked, 'checked initially').to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'unchecked').to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked, 'checked again').to.be.true;\n });\n\n it('respects checked attribute', () => {\n let el = testFixture.querySelector('#checkbox0') as Checkbox;\n expect(el.checked).to.be.false;\n\n el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n });\n\n it('has name attribute', () => {\n let el = testFixture.querySelector('#checkbox0') as Checkbox;\n\n el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.hasAttribute('name'));\n expect(el.name).to.be.undefined;\n el.setAttribute('name', 'test');\n expect(el.name).to.be.equal('test');\n });\n\n it('handles click events', async () => {\n const el = testFixture.querySelector('#checkbox1') as Checkbox;\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n });\n\n it('can have `change` events cancelled', async () => {\n const el = testFixture.querySelector('#checkbox0') as Checkbox;\n await elementUpdated(el);\n expect(el.checked).to.be.false;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n it('should recognize readonly property', async () => {\n const el: Checkbox = await fixture('<sp-checkbox></sp-checkbox>');\n expect(el.readonly).to.not.throw;\n expect(el.readonly).to.be.a('boolean');\n });\n it('maintains its value when [readonly]', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox id=\"checkbox0\" checked readonly>Component</sp-checkbox>\n `);\n expect(el.checked).to.be.true;\n\n inputForCheckbox(el).click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n\n it('`indeterminate, checked` becomes `not checked` on click', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox checked .indeterminate=${true}>\n indeterminate, checked\n </sp-checkbox>\n `);\n expect(el.checked).to.be.true;\n expect(el.indeterminate).to.be.true;\n\n const inputEl = inputForCheckbox(el);\n expect(inputEl.checked).to.be.true;\n expect(inputEl.indeterminate).to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n expect(el.indeterminate).to.be.false;\n expect(inputEl.checked).to.be.false;\n expect(inputEl.indeterminate).to.be.false;\n });\n\n it('`indeterminate, not checked` becomes `checked` on click', async () => {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox .indeterminate=${true}>\n indeterminate, checked\n </sp-checkbox>\n `);\n expect(el.checked).to.be.false;\n expect(el.indeterminate).to.be.true;\n\n const inputEl = inputForCheckbox(el);\n expect(inputEl.checked).to.be.false;\n expect(inputEl.indeterminate).to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n expect(el.indeterminate).to.be.false;\n expect(inputEl.checked).to.be.true;\n expect(inputEl.indeterminate).to.be.false;\n });\n\n it('updates checkmark icons in response to size', async function () {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox checked>sizes checkbox</sp-checkbox>\n `);\n\n const getCheckmarkLocalName = (): string => {\n return (el.shadowRoot.querySelector('#checkmark') as HTMLElement)\n .localName;\n };\n\n expect(el.size).to.equal('m');\n let checkmarkLocalname = getCheckmarkLocalName();\n el.size = 's';\n await elementUpdated(el);\n expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname);\n\n checkmarkLocalname = getCheckmarkLocalName();\n el.size = 'l';\n await elementUpdated(el);\n expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname);\n\n checkmarkLocalname = getCheckmarkLocalName();\n el.size = 'xl';\n await elementUpdated(el);\n expect(getCheckmarkLocalName()).to.not.equal(checkmarkLocalname);\n });\n\n it('updates partialCheckmark icons in response to size', async function () {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox indeterminate>sizes checkbox</sp-checkbox>\n `);\n\n const getPartialCheckmarkLocalName = (): string => {\n return (\n el.shadowRoot.querySelector('#partialCheckmark') as HTMLElement\n ).localName;\n };\n\n expect(el.size).to.equal('m');\n let partialCheckmarkLocalname = getPartialCheckmarkLocalName();\n el.size = 's';\n await elementUpdated(el);\n expect(getPartialCheckmarkLocalName()).to.not.equal(\n partialCheckmarkLocalname\n );\n\n partialCheckmarkLocalname = getPartialCheckmarkLocalName();\n el.size = 'l';\n await elementUpdated(el);\n expect(getPartialCheckmarkLocalName()).to.not.equal(\n partialCheckmarkLocalname\n );\n\n partialCheckmarkLocalname = getPartialCheckmarkLocalName();\n el.size = 'xl';\n await elementUpdated(el);\n expect(getPartialCheckmarkLocalName()).to.not.equal(\n partialCheckmarkLocalname\n );\n });\n\n it('updates tabindex when no longer disabled', async function () {\n const el = await fixture<Checkbox>(html`\n <sp-checkbox disabled>disabled checkbox</sp-checkbox>\n `);\n el.click();\n await elementUpdated(el);\n expect(el.checked).to.be.false;\n expect(el.tabIndex).to.equal(-1);\n el.removeAttribute('disabled');\n await elementUpdated(el);\n expect(el.tabIndex).to.equal(0);\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|