q2-tecton-elements 1.50.1 → 1.51.0

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

@@ -15,19 +15,6 @@ describe('q2-dropdown', () => {
     let lastOption;
     let lastOptionFocusSpy;
     let closeDropdownBtn;
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: `
-                    <q2-dropdown label="My Dropdown">
-                        <q2-dropdown-item>Item Text</q2-dropdown-item>
-                    </q2-dropdown>
-                `,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-dropdown></q2-dropdown>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-dropdown')).toHaveLength(0);
@@ -379,6 +366,183 @@ describe('q2-dropdown', () => {
                 expect(page.root.shadowRoot.querySelector('q2-popover').mode).toBe('legacy');
             });
         });
+        describe('popoverMaxHeight', () => {
+            it('when provided, passes the value to q2-popover', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover, Q2Dropdown, Q2DropdownItem],
+                    html: `
+                        <q2-dropdown popover-max-height="600">
+                            <q2-dropdown-item>Item 1 Text</q2-dropdown-item>
+                            <q2-dropdown-item>Item 2 Text</q2-dropdown-item>
+                        </q2-dropdown>
+                    `,
+                });
+                expect(page.root.shadowRoot.querySelector('q2-popover').maxHeight).toBe(600);
+            });
+        });
+        describe('Control', () => {
+            it('when a nested element has slot property set to control that element can be clicked to toggle dropdown', async () => {
+                page = await setup({
+                    html: `
+                        <q2-dropdown>
+                            <q2-avatar slot="control"></q2-avatar>
+                            <q2-dropdown-item>Item 1 Text</q2-dropdown-item>
+                            <q2-dropdown-item>Item 2 Text</q2-dropdown-item>
+                        </q2-dropdown>
+                    `,
+                });
+                const avatar = await page.find('q2-avatar');
+                dropdown = await page.find('q2-dropdown');
+                expect(await dropdown.getProperty('open')).toBeUndefined();
+                await avatar.click();
+                expect(dropdown).toHaveAttribute('open');
+            });
+        });
+    });
+    describe('Methods', () => {
+        beforeEach(async () => {
+            page = await setup({
+                html: `
+                    <q2-dropdown>
+                        <q2-dropdown-item value="item-1" test-id="item-1">Item 1 Text</q2-dropdown-item>
+                        <q2-dropdown-item value="item-2" test-id="item-2">Item 2 Text</q2-dropdown-item>
+                    </q2-dropdown>
+                `,
+            });
+            dropdown = await page.find('q2-dropdown');
+            firstOption = await page.find('q2-dropdown-item[test-id="item-1"]');
+            lastOption = await page.find('q2-dropdown-item[test-id="item-2"]');
+        });
+        describe('selectItem', () => {
+            it('does nothing if the dropdown is disabled', async () => {
+                const clickSpy = await firstOption.spyOnEvent('click');
+                dropdown.setProperty('disabled', true);
+                await page.waitForChanges();
+                await dropdown.callMethod('selectItem', 'item-1');
+                await page.waitForChanges();
+                expect(clickSpy).toHaveReceivedEventTimes(0);
+            });
+            it('does nothing if the provided value does not match any item', async () => {
+                const clickSpy = await firstOption.spyOnEvent('click');
+                await dropdown.callMethod('selectItem', 'invalid-item-value');
+                expect(clickSpy).toHaveReceivedEventTimes(0);
+            });
+            describe('when provided a valid value', () => {
+                it('opens the dropdown if not already open', async () => {
+                    const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                    await dropdown.callMethod('selectItem', 'item-1');
+                    await page.waitForChanges();
+                    expect(popoverStateChangedSpy).toHaveReceivedEventTimes(2);
+                });
+                it('clicks the item matching the provided value', async () => {
+                    const clickSpy = await firstOption.spyOnEvent('click');
+                    await dropdown.callMethod('selectItem', 'item-1');
+                    await page.waitForChanges();
+                    expect(clickSpy).toHaveReceivedEventDetail({ type: 'select', value: 'item-1' });
+                });
+            });
+        });
+        describe('selectRemoveItem', () => {
+            beforeEach(async () => {
+                firstOption.setProperty('removable', true);
+                lastOption.setProperty('removable', true);
+                await page.waitForChanges();
+            });
+            it('does nothing if the dropdown is disabled', async () => {
+                const clickSpy = await firstOption.spyOnEvent('click');
+                dropdown.setProperty('disabled', true);
+                await page.waitForChanges();
+                await dropdown.callMethod('selectRemoveItem', 'item-1');
+                await page.waitForChanges();
+                expect(clickSpy).toHaveReceivedEventTimes(0);
+            });
+            it('does nothing if the provided value does not match any item', async () => {
+                const clickSpy = await firstOption.spyOnEvent('click');
+                await dropdown.callMethod('selectRemoveItem', 'invalid-item-value');
+                expect(clickSpy).toHaveReceivedEventTimes(0);
+            });
+            it('does nothing if the item is not removable', async () => {
+                const clickSpy = await firstOption.spyOnEvent('click');
+                firstOption.setProperty('removable', false);
+                await page.waitForChanges();
+                await dropdown.callMethod('selectRemoveItem', 'item-1');
+                await page.waitForChanges();
+                expect(clickSpy).toHaveReceivedEventTimes(0);
+            });
+            describe('when provided a valid value', () => {
+                it('opens the dropdown if not already open', async () => {
+                    const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                    await dropdown.callMethod('selectRemoveItem', 'item-1');
+                    await page.waitForChanges();
+                    expect(popoverStateChangedSpy).toHaveReceivedEventTimes(2);
+                });
+                it('clicks the remove item button corresponding to the provided value', async () => {
+                    const clickSpy = await firstOption.spyOnEvent('click');
+                    await dropdown.callMethod('selectRemoveItem', 'item-1');
+                    await page.waitForChanges();
+                    expect(clickSpy).toHaveReceivedEventDetail({ type: 'remove', value: 'item-1' });
+                });
+            });
+        });
+        describe('openPopover', () => {
+            it('opens the dropdown', async () => {
+                const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                expect(await dropdown.getProperty('open')).toBeUndefined();
+                await dropdown.callMethod('openPopover');
+                await page.waitForChanges();
+                expect(await dropdown.getProperty('open')).toBe(true);
+                expect(popoverStateChangedSpy).toHaveReceivedEventTimes(1);
+            });
+            it('does nothing if the dropdown is disabled', async () => {
+                dropdown.setProperty('disabled', true);
+                await page.waitForChanges();
+                const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                await dropdown.callMethod('openPopover');
+                await page.waitForChanges();
+                expect(await dropdown.getProperty('open')).toBeUndefined();
+                expect(popoverStateChangedSpy).toHaveReceivedEventTimes(0);
+            });
+            it('does nothing if the dropdown is already open', async () => {
+                dropdown.setProperty('open', true);
+                await page.waitForChanges();
+                const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                expect(await dropdown.getProperty('open')).toBe(true);
+                await dropdown.callMethod('openPopover');
+                await page.waitForChanges();
+                expect(await dropdown.getProperty('open')).toBe(true);
+                expect(popoverStateChangedSpy).toHaveReceivedEventTimes(0);
+            });
+        });
+        describe('closePopover', () => {
+            it('closes the dropdown', async () => {
+                dropdown.setProperty('open', true);
+                await page.waitForChanges();
+                const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                expect(await dropdown.getProperty('open')).toBe(true);
+                await dropdown.callMethod('closePopover');
+                await page.waitForChanges();
+                expect(await dropdown.getProperty('open')).toBe(false);
+                expect(popoverStateChangedSpy).toHaveReceivedEventTimes(1);
+            });
+            it('does nothing if the dropdown is disabled', async () => {
+                dropdown.setProperty('open', true);
+                dropdown.setProperty('disabled', true);
+                await page.waitForChanges();
+                const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                await dropdown.callMethod('closePopover');
+                await page.waitForChanges();
+                expect(await dropdown.getProperty('open')).toBe(true);
+                expect(popoverStateChangedSpy).toHaveReceivedEventTimes(0);
+            });
+            it('does nothing if the dropdown is already closed', async () => {
+                const popoverStateChangedSpy = await dropdown.spyOnEvent('popoverStateChanged');
+                expect(await dropdown.getProperty('open')).toBeUndefined();
+                await dropdown.callMethod('closePopover');
+                await page.waitForChanges();
+                expect(await dropdown.getProperty('open')).toBeUndefined();
+                expect(popoverStateChangedSpy).toHaveReceivedEventTimes(0);
+            });
+        });
     });
     describe('Events', () => {
         describe('popoverStateChanged', () => {
@@ -464,117 +628,6 @@ describe('q2-dropdown', () => {
             });
         });
     });
-    describe('Keyboard', () => {
-        beforeEach(async () => {
-            page = await setup({
-                html: `
-                    <q2-dropdown>
-                        <q2-dropdown-item test-id="option-1">Item 1 Text</q2-dropdown-item>
-                        <q2-dropdown-item test-id="option-2">Item 2 Text</q2-dropdown-item>
-                    </q2-dropdown>
-                    <button>Outside Button</button>
-                `,
-            });
-            dropdown = await page.find('q2-dropdown');
-            dropdownButton = await page.find('q2-dropdown >>> [test-id="dropdownButton"]');
-            buttonFocusSpy = await dropdownButton.spyOnEvent('focus');
-            firstOption = await page.find('q2-dropdown-item:first-of-type');
-            firstOptionFocusSpy = await firstOption.spyOnEvent('focus');
-            lastOption = await page.find('q2-dropdown-item:last-of-type');
-            lastOptionFocusSpy = await lastOption.spyOnEvent('focus');
-            dropdownContainer = await page.find('q2-dropdown >>> click-elsewhere');
-            expect(await dropdown.getProperty('open')).toBeUndefined();
-            expect(buttonFocusSpy).toHaveReceivedEventTimes(0);
-            expect(dropdownContainer).not.toHaveClass('dropdown-open');
-        });
-        describe('toggle button behavior', () => {
-            describe('when popover is closed', () => {
-                it('ArrowUp: opens the popover and focuses last item', async () => {
-                    await dropdownButton.press('ArrowUp');
-                    await page.waitForChanges();
-                    expect(dropdownContainer).toHaveClass('dropdown-open');
-                    expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
-                    expect(lastOptionFocusSpy).toHaveReceivedEventTimes(1);
-                });
-                it('ArrowDown: opens the popover and focuses first item', async () => {
-                    await dropdownButton.press('ArrowDown');
-                    await page.waitForChanges();
-                    expect(dropdownContainer).toHaveClass('dropdown-open');
-                    expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
-                    expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
-                });
-            });
-            describe('when popover is open', () => {
-                beforeEach(async () => {
-                    dropdown.setProperty('open', true);
-                    await page.waitForChanges();
-                    expect(dropdownContainer).toHaveClass('dropdown-open');
-                    buttonFocusSpy.events = [];
-                });
-                it('Escape: closes the popover and focuses toggle button', async () => {
-                    await dropdownButton.press('Escape');
-                    await page.waitForChanges();
-                    expect(dropdownContainer).not.toHaveClass('dropdown-open');
-                    expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
-                });
-                it('Tab: closes the popover and focuses next element in tab order', async () => {
-                    const outerButton = await page.find('button');
-                    const outerButtonSpy = await outerButton.spyOnEvent('focus');
-                    await dropdownButton.press('Tab');
-                    await page.waitForChanges();
-                    expect(dropdownContainer).not.toHaveClass('dropdown-open');
-                    expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
-                    expect(outerButtonSpy).toHaveReceivedEventTimes(1);
-                });
-            });
-        });
-        describe('dropdown item behavior', () => {
-            describe('when inside popover', () => {
-                beforeEach(async () => {
-                    dropdown.setProperty('open', true);
-                    await page.waitForChanges();
-                    expect(dropdownContainer).toHaveClass('dropdown-open');
-                    buttonFocusSpy.events = [];
-                    firstOptionFocusSpy.events = [];
-                    lastOptionFocusSpy.events = [];
-                });
-                it('Escape: closes the popover and focuses the toggle button', async () => {
-                    await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
-                    expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
-                    await page.keyboard.press('Escape');
-                    await page.waitForChanges();
-                    expect(dropdownContainer).not.toHaveClass('dropdown-open');
-                    expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
-                });
-                it('Tab: closes the popover and focuses next element in tab order', async () => {
-                    const outerButton = await page.find('button');
-                    const outerButtonSpy = await outerButton.spyOnEvent('focus');
-                    await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
-                    expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
-                    await page.keyboard.press('Tab');
-                    await page.waitForChanges();
-                    expect(dropdownContainer).not.toHaveClass('dropdown-open');
-                    expect(buttonFocusSpy).toHaveReceivedEventTimes(0);
-                    expect(outerButtonSpy).toHaveReceivedEventTimes(1);
-                });
-                it('ArrowUp: focuses the previous dropdown item', async () => {
-                    await dispatchEvent(page, ['q2-dropdown-item:last-of-type'], 'focus');
-                    expect(firstOptionFocusSpy).toHaveReceivedEventTimes(0);
-                    expect(lastOptionFocusSpy).toHaveReceivedEventTimes(1);
-                    await page.keyboard.press('ArrowUp');
-                    await page.waitForChanges();
-                    expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
-                });
-                it('ArrowDown: focuses the next dropdown item', async () => {
-                    await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
-                    expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
-                    await page.keyboard.press('ArrowDown');
-                    await page.waitForChanges();
-                    expect(lastOptionFocusSpy).toHaveReceivedEventTimes(1);
-                });
-            });
-        });
-    });
     describe('Deprecations', () => {
         it('handles deprecated `popDirection` prop', async () => {
             page = await setup({
@@ -629,5 +682,133 @@ describe('q2-dropdown', () => {
             expect(await dropdown.getProperty('popoverAlignment')).toEqual('right');
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-dropdown label="My Dropdown">
+                            <q2-dropdown-item>Item Text</q2-dropdown-item>
+                        </q2-dropdown>
+                    `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => {
+            beforeEach(async () => {
+                page = await setup({
+                    html: `
+                        <q2-dropdown>
+                            <q2-dropdown-item test-id="option-1">Item 1 Text</q2-dropdown-item>
+                            <q2-dropdown-item test-id="option-2">Item 2 Text</q2-dropdown-item>
+                        </q2-dropdown>
+                        <button>Outside Button</button>
+                    `,
+                });
+                dropdown = await page.find('q2-dropdown');
+                dropdownButton = await page.find('q2-dropdown >>> [test-id="dropdownButton"]');
+                buttonFocusSpy = await dropdownButton.spyOnEvent('focus');
+                firstOption = await page.find('q2-dropdown-item:first-of-type');
+                firstOptionFocusSpy = await firstOption.spyOnEvent('focus');
+                lastOption = await page.find('q2-dropdown-item:last-of-type');
+                lastOptionFocusSpy = await lastOption.spyOnEvent('focus');
+                dropdownContainer = await page.find('q2-dropdown >>> click-elsewhere');
+                expect(await dropdown.getProperty('open')).toBeUndefined();
+                expect(buttonFocusSpy).toHaveReceivedEventTimes(0);
+                expect(dropdownContainer).not.toHaveClass('dropdown-open');
+            });
+            describe('toggle button behavior', () => {
+                describe('when popover is closed', () => {
+                    it('ArrowUp: opens the popover and focuses last item', async () => {
+                        await dropdownButton.press('ArrowUp');
+                        await page.waitForChanges();
+                        expect(dropdownContainer).toHaveClass('dropdown-open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
+                        expect(lastOptionFocusSpy).toHaveReceivedEventTimes(1);
+                    });
+                    it('ArrowDown: opens the popover and focuses first item', async () => {
+                        await dropdownButton.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(dropdownContainer).toHaveClass('dropdown-open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
+                        expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
+                    });
+                });
+                describe('when popover is open', () => {
+                    beforeEach(async () => {
+                        dropdown.setProperty('open', true);
+                        await page.waitForChanges();
+                        expect(dropdownContainer).toHaveClass('dropdown-open');
+                        buttonFocusSpy.events = [];
+                    });
+                    it('Escape: closes the popover and focuses toggle button', async () => {
+                        await dropdownButton.press('Escape');
+                        await page.waitForChanges();
+                        expect(dropdownContainer).not.toHaveClass('dropdown-open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
+                    });
+                    it('Tab: closes the popover and focuses next element in tab order', async () => {
+                        const outerButton = await page.find('button');
+                        const outerButtonSpy = await outerButton.spyOnEvent('focus');
+                        await dropdownButton.press('Tab');
+                        await page.waitForChanges();
+                        expect(dropdownContainer).not.toHaveClass('dropdown-open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
+                        expect(outerButtonSpy).toHaveReceivedEventTimes(1);
+                    });
+                });
+            });
+            describe('dropdown item behavior', () => {
+                describe('when inside popover', () => {
+                    beforeEach(async () => {
+                        dropdown.setProperty('open', true);
+                        await page.waitForChanges();
+                        expect(dropdownContainer).toHaveClass('dropdown-open');
+                        buttonFocusSpy.events = [];
+                        firstOptionFocusSpy.events = [];
+                        lastOptionFocusSpy.events = [];
+                    });
+                    it('Escape: closes the popover and focuses the toggle button', async () => {
+                        await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
+                        expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
+                        await page.keyboard.press('Escape');
+                        await page.waitForChanges();
+                        expect(dropdownContainer).not.toHaveClass('dropdown-open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
+                    });
+                    it('Tab: closes the popover and focuses next element in tab order', async () => {
+                        const outerButton = await page.find('button');
+                        const outerButtonSpy = await outerButton.spyOnEvent('focus');
+                        await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
+                        expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
+                        await page.keyboard.press('Tab');
+                        await page.waitForChanges();
+                        expect(dropdownContainer).not.toHaveClass('dropdown-open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(0);
+                        expect(outerButtonSpy).toHaveReceivedEventTimes(1);
+                    });
+                    it('ArrowUp: focuses the previous dropdown item', async () => {
+                        await dispatchEvent(page, ['q2-dropdown-item:last-of-type'], 'focus');
+                        expect(firstOptionFocusSpy).toHaveReceivedEventTimes(0);
+                        expect(lastOptionFocusSpy).toHaveReceivedEventTimes(1);
+                        await page.keyboard.press('ArrowUp');
+                        await page.waitForChanges();
+                        expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
+                    });
+                    it('ArrowDown: focuses the next dropdown item', async () => {
+                        await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
+                        expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
+                        await page.keyboard.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(lastOptionFocusSpy).toHaveReceivedEventTimes(1);
+                    });
+                });
+            });
+        });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-dropdown-test.e2e.js.map