q2-tecton-elements 1.46.1 → 1.47.1

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

@@ -1,4 +1,4 @@
-import { setTestStrings, setup, dispatchEvent, getFocusedOptionValue, getActiveElementTestId, waitForTimeout, getListOfStyleCompilationIssues, } from "../helpers";
+import { setTestStrings, setup, dispatchEvent, getFocusedOptionValue, getActiveElementTestId, waitForTimeout, getListOfStyleCompilationIssues, evaluateA11y, } from "../helpers";
 describe('q2-select', () => {
     const isInvalidErrorString = 'tecton.element.select.invalid';
     let page;
@@ -25,6 +25,19 @@ describe('q2-select', () => {
         const page = await setup({ html: '<q2-select></q2-select>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);
     });
+    describe('[A11y] guideline compliance', () => {
+        it('Does not have accessibility violations', async () => {
+            const page = await setup({
+                html: `
+                    <q2-select value="option-1">
+                        <q2-option value="option-1" display="Option Text">Option Text</q2-option>
+                    </q2-select>
+                `,
+            });
+            const hasViolations = await evaluateA11y(page);
+            expect(hasViolations).toBe(false);
+        });
+    });
     it('renders base state', async () => {
         page = await setup({
             html: `
@@ -54,7 +67,7 @@ describe('q2-select', () => {
         });
         expect(slotTag).toEqual('q2-option');
     });
-    it('correctly sets q2-input properties', async function () {
+    it('correctly sets q2-input properties when searchable', async function () {
         const page = await setup({
             html: `<q2-select value="option1" label="Field Label" disabled searchable optional placeholder="Select an option">
                         <q2-option value="option1" display="Option Text">Option Text</q2-option>
@@ -88,15 +101,16 @@ describe('q2-select', () => {
         const ariaPopup = await input.getProperty('ariaHaspopup');
         // pop up is set to listbox
         expect(ariaPopup).toEqual('listbox');
-        const ariaRole = await input.getProperty('role');
-        // pop up is set to listbox
-        expect(ariaRole).toEqual('combobox');
+        const _role = await input.getProperty('_role');
+        expect(_role).toEqual('combobox');
+        const _preventEntry = await input.getProperty('_preventEntry');
+        expect(_preventEntry).toEqual(false);
         const hideMessages = await input.getProperty('hideMessages');
         // hideMessages should be true on the select input
         expect(hideMessages).toEqual(true);
         const pseudo = await input.getProperty('pseudo');
         // when searchable pseudo is false
-        expect(pseudo).toEqual(false);
+        expect(pseudo).toEqual(undefined);
     });
     it('correctly mutates yieldedDOM', async () => {
         page = await setup({
@@ -1190,6 +1204,9 @@ describe('q2-select', () => {
                     html: `
                         <q2-select label="label text" clearable>
                             <q2-option value="1" display="One">One</q2-option>
+                            <q2-option value="2" display="Two">Two</q2-option>
+                            <q2-option value="3" display="Three">Three</q2-option>
+                            <q2-option value="4" display="Four">Four</q2-option>
                         </q2-select>
                     `,
                 });
@@ -1197,7 +1214,7 @@ describe('q2-select', () => {
                 popover = await page.find('q2-select >>> q2-popover');
                 input = await page.find('q2-select >>> q2-input');
             });
-            describe('when true', () => {
+            describe('when true with single selection', () => {
                 it('clear button should not be visible ', async () => {
                     const clearButton = input.shadowRoot.querySelector('.btn-clear');
                     expect(clearButton).toHaveClass('hidden');
@@ -1209,6 +1226,23 @@ describe('q2-select', () => {
                     expect(clearButton).not.toHaveClass('hidden');
                 });
             });
+            describe('when true with multiple selection enabled', () => {
+                it('clear button should be visible when an option selected ', async () => {
+                    await select.setProperty('multiple', '');
+                    await select.setProperty('selectedOptions', ['1', '3']);
+                    await page.waitForChanges();
+                    const clickClearButton = async (page) => {
+                        return page.$eval('q2-select', el => {
+                            return el.shadowRoot
+                                .querySelector('q2-input')
+                                .shadowRoot.querySelector('.btn-clear').click();
+                        });
+                    };
+                    expect(await select.getProperty('selectedOptions')).toStrictEqual(['1', '3']);
+                    await clickClearButton(page);
+                    expect(await select.getProperty('selectedOptions')).toStrictEqual([]);
+                });
+            });
         });
         describe('readonly', () => {
             const readonlyText = '(read only)';