q2-tecton-elements 1.51.0 → 1.52.0

package/dist/collection/components/q2-option/test/q2-option-test.e2e.js

@@ -1,133 +1,137 @@
-import { evaluateA11y, getListOfStyleCompilationIssues, setup } from "../../../utils/helpers";
+import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup, getAllElementTextE2E, } from "../../../utils/helpers";
 describe('q2-option', () => {
     let page;
     let option;
-    it('renders with default attributes', async () => {
-        page = await setup({
-            html: `<q2-option>My Option</q2-option>`,
+    describe('Initialization', () => {
+        it('properly compiles CSS vars and functions', async () => {
+            const page = await setup({ html: '<q2-option></q2-option>' });
+            expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);
         });
-        option = await page.find('q2-option');
-        expect(option).toEqualAttribute('role', 'option');
-        expect(option).toEqualAttribute('tabindex', '-1');
     });
-    it('properly compiles CSS vars and functions', async () => {
-        const page = await setup({ html: '<q2-option></q2-option>' });
-        expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);
-    });
-    describe('@Props', () => {
-        describe('selected', () => {
-            describe('when not provided', () => {
-                it('does not render checkmark icon and adds aria-selected="false"', async () => {
-                    page = await setup({
-                        html: `<q2-option>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');
-                    expect(option).toEqualAttribute('aria-selected', 'false');
-                    expect(optionIcon).toBeNull();
-                });
-            });
-            describe('when provided', () => {
-                it('renders with checkmark icon and adds aria-selected="true"', async () => {
-                    page = await setup({
-                        html: `<q2-option selected>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');
-                    expect(option).toEqualAttribute('aria-selected', 'true');
-                    expect(optionIcon).toBeTruthy();
+    describe('Interactions with q2-loc component', () => {
+        describe('when q2-loc has value prop', () => {
+            it('updates the q2-option display prop and renders the translated string', async () => {
+                page = await setup({ html: `` });
+                await setTestStrings(page, {
+                    'tecton.element.loc.test': 'Loc Text',
+                    'tecton.element.option.test': 'Option Text',
                 });
+                await page.setContent(`
+                            <q2-option>
+                                <q2-loc value="tecton.element.loc.test"></q2-loc>
+                            </q2-option>
+                        `);
+                await page.waitForChanges();
+                option = await page.find('q2-option');
+                const displayProp = await option.getProperty('display');
+                const optionText = await getAllElementTextE2E(page, 'q2-option');
+                expect(displayProp).toEqual('Loc Text');
+                expect(optionText).toEqual(displayProp);
             });
         });
-        describe('disabled', () => {
-            describe('when not provided', () => {
-                it('renders without aria-disabled attribute', async () => {
-                    page = await setup({
-                        html: `<q2-option>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(option).not.toHaveAttribute('aria-disabled');
+        describe('when q2-loc is combined with q2-option textContent', () => {
+            it('updates the display prop', async () => {
+                page = await setup({ html: `` });
+                await setTestStrings(page, {
+                    'tecton.element.loc.test': 'Loc Text',
+                    'tecton.element.option.test': 'Option Text',
                 });
+                await page.setContent(`
+                            <q2-option>
+                            Option Text
+                                <q2-loc value="tecton.element.loc.test"></q2-loc>
+                            </q2-option>
+                        `);
+                await page.waitForChanges();
+                option = await page.find('q2-option');
+                const displayProp = await option.getProperty('display');
+                expect(displayProp).toEqual('Option Text Loc Text');
             });
-            describe('when provided', () => {
-                it('renders with aria-disabled attribute', async () => {
-                    page = await setup({
-                        html: `<q2-option disabled>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(option).toEqualAttribute('aria-disabled', 'true');
+            it('translates both the option textContent and q2-loc', async () => {
+                page = await setup({ html: `` });
+                await setTestStrings(page, {
+                    'tecton.element.loc.test': 'Loc Text',
+                    'tecton.element.option.test': 'Option Text',
                 });
+                await page.setContent(`
+                            <q2-option>
+                            tecton.element.option.test
+                                <q2-loc value="tecton.element.loc.test"></q2-loc>
+                            </q2-option>
+                        `);
+                await page.waitForChanges();
+                option = await page.find('q2-option');
+                const displayProp = await option.getProperty('display');
+                const optionText = await getAllElementTextE2E(page, 'q2-option');
+                expect(displayProp).toEqual('Option Text Loc Text');
+                expect(optionText).toEqual(displayProp);
             });
-        });
-        describe('disabledGroup', () => {
-            describe('when not provided', () => {
-                it('renders without aria-disabled attribute', async () => {
-                    page = await setup({
-                        html: `<q2-option>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(option).not.toHaveAttribute('aria-disabled');
+            it('renders the combined strings', async () => {
+                page = await setup({ html: `` });
+                await setTestStrings(page, {
+                    'tecton.element.loc.test': 'Loc Text',
+                    'tecton.element.option.test': 'Option Text',
                 });
+                await page.setContent(`
+                            <q2-option>
+                            Option Text
+                                <q2-loc value="tecton.element.loc.test"></q2-loc>
+                            </q2-option>
+                        `);
+                await page.waitForChanges();
+                option = await page.find('q2-option');
+                const optionText = await getAllElementTextE2E(page, 'q2-option');
+                expect(optionText).toEqual('Option Text Loc Text');
             });
-            describe('when provided', () => {
-                it('renders with aria-disabled attribute', async () => {
-                    page = await setup({
-                        html: `<q2-option disabled-group>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(option).toEqualAttribute('aria-disabled', 'true');
+            it('maintains the order of text nodes', async () => {
+                page = await setup({ html: `` });
+                await setTestStrings(page, {
+                    'tecton.element.loc.test': 'Loc Text',
+                    'tecton.element.option.test': 'Option Text',
                 });
+                await page.setContent(`
+                            <q2-option>
+                                tecton.element.option.test
+                                <q2-loc value="tecton.element.loc.test"></q2-loc>
+                                <span>My Other Text</span>
+                                tecton.element.option.test
+
+                            </q2-option>
+                        `);
+                await page.waitForChanges();
+                option = await page.find('q2-option');
+                const optionText = await getAllElementTextE2E(page, 'q2-option');
+                expect(optionText).toEqual('Option Text Loc Text My Other Text Option Text');
             });
         });
-        describe('_multiSelectHidden', () => {
-            describe('when not provided', () => {
-                it('renders without aria-hidden attribute', async () => {
-                    page = await setup({
-                        html: `<q2-option>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(option).not.toHaveAttribute('aria-hidden');
-                });
-            });
-            describe('when provided', () => {
-                it('renders with aria-hidden attribute', async () => {
-                    page = await setup({
-                        html: `<q2-option _multiSelectHidden>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(option).toEqualAttribute('aria-hidden', 'true');
+    });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `<q2-select label="Test" value="option-1">
+                            <q2-option value="option-1" display="Option Text">Option Text</q2-option>
+                            <q2-option value="option-2" display="Option Text">Option Text</q2-option>
+                        </q2-select>`,
                 });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
             });
         });
-        describe('display', () => {
-            describe('when not provided', () => {
-                it('uses the text content as the display value', async () => {
-                    page = await setup({
-                        html: `<q2-option>My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(await option.getProperty('display')).toEqual('My Option');
-                });
-                describe('when multiline is provided', () => {
-                    it('does not use the text content as the display value', async () => {
-                        page = await setup({
-                            html: `<q2-option multiline>My Option</q2-option>`,
-                        });
-                        option = await page.find('q2-option');
-                        expect(await option.getProperty('display')).toBeUndefined();
-                    });
+        describe('Accessibility Tree', () => {
+            it('is correctly represented in the accessibility tree', async () => {
+                page = await setup({
+                    html: `<q2-option>My Option</q2-option>`,
                 });
-            });
-            describe('when provided', () => {
-                it('renders with the provided display value', async () => {
-                    page = await setup({
-                        html: `<q2-option display="Foo">My Option</q2-option>`,
-                    });
-                    option = await page.find('q2-option');
-                    expect(await option.getProperty('display')).toEqual('Foo');
+                const accessibilitySnapshot = await page.accessibility.snapshot({
+                    root: await page.$('q2-option'),
                 });
+                expect(accessibilitySnapshot.role).toBe('option');
+                expect(accessibilitySnapshot.name).toBe('My Option');
             });
         });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
     });
     describe('Accessibility', () => {
         describe('aXe DevTools', () => {

package/dist/collection/components/q2-option/test/q2-option-test.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-option-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-option/test/q2-option-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { evaluateA11y, getListOfStyleCompilationIssues, setup } from '@/utils/helpers';\n\ndescribe('q2-option', () => {\n    let page: E2EPage;\n    let option: E2EElement;\n    it('renders with default attributes', async () => {\n        page = await setup({\n            html: `<q2-option>My Option</q2-option>`,\n        });\n        option = await page.find('q2-option');\n        expect(option).toEqualAttribute('role', 'option');\n        expect(option).toEqualAttribute('tabindex', '-1');\n    });\n\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-option></q2-option>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);\n    });\n\n    describe('@Props', () => {\n        describe('selected', () => {\n            describe('when not provided', () => {\n                it('does not render checkmark icon and adds aria-selected=\"false\"', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n                    expect(option).toEqualAttribute('aria-selected', 'false');\n                    expect(optionIcon).toBeNull();\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with checkmark icon and adds aria-selected=\"true\"', async () => {\n                    page = await setup({\n                        html: `<q2-option selected>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    const optionIcon = await page.find('q2-option >>> q2-icon[type=checkmark]');\n\n                    expect(option).toEqualAttribute('aria-selected', 'true');\n                    expect(optionIcon).toBeTruthy();\n                });\n            });\n        });\n\n        describe('disabled', () => {\n            describe('when not provided', () => {\n                it('renders without aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).not.toHaveAttribute('aria-disabled');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option disabled>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).toEqualAttribute('aria-disabled', 'true');\n                });\n            });\n        });\n\n        describe('disabledGroup', () => {\n            describe('when not provided', () => {\n                it('renders without aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).not.toHaveAttribute('aria-disabled');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with aria-disabled attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option disabled-group>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).toEqualAttribute('aria-disabled', 'true');\n                });\n            });\n        });\n\n        describe('_multiSelectHidden', () => {\n            describe('when not provided', () => {\n                it('renders without aria-hidden attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).not.toHaveAttribute('aria-hidden');\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with aria-hidden attribute', async () => {\n                    page = await setup({\n                        html: `<q2-option _multiSelectHidden>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n\n                    expect(option).toEqualAttribute('aria-hidden', 'true');\n                });\n            });\n        });\n\n        describe('display', () => {\n            describe('when not provided', () => {\n                it('uses the text content as the display value', async () => {\n                    page = await setup({\n                        html: `<q2-option>My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    expect(await option.getProperty('display')).toEqual('My Option');\n                });\n\n                describe('when multiline is provided', () => {\n                    it('does not use the text content as the display value', async () => {\n                        page = await setup({\n                            html: `<q2-option multiline>My Option</q2-option>`,\n                        });\n                        option = await page.find('q2-option');\n                        expect(await option.getProperty('display')).toBeUndefined();\n                    });\n                });\n            });\n\n            describe('when provided', () => {\n                it('renders with the provided display value', async () => {\n                    page = await setup({\n                        html: `<q2-option display=\"Foo\">My Option</q2-option>`,\n                    });\n                    option = await page.find('q2-option');\n                    expect(await option.getProperty('display')).toEqual('Foo');\n                });\n            });\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `<q2-select label=\"Test\" value=\"option-1\">\n                            <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n                            <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n                        </q2-select>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {\n            it('is correctly represented in the accessibility tree', async () => {\n                page = await setup({\n                    html: `<q2-option>My Option</q2-option>`,\n                });\n                const accessibilitySnapshot = await page.accessibility.snapshot({\n                    root: await page.$('q2-option'),\n                });\n                expect(accessibilitySnapshot.role).toBe('option');\n                expect(accessibilitySnapshot.name).toBe('My Option');\n            });\n        });\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}
+{"version":3,"file":"q2-option-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-option/test/q2-option-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport {\n    evaluateA11y,\n    getListOfStyleCompilationIssues,\n    setTestStrings,\n    setup,\n    getAllElementTextE2E,\n} from '@/utils/helpers';\n\ndescribe('q2-option', () => {\n    let page: E2EPage;\n    let option: E2EElement;\n\n    describe('Initialization', () => {\n        it('properly compiles CSS vars and functions', async () => {\n            const page = await setup({ html: '<q2-option></q2-option>' });\n            expect(await getListOfStyleCompilationIssues(page, 'q2-option')).toHaveLength(0);\n        });\n    });\n\n    describe('Interactions with q2-loc component', () => {\n        describe('when q2-loc has value prop', () => {\n            it('updates the q2-option display prop and renders the translated string', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const displayProp = await option.getProperty('display');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(displayProp).toEqual('Loc Text');\n                expect(optionText).toEqual(displayProp);\n            });\n        });\n        describe('when q2-loc is combined with q2-option textContent', () => {\n            it('updates the display prop', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                            Option Text\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const displayProp = await option.getProperty('display');\n                expect(displayProp).toEqual('Option Text Loc Text');\n            });\n            it('translates both the option textContent and q2-loc', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                            tecton.element.option.test\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const displayProp = await option.getProperty('display');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(displayProp).toEqual('Option Text Loc Text');\n                expect(optionText).toEqual(displayProp);\n            });\n            it('renders the combined strings', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                            Option Text\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(optionText).toEqual('Option Text Loc Text');\n            });\n            it('maintains the order of text nodes', async () => {\n                page = await setup({ html: `` });\n                await setTestStrings(page, {\n                    'tecton.element.loc.test': 'Loc Text',\n                    'tecton.element.option.test': 'Option Text',\n                });\n                await page.setContent(`\n                            <q2-option>\n                                tecton.element.option.test\n                                <q2-loc value=\"tecton.element.loc.test\"></q2-loc>\n                                <span>My Other Text</span>\n                                tecton.element.option.test\n\n                            </q2-option>\n                        `);\n                await page.waitForChanges();\n                option = await page.find('q2-option');\n                const optionText = await getAllElementTextE2E(page, 'q2-option');\n                expect(optionText).toEqual('Option Text Loc Text My Other Text Option Text');\n            });\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `<q2-select label=\"Test\" value=\"option-1\">\n                            <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n                            <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n                        </q2-select>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {\n            it('is correctly represented in the accessibility tree', async () => {\n                page = await setup({\n                    html: `<q2-option>My Option</q2-option>`,\n                });\n                const accessibilitySnapshot = await page.accessibility.snapshot({\n                    root: await page.$('q2-option'),\n                });\n                expect(accessibilitySnapshot.role).toBe('option');\n                expect(accessibilitySnapshot.name).toBe('My Option');\n            });\n        });\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `<q2-select label=\"Test\" value=\"option-1\">\n                            <q2-option value=\"option-1\" display=\"Option Text\">Option Text</q2-option>\n                            <q2-option value=\"option-2\" display=\"Option Text\">Option Text</q2-option>\n                        </q2-select>`,\n                });\n                const hasViolations = await evaluateA11y(page);\n                expect(hasViolations).toBe(false);\n            });\n        });\n        describe('Accessibility Tree', () => {\n            it('is correctly represented in the accessibility tree', async () => {\n                page = await setup({\n                    html: `<q2-option>My Option</q2-option>`,\n                });\n                const accessibilitySnapshot = await page.accessibility.snapshot({\n                    root: await page.$('q2-option'),\n                });\n                expect(accessibilitySnapshot.role).toBe('option');\n                expect(accessibilitySnapshot.name).toBe('My Option');\n            });\n        });\n        describe('Keyboard Controls', () => {});\n        describe('Other', () => {});\n    });\n});\n"]}