q2-tecton-elements 1.50.1 → 1.51.1

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

@@ -14,19 +14,6 @@ describe('q2-popover', () => {
         const page = await setup({ html: '<q2-popover></q2-popover>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-popover')).toHaveLength(0);
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: `
-                    <q2-popover>
-                        <div style="height: 400px; width: 200px"></div>
-                    </q2-popover>
-                `,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     describe('Props', () => {
         describe('open', () => {
             beforeEach(async () => {
@@ -131,232 +118,280 @@ describe('q2-popover', () => {
                 });
             });
         });
-    });
-    describe('Events', () => {
-        describe('popoverState', () => {
-            it('opens the popover when open is passed as true', async () => {
+        describe('maxHeight', () => {
+            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');
-                const stateSpy = await popover.spyOnEvent('popoverStateChanged');
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(stateSpy).toHaveReceivedEventDetail({ open: true });
             });
-            it('closes the popover when open is passed as false', async () => {
-                page = await setup({
-                    html: `<q2-popover open></q2-popover>`,
+            describe('when provided value is smaller than the available space', () => {
+                it('implements the provided value', async () => {
+                    popover.setProperty('maxHeight', '200px');
+                    await page.waitForChanges();
+                    expect((await popoverContainer.getComputedStyle()).display).toEqual('none');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect((await popoverContainer.getComputedStyle()).display).toEqual('block');
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getPopProperty('--comp-pop-max-height')).toBe('200px');
+                });
+            });
+            describe('when provided value is larger than the available space', () => {
+                it('implements the available space', async () => {
+                    popover.setProperty('maxHeight', '500px');
+                    await page.waitForChanges();
+                    expect((await popoverContainer.getComputedStyle()).display).toEqual('none');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect((await popoverContainer.getComputedStyle()).display).toEqual('block');
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getPopProperty('--comp-pop-max-height')).toBe('390px');
+                });
+            });
+            describe('when value is not provided', () => {
+                it('implements the available space', async () => {
+                    expect((await popoverContainer.getComputedStyle()).display).toEqual('none');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect((await popoverContainer.getComputedStyle()).display).toEqual('block');
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getPopProperty('--comp-pop-max-height')).toBe('390px');
                 });
-                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(popover).toHaveAttribute('open');
-                await dispatchPopoverState({ open: false });
-                await page.waitForChanges();
-                expect(popover).not.toHaveAttribute('open');
-                expect(stateSpy).toHaveReceivedEventDetail({ open: false });
             });
         });
-    });
-    describe('Methods', () => {
-        describe('toggle', () => {
-            it('toggles the value of open', async () => {
-                const popover = new Q2Popover();
-                expect(popover.open).toBeUndefined();
-                popover.toggle();
-                expect(popover.open).toBe(true);
-                popover.toggle();
-                expect(popover.open).toBe(false);
+        describe('Events', () => {
+            describe('popoverState', () => {
+                it('opens the popover when open is passed as true', async () => {
+                    page = await setup({
+                        html: `<q2-popover></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(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(stateSpy).toHaveReceivedEventDetail({ open: true });
+                });
+                it('closes the popover when open is passed as false', async () => {
+                    page = await setup({
+                        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(popover).toHaveAttribute('open');
+                    await dispatchPopoverState({ open: false });
+                    await page.waitForChanges();
+                    expect(popover).not.toHaveAttribute('open');
+                    expect(stateSpy).toHaveReceivedEventDetail({ open: false });
+                });
             });
         });
-        describe('scrollContainerTo', () => {
-            it('scrolls the container to the given position', async () => {
-                page = await setup({
-                    html: `
+        describe('Methods', () => {
+            describe('toggle', () => {
+                it('toggles the value of open', async () => {
+                    const popover = new Q2Popover();
+                    expect(popover.open).toBeUndefined();
+                    popover.toggle();
+                    expect(popover.open).toBe(true);
+                    popover.toggle();
+                    expect(popover.open).toBe(false);
+                });
+            });
+            describe('scrollContainerTo', () => {
+                it('scrolls the container to the given position', async () => {
+                    page = await setup({
+                        html: `
                         <q2-popover>
                             <div style="height: 2000px"></div>
                         </q2-popover>
                     `,
+                    });
+                    await page.setViewport({ width: 800, height: 400 });
+                    popover = await page.find('q2-popover');
+                    popoverContainer = await page.find('q2-popover >>> .container');
+                    popover.setProperty('open', true);
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    await popover.callMethod('scrollContainerTo', { top: 1000 });
+                    await page.waitForChanges();
+                    expect(await getNestedElementProperty(page, ['q2-popover', '.container'], 'scrollTop')).toBe(1000);
+                    await popover.callMethod('scrollContainerTo', { top: 0 });
+                    await page.waitForChanges();
+                    expect(await getNestedElementProperty(page, ['q2-popover', '.container'], 'scrollTop')).toBe(0);
                 });
-                await page.setViewport({ width: 800, height: 400 });
-                popover = await page.find('q2-popover');
-                popoverContainer = await page.find('q2-popover >>> .container');
-                popover.setProperty('open', true);
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                await popover.callMethod('scrollContainerTo', { top: 1000 });
-                await page.waitForChanges();
-                expect(await getNestedElementProperty(page, ['q2-popover', '.container'], 'scrollTop')).toBe(1000);
-                await popover.callMethod('scrollContainerTo', { top: 0 });
-                await page.waitForChanges();
-                expect(await getNestedElementProperty(page, ['q2-popover', '.container'], 'scrollTop')).toBe(0);
             });
         });
-    });
-    describe('determinePopDirection', () => {
-        describe('when control element has more space below it', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `
+        describe('determinePopDirection', () => {
+            describe('when control element has more space below it', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `
                         <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) => {
+                        const controlElement = document.querySelector('#control');
+                        el.controlElement = controlElement;
+                    });
                 });
-                // 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) => {
-                    const controlElement = document.querySelector('#control');
-                    el.controlElement = controlElement;
+                it('auto-determines the direction to be down', async () => {
+                    expect(popover).not.toHaveAttribute('direction');
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(popoverContainer).not.toHaveClass('up');
+                    expect(popoverContainer).toHaveClass('down');
+                });
+                it('sets currentDirection state variable to down', async () => {
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(popoverContainer).not.toHaveClass('up');
+                    expect(popoverContainer).toHaveClass('down');
+                });
+                it('displays popover content within viewport', async () => {
+                    expect(popover).not.toHaveAttribute('direction');
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    const containerStyle = await popoverContainer.getComputedStyle();
+                    const maxHeight = parseInt(await getPopProperty('--comp-pop-max-height'));
+                    expect(parseInt(containerStyle.height)).toBeLessThan(400);
+                    expect(maxHeight).toBeLessThan(400);
                 });
             });
-            it('auto-determines the direction to be down', async () => {
-                expect(popover).not.toHaveAttribute('direction');
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(popoverContainer).not.toHaveClass('up');
-                expect(popoverContainer).toHaveClass('down');
-            });
-            it('sets currentDirection state variable to down', async () => {
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(popoverContainer).not.toHaveClass('up');
-                expect(popoverContainer).toHaveClass('down');
-            });
-            it('displays popover content within viewport', async () => {
-                expect(popover).not.toHaveAttribute('direction');
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                const containerStyle = await popoverContainer.getComputedStyle();
-                const maxHeight = parseInt(await getPopProperty('--comp-pop-max-height'));
-                expect(parseInt(containerStyle.height)).toBeLessThan(400);
-                expect(maxHeight).toBeLessThan(400);
-            });
-        });
-        describe('when control element has more space above it', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `
+            describe('when control element has more space above it', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `
                         <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) => {
+                        const controlElement = document.querySelector('#control');
+                        el.controlElement = controlElement;
+                    });
                 });
-                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('auto-determines the direction to be up', async () => {
+                    expect(popover).not.toHaveAttribute('direction');
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(popoverContainer).not.toHaveClass('down');
+                    expect(popoverContainer).toHaveClass('up');
+                });
+                it('sets currentDirection state variable to up', async () => {
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    expect(popoverContainer).not.toHaveClass('down');
+                    expect(popoverContainer).toHaveClass('up');
+                });
+                it('displays popover content within viewport', async () => {
+                    expect(popover).not.toHaveAttribute('direction');
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    const containerStyle = await popoverContainer.getComputedStyle();
+                    const maxHeight = parseInt(await getPopProperty('--comp-pop-max-height'));
+                    expect(parseInt(containerStyle.height)).toBeLessThan(400);
+                    expect(maxHeight).toBeLessThan(400);
                 });
             });
-            it('auto-determines the direction to be up', async () => {
-                expect(popover).not.toHaveAttribute('direction');
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(popoverContainer).not.toHaveClass('down');
-                expect(popoverContainer).toHaveClass('up');
-            });
-            it('sets currentDirection state variable to up', async () => {
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                expect(popoverContainer).not.toHaveClass('down');
-                expect(popoverContainer).toHaveClass('up');
-            });
-            it('displays popover content within viewport', async () => {
-                expect(popover).not.toHaveAttribute('direction');
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                const containerStyle = await popoverContainer.getComputedStyle();
-                const maxHeight = parseInt(await getPopProperty('--comp-pop-max-height'));
-                expect(parseInt(containerStyle.height)).toBeLessThan(400);
-                expect(maxHeight).toBeLessThan(400);
-            });
-        });
-        describe('when page is resized', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `
+            describe('when page is resized', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `
                         <div style="height: 50px; " id="control"></div>
                         <q2-popover block>
                             <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 });
-                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('recalculates the width when block is true', async () => {
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    let width = await getPopProperty('--comp-pop-width');
+                    expect(parseInt(width)).toBeLessThan(800);
+                    await page.setViewport({ width: 200, height: 600 });
+                    await page.waitForChanges();
+                    width = await getPopProperty('--comp-pop-width');
+                    expect(parseInt(width)).toBeLessThan(200);
+                });
+                it('recalculates the max-height when page orientation changes', async () => {
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    let maxHeight = await getPopProperty('--comp-pop-max-height');
+                    expect(parseInt(maxHeight)).toBeLessThan(800);
+                    await page.setViewport({ width: 800, height: 600, isLandscape: true });
+                    await page.waitForChanges();
+                    maxHeight = await getPopProperty('--comp-pop-max-height');
+                    expect(parseInt(maxHeight)).toBeLessThan(600);
+                });
+                it('recalculates the max-height when the viewport is resized', async () => {
+                    expect(popover).not.toHaveAttribute('open');
+                    await dispatchPopoverState({ open: true });
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    let maxHeight = await getPopProperty('--comp-pop-max-height');
+                    expect(parseInt(maxHeight)).toBeLessThan(800);
+                    await page.setViewport({ width: 800, height: 600 });
+                    await page.waitForChanges();
+                    maxHeight = await getPopProperty('--comp-pop-max-height');
+                    expect(parseInt(maxHeight)).toBeLessThan(600);
                 });
             });
-            it('recalculates the width when block is true', async () => {
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                let width = await getPopProperty('--comp-pop-width');
-                expect(parseInt(width)).toBeLessThan(800);
-                await page.setViewport({ width: 200, height: 600 });
-                await page.waitForChanges();
-                width = await getPopProperty('--comp-pop-width');
-                expect(parseInt(width)).toBeLessThan(200);
-            });
-            it('recalculates the max-height when page orientation changes', async () => {
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                let maxHeight = await getPopProperty('--comp-pop-max-height');
-                expect(parseInt(maxHeight)).toBeLessThan(800);
-                await page.setViewport({ width: 800, height: 600, isLandscape: true });
-                await page.waitForChanges();
-                maxHeight = await getPopProperty('--comp-pop-max-height');
-                expect(parseInt(maxHeight)).toBeLessThan(600);
-            });
-            it('recalculates the max-height when the viewport is resized', async () => {
-                expect(popover).not.toHaveAttribute('open');
-                await dispatchPopoverState({ open: true });
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                let maxHeight = await getPopProperty('--comp-pop-max-height');
-                expect(parseInt(maxHeight)).toBeLessThan(800);
-                await page.setViewport({ width: 800, height: 600 });
-                await page.waitForChanges();
-                maxHeight = await getPopProperty('--comp-pop-max-height');
-                expect(parseInt(maxHeight)).toBeLessThan(600);
-            });
-        });
-        describe('when page is scrolled', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `
+            describe('when page is scrolled', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `
                         <div style="height: 300px"></div>
                         <div style="height: 50px; width: 200px; background: black;" id="control"></div>
                         <q2-popover>
@@ -364,51 +399,33 @@ describe('q2-popover', () => {
                         </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 });
-                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('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');
-                // Scroll down 300px
-                await page.$eval('#control', () => {
-                    window.scrollBy(0, 300);
-                    window.visualViewport.dispatchEvent(new Event('scroll'));
+                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');
+                    // Scroll down 300px
+                    await page.$eval('#control', () => {
+                        window.scrollBy(0, 300);
+                        window.visualViewport.dispatchEvent(new Event('scroll'));
+                    });
+                    await page.waitForChanges();
+                    expect(popoverContainer).toHaveClass('up');
                 });
-                await page.waitForChanges();
-                expect(popoverContainer).toHaveClass('up');
             });
         });
     });
-    describe('Accessibility', () => {
-        it('does not hide q2-option elements from a screen reader (TCT-2080)', async () => {
-            page = await setup({
-                html: `
-                    <q2-popover open>
-                        <q2-option-list>
-                            <q2-option value="1">Account 1</q2-option>
-                            <q2-option value="2">Account 2</q2-option>
-                            <q2-option value="3">Account 3</q2-option>
-                        </q2-option-list>
-                    <q2-popover>
-                `,
-            });
-            const snapshot = await page.accessibility.snapshot({
-                root: await page.$('q2-option'),
-            });
-            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 () => {
@@ -595,5 +612,48 @@ describe('q2-popover', () => {
             });
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-popover>
+                            <div style="height: 400px; width: 200px"></div>
+                        </q2-popover>
+                    `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => {
+            it('properly hides and shows options to the accessibility tree (TCT-2080)', async () => {
+                page = await setup({
+                    html: `
+                        <q2-popover>
+                            <q2-option-list>
+                                <q2-option value="1">Account 1</q2-option>
+                                <q2-option value="2">Account 2</q2-option>
+                                <q2-option value="3">Account 3</q2-option>
+                            </q2-option-list>
+                        <q2-popover>
+                    `,
+                });
+                let snapshot = await page.accessibility.snapshot({
+                    root: await page.$('q2-option'),
+                });
+                expect(snapshot).toBeNull();
+                const popover = await page.find('q2-popover');
+                await popover.setProperty('open', true);
+                await page.waitForChanges();
+                snapshot = await page.accessibility.snapshot({
+                    root: await page.$('q2-option'),
+                });
+                expect(snapshot.name).toEqual('Account 1');
+            });
+        });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-popover-test.e2e.js.map