q2-tecton-elements 1.49.2 → 1.50.1

package/dist/{test/elements → collection/components/q2-carousel/test}/q2-carousel-test.e2e.js

@@ -1,4 +1,4 @@
-import { setup, dispatchEvent, testDeprecatedAriaLabel, getNestedElementStyle, getNestedElementProperty, evaluateA11y, } from "../helpers";
+import { setup, dispatchEvent, testDeprecatedAriaLabel, getNestedElementStyle, getNestedElementProperty, evaluateA11y, } from "../../../utils/helpers";
 describe('q2-carousel', () => {
     const renderCarousel = (numberOfPanes, config) => {
         const { showNavigation, hidePagination, fullWidthPanes, framelessPanes, autoPlay, index } = Object.assign({
@@ -19,6 +19,12 @@ describe('q2-carousel', () => {
                     ${[...Array(numberOfPanes).keys()].map(index => `<q2-carousel-pane>Pane ${index + 1}</q2-carousel-pane>`)}
                 </q2-carousel>`;
     };
+    const isPaneFocused = async (page, paneIndex) => page.evaluate(paneIndex => document.activeElement === document.querySelectorAll('q2-carousel-pane')[paneIndex], paneIndex);
+    const getActiveElementClasses = async (page) => {
+        return await page.$eval('q2-carousel', () => {
+            return document.activeElement.className;
+        });
+    };
     describe('[A11y] guideline compliance', () => {
         it('Does not have accessibility violations', async () => {
             const page = await setup({
@@ -58,8 +64,7 @@ describe('q2-carousel', () => {
         expect(await carousel.getProperty('hidePagination')).toEqual(false);
         expect(await carousel.getProperty('showNavigationArrows')).toEqual(false);
     });
-    describe('keyboard', () => {
-        const isPaneFocused = async (page, paneIndex) => page.evaluate(paneIndex => document.activeElement === document.querySelectorAll('q2-carousel-pane')[paneIndex], paneIndex);
+    describe('Keyboard', () => {
         it('can advance the carousel using keys', async () => {
             const page = await setup({
                 html: renderCarousel(6),
@@ -95,54 +100,92 @@ describe('q2-carousel', () => {
             expect(await isPaneFocused(page, 0)).toEqual(true);
         });
     });
-    it('pagination dots and navigation arrows can make the carousel advance or go back in order', async function () {
-        const page = await setup({
-            html: renderCarousel(3, { showNavigation: true }),
-        });
-        const carousel = await page.find('q2-carousel');
-        const carouselPanes = await page.findAll('q2-carousel q2-carousel-pane');
-        const firstCarouselPane = carouselPanes[0];
-        const secondCarouselPane = carouselPanes[1];
-        const thirdCarouselPane = carouselPanes[2];
-        const navPaginationContainer = await page.find('q2-carousel .q2-carousel-pagination-navigation-wrapper');
-        expect(await carousel.getProperty('showNavigationArrows')).toEqual(true);
-        expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
-        expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(navPaginationContainer.classList.contains('evenly-space')).toEqual(true);
-        // go to second pane
-        await dispatchEvent(page, '.q2-carousel-page-indicator-1', 'click');
-        expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
-        expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        // back to third pane
-        await dispatchEvent(page, '.q2-carousel-page-indicator-2', 'click');
-        expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
-        // back to second pane
-        await dispatchEvent(page, '.q2-carousel-navigation-button-prev', 'click');
-        expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
-        expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        // back to third pane
-        await dispatchEvent(page, '.q2-carousel-navigation-button-next', 'click');
-        expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
-        expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
-    });
-    describe('when hide-pagination and show-navigation are provided', () => {
-        it('still renders accordingly', async () => {
+    describe('Pagination', () => {
+        it('pagination dots and navigation arrows can make the carousel advance or go back in order', async function () {
             const page = await setup({
-                html: renderCarousel(3, { hidePagination: true, showNavigation: true }),
+                html: renderCarousel(3, { showNavigation: true }),
             });
             const carousel = await page.find('q2-carousel');
+            const carouselPanes = await page.findAll('q2-carousel q2-carousel-pane');
+            const firstCarouselPane = carouselPanes[0];
+            const secondCarouselPane = carouselPanes[1];
+            const thirdCarouselPane = carouselPanes[2];
             const navPaginationContainer = await page.find('q2-carousel .q2-carousel-pagination-navigation-wrapper');
-            const navigationButtons = await page.findAll('q2-carousel .q2-carousel-navigation-button');
-            expect(await carousel.getProperty('showNavigationArrows')).toEqual(true);
             expect(await carousel.getProperty('showNavigationArrows')).toEqual(true);
-            expect(navPaginationContainer).toHaveClass('evenly-space');
-            expect(navigationButtons).toHaveLength(2);
+            expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
+            expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(navPaginationContainer.classList.contains('evenly-space')).toEqual(true);
+            // go to second pane
+            await dispatchEvent(page, '.q2-carousel-page-indicator-1', 'click');
+            expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
+            expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            // back to third pane
+            await dispatchEvent(page, '.q2-carousel-page-indicator-2', 'click');
+            expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
+            // back to second pane
+            await dispatchEvent(page, '.q2-carousel-navigation-button-prev', 'click');
+            expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
+            expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            // back to third pane
+            await dispatchEvent(page, '.q2-carousel-navigation-button-next', 'click');
+            expect(firstCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(secondCarouselPane.classList.contains('swiper-slide-active')).toEqual(false);
+            expect(thirdCarouselPane.classList.contains('swiper-slide-active')).toEqual(true);
+        });
+        it('displays dynamic pagination indicators if more than five q2-carousel-panes present', async function () {
+            const page = await setup({
+                html: renderCarousel(6),
+            });
+            const carouselPagination = await page.find('.q2-carousel-pagination');
+            const carouselPaginationButtons = await page.findAll('q2-carousel .q2-carousel-page-indicator');
+            const carouselActivePaginationButton = await page.find('q2-carousel .q2-carousel-page-indicator.active-page');
+            const carouselPaginationNonVisibleButtons = await page.findAll('.q2-carousel-page-indicator:not(.active-page):not(.active-adjacent):not(.active-adjacent-adjacent)');
+            expect(carouselPagination.classList.contains('dynamic')).toEqual(true);
+            expect(await carouselActivePaginationButton.isVisible()).toBe(true);
+            expect(carouselPaginationButtons).toHaveLength(6);
+            expect(carouselPaginationNonVisibleButtons).toHaveLength(3);
+        });
+        it('hides pagination/navigation if only one content pane is provided in content peek mode', async function () {
+            const page = await setup({
+                html: renderCarousel(1),
+            });
+            const navPaginationContainer = await page.find('q2-carousel .q2-carousel-pagination-navigation-wrapper');
+            expect(navPaginationContainer).toBeNull();
+        });
+        it('hides pagination/navigation if only one content pane is provided in full-width mode', async function () {
+            const page = await setup({
+                html: renderCarousel(1, { fullWidthPanes: true }),
+            });
+            const navPaginationContainer = await page.find('q2-carousel .q2-carousel-pagination-navigation-wrapper');
+            expect(navPaginationContainer).toBeNull();
+        });
+        describe('when only one pane is provided', () => {
+            it('does not render pagination', async () => {
+                const page = await setup({
+                    html: renderCarousel(1),
+                });
+                const pagination = await page.find('q2-carousel .q2-carousel-pagination');
+                expect(pagination).toBeNull();
+            });
+        });
+        describe('when hide-pagination and show-navigation are provided', () => {
+            it('still renders accordingly', async () => {
+                const page = await setup({
+                    html: renderCarousel(3, { hidePagination: true, showNavigation: true }),
+                });
+                const carousel = await page.find('q2-carousel');
+                const navPaginationContainer = await page.find('q2-carousel .q2-carousel-pagination-navigation-wrapper');
+                const navigationButtons = await page.findAll('q2-carousel .q2-carousel-navigation-button');
+                expect(await carousel.getProperty('showNavigationArrows')).toEqual(true);
+                expect(await carousel.getProperty('showNavigationArrows')).toEqual(true);
+                expect(navPaginationContainer).toHaveClass('evenly-space');
+                expect(navigationButtons).toHaveLength(2);
+            });
         });
     });
     it('localizes necessary text', async function () {
@@ -161,19 +204,6 @@ describe('q2-carousel', () => {
         const prevNavBtn = await page.find('.q2-carousel-navigation-button-prev');
         expect(prevNavBtn).toEqualAttribute('label', 'tecton.element.carousel.previousItemLabel');
     });
-    it('displays dynamic pagination indicators if more than five q2-carousel-panes present', async function () {
-        const page = await setup({
-            html: renderCarousel(6),
-        });
-        const carouselPagination = await page.find('.q2-carousel-pagination');
-        const carouselPaginationButtons = await page.findAll('q2-carousel .q2-carousel-page-indicator');
-        const carouselActivePaginationButton = await page.find('q2-carousel .q2-carousel-page-indicator.active-page');
-        const carouselPaginationNonVisibleButtons = await page.findAll('.q2-carousel-page-indicator:not(.active-page):not(.active-adjacent):not(.active-adjacent-adjacent)');
-        expect(carouselPagination.classList.contains('dynamic')).toEqual(true);
-        expect(await carouselActivePaginationButton.isVisible()).toBe(true);
-        expect(carouselPaginationButtons).toHaveLength(6);
-        expect(carouselPaginationNonVisibleButtons).toHaveLength(3);
-    });
     it('puts itself in compact mode if dimensions are right for it', async function () {
         const page = await setup({
             html: renderCarousel(3),
@@ -184,29 +214,6 @@ describe('q2-carousel', () => {
         await page.waitForChanges();
         expect(await carouselContainer.classList.contains('compact')).toEqual(true);
     });
-    it('hides pagination/navigation if only one content pane is provided in content peek mode', async function () {
-        const page = await setup({
-            html: renderCarousel(1),
-        });
-        const navPaginationContainer = await page.find('q2-carousel .q2-carousel-pagination-navigation-wrapper');
-        expect(navPaginationContainer).toBeNull();
-    });
-    it('hides pagination/navigation if only one content pane is provided in full-width mode', async function () {
-        const page = await setup({
-            html: renderCarousel(1, { fullWidthPanes: true }),
-        });
-        const navPaginationContainer = await page.find('q2-carousel .q2-carousel-pagination-navigation-wrapper');
-        expect(navPaginationContainer).toBeNull();
-    });
-    describe('when only one pane is provided', () => {
-        it('does not render pagination', async () => {
-            const page = await setup({
-                html: renderCarousel(1),
-            });
-            const pagination = await page.find('q2-carousel .q2-carousel-pagination');
-            expect(pagination).toBeNull();
-        });
-    });
     describe('when no panes are provided', () => {
         it('informs the user that more panes are needed', async () => {
             const page = await setup({
@@ -274,24 +281,9 @@ describe('q2-carousel', () => {
             });
         });
     });
-    describe('focus transferring', () => {
-        const html = `<q2-carousel>
-                <q2-carousel-pane>
-                    <h2>Hello</h2>
-                    <p>World</p>
-                </q2-carousel-pane>
-                <q2-carousel-pane>
-                    <h2>Foo</h2>
-                    <p>Bar</p>
-                </q2-carousel-pane>
-                <q2-carousel-pane>
-                    <h2>Fizz</h2>
-                    <p>Buzz</p>
-                    <button>Action</button>
-                </q2-carousel-pane>
-            </q2-carousel>`;
+    describe('Focus', () => {
         it('focuses selected pane when focus event dispatched ', async function () {
-            const page = await setup({ html });
+            const page = await setup({ html: renderCarousel(3) });
             await dispatchEvent(page, ['q2-carousel'], 'focus');
             const innerActiveTestId = async (page) => {
                 return page.$eval('q2-carousel', el => {
@@ -301,9 +293,9 @@ describe('q2-carousel', () => {
             expect(await innerActiveTestId(page)).toEqual(true);
         });
         it('focuses selected pane when focus method called ', async function () {
-            const page = await setup({ html });
+            const page = await setup({ html: renderCarousel(3) });
             const carousel = await page.find('q2-carousel');
-            await carousel.triggerEvent('focus');
+            carousel.triggerEvent('focus');
             await page.waitForChanges();
             const innerActiveTestId = async (page) => {
                 return page.$eval('q2-carousel', el => {
@@ -312,119 +304,83 @@ describe('q2-carousel', () => {
             };
             expect(await innerActiveTestId(page)).toEqual(true);
         });
-    });
-    it.skip('manages focus from pagination to carousel panes', async function () {
-        const page = await setup({
-            html: `
-                <q2-carousel>
-                    <q2-carousel-pane>
-                        <h2>Hello</h2>
-                        <p>World</p>
-                    </q2-carousel-pane>
-                    <q2-carousel-pane>
-                        <h2>Foo</h2>
-                        <p>Bar</p>
-                    </q2-carousel-pane>
-                    <q2-carousel-pane>
-                        <h2>Fizz</h2>
-                        <p>Buzz</p>
-                        <button>Action</button>
-                    </q2-carousel-pane>
-                </q2-carousel>
-            `,
-        });
-        let activeElementClasses;
-        await page.keyboard.press('Tab');
-        await page.waitForChanges();
-        await page.keyboard.press('Tab');
-        await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
-        expect(activeElementClasses.includes('q2-carousel-page-indicator-0')).toEqual(true);
-        await page.keyboard.down('Shift');
-        await page.keyboard.press('Tab');
-        await page.keyboard.up('Shift');
-        await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
-        expect(activeElementClasses.includes('q2-carousel-pane-0')).toEqual(true);
-        await page.keyboard.down('Shift');
-        await page.keyboard.press('Tab');
-        await page.keyboard.up('Shift');
-        await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
+        it('manages focus between pagination and carousel pane', async function () {
+            const page = await setup({
+                html: renderCarousel(3),
+            });
+            let activeElementClasses;
+            // Tab into pagination button
+            await page.keyboard.press('Tab');
+            await page.waitForChanges();
+            activeElementClasses = await getActiveElementClasses(page);
+            expect(activeElementClasses.includes('q2-carousel-page-indicator')).toEqual(true);
+            // Tab into the carousel pane
+            await page.keyboard.press('Tab');
+            await page.waitForChanges();
+            activeElementClasses = await getActiveElementClasses(page);
+            expect(activeElementClasses.includes('swiper-slide-active')).toEqual(true);
+            // Tab back to pagination button
+            await page.keyboard.down('Shift');
+            await page.keyboard.press('Tab');
+            await page.keyboard.up('Shift');
+            await page.waitForChanges();
+            activeElementClasses = await getActiveElementClasses(page);
+            expect(activeElementClasses.includes('q2-carousel-page-indicator')).toEqual(true);
+            // Tab out of `q2-carousel`
+            await page.keyboard.down('Shift');
+            await page.keyboard.press('Tab');
+            await page.keyboard.up('Shift');
+            await page.waitForChanges();
+            activeElementClasses = await getActiveElementClasses(page);
+            expect(activeElementClasses.length).toEqual(0);
         });
-        expect(activeElementClasses.length).toEqual(0); // shift+tab from a pane should land focus outside of the carousel element
     });
-    it.skip('manages focus from panes to inner focusable content', async function () {
+    it.skip('navigates from panes to inner focusable content', async function () {
         const page = await setup({
             html: `
-                <q2-carousel>
+                <q2-carousel hide-pagination>
                     <q2-carousel-pane>
                         <h2>Hello</h2>
                         <p>World</p>
-                        <q2-btn color="primary" class="button 1">Nested Focusable Content</q2-btn>
+                        <q2-btn intent="workflow-primary" class="button 1">Nested Focusable Content 1</q2-btn>
                     </q2-carousel-pane>
                     <q2-carousel-pane>
                         <h2>Foo</h2>
                         <p>Bar</p>
-                        <q2-btn color="primary" class="button 2">Nested Focusable Content</q2-btn>
+                        <q2-btn intent="workflow-primary" class="button 2">Nested Focusable Content 2</q2-btn>
                     </q2-carousel-pane>
                     <q2-carousel-pane>
                         <h2>Fizz</h2>
                         <p>Buzz</p>
-                        <button>Action</button>
+                        <button class="button 3">Nested Focusable Content 3</button>
                     </q2-carousel-pane>
                 </q2-carousel>
             `,
         });
+        const carousel = await page.find('q2-carousel');
         let activeElementClasses;
-        await page.keyboard.press('Tab');
+        // select first pane
+        await carousel.callMethod('selectCarouselPane', 1);
         await page.waitForChanges();
+        activeElementClasses = await getActiveElementClasses(page);
+        expect(await isPaneFocused(page, 0)).toEqual(true);
+        expect(activeElementClasses.includes('q2-carousel-pane-0')).toEqual(true);
+        // tab to button inside first pane
         await page.keyboard.press('Tab');
         await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
+        activeElementClasses = await getActiveElementClasses(page);
         expect(activeElementClasses.includes('button 1')).toEqual(true);
-        await page.keyboard.press('Tab');
+        // select second pane
+        await carousel.callMethod('selectCarouselPane', 2);
         await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
-        expect(activeElementClasses.includes('page-indicator-0')).toEqual(true);
-        await dispatchEvent(page, '.q2-carousel-page-indicator-1', 'click');
-        await page.waitForChanges();
-        await page.waitForEvent('transitionend');
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
-        expect(activeElementClasses.includes('q2-carousel-pane-1')).toEqual(true);
-        await page.keyboard.press('Tab');
-        await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
-        expect(activeElementClasses.includes('button 2')).toEqual(true);
-        await page.keyboard.down('Shift');
-        await page.keyboard.press('Tab');
-        await page.keyboard.up('Shift');
-        await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
+        expect(await isPaneFocused(page, 1)).toEqual(true);
+        activeElementClasses = await getActiveElementClasses(page);
         expect(activeElementClasses.includes('q2-carousel-pane-1')).toEqual(true);
-        await page.keyboard.down('Shift');
+        // tab to button inside second pane
         await page.keyboard.press('Tab');
-        await page.keyboard.up('Shift');
         await page.waitForChanges();
-        activeElementClasses = await page.$eval('q2-carousel', () => {
-            return document.activeElement.className;
-        });
-        expect(activeElementClasses.length).toEqual(0); // shift+tab from a pane should land focus outside of the carousel element
+        activeElementClasses = await getActiveElementClasses(page);
+        expect(activeElementClasses).toEqual('button 2');
     });
     describe('when q2-dropdown elements are added to panes', () => {
         let page;
@@ -492,7 +448,7 @@ describe('q2-carousel', () => {
             expect(await getNestedElementProperty(page, popoverSelector, 'open')).toEqual(false);
         });
     });
-    describe('@Props', () => {
+    describe('Props', () => {
         describe('framelessPanes', () => {
             describe('when not provided', () => {
                 it('does not set slot-frameless on panes', async () => {
@@ -554,7 +510,7 @@ describe('q2-carousel', () => {
                     const carouselWrapper = await page.find('.q2-carousel-swiper-wrapper');
                     expect(autoPlayBtn).not.toBeNull();
                     expect(inputField).not.toBeNull();
-                    await inputField.click();
+                    await inputField.focus();
                     await new Promise(r => setTimeout(r, 10000));
                     await page.waitForChanges();
                     const inputFocused = await isFocused(page, 'q2-input');
@@ -667,6 +623,37 @@ describe('q2-carousel', () => {
             });
         });
     });
+    describe('Methods', () => {
+        it('togglePlayPause() toggles autoplay button', async () => {
+            const page = await setup({
+                html: renderCarousel(3, { autoPlay: true }),
+            });
+            const carousel = await page.find('q2-carousel');
+            const autoPlayIcon = await page.find('.q2-carousel-autoplay-control q2-icon');
+            expect(autoPlayIcon).toEqualAttribute('type', 'pause');
+            await carousel.callMethod('togglePlayPause');
+            await page.waitForChanges();
+            expect(autoPlayIcon).toEqualAttribute('type', 'play');
+            await carousel.callMethod('togglePlayPause');
+            await page.waitForChanges();
+            expect(autoPlayIcon).toEqualAttribute('type', 'pause');
+        });
+        it('selectCarouselPane() selects the specified pane', async () => {
+            const page = await setup({
+                html: renderCarousel(3),
+            });
+            const carousel = await page.find('q2-carousel');
+            const carouselPanes = await page.findAll('q2-carousel q2-carousel-pane');
+            expect(carouselPanes[0]).toHaveClass('swiper-slide-active');
+            expect(carouselPanes[1]).not.toHaveClass('swiper-slide-active');
+            expect(carouselPanes[2]).not.toHaveClass('swiper-slide-active');
+            await carousel.callMethod('selectCarouselPane', 2);
+            await page.waitForChanges();
+            expect(carouselPanes[0]).not.toHaveClass('swiper-slide-active');
+            expect(carouselPanes[1]).toHaveClass('swiper-slide-active');
+            expect(carouselPanes[2]).not.toHaveClass('swiper-slide-active');
+        });
+    });
     describe('Deprecations', () => {
         it('handles deprecated `ariaLabel` prop', async () => {
             const label = 'My Label';