q2-tecton-elements 1.36.0 → 1.37.0

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

@@ -384,6 +384,17 @@ describe('q2-select', () => {
     await page.waitForChanges();
     expect(clickElsewhere).toHaveClass('is-searchable');
   });
+  describe('when options are NOT provided', () => {
+    it('zero is not rendered inside the click-elsewhere element (TCT-2433)', async () => {
+      page = await setup({
+        html: `<q2-select label="My Select"></q2-select>`,
+      });
+      select = await page.find('q2-select');
+      const clickElsewhere = await page.find('q2-select >>> click-elsewhere');
+      expect(await select.getProperty('label')).toBe('My Select');
+      expect(clickElsewhere.textContent.slice(-1)).not.toBe('0');
+    });
+  });
   describe('Events', () => {
     beforeEach(async () => {
       page = await setup({
@@ -1573,6 +1584,137 @@ describe('q2-select', () => {
       expect(await popover.getProperty('open')).toBe(false);
     });
   });
+  describe('Methods', () => {
+    beforeEach(async () => {
+      page = await setup({
+        html: `
+                    <q2-select label="My select">
+                        ${[1, 2, 3, 4, 5].map(item => `
+                            <q2-option value="${item}">
+                                Option ${item}
+                            </q2-option>
+                        `)}
+                    </q2-select>
+                `,
+      });
+      select = await page.find('q2-select');
+      popover = await page.find('q2-select >>> q2-popover');
+      innerInput = await page.find('q2-select >>> q2-input');
+    });
+    describe('openPopover', () => {
+      it('opens the popover', async () => {
+        const innerInputClickSpy = await innerInput.spyOnEvent('click');
+        expect(innerInputClickSpy).toHaveReceivedEventTimes(0);
+        expect(await popover.getProperty('open')).toBe(false);
+        await select.callMethod('openPopover');
+        await page.waitForChanges();
+        expect(await popover.getProperty('open')).toBe(true);
+        expect(innerInputClickSpy).toHaveReceivedEventTimes(1);
+        expect(await getActiveElementTestId(page)).toEqual('toggleDropdown');
+      });
+    });
+    describe('closePopover', () => {
+      it('closes the popover', async () => {
+        await innerInput.click();
+        await page.waitForChanges();
+        const innerInputClickSpy = await innerInput.spyOnEvent('click');
+        expect(innerInputClickSpy).toHaveReceivedEventTimes(0);
+        expect(await popover.getProperty('open')).toBe(true);
+        await select.callMethod('closePopover');
+        await page.waitForChanges();
+        expect(await popover.getProperty('open')).toBe(false);
+        expect(innerInputClickSpy).toHaveReceivedEventTimes(1);
+        expect(await getActiveElementTestId(page)).toEqual('toggleDropdown');
+      });
+    });
+    describe('setValue', () => {
+      it('sets the value on the select', async () => {
+        const inputChangeSpy = await select.spyOnEvent('change');
+        const inputInputSpy = await select.spyOnEvent('input');
+        expect(inputChangeSpy).toHaveReceivedEventTimes(0);
+        expect(inputInputSpy).toHaveReceivedEventTimes(0);
+        expect(await getActiveElementTestId(page)).toBeNull();
+        const newValue = '3';
+        const newDisplay = 'Option 3';
+        await select.callMethod('setValue', newValue);
+        await page.waitForChanges();
+        expect(inputChangeSpy).toHaveReceivedEventTimes(1);
+        expect(inputInputSpy).toHaveReceivedEventTimes(0);
+        expect(inputChangeSpy).toHaveReceivedEventDetail({
+          value: newValue,
+        });
+        expect(await select.getProperty('value')).toEqual(newValue);
+        expect(await innerInput.getProperty('value')).toEqual(newDisplay);
+        expect(await getActiveElementTestId(page)).toEqual('toggleDropdown');
+        await innerInput.press('Tab');
+        await page.waitForChanges();
+        expect(inputChangeSpy).toHaveReceivedEventTimes(1);
+        expect(await getActiveElementTestId(page)).toBeNull();
+      });
+      describe('when multiple is true', () => {
+        it('sets the values on the select', async () => {
+          await select.setProperty('multiple', true);
+          await page.waitForChanges();
+          const inputChangeSpy = await select.spyOnEvent('change');
+          const inputInputSpy = await select.spyOnEvent('input');
+          expect(inputChangeSpy).toHaveReceivedEventTimes(0);
+          expect(inputInputSpy).toHaveReceivedEventTimes(0);
+          expect(await getActiveElementTestId(page)).toBeNull();
+          const newValues = ['2', '3', '4'];
+          const newDisplays = ['Option 2', 'Option 3', 'Option 4'];
+          await select.callMethod('setValue', newValues);
+          await page.waitForChanges();
+          expect(inputChangeSpy).toHaveReceivedEventTimes(3);
+          expect(inputInputSpy).toHaveReceivedEventTimes(0);
+          expect(inputChangeSpy).toHaveReceivedEventDetail({
+            selectedOptions: newValues,
+          });
+          expect(await select.getProperty('selectedOptions')).toEqual(newValues);
+          expect(await innerInput.getProperty('value')).toEqual(newDisplays[0]);
+          expect(await getActiveElementTestId(page)).toEqual('toggleDropdown');
+          await innerInput.press('Tab');
+          await page.waitForChanges();
+          expect(inputChangeSpy).toHaveReceivedEventTimes(3);
+          expect(await getActiveElementTestId(page)).toBeNull();
+        });
+      });
+    });
+    describe('searchOptions', () => {
+      it('filters the list of options based on the value', async () => {
+        await select.setProperty('searchable', true);
+        await page.waitForChanges();
+        const inputChangeSpy = await select.spyOnEvent('change');
+        const inputInputSpy = await select.spyOnEvent('input');
+        expect(inputChangeSpy).toHaveReceivedEventTimes(0);
+        expect(inputInputSpy).toHaveReceivedEventTimes(0);
+        expect(await getActiveElementTestId(page)).toBeNull();
+        const query = 'Option 3';
+        expect(await popover.getProperty('open')).toBe(false);
+        await select.callMethod('searchOptions', query);
+        await page.waitForChanges();
+        expect(await popover.getProperty('open')).toBe(true);
+        expect(inputChangeSpy).toHaveReceivedEventTimes(0);
+        expect(inputInputSpy).toHaveReceivedEventTimes(1);
+        expect(inputInputSpy).toHaveReceivedEventDetail({
+          query,
+        });
+        expect(await select.getProperty('value')).toBeUndefined();
+        expect(await innerInput.getProperty('value')).toEqual(query);
+        expect(await getActiveElementTestId(page)).toEqual('toggleDropdown');
+        const allOptions = await page.findAll('q2-option');
+        expect(allOptions[0]).toHaveAttribute('hidden');
+        expect(allOptions[1]).toHaveAttribute('hidden');
+        expect(allOptions[2]).not.toHaveAttribute('hidden');
+        expect(allOptions[3]).toHaveAttribute('hidden');
+        expect(allOptions[4]).toHaveAttribute('hidden');
+        await innerInput.press('Tab');
+        await page.waitForChanges();
+        expect(await popover.getProperty('open')).toBe(false);
+        expect(inputChangeSpy).toHaveReceivedEventTimes(0);
+        expect(await getActiveElementTestId(page)).toBeNull();
+      });
+    });
+  });
   describe('Keyboard', () => {
     let options;
     const isInputFocused = async (page) => {
@@ -2128,6 +2270,67 @@ describe('q2-select', () => {
       });
     });
   });
+  describe('Updating option list dynamically', () => {
+    it('changing option list dynamically should be reflected to selected option', async () => {
+      page = await setup({
+        html: `
+                    <q2-select label="States" value="AK">
+                        <q2-option value="AL" display="Alabama">Alabama</q2-option>
+                        <q2-option value="AZ" display="Arizona">Arizona</q2-option>
+                        <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
+                        <q2-option value="AK" display="Alaska" selected>Alaska</q2-option>
+                    </q2-select>
+                `,
+      });
+      select = await page.find('q2-select');
+      input = await page.find('q2-select >>> q2-input');
+      innerInput = await page.find('q2-select >>> q2-input >>> input');
+      const option = await page.find('q2-option[value="AK"]');
+      expect(option).toHaveAttribute('selected');
+      expect(await select.getProperty('value')).toEqual('AK');
+      expect(await input.getProperty('value')).toEqual('Alaska');
+      expect(await innerInput.getProperty('value')).toEqual('Alaska');
+      // remove Alaska
+      await page.$eval('q2-select', element => {
+        element.querySelector('q2-option[value="AK"]').remove();
+      });
+      await page.waitForChanges();
+      expect(await select.getProperty('value')).toBeFalsy();
+      expect(await input.getProperty('value')).toBeFalsy();
+      expect(await innerInput.getProperty('value')).toBeFalsy();
+    });
+    it('changing option list dynamically should be reflected to selected options when multiple', async () => {
+      page = await setup({
+        html: `
+                    <q2-select label="States" multiple>
+                        <q2-option value="AL" display="Alabama">Alabama</q2-option>
+                        <q2-option value="AZ" display="Arizona">Arizona</q2-option>
+                        <q2-option value="AR" display="Arkansas">Arkansas</q2-option>
+                        <q2-option value="AK" display="Alaska">Alaska</q2-option>
+                    </q2-select>
+                `,
+      });
+      select = await page.find('q2-select');
+      options = await page.findAll('q2-option');
+      // total 4 options before removal
+      expect(options.length).toBe(4);
+      // select 2 options (Alabama and Arizona)
+      await dispatchEvent(page, 'q2-option:nth-child(1)', 'click', { bubbles: true });
+      await dispatchEvent(page, 'q2-option:nth-child(2)', 'click', { bubbles: true });
+      await page.waitForChanges();
+      expect(await select.getProperty('selectedOptions')).toEqual(['AL', 'AZ']);
+      // remove a selected option (Alabama)
+      await page.$eval('q2-select', element => {
+        element.querySelector('q2-option[value="AL"]').remove();
+      });
+      await page.waitForChanges();
+      // Arizona is the only option as selected
+      expect(await select.getProperty('selectedOptions')).toEqual(['AZ']);
+      // 3 options left after removal
+      options = await page.findAll('q2-option');
+      expect(options.length).toBe(3);
+    });
+  });
   describe('Accessibility', () => {
     it("option-list should have a role of 'listbox' and the options a role of 'option'", async () => {
       page = await setup({