q2-tecton-elements 1.48.1-alpha.0 → 1.48.2

package/dist/test/elements/q2-select-test.spec.js

@@ -0,0 +1,552 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Q2Select } from "../../collection/components/q2-select/q2-select";
+import { Q2OptionList } from "../../collection/components/q2-option-list/q2-option-list";
+import * as utils from "../../collection/utils/index";
+// Set up global screen object for testing
+const mockScreen = {
+    orientation: {
+        type: 'portrait-primary',
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+    },
+};
+global.screen = mockScreen;
+Object.defineProperty(window, 'screen', {
+    writable: true,
+    value: mockScreen,
+});
+// Set up global visualViewport for testing
+const mockVisualViewport = {
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    width: 800,
+    height: 600,
+};
+global.visualViewport = mockVisualViewport;
+Object.defineProperty(window, 'visualViewport', {
+    value: mockVisualViewport,
+    configurable: true,
+});
+const samplePlatformDimensions = {
+    scrollY: 0,
+    innerHeight: 800,
+    innerWidth: 600,
+    outletOffset: 20,
+};
+const sampleTectonWindow = {
+    inMobileApp: false,
+    noStrings: false,
+    platformUrl: '',
+    platformDimensions: samplePlatformDimensions,
+};
+describe('q2-select', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    let specPage;
+    let specSelect;
+    let specElement;
+    let isMobileSpy;
+    let handleAriaLabelSpy;
+    let overrideFocusSpy;
+    // Helper function to set screen orientation type
+    const setOrientationType = (type) => {
+        mockScreen.orientation.type = type;
+    };
+    // Helper function to set document.activeElement
+    const setActiveElement = (element) => {
+        Object.defineProperty(document, 'activeElement', {
+            value: element,
+            writable: true,
+            configurable: true,
+        });
+    };
+    beforeEach(() => {
+        isMobileSpy = jest.spyOn(utils, 'isMobile').mockReturnValue(false);
+        handleAriaLabelSpy = jest.spyOn(utils, 'handleAriaLabel');
+        overrideFocusSpy = jest.spyOn(utils, 'overrideFocus');
+        setOrientationType('landscape-primary');
+        mockScreen.orientation.addEventListener.mockClear();
+        mockScreen.orientation.removeEventListener.mockClear();
+    });
+    describe('Props', () => { });
+    describe('Events', () => { });
+    describe('Component Lifecycle Events', () => {
+        describe('disconnectedCallback', () => {
+            it('calls disconnect() on mutationObserver', async () => {
+                specSelect = new Q2Select();
+                specSelect.mutationObserver = new MutationObserver(() => { });
+                const disconnectSpy = jest.spyOn(specSelect.mutationObserver, 'disconnect');
+                specSelect.disconnectedCallback();
+                expect(disconnectSpy).toHaveBeenCalled();
+            });
+            it('sets mutationObserver to null', async () => {
+                specSelect = new Q2Select();
+                specSelect.mutationObserver = new MutationObserver(() => { });
+                expect(specSelect.mutationObserver).not.toBeNull();
+                specSelect.disconnectedCallback();
+                expect(specSelect.mutationObserver).toBeNull();
+            });
+            it('calls destroyEventListeners', async () => {
+                specSelect = new Q2Select();
+                const destroyEventListenersSpy = jest.spyOn(specSelect, 'destroyEventListeners');
+                specSelect.disconnectedCallback();
+                expect(destroyEventListenersSpy).toHaveBeenCalled();
+            });
+        });
+        describe('componentWillLoad', () => {
+            it('calls handleAriaLabel() helper function', async () => {
+                specSelect = new Q2Select();
+                specSelect.componentWillLoad();
+                expect(handleAriaLabelSpy).toHaveBeenCalled();
+            });
+            it('calls handleOrientationChange', async () => {
+                specSelect = new Q2Select();
+                const handleOrientationChangeSpy = jest.spyOn(specSelect, 'handleOrientationChange');
+                specSelect.componentWillLoad();
+                expect(handleOrientationChangeSpy).toHaveBeenCalled();
+            });
+            it('calls buildStructuredSelectedOptions', async () => {
+                specSelect = new Q2Select();
+                const buildOptionsSpy = jest.spyOn(specSelect, 'buildStructuredSelectedOptions');
+                specSelect.componentWillLoad();
+                expect(buildOptionsSpy).toHaveBeenCalled();
+            });
+            it('calls handleMultilineOptionsUpdate', async () => {
+                specSelect = new Q2Select();
+                const handleUpdateSpy = jest.spyOn(specSelect, 'handleMultilineOptionsUpdate');
+                specSelect.componentWillLoad();
+                expect(handleUpdateSpy).toHaveBeenCalled();
+            });
+        });
+        describe('componentDidLoad', () => {
+            it('calls initMutationObserver', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2Select, Q2OptionList],
+                    html: `<q2-select></q2-select>`,
+                });
+                specSelect = specPage.rootInstance;
+                const initMutationObserverSpy = jest.spyOn(specSelect, 'initMutationObserver');
+                specSelect.componentDidLoad();
+                expect(initMutationObserverSpy).toHaveBeenCalled();
+            });
+            it('calls initEventListeners', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2Select],
+                    html: `<q2-select></q2-select>`,
+                });
+                specSelect = specPage.rootInstance;
+                const initEventListenersSpy = jest.spyOn(specSelect, 'initEventListeners');
+                specSelect.componentDidLoad();
+                expect(initEventListenersSpy).toHaveBeenCalled();
+            });
+            it('calls overrideFocus helper', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2Select],
+                    html: `<q2-select></q2-select>`,
+                });
+                specSelect = specPage.rootInstance;
+                specElement = specPage.root;
+                specSelect.componentDidLoad();
+                expect(overrideFocusSpy).toHaveBeenCalledWith(specElement);
+            });
+            it('setTimeout calls checkSelectedDisplay', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2Select],
+                    html: `<q2-select></q2-select>`,
+                });
+                specSelect = specPage.rootInstance;
+                const checkSelectedDisplaySpy = jest.spyOn(specSelect, 'checkSelectedDisplay');
+                jest.useFakeTimers();
+                specSelect.componentDidLoad();
+                jest.runAllTimers();
+                expect(checkSelectedDisplaySpy).toHaveBeenCalled();
+                jest.useRealTimers();
+            });
+        });
+        describe('componentDidRender', () => {
+            it('calls forEach on scheduledAfterRender', async () => {
+                specSelect = new Q2Select();
+                specSelect.scheduledAfterRender = [jest.fn()];
+                const forEachSpy = jest.spyOn(specSelect.scheduledAfterRender, 'forEach');
+                jest.useFakeTimers();
+                specSelect.componentDidRender();
+                jest.runAllTimers();
+                expect(forEachSpy).toHaveBeenCalled();
+                jest.useRealTimers();
+            });
+        });
+    });
+    describe('Listeners', () => { });
+    describe('Public Methods API', () => {
+        describe('Public Methods', () => { });
+        describe('Test Methods', () => { });
+    });
+    describe('Watchers', () => {
+        describe('openChanged', () => {
+            it('calls addTouchEventListeners when isOpen is true', async () => {
+                specSelect = new Q2Select();
+                const addTouchEventListenersSpy = jest.spyOn(specSelect, 'addTouchEventListeners');
+                specSelect.openChanged(true);
+                expect(addTouchEventListenersSpy).toHaveBeenCalled();
+            });
+            it('calls removeTouchEventListeners when isOpen is false', async () => {
+                specSelect = new Q2Select();
+                const removeTouchEventListenersSpy = jest.spyOn(specSelect, 'removeTouchEventListeners');
+                specSelect.openChanged(false);
+                expect(removeTouchEventListenersSpy).toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Local Methods', () => {
+        describe('Getters', () => {
+            describe('isModule', () => {
+                beforeEach(() => {
+                    specSelect = new Q2Select();
+                });
+                it('returns false when window top matches window and platformDimensions is not defined', async () => {
+                    expect(window.top).toBe(window);
+                    expect(window.Tecton).toBeUndefined();
+                    expect(specSelect.isModule).toBe(false);
+                });
+                it('returns false when window top does not match window and platformDimensions is not defined', async () => {
+                    const windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
+                    expect(window.top).not.toEqual(window);
+                    expect(window.Tecton).toBeUndefined();
+                    expect(specSelect.isModule).toBe(false);
+                    windowSpy.mockRestore();
+                });
+                it('returns false when window top matches window and platformDimensions is defined', async () => {
+                    window.Tecton = sampleTectonWindow;
+                    expect(window.top).toBe(window);
+                    expect(window.Tecton.platformDimensions).toBeTruthy();
+                    expect(specSelect.isModule).toBe(false);
+                });
+                it('returns true when window top does not match window and platformDimensions is defined', async () => {
+                    const windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
+                    window.Tecton = sampleTectonWindow;
+                    expect(specSelect.isModule).toBe(true);
+                    windowSpy.mockRestore();
+                });
+            });
+        });
+        describe('Methods', () => {
+            describe('addTouchEventListeners', () => {
+                it('does not add touchstart listener to popover when isMobile is false', async () => {
+                    specSelect = new Q2Select();
+                    specSelect.popoverElement = document.createElement('div');
+                    specSelect.popoverElement.addEventListener = jest.fn();
+                    isMobileSpy.mockReturnValue(false);
+                    specSelect.addTouchEventListeners();
+                    expect(specSelect.popoverElement.addEventListener).not.toHaveBeenCalledWith('touchstart', specSelect.handleTouchStart, { passive: true });
+                });
+                it('adds touchstart listener when isMobile is true', async () => {
+                    specSelect = new Q2Select();
+                    specSelect.popoverElement = document.createElement('div');
+                    specSelect.popoverElement.addEventListener = jest.fn();
+                    isMobileSpy.mockReturnValue(true);
+                    specSelect.addTouchEventListeners();
+                    expect(specSelect.popoverElement.addEventListener).toHaveBeenCalledWith('touchstart', specSelect.handleTouchStart, { passive: true });
+                });
+            });
+            describe('clickedElsewhere', () => {
+                let mockTarget;
+                let customEvent;
+                beforeEach(async () => {
+                    specSelect = new Q2Select();
+                    mockTarget = { localName: 'click-elsewhere' };
+                    customEvent = { target: mockTarget, stopPropagation: jest.fn() };
+                    specSelect = new Q2Select();
+                    specSelect.popoverElement = { open: true };
+                    jest.spyOn(specSelect, 'innerInputField', 'get').mockReturnValue({ blur: jest.fn() });
+                });
+                it('does nothing if target.localName is not "click-elsewhere"', async () => {
+                    mockTarget = { localName: 'div' };
+                    customEvent = { target: mockTarget };
+                    specSelect.clickedElsewhere(customEvent);
+                });
+                it('calls stopPropagation', async () => {
+                    specSelect.clickedElsewhere(customEvent);
+                    expect(customEvent.stopPropagation).toHaveBeenCalled();
+                });
+                it('sets popoverElement.open to false', async () => {
+                    specSelect.clickedElsewhere(customEvent);
+                    expect(specSelect.popoverElement.open).toBe(false);
+                });
+                it('calls blur() on the innerInputField', async () => {
+                    specSelect.clickedElsewhere(customEvent);
+                    expect(specSelect.innerInputField.blur).toHaveBeenCalled();
+                });
+            });
+            describe('destroyEventListeners', () => {
+                let windowRemoveEventListenerSpy;
+                beforeEach(() => {
+                    isMobileSpy.mockReturnValue(true);
+                    specSelect = new Q2Select();
+                    mockScreen.orientation.removeEventListener.mockClear();
+                    windowRemoveEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+                    mockVisualViewport.removeEventListener.mockClear();
+                });
+                it('checks if isMobile', async () => {
+                    specSelect = new Q2Select();
+                    specSelect.destroyEventListeners();
+                    expect(isMobileSpy).toHaveBeenCalled();
+                });
+                describe('when in mobile environment', () => {
+                    it('calls removeEventListener on screen.orientation ', async () => {
+                        specSelect.destroyEventListeners();
+                        expect(mockScreen.orientation.removeEventListener).toHaveBeenCalledWith('change', specSelect.handleOrientationChange);
+                    });
+                    it('calls removeEventListener on window', async () => {
+                        specSelect.destroyEventListeners();
+                        expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith('resize', specSelect.handleOrientationChange);
+                    });
+                    it('calls removeEventListener on visualViewport', async () => {
+                        mockVisualViewport.removeEventListener.mockClear();
+                        specSelect.destroyEventListeners();
+                        expect(mockVisualViewport.removeEventListener).toHaveBeenCalledWith('resize', specSelect.handleOrientationChange);
+                    });
+                    it('calls removeTouchEventListeners', async () => {
+                        const removeTouchEventListenersSpy = jest.spyOn(specSelect, 'removeTouchEventListeners');
+                        specSelect.destroyEventListeners();
+                        expect(removeTouchEventListenersSpy).toHaveBeenCalled();
+                    });
+                });
+                it('does NOT remove event listener when NOT mobile', async () => {
+                    isMobileSpy.mockReturnValue(false);
+                    specSelect = new Q2Select();
+                    specSelect.destroyEventListeners();
+                    expect(mockScreen.orientation.removeEventListener).not.toHaveBeenCalled();
+                    expect(windowRemoveEventListenerSpy).not.toHaveBeenCalled();
+                    expect(mockVisualViewport.removeEventListener).not.toHaveBeenCalled();
+                });
+            });
+            describe('handleOrientationChange', () => {
+                beforeEach(() => {
+                    isMobileSpy.mockReturnValue(true);
+                    specSelect = new Q2Select();
+                });
+                it('checks if isMobile', async () => {
+                    specSelect.handleOrientationChange();
+                    expect(isMobileSpy).toHaveBeenCalled();
+                });
+                describe('when searchable is initially true', () => {
+                    beforeEach(() => {
+                        specSelect.searchable = true;
+                        specSelect.originalSearchable = true;
+                    });
+                    it('sets "searchable" to false if in landscape orientation', async () => {
+                        setOrientationType('landscape-primary');
+                        specSelect.handleOrientationChange();
+                        expect(specSelect.searchable).toBe(false);
+                    });
+                    it('does nothing in portrait orientation', async () => {
+                        setOrientationType('portrait-primary');
+                        specSelect.handleOrientationChange();
+                        expect(specSelect.searchable).toBe(true);
+                    });
+                    it('restores searchable when returning to portrait', async () => {
+                        setOrientationType('landscape-primary');
+                        specSelect.handleOrientationChange();
+                        expect(specSelect.searchable).toBe(false);
+                        setOrientationType('portrait-primary');
+                        specSelect.handleOrientationChange();
+                        expect(specSelect.searchable).toBe(true);
+                    });
+                });
+                describe('when searchable is initially undefined/false', () => {
+                    it('does nothing', async () => {
+                        specSelect.originalSearchable = false;
+                        setOrientationType('landscape-primary');
+                        specSelect.handleOrientationChange();
+                        expect(specSelect.searchable).toBe(false);
+                    });
+                });
+            });
+            describe('handleTouchStart', () => {
+                it('does not focus the target if the activeElement is not the hostElement', async () => {
+                    specPage = await newSpecPage({
+                        components: [Q2Select],
+                        html: `<q2-select></q2-select>`,
+                    });
+                    specSelect = specPage.rootInstance;
+                    specElement = specPage.root;
+                    const element = document.createElement('div');
+                    const touchEvent = new TouchEvent('touchmove', {
+                        target: element,
+                    });
+                    const focusSpy = jest.spyOn(touchEvent.target, 'focus');
+                    setActiveElement(element);
+                    specSelect.handleTouchStart(touchEvent);
+                    expect(document.activeElement).not.toBe(specElement);
+                    expect(focusSpy).not.toHaveBeenCalled();
+                });
+                it('does not call focus on the target if the target is the hostElement', async () => {
+                    specPage = await newSpecPage({
+                        components: [Q2Select],
+                        html: `<q2-select></q2-select>`,
+                    });
+                    specSelect = specPage.rootInstance;
+                    specElement = specPage.root;
+                    const touchEvent = new TouchEvent('touchmove', {
+                        target: specElement,
+                    });
+                    const focusSpy = jest.spyOn(touchEvent.target, 'focus');
+                    setActiveElement(specElement);
+                    specSelect.handleTouchStart(touchEvent);
+                    expect(touchEvent.target).toBe(specElement);
+                    expect(focusSpy).not.toHaveBeenCalled();
+                });
+                describe('when hostElement is activeElement and target is not hostElement', () => {
+                    let targetFocusSpy;
+                    let targetElement;
+                    beforeEach(async () => {
+                        specPage = await newSpecPage({
+                            components: [Q2Select],
+                            html: `<q2-select></q2-select>`,
+                        });
+                        specSelect = specPage.rootInstance;
+                        specElement = specPage.root;
+                        setActiveElement(specElement);
+                        specSelect.inputFocused = true;
+                        expect(document.activeElement).toBe(specElement);
+                        expect(specSelect.lastTouchWasInPopover).toBe(false);
+                        targetElement = specElement.shadowRoot.querySelector('q2-popover');
+                        const touchEvent = new TouchEvent('touchmove', {
+                            target: targetElement,
+                        });
+                        targetFocusSpy = jest.spyOn(targetElement, 'focus');
+                        expect(touchEvent.target).toBe(targetElement);
+                        specSelect.handleTouchStart(touchEvent);
+                    });
+                    it('sets inputFocused to false', async () => {
+                        expect(specSelect.inputFocused).toBe(false);
+                    });
+                    it('sets lastTouchWasInPopover to true', async () => {
+                        expect(specSelect.lastTouchWasInPopover).toBe(true);
+                    });
+                    it('calls focus on the target element', async () => {
+                        expect(targetFocusSpy).toHaveBeenCalled();
+                    });
+                });
+            });
+            describe('initEventListeners', () => {
+                let windowAddEventListenerSpy;
+                beforeEach(() => {
+                    isMobileSpy.mockReturnValue(true);
+                    specSelect = new Q2Select();
+                    mockScreen.orientation.addEventListener.mockClear();
+                    windowAddEventListenerSpy = jest.spyOn(window, 'addEventListener');
+                    mockVisualViewport.addEventListener.mockClear();
+                });
+                it('checks if isMobile', async () => {
+                    specSelect = new Q2Select();
+                    specSelect.initEventListeners();
+                    expect(isMobileSpy).toHaveBeenCalled();
+                });
+                describe('when in mobile environment', () => {
+                    it('calls addEventListener on screen.orientation', async () => {
+                        specSelect.initEventListeners();
+                        expect(mockScreen.orientation.addEventListener).toHaveBeenCalledWith('change', specSelect.handleOrientationChange);
+                    });
+                    it('calls addEventListener on window', async () => {
+                        specSelect.initEventListeners();
+                        expect(windowAddEventListenerSpy).toHaveBeenCalledWith('resize', specSelect.handleOrientationChange);
+                    });
+                    it('calls addEventListener on visualViewport', async () => {
+                        specSelect.initEventListeners();
+                        expect(mockVisualViewport.addEventListener).toHaveBeenCalledWith('resize', specSelect.handleOrientationChange);
+                    });
+                });
+                it('does NOT add event listener when NOT mobile', async () => {
+                    isMobileSpy.mockReturnValue(false);
+                    specSelect = new Q2Select();
+                    specSelect.initEventListeners();
+                    expect(mockScreen.orientation.addEventListener).not.toHaveBeenCalled();
+                    expect(mockVisualViewport.addEventListener).not.toHaveBeenCalled();
+                    expect(windowAddEventListenerSpy).not.toHaveBeenCalled();
+                });
+            });
+        });
+    });
+    describe('Render Methods', () => { });
+    describe('Accessibility', () => {
+        describe('Keyboard Controls', () => {
+            let handleOptionListExternalKeydownSpy;
+            let q2Select;
+            beforeEach(async () => {
+                specPage = await newSpecPage({
+                    components: [Q2Select, Q2OptionList],
+                    html: `<q2-select></q2-select>`,
+                });
+                q2Select = specPage.root;
+                const q2SelectInstance = specPage.rootInstance;
+                handleOptionListExternalKeydownSpy = jest.spyOn(q2SelectInstance, 'handleOptionListExternalKeydown');
+            });
+            afterEach(() => {
+                handleOptionListExternalKeydownSpy.mockRestore();
+            });
+            it("'Tab' keypress not handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'Tab' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'Enter' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'Enter' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'ArrowUp' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'ArrowDown' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'Home' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'Home' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'End' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'End' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'PageUp' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'PageUp' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'PageDown' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'PageDown' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'Esc' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'Esc' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+            it("'Space' keypress handled by q2-option-list", async () => {
+                const event = new KeyboardEvent('keydown', { key: 'Space' });
+                q2Select.dispatchEvent(event);
+                await specPage.waitForChanges();
+                expect(handleOptionListExternalKeydownSpy).toHaveBeenCalledWith(event);
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-select-test.spec.js.map