q2-tecton-elements 1.53.0 → 1.54.1

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

@@ -1,5 +1,5 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getNestedElementProperty, getListOfStyleCompilationIssues, evaluateA11y, } from "../../../utils/helpers";
+import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getNestedElementProperty, getListOfStyleCompilationIssues, evaluateA11y, getFocusedAttribute, } from "../../../utils/helpers";
 import { Q2Popover } from "../../q2-popover/q2-popover";
 import { Q2Dropdown } from "../q2-dropdown";
 import { Q2DropdownItem } from "../../q2-dropdown-item/q2-dropdown-item";
@@ -119,13 +119,14 @@ describe('q2-dropdown', () => {
         await page.keyboard.press('ArrowDown');
         expect(item2Spy).toHaveReceivedEventTimes(1);
         await page.keyboard.press('ArrowDown');
-        expect(item1Spy).toHaveReceivedEventTimes(2);
-        await page.keyboard.press('ArrowDown');
-        expect(item2Spy).toHaveReceivedEventTimes(2);
+        expect(item1Spy).toHaveReceivedEventTimes(1);
+        expect(item2Spy).toHaveReceivedEventTimes(1);
         await page.keyboard.press('ArrowUp');
-        expect(item1Spy).toHaveReceivedEventTimes(3);
+        expect(item1Spy).toHaveReceivedEventTimes(2);
+        expect(item2Spy).toHaveReceivedEventTimes(1);
         await page.keyboard.press('ArrowUp');
-        expect(item2Spy).toHaveReceivedEventTimes(3);
+        expect(item1Spy).toHaveReceivedEventTimes(2);
+        expect(item2Spy).toHaveReceivedEventTimes(1);
     });
     it('localizes label and aria-label', async () => {
         page = await setup({
@@ -290,6 +291,145 @@ describe('q2-dropdown', () => {
         });
     });
     describe('Props', () => {
+        describe('hoist', () => {
+            let clickSpy;
+            const runHoistSetup = async (action, hoistEnabled = false, defineShowActionSheet = false, isCancelled = false) => {
+                page = await setup({
+                    html: `
+                        <q2-dropdown ${hoistEnabled ? 'hoist' : ''} label="My tag">
+                            <q2-dropdown-item value="1">Option 1</q2-dropdown-item>
+                            <q2-dropdown-item value="2">Option 2</q2-dropdown-item>
+                            <q2-dropdown-item value="3">Option 3</q2-dropdown-item>
+                        </q2-dropdown>
+                    `,
+                });
+                if (defineShowActionSheet) {
+                    await page.evaluate(isCancelled => {
+                        const returnValue = isCancelled
+                            ? {
+                                type: 'cancel',
+                                value: '',
+                                values: [],
+                            }
+                            : {
+                                value: '3',
+                                values: [{ display: 'Option 3', value: '3' }],
+                                type: 'confirm',
+                            };
+                        this.TectonElements.showActionSheet = async () => returnValue;
+                    }, isCancelled);
+                }
+                popover = await page.find('q2-dropdown >>> q2-popover');
+                dropdown = await page.find('q2-dropdown');
+                dropdownButton = await page.find('q2-dropdown >>> button');
+                const dropdownItem = await page.find('q2-dropdown-item[value="3"]');
+                clickSpy = await dropdownItem.spyOnEvent('click');
+                expect(popover).not.toHaveAttribute('open');
+                if (action === 'click') {
+                    await dropdownButton.click();
+                }
+                else {
+                    await dropdownButton.press(action);
+                }
+                await page.waitForChanges();
+            };
+            describe('when window.Tecton.useActionSheets is true', () => {
+                it('defaults the hoist prop to true', async () => {
+                    page = await setup({ html: `` });
+                    await page.evaluate(() => {
+                        this.Tecton = {
+                            inMobileApp: false,
+                            useActionSheets: true,
+                            noStrings: false,
+                            platformDimensions: null,
+                            platformUrl: null,
+                        };
+                    });
+                    await page.setContent(`
+                            <q2-dropdown label="My tag">
+                                <q2-dropdown-item value="1">Option 1</q2-dropdown-item>
+                                <q2-dropdown-item value="2">Option 2</q2-dropdown-item>
+                                <q2-dropdown-item value="3">Option 3</q2-dropdown-item>
+                            </q2-dropdown>
+                        `);
+                    await page.waitForChanges();
+                    dropdown = await page.find('q2-dropdown');
+                    expect(await dropdown.getProperty('hoist')).toEqual(true);
+                });
+                it('sets hoist to false when manually set to false', async () => {
+                    page = await setup({ html: `` });
+                    await page.evaluate(() => {
+                        this.Tecton = {
+                            inMobileApp: false,
+                            useActionSheets: true,
+                            noStrings: false,
+                            platformDimensions: null,
+                            platformUrl: null,
+                        };
+                    });
+                    await page.setContent(`
+                        <q2-dropdown label="My tag" hoist="false">
+                            <q2-dropdown-item value="1">Option 1</q2-dropdown-item>
+                            <q2-dropdown-item value="2">Option 2</q2-dropdown-item>
+                            <q2-dropdown-item value="3">Option 3</q2-dropdown-item>
+                        </q2-dropdown>
+                    `);
+                    await page.waitForChanges();
+                    dropdown = await page.find('q2-dropdown');
+                    expect(await dropdown.getProperty('hoist')).toEqual(false);
+                });
+            });
+            describe('when false (default)', () => {
+                it('opens popover on click', async () => {
+                    await runHoistSetup('click', false, true);
+                    expect(popover).toHaveAttribute('open');
+                    const option = await page.find('q2-dropdown-item[value="3"]');
+                    await option.click();
+                    await page.waitForChanges();
+                    expect(popover).not.toHaveAttribute('open');
+                    expect(clickSpy).toHaveReceivedEventDetail({
+                        type: 'select',
+                        value: '3',
+                    });
+                });
+            });
+            describe('when true', () => {
+                describe('when window.TectonElements.showActionSheet is not defined', () => {
+                    it('opens popover on click', async () => {
+                        await runHoistSetup('click', true, false);
+                        const option = await page.find('q2-dropdown-item[value="3"]');
+                        await option.click();
+                        await page.waitForChanges();
+                        expect(popover).not.toHaveAttribute('open');
+                        expect(clickSpy).toHaveReceivedEventDetail({
+                            type: 'select',
+                            value: '3',
+                        });
+                    });
+                });
+                describe('when window.TectonElements.showActionSheet is defined', () => {
+                    ['click', 'ArrowDown', 'Space', 'Enter'].forEach(action => {
+                        it(`calls showActionSheet on ${action}`, async () => {
+                            await runHoistSetup(action, true, true);
+                            expect(clickSpy).toHaveReceivedEventDetail({
+                                type: 'select',
+                                value: '3',
+                            });
+                        });
+                    });
+                    describe('when cancelled', () => {
+                        it(`calls showActionSheet on click and returns no data`, async () => {
+                            await runHoistSetup('click', true, true, true);
+                            expect(clickSpy).not.toHaveReceivedEvent();
+                        });
+                        it(`calls showActionSheet on click and focuses control element`, async () => {
+                            await runHoistSetup('click', true, true, true);
+                            expect(await getFocusedAttribute(page, 'test-id')).toEqual('dropdownButton');
+                        });
+                    });
+                });
+            });
+        });
         describe('open', () => {
             it('passes the open property to the popover and dispatches popoverStateChanged event', async () => {
                 page = await setup({
@@ -686,7 +826,7 @@ describe('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>
+                        <button test-id="outer-button">Outside Button</button>
                     `,
                 });
                 dropdown = await page.find('q2-dropdown');
@@ -697,8 +837,10 @@ describe('q2-dropdown', () => {
                 lastOption = await page.find('q2-dropdown-item:last-of-type');
                 lastOptionFocusSpy = await lastOption.spyOnEvent('focus');
                 dropdownContainer = await page.find('q2-dropdown >>> click-elsewhere');
+                popover = await page.find('q2-dropdown >>> q2-popover');
                 expect(await dropdown.getProperty('open')).toBeUndefined();
                 expect(buttonFocusSpy).toHaveReceivedEventTimes(0);
+                expect(popover).not.toHaveAttribute('open');
                 expect(dropdownContainer).not.toHaveClass('dropdown-open');
             });
             describe('toggle button behavior', () => {
@@ -706,14 +848,14 @@ describe('q2-dropdown', () => {
                     it('ArrowUp: opens the popover and focuses last item', async () => {
                         await dropdownButton.press('ArrowUp');
                         await page.waitForChanges();
-                        expect(dropdownContainer).toHaveClass('dropdown-open');
+                        expect(popover).toHaveAttribute('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(popover).toHaveAttribute('open');
                         expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
                         expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
                     });
@@ -722,21 +864,21 @@ describe('q2-dropdown', () => {
                     beforeEach(async () => {
                         dropdown.setProperty('open', true);
                         await page.waitForChanges();
-                        expect(dropdownContainer).toHaveClass('dropdown-open');
+                        expect(popover).toHaveAttribute('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);
+                        expect(popover).not.toHaveAttribute('open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(3);
                     });
                     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(popover).not.toHaveAttribute('open');
                         expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
                         expect(outerButtonSpy).toHaveReceivedEventTimes(1);
                     });
@@ -745,34 +887,54 @@ describe('q2-dropdown', () => {
             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('clears active elements when the popover is closed', async () => {
+                        await dropdownButton.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(popover).toHaveAttribute('open');
+                        let activeDropdownItem = await page.find('q2-dropdown-item[active]');
+                        expect(activeDropdownItem).toEqualAttribute('test-id', 'option-1');
+                        const externalButton = await page.find('button');
+                        await externalButton.click();
+                        await page.waitForChanges();
+                        expect(popover).not.toHaveAttribute('open');
+                        activeDropdownItem = await page.find('q2-dropdown-item[active]');
+                        expect(activeDropdownItem).toBeNull();
+                    });
                     it('Escape: closes the popover and focuses the toggle button', async () => {
-                        await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
+                        await dropdownButton.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(popover).toHaveAttribute('open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
                         expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
                         await page.keyboard.press('Escape');
                         await page.waitForChanges();
-                        expect(dropdownContainer).not.toHaveClass('dropdown-open');
-                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
+                        expect(popover).not.toHaveAttribute('open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(4);
+                        expect(await getFocusedAttribute(page, 'test-id')).toEqual('dropdownButton');
                     });
                     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');
+                        await dropdownButton.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(popover).toHaveAttribute('open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(2);
                         expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
                         await page.keyboard.press('Tab');
                         await page.waitForChanges();
-                        expect(dropdownContainer).not.toHaveClass('dropdown-open');
-                        expect(buttonFocusSpy).toHaveReceivedEventTimes(0);
+                        expect(popover).not.toHaveAttribute('open');
+                        expect(buttonFocusSpy).toHaveReceivedEventTimes(4);
                         expect(outerButtonSpy).toHaveReceivedEventTimes(1);
+                        expect(await getFocusedAttribute(page, 'test-id')).toEqual('outer-button');
                     });
                     it('ArrowUp: focuses the previous dropdown item', async () => {
-                        await dispatchEvent(page, ['q2-dropdown-item:last-of-type'], 'focus');
+                        await dropdownButton.press('ArrowUp');
+                        await page.waitForChanges();
+                        expect(popover).toHaveAttribute('open');
                         expect(firstOptionFocusSpy).toHaveReceivedEventTimes(0);
                         expect(lastOptionFocusSpy).toHaveReceivedEventTimes(1);
                         await page.keyboard.press('ArrowUp');
@@ -780,7 +942,9 @@ describe('q2-dropdown', () => {
                         expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
                     });
                     it('ArrowDown: focuses the next dropdown item', async () => {
-                        await dispatchEvent(page, ['q2-dropdown-item'], 'focus');
+                        await dropdownButton.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(popover).toHaveAttribute('open');
                         expect(firstOptionFocusSpy).toHaveReceivedEventTimes(1);
                         await page.keyboard.press('ArrowDown');
                         await page.waitForChanges();