q2-tecton-elements 1.34.0 → 1.35.1

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

@@ -600,7 +600,7 @@ describe('q2-select', () => {
   });
   describe('Props', () => {
     describe('hoist', () => {
-      const runHoistSetup = async (mode, hoistEnabled = false, defineShowActionSheet = false) => {
+      const runHoistSetup = async (action, hoistEnabled = false, defineShowActionSheet = false, isCancelled = false) => {
         page = await setup({
           html: `
                         <q2-select ${hoistEnabled ? 'hoist' : ''} label="My select">
@@ -611,11 +611,20 @@ describe('q2-select', () => {
                     `,
         });
         if (defineShowActionSheet) {
-          await page.evaluate(() => {
-            this.TectonElements.showActionSheet = async () => {
-              return { value: '3', values: [{ display: 'Option 3', value: '3' }], type: 'confirm' };
-            };
-          });
+          await page.evaluate(isCancelled => {
+            const returnValue = isCancelled
+              ? {
+                type: 'cancel',
+                value: '',
+                values: [],
+              }
+              : {
+                value: '3',
+                values: [{ display: 'Option 3', value: '3' }],
+                type: 'confirm',
+              };
+            this.TectonElements.showActionSheet = async () => returnValue;
+          }, isCancelled);
         }
         popover = await page.find('q2-select >>> q2-popover');
         select = await page.find('q2-select');
@@ -623,11 +632,11 @@ describe('q2-select', () => {
         changeSpy = await select.spyOnEvent('change');
         expect(popover).not.toHaveAttribute('open');
         expect(await select.getProperty('selectedOptions')).toEqual([]);
-        if (mode === 'click') {
+        if (action === 'click') {
           await input.click();
         }
         else {
-          await input.press('ArrowDown');
+          await input.press(action);
         }
         await page.waitForChanges();
       };
@@ -703,18 +712,20 @@ describe('q2-select', () => {
           });
         });
         describe('when window.TectonElements.showActionSheet is defined', () => {
-          it('calls showActionSheet on click', async () => {
-            await runHoistSetup('click', true, true);
-            expect(await select.getProperty('value')).toEqual('3');
-            expect(changeSpy).toHaveReceivedEventDetail({
-              value: '3',
+          ['click', 'ArrowDown', 'Space', 'Enter'].forEach(action => {
+            it(`calls showActionSheet on ${action}`, async () => {
+              await runHoistSetup(action, true, true);
+              expect(await select.getProperty('value')).toEqual('3');
+              expect(changeSpy).toHaveReceivedEventDetail({
+                value: '3',
+              });
             });
           });
-          it('calls showActionSheet on ArrowDown', async () => {
-            await runHoistSetup('keyboard', true, true);
-            expect(await select.getProperty('value')).toEqual('3');
+          it(`calls showActionSheet on click and returns no data when cancelled`, async () => {
+            await runHoistSetup('click', true, true, true);
+            expect(await select.getProperty('value')).toEqual('');
             expect(changeSpy).toHaveReceivedEventDetail({
-              value: '3',
+              value: '',
             });
           });
         });
@@ -1625,7 +1636,6 @@ describe('q2-select', () => {
         await innerInput.press('Space');
         await page.waitForChanges();
         expect(await popover.getProperty('open')).toBe(true);
-        expect(await page.findAll('q2-option[active]')).toHaveLength(0);
       });
       it('opens the dropdown, and focuses first option on Home', async () => {
         expect(await popover.getProperty('open')).toBe(false);
@@ -2118,5 +2128,31 @@ describe('q2-select', () => {
       });
     });
   });
+  describe('Accessibility', () => {
+    it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
+      page = await setup({
+        html: `
+                    <q2-select label="My select">
+                        <q2-option value="option-1" display="Option 1">Option 1</q2-option>
+                        <q2-option value="option-2" display="Option 2">Option 2</q2-option>
+                        <q2-option value="option-3" display="Option 3">Option 3</q2-option>
+                    </q2-select>
+                `,
+      });
+      innerInput = await page.find('q2-select >>> q2-input');
+      await innerInput.click();
+      await page.waitForChanges();
+      popover = await page.find('q2-select >>> q2-popover');
+      expect(await popover.getProperty('open')).toEqual(true);
+      const snapshot = await page.accessibility.snapshot();
+      const optionList = snapshot.children[2].children[0];
+      expect(optionList.role).toEqual('listbox');
+      expect(optionList.children).toHaveLength(3);
+      optionList.children.forEach(child => {
+        expect(child.role).toEqual('option');
+        expect(child.name).toBeTruthy();
+      });
+    });
+  });
 });
 //# sourceMappingURL=q2-select-test.e2e.js.map