q2-tecton-elements 1.46.0 → 1.47.0

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

@@ -1,4 +1,4 @@
-import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId, getListOfStyleCompilationIssues, } from "../helpers";
+import { setTestStrings, setup, dispatchEvent, testDeprecatedAriaLabel, getActiveElementTestId, getListOfStyleCompilationIssues, evaluateA11y, } from "../helpers";
 import { getWeekOfMonth, addDays, format, formatISO, parseISO } from "date-fns";
 import { removeTimezoneOffset } from "../../src/components/q2-calendar/q2-calendar-helpers";
 import { Q2Calendar } from "../../src/components/q2-calendar/q2-calendar";
@@ -12,6 +12,12 @@ describe('q2-calendar', () => {
     let table;
     let calendarButton;
     const isInvalidErrorString = 'tecton.element.calendar.invalid';
+    const innerInputTestId = async (page) => {
+        return page.$eval('q2-calendar', el => {
+            var _a;
+            return (_a = el.shadowRoot.querySelector('q2-input').shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id');
+        });
+    };
     beforeEach(function () {
         date = '2017-02-01';
     });
@@ -19,6 +25,15 @@ describe('q2-calendar', () => {
         const page = await setup({ html: '<q2-calendar></q2-calendar>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-calendar')).toHaveLength(0);
     });
+    describe('[A11y] guideline compliance', () => {
+        it('Does not have accessibility violations', async () => {
+            const page = await setup({
+                html: `<q2-calendar label="Date"></q2-calendar>`,
+            });
+            const hasViolations = await evaluateA11y(page);
+            expect(hasViolations).toBe(false);
+        });
+    });
     it('renders the component in the dom', async () => {
         page = await setup({ html: `<q2-calendar></q2-calendar>` });
         const calendarContainer = await page.find('q2-calendar >>> click-elsewhere');
@@ -37,6 +52,8 @@ describe('q2-calendar', () => {
             const q2Input = element.shadowRoot.querySelector('[test-id="inputAndCalendarToggle"]');
             const inputProps = {
                 iconRight: q2Input.iconRight,
+                _role: q2Input._role,
+                _preventEntry: q2Input._preventEntry,
                 pseudo: q2Input.pseudo,
                 hideMessages: q2Input.hideMessages,
                 hideLabel: q2Input.hideLabel,
@@ -51,7 +68,9 @@ describe('q2-calendar', () => {
         });
         // Constants for all calendars
         expect(innerInput.iconRight).toEqual('calendar');
-        expect(innerInput.pseudo).toEqual(true);
+        expect(innerInput.pseudo).toEqual(undefined);
+        expect(innerInput._role).toEqual('combobox');
+        expect(innerInput._preventEntry).toEqual(true);
         expect(innerInput.hideMessages).toEqual(true);
         // Dependent on props
         const reformattedDate = format(parseISO(date), 'MM/dd/yyyy');
@@ -1247,51 +1266,27 @@ describe('q2-calendar', () => {
             page = await setup({ html: `<q2-calendar></q2-calendar>` });
             calendar = await page.find('q2-calendar');
             await dispatchEvent(page, ['q2-calendar'], 'focus');
-            const innerActiveTestId = async (page) => {
-                return page.$eval('q2-calendar', el => {
-                    var _a;
-                    return (_a = el.shadowRoot.querySelector('q2-input').shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id');
-                });
-            };
-            expect(await innerActiveTestId(page)).toEqual('q2InputInnerClearButton');
+            expect(await innerInputTestId(page)).toEqual('inputField');
         });
         it('focuses inner input when focus method called for non-typeable calendar', async () => {
             page = await setup({ html: `<q2-calendar></q2-calendar>` });
             calendar = await page.find('q2-calendar');
             await calendar.triggerEvent('focus');
             await page.waitForChanges();
-            const innerActiveTestId = async (page) => {
-                return page.$eval('q2-calendar', el => {
-                    var _a;
-                    return (_a = el.shadowRoot.querySelector('q2-input').shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id');
-                });
-            };
-            expect(await innerActiveTestId(page)).toEqual('q2InputInnerClearButton');
+            expect(await innerInputTestId(page)).toEqual('inputField');
         });
         it('focuses inner button when focus event dispatched for typeable calendar', async () => {
             page = await setup({ html: `<q2-calendar typeable></q2-calendar>` });
             calendar = await page.find('q2-calendar');
             await dispatchEvent(page, ['q2-calendar'], 'focus');
-            const innerActiveTestId = async (page) => {
-                return page.$eval('q2-calendar', el => {
-                    var _a;
-                    return (_a = el.shadowRoot.querySelector('q2-input').shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id');
-                });
-            };
-            expect(await innerActiveTestId(page)).toEqual('inputField');
+            expect(await innerInputTestId(page)).toEqual('inputField');
         });
         it('focuses inner button when focus method called for typeable calendar', async () => {
             page = await setup({ html: `<q2-calendar typeable></q2-calendar>` });
             calendar = await page.find('q2-calendar');
             await calendar.triggerEvent('focus');
             await page.waitForChanges();
-            const innerActiveTestId = async (page) => {
-                return page.$eval('q2-calendar', el => {
-                    var _a;
-                    return (_a = el.shadowRoot.querySelector('q2-input').shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('test-id');
-                });
-            };
-            expect(await innerActiveTestId(page)).toEqual('inputField');
+            expect(await innerInputTestId(page)).toEqual('inputField');
         });
     });
     it('resizes the iframe on open and close', async () => {
@@ -1929,11 +1924,14 @@ describe('q2-calendar', () => {
                 expect(popover).not.toHaveAttribute('open');
                 await input.focus();
             });
-            it('opens the dialog, and keeps the focus on the input field on Enter', async () => {
+            it('opens the dialog, and focuses the current day on Enter', async () => {
                 await input.press('Enter');
                 await page.waitForChanges();
                 expect(popover).toHaveAttribute('open');
-                expect(await getActiveElementTestId(page)).toEqual('inputAndCalendarToggle');
+                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');
@@ -1973,12 +1971,12 @@ describe('q2-calendar', () => {
                 await input.press('Escape');
                 await page.waitForChanges();
                 expect(popover).not.toHaveAttribute('open');
-                expect(await getActiveElementTestId(page)).toEqual('inputAndCalendarToggle');
+                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 getActiveElementTestId(page)).toEqual('inputAndCalendarToggle');
+                expect(await innerInputTestId(page)).toEqual('inputField');
             });
         });
         describe('when dialog is open and has focus', () => {
@@ -2008,7 +2006,7 @@ describe('q2-calendar', () => {
                     await table.press('Space');
                     await page.waitForChanges();
                     expect(await input.getProperty('value')).toEqual(getPureFormattedDate(date));
-                    expect(popover).toHaveAttribute('open');
+                    expect(popover).not.toHaveAttribute('open');
                 });
                 it('sets the value, closes the dialog, and focuses input on Enter', async () => {
                     await table.press('Enter');