q2-tecton-elements 1.37.1 → 1.38.1

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

@@ -4,6 +4,18 @@ describe('popover', () => {
   let page;
   let popover;
   let popoverContainer;
+  const samplePlatformDimensions = {
+    scrollY: 0,
+    innerHeight: 800,
+    innerWidth: 600,
+    outletOffset: 20,
+  };
+  const sampleTectonWindow = {
+    inMobileApp: false,
+    noStrings: false,
+    platformUrl: '',
+    platformDimensions: samplePlatformDimensions,
+  };
   const dispatchPopoverState = async (state) => {
     await page.$eval('q2-popover', (el, { open }) => el.dispatchEvent(new CustomEvent('popoverState', { detail: { open } })), state);
   };
@@ -15,35 +27,43 @@ describe('popover', () => {
   };
   describe('Props', () => {
     describe('open', () => {
-      it('opens the popover when the open property is changed to true', async () => {
+      beforeEach(async () => {
         page = await setup({
-          html: `<q2-popover><q2-popover>`,
+          html: `
+                        <q2-popover>
+                            <div style="height: 400px; width: 200px"></div>
+                        </q2-popover>
+                    `,
         });
+        await page.setViewport({ width: 800, height: 400 });
+        await page.waitForChanges();
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
+        await page.$eval('q2-popover', (el) => {
+          const controlElement = document.querySelector('#control');
+          el.controlElement = controlElement;
+        });
+      });
+      it('opens the popover when the open property is changed to true', async () => {
         const stateSpy = await popover.spyOnEvent('popoverStateChanged');
         expect((await popoverContainer.getComputedStyle()).display).toEqual('none');
         expect(popoverContainer).not.toHaveClass('show');
         expect(popover).not.toHaveAttribute('open');
-        await popover.setProperty('open', true);
+        popover.setProperty('open', true);
         await page.waitForChanges();
-        expect((await popoverContainer.getComputedStyle()).display).toEqual('block');
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('show');
+        expect((await popoverContainer.getComputedStyle()).display).toEqual('block');
         expect(stateSpy).toHaveReceivedEventDetail({ open: true });
       });
       it('closes the popover when the open property is changed to false', async () => {
-        page = await setup({
-          html: `<q2-popover open><q2-popover>`,
-        });
-        await page.waitForChanges();
-        popover = await page.find('q2-popover');
-        popoverContainer = await page.find('q2-popover >>> .container');
         const stateSpy = await popover.spyOnEvent('popoverStateChanged');
+        popover.setProperty('open', true);
+        await page.waitForChanges();
         expect((await popoverContainer.getComputedStyle()).display).toEqual('block');
         expect(popoverContainer).toHaveClass('show');
         expect(popover).toHaveAttribute('open');
-        await popover.setProperty('open', false);
+        popover.setProperty('open', false);
         await page.waitForChanges();
         expect((await popoverContainer.getComputedStyle()).display).toEqual('none');
         expect(popover).not.toHaveAttribute('open');
@@ -51,25 +71,14 @@ describe('popover', () => {
         expect(stateSpy).toHaveReceivedEventDetail({ open: false });
       });
       it('adds and removes the currentDirection and --comp-pop-max-height property', async () => {
-        page = await setup({
-          html: `
-                        <q2-popover>
-                            <div style="height: 500px"></div>
-                        <q2-popover>
-                    `,
-        });
-        await page.setViewport({ width: 800, height: 400 });
-        await page.waitForChanges();
-        popover = await page.find('q2-popover');
-        popoverContainer = await page.find('q2-popover >>> .container');
         const stateSpy = await popover.spyOnEvent('popoverStateChanged');
-        await popover.setProperty('open', true);
+        popover.setProperty('open', true);
         await page.waitForChanges();
         expect(popoverContainer).toHaveClass('show');
         expect(popoverContainer).toHaveClass('down');
         expect(popover).toHaveAttribute('open');
-        expect(await getPopMaxHeight()).toBe('395px');
-        await popover.setProperty('open', false);
+        expect(await getPopMaxHeight()).toBe('390px');
+        popover.setProperty('open', false);
         await page.waitForChanges();
         expect(popover).not.toHaveAttribute('open');
         expect(popoverContainer).not.toHaveClass('show');
@@ -80,10 +89,24 @@ describe('popover', () => {
     });
     describe('direction', () => {
       describe('when provided', () => {
-        it('sets currentDirection to provided value', async () => {
-          page = await setup({ html: `<q2-popover direction='up'><q2-popover>` });
+        beforeEach(async () => {
+          page = await setup({
+            html: `
+                        <q2-popover direction="up" id="control">
+                            <div style="height: 400px; width: 200px"></div>
+                        </q2-popover>
+                    `,
+          });
+          await page.setViewport({ width: 800, height: 400 });
+          await page.waitForChanges();
           popover = await page.find('q2-popover');
           popoverContainer = await page.find('q2-popover >>> .container');
+          await page.$eval('q2-popover', (el) => {
+            const controlElement = document.querySelector('#control');
+            el.controlElement = controlElement;
+          });
+        });
+        it('sets currentDirection to provided value', async () => {
           expect((await popoverContainer.getComputedStyle()).display).toEqual('none');
           await dispatchPopoverState({ open: true });
           await page.waitForChanges();
@@ -98,14 +121,17 @@ describe('popover', () => {
     describe('popoverState', () => {
       it('opens the popover when open is passed as true', async () => {
         page = await setup({
-          html: `<q2-popover><q2-popover>`,
+          html: `<q2-popover></q2-popover>`,
         });
+        // await setBodyHeight();
+        await page.setViewport({ width: 800, height: 400 });
+        await page.waitForChanges();
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
         const stateSpy = await popover.spyOnEvent('popoverStateChanged');
         expect(popoverContainer).not.toHaveClass('show');
         expect(popover).not.toHaveAttribute('open');
-        await page.$eval('q2-popover', el => el.dispatchEvent(new CustomEvent('popoverState', { detail: { open: true } })));
+        await dispatchPopoverState({ open: true });
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('show');
@@ -113,15 +139,16 @@ describe('popover', () => {
       });
       it('closes the popover when open is passed as false', async () => {
         page = await setup({
-          html: `<q2-popover open><q2-popover>`,
+          html: `<q2-popover open></q2-popover>`,
         });
+        await page.setViewport({ width: 800, height: 400 });
         await page.waitForChanges();
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
         const stateSpy = await popover.spyOnEvent('popoverStateChanged');
         expect(popoverContainer).toHaveClass('show');
         expect(popover).toHaveAttribute('open');
-        await page.$eval('q2-popover', el => el.dispatchEvent(new CustomEvent('popoverState', { detail: { open: false } })));
+        await dispatchPopoverState({ open: false });
         await page.waitForChanges();
         expect(popover).not.toHaveAttribute('open');
         expect(popoverContainer).not.toHaveClass('show');
@@ -146,13 +173,13 @@ describe('popover', () => {
           html: `
                         <q2-popover>
                             <div style="height: 2000px"></div>
-                        <q2-popover>
+                        </q2-popover>
                     `,
         });
         await page.setViewport({ width: 800, height: 400 });
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
-        await popover.setProperty('open', true);
+        popover.setProperty('open', true);
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('show');
@@ -167,17 +194,52 @@ describe('popover', () => {
       });
     });
   });
+  describe('Getters', () => {
+    let specPopover;
+    beforeEach(() => {
+      specPopover = new Q2Popover();
+    });
+    describe('isModule', () => {
+      it('returns false when window top matches window and platformDimensions is not defined', async () => {
+        expect(window.top).toBe(window);
+        expect(window.Tecton).toBeUndefined();
+        expect(specPopover.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(specPopover.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(specPopover.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(specPopover.isModule).toBe(true);
+        windowSpy.mockRestore();
+      });
+    });
+  });
   describe('determinePopDirection', () => {
-    describe('when minHeight is not present on dropdownContainer', () => {
+    describe('when control element has more space below it', () => {
       beforeEach(async () => {
         page = await setup({
           html: `
-                        <div style="height: 50px" id="control"></div>
-                        <q2-popover>
-                            <div style="height: 300px"></div>
+                        <div style="height: 44px; width: 400px; background: black; position: fixed; top: 10px;" id="control"></div>
                         <q2-popover>
+                            <div style="height: 500px"></div>
+                        </q2-popover>
                     `,
         });
+        // await setBodyHeight();
+        await page.setViewport({ width: 800, height: 400 });
+        await page.waitForChanges();
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
         await page.$eval('q2-popover', (el) => {
@@ -185,44 +247,52 @@ describe('popover', () => {
           el.controlElement = controlElement;
         });
       });
-      it('sets currentDirection to down if there is enough space below', async () => {
-        await page.setViewport({ width: 800, height: 400 });
+      it('auto-determines the direction to be down', async () => {
+        expect(popover).not.toHaveAttribute('direction');
         expect(popover).not.toHaveAttribute('open');
         expect(popoverContainer).not.toHaveClass('show');
         await dispatchPopoverState({ open: true });
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('show');
+        expect(popoverContainer).not.toHaveClass('up');
         expect(popoverContainer).toHaveClass('down');
-        expect(await getPopOffset()).toBeFalsy();
       });
-      it('sets currentDirection to up if there is not enough space below', async () => {
-        await page.$eval('q2-popover', (el) => {
-          const controlElement = document.querySelector('#control');
-          controlElement.setAttribute('style', 'height: 50px; margin-top: 350px');
-          el.controlElement = controlElement;
-        });
-        await page.setViewport({ width: 800, height: 400 });
+      it('sets currentDirection state variable to down', async () => {
         expect(popover).not.toHaveAttribute('open');
         expect(popoverContainer).not.toHaveClass('show');
         await dispatchPopoverState({ open: true });
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('show');
-        expect(popoverContainer).toHaveClass('up');
-        expect(await getPopOffset()).toBe('50px');
+        expect(popoverContainer).not.toHaveClass('up');
+        expect(popoverContainer).toHaveClass('down');
+        expect(await getPopOffset()).toBeFalsy();
+      });
+      it('displays popover content within viewport', async () => {
+        expect(popover).not.toHaveAttribute('direction');
+        expect(popover).not.toHaveAttribute('open');
+        expect(popoverContainer).not.toHaveClass('show');
+        await dispatchPopoverState({ open: true });
+        await page.waitForChanges();
+        const containerStyle = await popoverContainer.getComputedStyle();
+        const maxHeight = parseInt(await getPopMaxHeight());
+        expect(parseInt(containerStyle.height)).toBeLessThan(400);
+        expect(maxHeight).toBeLessThan(400);
       });
     });
-    describe('when minHeight is present on dropdownContainer', () => {
+    describe('when control element has more space above it', () => {
       beforeEach(async () => {
         page = await setup({
           html: `
-                        <div style="height: 50px" id="control"></div>
-                        <q2-popover min-height="250">
-                            <div style="height: 500px"></div>
+                        <div style="height: 44px; width: 400px; background: black; position: fixed; top: 350px" id="control"></div>
                         <q2-popover>
+                            <div style="height: 500px"></div>
+                        </q2-popover>
                     `,
         });
+        await page.setViewport({ width: 800, height: 400 });
+        await page.waitForChanges();
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
         await page.$eval('q2-popover', (el) => {
@@ -230,36 +300,38 @@ describe('popover', () => {
           el.controlElement = controlElement;
         });
       });
-      it('sets currentDirection to down and maxheight to minPopHeight', async () => {
-        await page.setViewport({ width: 800, height: 313 });
+      it('auto-determines the direction to be up', async () => {
+        expect(popover).not.toHaveAttribute('direction');
         expect(popover).not.toHaveAttribute('open');
         expect(popoverContainer).not.toHaveClass('show');
         await dispatchPopoverState({ open: true });
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('show');
-        expect(popoverContainer).toHaveClass('down');
-        expect(await getPopMaxHeight()).toBe('250px');
+        expect(popoverContainer).not.toHaveClass('down');
+        expect(popoverContainer).toHaveClass('up');
       });
-      it('sets currentDirection to down and maxheight to available space', async () => {
-        await page.setViewport({ width: 800, height: 350 });
+      it('sets currentDirection state variable to up', async () => {
         expect(popover).not.toHaveAttribute('open');
         expect(popoverContainer).not.toHaveClass('show');
         await dispatchPopoverState({ open: true });
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('show');
-        expect(popoverContainer).toHaveClass('down');
-        expect(await getPopMaxHeight()).toBe('287px');
+        expect(popoverContainer).not.toHaveClass('down');
+        expect(popoverContainer).toHaveClass('up');
+        expect(await getPopOffset()).toBeTruthy();
       });
-      it('sets currentDirection to up and maxheight to minPopHeight', async () => {
-        await page.setViewport({ width: 800, height: 312 });
+      it('displays popover content within viewport', async () => {
+        expect(popover).not.toHaveAttribute('direction');
         expect(popover).not.toHaveAttribute('open');
+        expect(popoverContainer).not.toHaveClass('show');
         await dispatchPopoverState({ open: true });
         await page.waitForChanges();
-        expect(popover).toHaveAttribute('open');
-        expect(popoverContainer).toHaveClass('up');
-        expect(await getPopMaxHeight()).toBe('250px');
+        const containerStyle = await popoverContainer.getComputedStyle();
+        const maxHeight = parseInt(await getPopMaxHeight());
+        expect(parseInt(containerStyle.height)).toBeLessThan(400);
+        expect(maxHeight).toBeLessThan(400);
       });
     });
     describe('when page is resized', () => {
@@ -267,18 +339,19 @@ describe('popover', () => {
         page = await setup({
           html: `
                         <div style="height: 50px; " id="control"></div>
-                        <q2-popover min-height="250">
+                        <q2-popover>
                             <div style="height: 800px"></div>
                         <q2-popover>
                     `,
         });
+        await page.setViewport({ width: 800, height: 800 });
+        await page.waitForChanges();
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
         await page.$eval('q2-popover', (el) => {
           const controlElement = document.querySelector('#control');
           el.controlElement = controlElement;
         });
-        await page.setViewport({ width: 800, height: 800 });
       });
       it('recalculates the max-height while keeping the direction the same', async () => {
         expect(popover).not.toHaveAttribute('open');
@@ -286,48 +359,144 @@ describe('popover', () => {
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('down');
-        expect(await getPopMaxHeight()).toBe('737px');
+        let maxHeight = await getPopMaxHeight();
+        expect(parseInt(maxHeight)).toBeLessThan(800);
         await page.setViewport({ width: 800, height: 600 });
         await page.waitForChanges();
+        maxHeight = await getPopMaxHeight();
         // Direction didn't change but the max-height did
         expect(popoverContainer).toHaveClass('down');
-        expect(await getPopMaxHeight()).toBe('537px');
+        expect(parseInt(maxHeight)).toBeLessThan(600);
       });
     });
-    describe.skip('when page is scrolled', () => {
+    describe('when page is scrolled', () => {
       beforeEach(async () => {
         page = await setup({
           html: `
-                        <div style="height: 50px; margin-top: 750px" id="control"></div>
-                        <q2-popover min-height="250">
-                            <div style="height: 800px"></div>
+                        <div style="height: 300px"></div>
+                        <div style="height: 50px; width: 200px; background: black;" id="control"></div>
                         <q2-popover>
+                            <div style="height: 800px"></div>
+                        </q2-popover>
+                        <div> style="height: 500px"</div>
                     `,
         });
+        await page.setViewport({ width: 800, height: 400 });
+        await page.waitForChanges();
         popover = await page.find('q2-popover');
         popoverContainer = await page.find('q2-popover >>> .container');
         await page.$eval('q2-popover', (el) => {
           const controlElement = document.querySelector('#control');
           el.controlElement = controlElement;
         });
-        await page.setViewport({ width: 800, height: 400 });
       });
-      it('recalculates the max-height while keeping the direction the same', async () => {
+      it('maintains its current direction until closed', async () => {
         expect(popover).not.toHaveAttribute('open');
         await dispatchPopoverState({ open: true });
         await page.waitForChanges();
         expect(popover).toHaveAttribute('open');
         expect(popoverContainer).toHaveClass('up');
-        expect(await getPopMaxHeight()).toBe('745px');
         // Scroll down 300px
         await page.$eval('#control', () => {
           window.scrollBy(0, 300);
           window.visualViewport.dispatchEvent(new Event('scroll'));
         });
         await page.waitForChanges();
-        // Direction didn't change but the max-height did
         expect(popoverContainer).toHaveClass('up');
-        expect(await getPopMaxHeight()).toBe('445px');
+      });
+    });
+    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(() => {
+          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(() => {
+          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();
+        });
       });
     });
   });
@@ -350,5 +519,26 @@ describe('popover', () => {
       expect(snapshot.name).toEqual('Account 1');
     });
   });
+  describe('Deprecations', () => {
+    describe('calls console.warn for deprecated `minHeight` prop', () => {
+      it('by using handleDeprecationWarning if set on popover element', async () => {
+        const warnMock = jest.spyOn(console, 'warn');
+        page = await setup({ html: `<q2-popover min-height="100"></q2-popover>` });
+        await page.waitForChanges();
+        expect(warnMock).toHaveBeenCalledTimes(1);
+        warnMock.mockReset();
+      });
+      it('by using handleDeprecationWarning if set after componentDidLoad', async () => {
+        const warnMock = jest.spyOn(console, 'warn');
+        page = await setup({ html: `<q2-popover></q2-popover>` });
+        popover = await page.find('q2-popover');
+        expect(warnMock).toHaveBeenCalledTimes(0);
+        popover.setAttribute('min-height', '100');
+        await page.waitForChanges();
+        expect(warnMock).toHaveBeenCalledTimes(1);
+        warnMock.mockReset();
+      });
+    });
+  });
 });
 //# sourceMappingURL=q2-popover-test.e2e.js.map