q2-tecton-elements 1.37.0 → 1.38.0

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

@@ -19,7 +19,7 @@ describe('q2-select', () => {
     return page.$eval('q2-select', el => {
       var _a;
       return (_a = el.shadowRoot
-        .querySelector('q2-popover')) === null || _a === void 0 ? void 0 : _a.style.getPropertyValue('--comp-multi-select-header-height');
+        .querySelector('q2-popover')) === null || _a === void 0 ? void 0 : _a.style.getPropertyValue('--comp-popover-top-container-height');
     });
   };
   it('renders base state', async () => {
@@ -323,46 +323,118 @@ describe('q2-select', () => {
     // resize iframe fires on select close with click elsewhere
     expect(resizeIframe).toBeCalledTimes(6);
   });
-  it('allows custom display content', async () => {
-    page = await setup({
-      html: `<q2-select value="option-1">
-                        <div slot="q2-select-display">Custom option 1 display text</div>
-                        <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>
-            `,
-    });
-    const input = await page.find('q2-select >>> q2-input');
-    const slotContainer = await page.find('q2-select >>> .custom-display-content');
-    const slotData = await page.$eval('q2-select', element => {
-      const nodes = element.shadowRoot
-        .querySelector('slot[name="q2-select-display"]')
-        .assignedElements();
-      return {
-        childCount: nodes.length,
-        slot: nodes[0].getAttribute('slot'),
-        text: nodes[0].textContent,
-      };
+  describe('Slot content', () => {
+    describe('renders custom display slot content', () => {
+      it('when q2-select-display slot provided', async () => {
+        page = await setup({
+          html: `<q2-select value="option-1">
+                                <div slot="q2-select-display">Custom option 1 display text</div>
+                                <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>
+                    `,
+        });
+        const input = await page.find('q2-select >>> q2-input');
+        const slotContainer = await page.find('q2-select >>> .custom-display-content');
+        const slotData = await page.$eval('q2-select', element => {
+          const nodes = element.shadowRoot
+            .querySelector('slot[name="q2-select-display"]')
+            .assignedElements();
+          return {
+            childCount: nodes.length,
+            slot: nodes[0].getAttribute('slot'),
+            text: nodes[0].textContent,
+          };
+        });
+        expect(slotData.childCount).toEqual(1);
+        expect(slotData.slot).toEqual('q2-select-display');
+        expect(slotData.text).toEqual('Custom option 1 display text');
+        expect(await input.getProperty('value')).toEqual('');
+        expect(slotContainer).not.toHaveAttribute('hidden');
+        popover = await page.find('q2-select >>> q2-popover');
+        expect(await popover.getProperty('open')).toEqual(false);
+        await dispatchEvent(page, ['q2-select', '.custom-display-content'], 'click');
+        expect(await popover.getProperty('open')).toEqual(true);
+        await dispatchEvent(page, ['q2-select', '.custom-display-content'], 'click');
+        expect(await popover.getProperty('open')).toEqual(false);
+        await page.$eval('q2-select', element => {
+          const customContent = element.querySelector('[slot="q2-select-display"]');
+          customContent && customContent.remove();
+        });
+        await page.waitForChanges();
+        expect(await input.getProperty('value')).toEqual('Option 1');
+        expect(slotContainer).toHaveAttribute('hidden');
+      });
     });
-    expect(slotData.childCount).toEqual(1);
-    expect(slotData.slot).toEqual('q2-select-display');
-    expect(slotData.text).toEqual('Custom option 1 display text');
-    expect(await input.getProperty('value')).toEqual('');
-    expect(slotContainer).not.toHaveAttribute('hidden');
-    popover = await page.find('q2-select >>> q2-popover');
-    expect(await popover.getProperty('open')).toEqual(false);
-    await dispatchEvent(page, ['q2-select', '.custom-display-content'], 'click');
-    expect(await popover.getProperty('open')).toEqual(true);
-    await dispatchEvent(page, ['q2-select', '.custom-display-content'], 'click');
-    expect(await popover.getProperty('open')).toEqual(false);
-    await page.$eval('q2-select', element => {
-      const customContent = element.querySelector('[slot="q2-select-display"]');
-      customContent && customContent.remove();
+    describe('renders popover slots', () => {
+      it('when popover-top slot provided', async () => {
+        page = await setup({
+          html: `<q2-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>
+                            <div slot='popover-top'>Popover Slot Top</div>
+                        </q2-select>
+                `,
+        });
+        const slotContainer = await page.find('q2-select >>> .popover-top-container');
+        const slotData = await page.$eval('q2-select', element => {
+          const nodes = element.shadowRoot
+            .querySelector('slot[name="popover-top"]')
+            .assignedElements();
+          return {
+            childCount: nodes.length,
+            slot: nodes[0].getAttribute('slot'),
+            text: nodes[0].textContent,
+          };
+        });
+        expect(slotContainer).not.toHaveAttribute('hidden');
+        expect(slotData.childCount).toBe(1);
+        expect(slotData.slot).toBe('popover-top');
+        expect(slotData.text).toBe('Popover Slot Top');
+        await page.$eval('q2-select', element => {
+          const customContent = element.querySelector('[slot="popover-top"]');
+          customContent && customContent.remove();
+        });
+        await page.waitForChanges();
+        expect(slotContainer).toHaveAttribute('hidden');
+      });
+      it('when popover-bottom slot provided', async () => {
+        page = await setup({
+          html: `<q2-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>
+                            <div slot='popover-bottom'>Popover Slot Bottom</div>
+                        </q2-select>
+                `,
+        });
+        const topSlotContainer = await page.find('q2-select >>> .popover-top-container');
+        const bottomSlotContainer = await page.find('q2-select >>> .popover-bottom-container');
+        const slotData = await page.$eval('q2-select', element => {
+          const nodes = element.shadowRoot
+            .querySelector('slot[name="popover-bottom"]')
+            .assignedElements();
+          return {
+            childCount: nodes.length,
+            slot: nodes[0].getAttribute('slot'),
+            text: nodes[0].textContent,
+          };
+        });
+        expect(topSlotContainer).toHaveAttribute('hidden');
+        expect(bottomSlotContainer).not.toHaveAttribute('hidden');
+        expect(slotData.childCount).toBe(1);
+        expect(slotData.slot).toBe('popover-bottom');
+        expect(slotData.text).toBe('Popover Slot Bottom');
+        await page.$eval('q2-select', element => {
+          const customContent = element.querySelector('[slot="popover-bottom"]');
+          customContent && customContent.remove();
+        });
+        await page.waitForChanges();
+        expect(bottomSlotContainer).toHaveAttribute('hidden');
+      });
     });
-    await page.waitForChanges();
-    expect(await input.getProperty('value')).toEqual('Option 1');
-    expect(slotContainer).toHaveAttribute('hidden');
   });
   it('applies correct wrapper class', async () => {
     page = await setup({
@@ -1045,7 +1117,7 @@ describe('q2-select', () => {
             html: `<q2-select></q2-select>`,
           });
           const optionList = await page.find('q2-select >>> q2-option-list');
-          expect(optionList).toEqualAttribute('aria-label', 'tecton.element.select.listLabel');
+          expect(await optionList.getProperty('label')).toEqual('tecton.element.select.listLabel');
         });
       });
       describe('when provided', () => {
@@ -1054,7 +1126,7 @@ describe('q2-select', () => {
             html: `<q2-select list-label="Iron Man"></q2-select>`,
           });
           const optionList = await page.find('q2-select >>> q2-option-list');
-          expect(optionList).toEqualAttribute('aria-label', 'Iron Man');
+          expect(await optionList.getProperty('label')).toEqual('Iron Man');
         });
       });
     });
@@ -1867,14 +1939,17 @@ describe('q2-select', () => {
       });
       innerInput = await page.find('q2-select >>> q2-input >>> input');
       await innerInput.press('n');
+      await page.waitForChanges();
       const q2Select = await page.find('q2-select');
       const selectInput = await page.find('q2-select >>> q2-input');
       expect(await selectInput.getProperty('value')).toEqual('Nebraska');
       expect(await q2Select.getProperty('value')).toEqual('NE');
       await innerInput.press('n');
+      await page.waitForChanges();
       expect(await selectInput.getProperty('value')).toEqual('Nevada');
       expect(await q2Select.getProperty('value')).toEqual('NV');
       await innerInput.press('n');
+      await page.waitForChanges();
       expect(await selectInput.getProperty('value')).toEqual('New Hampshire');
       expect(await q2Select.getProperty('value')).toEqual('NH');
     });
@@ -2270,65 +2345,141 @@ 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>
-                `,
+  describe('Updating option list', () => {
+    describe('when multiple is false', () => {
+      it('does not modify the value when the selected option is removed', 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 alaskaSelector = 'q2-option[value="AK"]';
+        let option = await page.find(alaskaSelector);
+        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');
+        await page.$eval(alaskaSelector, element => element.remove());
+        await page.waitForChanges();
+        option = await page.find(alaskaSelector);
+        expect(option).toBeNull();
+        expect(await select.getProperty('value')).toEqual('AK');
+        expect(await input.getProperty('value')).toEqual('Alaska');
+        expect(await innerInput.getProperty('value')).toEqual('Alaska');
       });
-      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();
+      it('marks a newly added option as selected if it matches the value', async () => {
+        page = await setup({
+          html: `
+                        <q2-select label="States" value="CA">
+                            <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');
+        await page.waitForChanges();
+        expect(await select.getProperty('value')).toEqual('CA');
+        expect(await input.getProperty('value')).toEqual('CA');
+        expect(await innerInput.getProperty('value')).toEqual('CA');
+        await page.evaluate(() => {
+          const option = document.createElement('q2-option');
+          option.value = 'CA';
+          option.display = 'California';
+          option.textContent = 'California';
+          return document.querySelector('q2-select').appendChild(option);
+        });
+        await page.waitForChanges();
+        const californiaSelector = 'q2-option[value="CA"]';
+        const option = await page.find(californiaSelector);
+        expect(option).toHaveAttribute('selected');
+        expect(await select.getProperty('value')).toEqual('CA');
+        expect(await input.getProperty('value')).toEqual('CA');
+        expect(await innerInput.getProperty('value')).toEqual('CA');
       });
-      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();
+    describe('when multiple is true', () => {
+      it('does not modify selectedOptions when a selected option is removed', 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');
+        input = await page.find('q2-select >>> q2-input');
+        options = await page.findAll('q2-option');
+        await select.setProperty('selectedOptions', ['AL', 'AZ']);
+        await page.waitForChanges();
+        let selectedOptions = await page.findAll('q2-option[selected]');
+        expect(selectedOptions.length).toBe(2);
+        expect(options.length).toBe(4);
+        expect(await input.getProperty('value')).toEqual('Alabama');
+        const alabamaSelector = 'q2-option[value="AL"]';
+        await page.$eval(alabamaSelector, element => element.remove());
+        await page.waitForChanges();
+        const alabamaOption = await page.find(alabamaSelector);
+        expect(alabamaOption).toBeNull();
+        expect(await select.getProperty('selectedOptions')).toEqual(['AL', 'AZ']);
+        expect(await input.getProperty('value')).toEqual('Alabama');
+        options = await page.findAll('q2-option');
+        expect(options.length).toBe(3);
+        selectedOptions = await page.findAll('q2-option[selected]');
+        expect(selectedOptions.length).toBe(1);
+      });
+      it('marks a newly added option as selected if it matches a selectedOptions value', 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" selected>Alaska</q2-option>
+                        </q2-select>
+                    `,
+        });
+        select = await page.find('q2-select');
+        input = await page.find('q2-select >>> q2-input');
+        options = await page.findAll('q2-option');
+        await select.setProperty('selectedOptions', ['AL', 'CA']);
+        await page.waitForChanges();
+        let selectedOptions = await page.findAll('q2-option[selected]');
+        expect(selectedOptions.length).toBe(1);
+        expect(options.length).toBe(4);
+        expect(await input.getProperty('value')).toEqual('Alabama');
+        await page.evaluate(() => {
+          const option = document.createElement('q2-option');
+          option.value = 'CA';
+          option.display = 'California';
+          option.textContent = 'California';
+          return document.querySelector('q2-select').appendChild(option);
+        });
+        await page.waitForChanges();
+        const californiaSelector = 'q2-option[value="CA"]';
+        const option = await page.find(californiaSelector);
+        expect(option).toHaveAttribute('selected');
+        expect(await select.getProperty('selectedOptions')).toEqual(['AL', 'CA']);
+        expect(await input.getProperty('value')).toEqual('Alabama');
+        options = await page.findAll('q2-option');
+        expect(options.length).toBe(5);
+        selectedOptions = await page.findAll('q2-option[selected]');
+        expect(selectedOptions.length).toBe(2);
       });
-      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', () => {
@@ -2348,7 +2499,7 @@ describe('q2-select', () => {
       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];
+      const optionList = snapshot.children[2];
       expect(optionList.role).toEqual('listbox');
       expect(optionList.children).toHaveLength(3);
       optionList.children.forEach(child => {