q2-tecton-elements 1.48.1 → 1.48.2

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

@@ -1,13 +1,18 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Q2Popover } from "../../src/components/q2-popover/q2-popover";
-import { handleDeprecationWarning } from "../../collection/utils/index";
+import * as utils from "../../collection/utils/index";
 describe('popover', () => {
     let specPopover;
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
     const samplePlatformDimensions = {
         scrollY: 0,
         innerHeight: 800,
         innerWidth: 600,
         outletOffset: 20,
+        top: 0,
+        bottom: 0,
     };
     const sampleTectonWindow = {
         inMobileApp: false,
@@ -16,10 +21,7 @@ describe('popover', () => {
         platformDimensions: samplePlatformDimensions,
     };
     const enablePopoverAPI = () => {
-        Object.defineProperty(HTMLElement.prototype, 'popover', {
-            value: true,
-            configurable: true,
-        });
+        Object.defineProperty(HTMLElement.prototype, 'popover', { value: true, configurable: true });
     };
     describe('Props', () => {
         describe('align', () => {
@@ -426,7 +428,6 @@ describe('popover', () => {
                 let visualViewportAddEventListenerSpy;
                 let screenOrientationAddEventListenerSpy;
                 beforeEach(() => {
-                    specPopover = new Q2Popover();
                     windowAddEventListenerSpy = jest.spyOn(window, 'addEventListener');
                     // Mock visualViewport
                     const mockVisualViewport = {
@@ -453,6 +454,7 @@ describe('popover', () => {
                     });
                     global.screen = mockScreen;
                     screenOrientationAddEventListenerSpy = jest.spyOn(mockScreenOrientation, 'addEventListener');
+                    specPopover = new Q2Popover();
                 });
                 afterEach(() => {
                     windowAddEventListenerSpy.mockRestore();
@@ -463,30 +465,56 @@ describe('popover', () => {
                     delete window.visualViewport;
                     delete window.screen;
                 });
-                it('adds resize listener to window with viewPortOrientationChanged handler', () => {
-                    specPopover.addViewportListeners();
-                    expect(windowAddEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortOrientationChanged);
-                });
-                it('adds resize listener to visualViewport with viewPortChanged handler', () => {
-                    specPopover.addViewportListeners();
-                    expect(visualViewportAddEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortChanged);
-                });
-                it('adds scroll listener to window with viewPortChanged handler and proper options', () => {
-                    specPopover.addViewportListeners();
-                    expect(windowAddEventListenerSpy).toHaveBeenCalledWith('scroll', specPopover.viewPortChanged, {
-                        passive: true,
-                        capture: true,
+                describe('resize', () => {
+                    it('adds resize listener to window with viewPortOrientationChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortOrientationChanged);
+                    });
+                    it('adds resize listener to visualViewport with viewPortChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(visualViewportAddEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortChanged);
                     });
                 });
-                it('adds orientationchange listener to screen.orientation with viewPortOrientationChanged handler', () => {
-                    specPopover.addViewportListeners();
-                    expect(screenOrientationAddEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                describe('scroll', () => {
+                    it('adds scroll listener to window when in scrollable container on desktop only', async () => {
+                        jest.spyOn(utils, 'isInScrollableContainer').mockReturnValue(true);
+                        jest.spyOn(utils, 'isMobile').mockReturnValue(false);
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).toHaveBeenCalledWith('scroll', specPopover.viewPortChanged, {
+                            passive: true,
+                            capture: true,
+                        });
+                    });
+                    it('does not add scroll listener on mobile', async () => {
+                        jest.spyOn(utils, 'isInScrollableContainer').mockReturnValue(true);
+                        jest.spyOn(utils, 'isMobile').mockReturnValue(true);
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).not.toHaveBeenCalledWith('scroll', specPopover.viewPortChanged, {
+                            passive: true,
+                            capture: true,
+                        });
+                    });
+                    it('does not add scroll listener in non-scrollable container', async () => {
+                        jest.spyOn(utils, 'isInScrollableContainer').mockReturnValue(false);
+                        jest.spyOn(utils, 'isMobile').mockReturnValue(false);
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).not.toHaveBeenCalledWith('scroll', specPopover.viewPortChanged, {
+                            passive: true,
+                            capture: true,
+                        });
+                    });
                 });
-                it('adds orientationchange listener to window with viewPortOrientationChanged handler', () => {
-                    specPopover.addViewportListeners();
-                    expect(windowAddEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                describe('orientationchange', () => {
+                    it('adds orientationchange listener to screen.orientation with viewPortOrientationChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(screenOrientationAddEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                    });
+                    it('adds orientationchange listener to window with viewPortOrientationChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                    });
                 });
-                it('adds all expected listeners when called', () => {
+                it('adds all expected listeners when called', async () => {
                     specPopover.addViewportListeners();
                     expect(windowAddEventListenerSpy).toHaveBeenCalled();
                     expect(visualViewportAddEventListenerSpy).toHaveBeenCalled();
@@ -523,48 +551,192 @@ describe('popover', () => {
                 let specPopover;
                 let controlElement;
                 let containerElement;
-                beforeEach(() => {
+                beforeEach(async () => {
                     specPopover = new Q2Popover();
+                    specPopover.setDirectionAndShow = jest.fn();
                     controlElement = document.createElement('div');
-                    containerElement = document.createElement('div');
                     specPopover.controlElement = controlElement;
+                    containerElement = document.createElement('div');
                     specPopover.containerElement = containerElement;
-                    window.visualViewport = { width: 800, height: 600 };
-                    specPopover.setDirectionAndShow = jest.fn();
                 });
-                it('sets the direction to up when control element has more space above it', async () => {
-                    const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                        top: 500,
-                        bottom: 550,
+                afterEach(() => {
+                    delete window.visualViewport;
+                    delete window.Tecton;
+                    delete window.innerHeight;
+                });
+                describe('when in a module', () => {
+                    beforeEach(async () => {
+                        window.Tecton = sampleTectonWindow;
+                        jest.spyOn(window, 'top', 'get').mockReturnValue({});
+                        specPopover.open = true;
+                        expect(specPopover.isModule).toBe(true);
+                    });
+                    describe("when the module is taller than the window's viewport", () => {
+                        beforeEach(() => {
+                            window.innerHeight = 1200;
+                        });
+                        it('sets the direction to down when control element has more space below it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 20,
+                                bottom: 70,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('700px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                        });
+                        it('sets the direction to up when control element has more space above it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 600,
+                                bottom: 650,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('590px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                        });
+                        describe('when the outletOffset is 0 or less', () => {
+                            beforeEach(() => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: -50 }) });
+                            });
+                            it('sets the direction to down when control element has more space below it', async () => {
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 20,
+                                    bottom: 70,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('770px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                            });
+                            it('sets the direction to up when control element has more space above it', async () => {
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 600,
+                                    bottom: 650,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('540px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                            });
+                        });
+                        describe('when the "top" platformDimension has a value', () => {
+                            beforeEach(() => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: 0, top: 50 }) });
+                            });
+                            it('takes the "top" into account when opening up', async () => {
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 600,
+                                    bottom: 650,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('540px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                            });
+                            it('ignores "top" when outletOffset is positive', async () => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: 20 }) });
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 600,
+                                    bottom: 650,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('590px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                            });
+                        });
+                        describe('when the "bottom" platformDimension has a value', () => {
+                            it('takes "bottom" into account when calculating space below', async () => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { bottom: 50 }) });
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 20,
+                                    bottom: 70,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('650px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                            });
+                        });
                     });
-                    await specPopover.determinePopDirection();
-                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
-                    expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
-                    controlSpy.mockRestore();
-                });
-                it('sets the direction to down when control element has more space below it', async () => {
-                    const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                        top: 100,
-                        bottom: 150,
+                    describe("when the module is shorter than the window's viewport", () => {
+                        beforeEach(() => {
+                            window.innerHeight = 600;
+                        });
+                        it('sets the direction to down when control element has more space below it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 20,
+                                bottom: 70,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('520px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                        });
+                        it('sets the direction to up when control element has more space above it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 500,
+                                bottom: 550,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                        });
                     });
-                    await specPopover.determinePopDirection();
-                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('440px');
-                    expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
-                    controlSpy.mockRestore();
                 });
-                it('sets the max-height CSS property on the container to a computed value when maxHeight is undefined', async () => {
-                    await specPopover.determinePopDirection();
-                    expect(specPopover.containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeTruthy();
+                describe('when at the platform level', () => {
+                    beforeEach(async () => {
+                        window.innerHeight = 600;
+                        expect(specPopover.isModule).toBe(false);
+                    });
+                    it('sets the direction to up when control element has more space above it', async () => {
+                        const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                            top: 500,
+                            bottom: 550,
+                        });
+                        await specPopover.determinePopDirection();
+                        expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
+                        expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                        controlSpy.mockRestore();
+                    });
+                    it('sets the direction to down when control element has more space below it', async () => {
+                        const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                            top: 100,
+                            bottom: 150,
+                        });
+                        await specPopover.determinePopDirection();
+                        expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('440px');
+                        expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                        controlSpy.mockRestore();
+                    });
                 });
             });
             describe('handleMinHeight', () => {
                 it('calls handleDeprecationWarning for minHeight', async () => {
                     specPopover = new Q2Popover();
-                    const handleDeprecationMock = jest.fn();
-                    handleDeprecationWarning = handleDeprecationMock;
+                    const mockHandleDeprecation = jest
+                        .spyOn(utils, 'handleDeprecationWarning')
+                        .mockImplementation(() => { });
                     specPopover.minHeight = 100;
                     specPopover.handleMinHeight();
-                    expect(handleDeprecationWarning).toHaveBeenCalled();
+                    expect(mockHandleDeprecation).toHaveBeenCalled();
+                });
+            });
+            describe('handlePopoverToggleEvent', () => {
+                it('emits the popoverStateChanged event', async () => {
+                    specPopover = new Q2Popover();
+                    const mockEmit = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                    specPopover.handlePopoverToggleEvent({});
+                    expect(mockEmit).toHaveBeenCalled();
+                });
+                describe('when the newState from the ToggleEvent is "open"', () => {
+                    it('emits the popoverStateChanged event open as true', async () => {
+                        specPopover = new Q2Popover();
+                        const mockEmit = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                        specPopover.handlePopoverToggleEvent({ newState: 'open' });
+                        expect(mockEmit).toHaveBeenCalledWith({ open: true });
+                    });
+                });
+                describe('when the newState from the ToggleEvent is "closed"', () => {
+                    it('emits the popoverStateChanged event open as false', async () => {
+                        specPopover = new Q2Popover();
+                        const mockEmit = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                        specPopover.handlePopoverToggleEvent({ newState: 'closed' });
+                        expect(mockEmit).toHaveBeenCalledWith({ open: false });
+                    });
                 });
             });
             describe('removeViewportListeners', () => {
@@ -606,23 +778,23 @@ describe('popover', () => {
                     delete window.visualViewport;
                     delete window.screen;
                 });
-                it('removes resize listener from window with viewPortOrientationChanged handler', () => {
+                it('removes resize listener from window with viewPortOrientationChanged handler', async () => {
                     specPopover.removeViewportListeners();
                     expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortOrientationChanged);
                 });
-                it('removes resize listener from visualViewport with viewPortChanged handler', () => {
+                it('removes resize listener from visualViewport with viewPortChanged handler', async () => {
                     specPopover.removeViewportListeners();
                     expect(visualViewportRemoveEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortChanged);
                 });
-                it('removes scroll listener from window with viewPortChanged handler and proper options', () => {
+                it('removes scroll listener from window with viewPortChanged handler and proper options', async () => {
                     specPopover.removeViewportListeners();
                     expect(windowRemoveEventListenerSpy).toHaveBeenNthCalledWith(2, 'scroll', specPopover.viewPortChanged, { capture: true });
                 });
-                it('removes orientationchange listener from screen.orientation with viewPortOrientationChanged handler', () => {
+                it('removes orientationchange listener from screen.orientation with viewPortOrientationChanged handler', async () => {
                     specPopover.removeViewportListeners();
                     expect(screenOrientationRemoveEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
                 });
-                it('removes orientationchange listener from window with viewPortOrientationChanged handler', () => {
+                it('removes orientationchange listener from window with viewPortOrientationChanged handler', async () => {
                     specPopover.removeViewportListeners();
                     expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
                 });
@@ -812,101 +984,5 @@ describe('popover', () => {
             });
         });
     });
-    describe('when in a module', () => {
-        let specPopover;
-        let windowSpy;
-        let controlElement;
-        let containerElement;
-        beforeEach(async () => {
-            specPopover = new Q2Popover();
-            windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
-            window.Tecton = sampleTectonWindow;
-            expect(specPopover.isModule).toBe(true);
-            controlElement = document.createElement('div');
-            specPopover.controlElement = controlElement;
-            containerElement = document.createElement('div');
-            specPopover.containerElement = containerElement;
-        });
-        afterEach(() => {
-            windowSpy.mockRestore();
-        });
-        describe("when the module is taller than the window's viewport", () => {
-            beforeEach(() => {
-                specPopover.open = true;
-                window.visualViewport = { height: 1200 };
-            });
-            it('sets the direction to down when control element has more space below it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 20,
-                    bottom: 70,
-                });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('700px');
-                expect(specPopover.currentDirection).toBe('down');
-                controlSpy.mockRestore();
-            });
-            it('sets the direction to up when control element has more space above it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 600,
-                    bottom: 650,
-                });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('590px');
-                expect(specPopover.currentDirection).toBe('up');
-                controlSpy.mockRestore();
-            });
-            describe('when the outletOffset is less than 0', () => {
-                beforeEach(() => {
-                    window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: -50 }) });
-                });
-                it('sets the direction to down when control element has more space below it', async () => {
-                    const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                        top: 20,
-                        bottom: 70,
-                    });
-                    await specPopover.determinePopDirection();
-                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('770px');
-                    expect(specPopover.currentDirection).toBe('down');
-                    controlSpy.mockRestore();
-                });
-                it('sets the direction to up when control element has more space above it', async () => {
-                    const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                        top: 600,
-                        bottom: 650,
-                    });
-                    await specPopover.determinePopDirection();
-                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('540px');
-                    expect(specPopover.currentDirection).toBe('up');
-                    controlSpy.mockRestore();
-                });
-            });
-        });
-        describe("when the module is shorter than the window's viewport", () => {
-            beforeEach(() => {
-                specPopover.open = true;
-                window.visualViewport = { height: 600 };
-            });
-            it('sets the direction to down when control element has more space below it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 20,
-                    bottom: 70,
-                });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('520px');
-                expect(specPopover.currentDirection).toBe('down');
-                controlSpy.mockRestore();
-            });
-            it('sets the direction to up when control element has more space above it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 500,
-                    bottom: 550,
-                });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
-                expect(specPopover.currentDirection).toBe('up');
-                controlSpy.mockRestore();
-            });
-        });
-    });
 });
 //# sourceMappingURL=q2-popover-test.spec.js.map