q2-tecton-elements 1.50.1 → 1.51.0

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

@@ -21,18 +21,6 @@ describe('q2-calendar', () => {
     beforeEach(function () {
         date = '2017-02-01';
     });
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations', async () => {
-            const page = await setup({
-                html: `<q2-calendar
-                    value=${date}
-                    label="Calendar Label"
-                    placeholder="Calendar Placeholder"></q2-calendar>`,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-calendar></q2-calendar>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-calendar')).toHaveLength(0);
@@ -1914,217 +1902,6 @@ describe('q2-calendar', () => {
             expect(await innerInput.getProperty('clearable')).toBeTruthy();
         });
     });
-    describe('keyboard', () => {
-        let page;
-        let calendar;
-        let table;
-        let input;
-        const getFocusedDate = async (page) => page.$eval('q2-calendar', (element) => element.shadowRoot.activeElement.getAttribute('data-date'));
-        const getIsoDate = (dateToFormat) => formatISO(dateToFormat, { representation: 'date' });
-        const getFormattedDate = (dateToFormat) => format(dateToFormat, 'MM/dd/yyyy');
-        const getPureDate = (dateToPurify) => removeTimezoneOffset(dateToPurify ? new Date(dateToPurify) : new Date());
-        const getPureIsoDate = (dateToPurify) => getIsoDate(getPureDate(dateToPurify));
-        const getPureFormattedDate = (dateToPurify) => getFormattedDate(getPureDate(dateToPurify));
-        describe('when input has focus', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `<q2-calendar></q2-calendar>`,
-                });
-                calendar = await page.find('q2-calendar');
-                popover = await page.find('q2-calendar >>> q2-popover');
-                input = await page.find("q2-calendar >>> [test-id='inputAndCalendarToggle']");
-                expect(popover).not.toHaveAttribute('open');
-                await input.focus();
-            });
-            it('opens the dialog, and focuses the current day on Enter', async () => {
-                await input.press('Enter');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-                const getActiveElement = async (page) => page.evaluate(() => {
-                    return Array.from(document.activeElement.shadowRoot.activeElement.classList);
-                });
-                expect(await getActiveElement(page)).toContain('is-selected');
-            });
-            it('opens the dialog, and moves focus to current date on ArrowDown', async () => {
-                await input.press('ArrowDown');
-                await page.waitForChanges();
-                await page.waitForSelector('q2-calendar >>> td:focus');
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedDate(page)).toEqual(getPureIsoDate());
-            });
-            describe('when input has a value', () => {
-                beforeEach(async () => {
-                    calendar.setProperty('value', date);
-                    await page.waitForChanges();
-                });
-                it('opens the dialog, and moves focus to specified date on ArrowDown', async () => {
-                    await input.press('ArrowDown');
-                    await page.waitForChanges();
-                    expect(popover).toHaveAttribute('open');
-                    expect(await getFocusedDate(page)).toEqual(getPureIsoDate(date));
-                });
-            });
-        });
-        describe('when dialog is open and input has focus', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `<q2-calendar></q2-calendar>`,
-                });
-                await page.waitForChanges();
-                calendar = await page.find('q2-calendar');
-                popover = await page.find('q2-calendar >>> q2-popover');
-                input = await page.find("q2-calendar >>> [test-id='inputAndCalendarToggle']");
-                input.focus();
-                await input.press('Enter');
-                await page.waitForChanges();
-                expect(popover).toHaveAttribute('open');
-            });
-            it('closes the dialog, and keeps focus on input on Escape', async () => {
-                await input.press('Escape');
-                await page.waitForChanges();
-                expect(popover).not.toHaveAttribute('open');
-                expect(await innerInputTestId(page)).toEqual('inputField');
-            });
-            it('closes the dialog, and keeps focus on input on Enter', async () => {
-                await input.press('Enter');
-                expect(popover).not.toHaveAttribute('open');
-                expect(await innerInputTestId(page)).toEqual('inputField');
-            });
-        });
-        describe('when dialog is open and has focus', () => {
-            beforeEach(async () => {
-                page = await setup({
-                    html: `<q2-calendar></q2-calendar>`,
-                });
-                calendar = await page.find('q2-calendar');
-                table = await page.find('q2-calendar >>> table');
-                popover = await page.find('q2-calendar >>> q2-popover');
-                input = await page.find("q2-calendar >>> [test-id='inputAndCalendarToggle']");
-                await calendar.setProperty('value', date);
-                await page.waitForChanges();
-                await dispatchEvent(page, ['q2-calendar', "[test-id='inputAndCalendarToggle']"], 'keydown', {
-                    key: 'ArrowDown',
-                });
-                expect(popover).toHaveAttribute('open');
-                expect(await getFocusedDate(page)).toEqual(getPureIsoDate(date));
-            });
-            it('closes the dialog, and moves focus to input on Escape', async () => {
-                await table.press('Escape');
-                await page.waitForChanges();
-                expect(popover).not.toHaveAttribute('open');
-            });
-            describe('when calendar grid has focus', () => {
-                it('sets the value, and focuses input on Space', async () => {
-                    await table.press('Space');
-                    await page.waitForChanges();
-                    expect(await input.getProperty('value')).toEqual(getPureFormattedDate(date));
-                    expect(popover).not.toHaveAttribute('open');
-                });
-                it('sets the value, closes the dialog, and focuses input on Enter', async () => {
-                    await table.press('Enter');
-                    await page.waitForChanges();
-                    expect(await input.getProperty('value')).toEqual(getPureFormattedDate(date));
-                    expect(popover).not.toHaveAttribute('open');
-                });
-                it('moves focus to the same day of the previous week on ArrowUp', async () => {
-                    await table.press('ArrowUp');
-                    await page.waitForChanges();
-                    const expectedDate = addDays(getPureDate(date), -7);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('moves focus to the same day of the next week on ArrowDown', async () => {
-                    await table.press('ArrowDown');
-                    await page.waitForChanges();
-                    const expectedDate = addDays(getPureDate(date), 7);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('moves focus to the next day on ArrowRight', async () => {
-                    await table.press('ArrowRight');
-                    await page.waitForChanges();
-                    const expectedDate = addDays(getPureDate(date), 1);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('moves focus to the previous day on ArrowLeft', async () => {
-                    await table.press('ArrowLeft');
-                    await page.waitForChanges();
-                    const expectedDate = addDays(getPureDate(date), -1);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('moves focus to the first day of the week on Home', async () => {
-                    await table.press('Home');
-                    await page.waitForChanges();
-                    const expectedDate = addDays(getPureDate(date), -3);
-                    expect(expectedDate.getDay()).toEqual(0);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('moves focus to the last day of the week on End', async () => {
-                    await table.press('End');
-                    const expectedDate = addDays(getPureDate(date), 3);
-                    expect(expectedDate.getDay()).toEqual(6);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('changes calendar to previous month, focuses same day of same week on PageUp', async () => {
-                    await table.press('PageUp');
-                    await page.waitForChanges();
-                    const initialDate = getPureDate(date);
-                    const expectedDate = getPureDate('2017-01-04');
-                    expect(initialDate.getDay()).toEqual(expectedDate.getDay());
-                    expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('changes calendar to next month, focuses same day of same week on PageDown', async () => {
-                    await table.press('PageDown');
-                    await page.waitForChanges();
-                    const initialDate = getPureDate(date);
-                    const expectedDate = getPureDate('2017-03-01');
-                    expect(initialDate.getDay()).toEqual(expectedDate.getDay());
-                    expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('changes calendar to next month, and focuses the closest available day PageDown', async () => {
-                    await calendar.setProperty('value', '2017-03-01');
-                    await page.waitForChanges();
-                    expect(await getFocusedDate(page)).toEqual(getPureIsoDate('2017-03-01'));
-                    await table.press('PageDown');
-                    await page.waitForChanges();
-                    const expectedDate = getPureDate('2017-04-01');
-                    expect(expectedDate.getDay()).toEqual(6);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('changes calendar to previous month, and focuses the closest available day PageUp', async () => {
-                    await calendar.setProperty('value', '2017-06-30');
-                    await page.waitForChanges();
-                    const lastDayOfMonth = await page.find("q2-calendar >>> td[data-day='30']");
-                    await lastDayOfMonth.focus();
-                    await table.press('PageUp');
-                    await page.waitForChanges();
-                    const expectedDate = getPureDate('2017-05-31');
-                    expect(expectedDate.getDay()).toEqual(3);
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('changes calendar to previous year, focuses same day of same week on Shift+PageUp', async () => {
-                    await page.keyboard.down('Shift');
-                    await table.press('PageUp');
-                    await page.waitForChanges();
-                    const initialDate = getPureDate(date);
-                    const expectedDate = getPureDate('2016-02-03');
-                    expect(initialDate.getDay()).toEqual(expectedDate.getDay());
-                    expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-                it('changes calendar to next year, focuses same day of same week on Shift+PageDown', async () => {
-                    await page.keyboard.down('Shift');
-                    await table.press('PageDown');
-                    await page.waitForChanges();
-                    const initialDate = getPureDate(date);
-                    const expectedDate = getPureDate('2018-02-01');
-                    expect(expectedDate.getDay()).toEqual(4);
-                    expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
-                    expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
-                });
-            });
-        });
-    });
     describe('Deprecations', () => {
         it('handles deprecated `popDirection` prop', async () => {
             page = await setup({
@@ -2177,5 +1954,232 @@ describe('q2-calendar', () => {
             });
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: `<q2-calendar
+                    value=${date}
+                    label="Calendar Label"
+                    placeholder="Calendar Placeholder"></q2-calendar>`,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => {
+            let page;
+            let calendar;
+            let table;
+            let input;
+            const getFocusedDate = async (page) => page.$eval('q2-calendar', (element) => element.shadowRoot.activeElement.getAttribute('data-date'));
+            const getIsoDate = (dateToFormat) => formatISO(dateToFormat, { representation: 'date' });
+            const getFormattedDate = (dateToFormat) => format(dateToFormat, 'MM/dd/yyyy');
+            const getPureDate = (dateToPurify) => removeTimezoneOffset(dateToPurify ? new Date(dateToPurify) : new Date());
+            const getPureIsoDate = (dateToPurify) => getIsoDate(getPureDate(dateToPurify));
+            const getPureFormattedDate = (dateToPurify) => getFormattedDate(getPureDate(dateToPurify));
+            describe('when input has focus', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `<q2-calendar></q2-calendar>`,
+                    });
+                    calendar = await page.find('q2-calendar');
+                    popover = await page.find('q2-calendar >>> q2-popover');
+                    input = await page.find("q2-calendar >>> [test-id='inputAndCalendarToggle']");
+                    expect(popover).not.toHaveAttribute('open');
+                    await input.focus();
+                });
+                it('opens the dialog, and focuses the current day on Enter', async () => {
+                    await input.press('Enter');
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                    const getActiveElement = async (page) => page.evaluate(() => {
+                        return Array.from(document.activeElement.shadowRoot.activeElement.classList);
+                    });
+                    expect(await getActiveElement(page)).toContain('is-selected');
+                });
+                it('opens the dialog, and moves focus to current date on ArrowDown', async () => {
+                    await input.press('ArrowDown');
+                    await page.waitForChanges();
+                    await page.waitForSelector('q2-calendar >>> td:focus');
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getFocusedDate(page)).toEqual(getPureIsoDate());
+                });
+                describe('when input has a value', () => {
+                    beforeEach(async () => {
+                        calendar.setProperty('value', date);
+                        await page.waitForChanges();
+                    });
+                    it('opens the dialog, and moves focus to specified date on ArrowDown', async () => {
+                        await input.press('ArrowDown');
+                        await page.waitForChanges();
+                        expect(popover).toHaveAttribute('open');
+                        expect(await getFocusedDate(page)).toEqual(getPureIsoDate(date));
+                    });
+                });
+            });
+            describe('when dialog is open and input has focus', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `<q2-calendar></q2-calendar>`,
+                    });
+                    await page.waitForChanges();
+                    calendar = await page.find('q2-calendar');
+                    popover = await page.find('q2-calendar >>> q2-popover');
+                    input = await page.find("q2-calendar >>> [test-id='inputAndCalendarToggle']");
+                    input.focus();
+                    await input.press('Enter');
+                    await page.waitForChanges();
+                    expect(popover).toHaveAttribute('open');
+                });
+                it('closes the dialog, and keeps focus on input on Escape', async () => {
+                    await input.press('Escape');
+                    await page.waitForChanges();
+                    expect(popover).not.toHaveAttribute('open');
+                    expect(await innerInputTestId(page)).toEqual('inputField');
+                });
+                it('closes the dialog, and keeps focus on input on Enter', async () => {
+                    await input.press('Enter');
+                    expect(popover).not.toHaveAttribute('open');
+                    expect(await innerInputTestId(page)).toEqual('inputField');
+                });
+            });
+            describe('when dialog is open and has focus', () => {
+                beforeEach(async () => {
+                    page = await setup({
+                        html: `<q2-calendar></q2-calendar>`,
+                    });
+                    calendar = await page.find('q2-calendar');
+                    table = await page.find('q2-calendar >>> table');
+                    popover = await page.find('q2-calendar >>> q2-popover');
+                    input = await page.find("q2-calendar >>> [test-id='inputAndCalendarToggle']");
+                    await calendar.setProperty('value', date);
+                    await page.waitForChanges();
+                    await dispatchEvent(page, ['q2-calendar', "[test-id='inputAndCalendarToggle']"], 'keydown', {
+                        key: 'ArrowDown',
+                    });
+                    expect(popover).toHaveAttribute('open');
+                    expect(await getFocusedDate(page)).toEqual(getPureIsoDate(date));
+                });
+                it('closes the dialog, and moves focus to input on Escape', async () => {
+                    await table.press('Escape');
+                    await page.waitForChanges();
+                    expect(popover).not.toHaveAttribute('open');
+                });
+                describe('when calendar grid has focus', () => {
+                    it('sets the value, and focuses input on Space', async () => {
+                        await table.press('Space');
+                        await page.waitForChanges();
+                        expect(await input.getProperty('value')).toEqual(getPureFormattedDate(date));
+                        expect(popover).not.toHaveAttribute('open');
+                    });
+                    it('sets the value, closes the dialog, and focuses input on Enter', async () => {
+                        await table.press('Enter');
+                        await page.waitForChanges();
+                        expect(await input.getProperty('value')).toEqual(getPureFormattedDate(date));
+                        expect(popover).not.toHaveAttribute('open');
+                    });
+                    it('moves focus to the same day of the previous week on ArrowUp', async () => {
+                        await table.press('ArrowUp');
+                        await page.waitForChanges();
+                        const expectedDate = addDays(getPureDate(date), -7);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('moves focus to the same day of the next week on ArrowDown', async () => {
+                        await table.press('ArrowDown');
+                        await page.waitForChanges();
+                        const expectedDate = addDays(getPureDate(date), 7);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('moves focus to the next day on ArrowRight', async () => {
+                        await table.press('ArrowRight');
+                        await page.waitForChanges();
+                        const expectedDate = addDays(getPureDate(date), 1);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('moves focus to the previous day on ArrowLeft', async () => {
+                        await table.press('ArrowLeft');
+                        await page.waitForChanges();
+                        const expectedDate = addDays(getPureDate(date), -1);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('moves focus to the first day of the week on Home', async () => {
+                        await table.press('Home');
+                        await page.waitForChanges();
+                        const expectedDate = addDays(getPureDate(date), -3);
+                        expect(expectedDate.getDay()).toEqual(0);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('moves focus to the last day of the week on End', async () => {
+                        await table.press('End');
+                        const expectedDate = addDays(getPureDate(date), 3);
+                        expect(expectedDate.getDay()).toEqual(6);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('changes calendar to previous month, focuses same day of same week on PageUp', async () => {
+                        await table.press('PageUp');
+                        await page.waitForChanges();
+                        const initialDate = getPureDate(date);
+                        const expectedDate = getPureDate('2017-01-04');
+                        expect(initialDate.getDay()).toEqual(expectedDate.getDay());
+                        expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('changes calendar to next month, focuses same day of same week on PageDown', async () => {
+                        await table.press('PageDown');
+                        await page.waitForChanges();
+                        const initialDate = getPureDate(date);
+                        const expectedDate = getPureDate('2017-03-01');
+                        expect(initialDate.getDay()).toEqual(expectedDate.getDay());
+                        expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('changes calendar to next month, and focuses the closest available day PageDown', async () => {
+                        await calendar.setProperty('value', '2017-03-01');
+                        await page.waitForChanges();
+                        expect(await getFocusedDate(page)).toEqual(getPureIsoDate('2017-03-01'));
+                        await table.press('PageDown');
+                        await page.waitForChanges();
+                        const expectedDate = getPureDate('2017-04-01');
+                        expect(expectedDate.getDay()).toEqual(6);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('changes calendar to previous month, and focuses the closest available day PageUp', async () => {
+                        await calendar.setProperty('value', '2017-06-30');
+                        await page.waitForChanges();
+                        const lastDayOfMonth = await page.find("q2-calendar >>> td[data-day='30']");
+                        await lastDayOfMonth.focus();
+                        await table.press('PageUp');
+                        await page.waitForChanges();
+                        const expectedDate = getPureDate('2017-05-31');
+                        expect(expectedDate.getDay()).toEqual(3);
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('changes calendar to previous year, focuses same day of same week on Shift+PageUp', async () => {
+                        await page.keyboard.down('Shift');
+                        await table.press('PageUp');
+                        await page.waitForChanges();
+                        const initialDate = getPureDate(date);
+                        const expectedDate = getPureDate('2016-02-03');
+                        expect(initialDate.getDay()).toEqual(expectedDate.getDay());
+                        expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                    it('changes calendar to next year, focuses same day of same week on Shift+PageDown', async () => {
+                        await page.keyboard.down('Shift');
+                        await table.press('PageDown');
+                        await page.waitForChanges();
+                        const initialDate = getPureDate(date);
+                        const expectedDate = getPureDate('2018-02-01');
+                        expect(expectedDate.getDay()).toEqual(4);
+                        expect(getWeekOfMonth(initialDate)).toEqual(getWeekOfMonth(expectedDate));
+                        expect(await getFocusedDate(page)).toEqual(getIsoDate(expectedDate));
+                    });
+                });
+            });
+        });
+        describe('Other', () => { });
+    });
 });
 //# sourceMappingURL=q2-calendar-test.e2e.js.map