@crowdstrike/glide-core 0.8.0 → 0.9.0

package/dist/dropdown.test.interactions.js

@@ -1,10 +1,22 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { assert, expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys, sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('opens when opened programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.open = true;
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.true;
+});
 it('opens on ArrowUp', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -14,9 +26,9 @@ it('opens on ArrowUp', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
-    const option = component.querySelector('glide-core-dropdown-option');
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
-    expect(option?.privateActive).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('does not open on ArrowUp when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
@@ -27,7 +39,9 @@ it('does not open on ArrowUp when `disabled`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not open on ArrowUp when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
@@ -38,7 +52,9 @@ it('does not open on ArrowUp when `readonly`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowUp' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('opens on ArrowDown', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -54,9 +70,9 @@ it('opens on ArrowDown', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
-    const option = component.querySelector('glide-core-dropdown-option');
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
-    expect(option?.privateActive).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('does not open on ArrowDown when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
@@ -72,7 +88,9 @@ it('does not open on ArrowDown when `disabled`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not open on ArrowDown when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
@@ -88,7 +106,9 @@ it('does not open on ArrowDown when `readonly`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: 'ArrowDown' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('opens on Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -99,7 +119,9 @@ it('opens on Space', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: ' ' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('does not open on Space when `disabled`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
@@ -110,7 +132,9 @@ it('does not open on Space when `disabled`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: ' ' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not open on Space when `readonly`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
@@ -121,7 +145,9 @@ it('does not open on Space when `readonly`', async () => {
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ press: ' ' });
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 // See the `document` click listener comment in `dropdown.ts` for an explanation.
 it('opens when opened programmatically via the click handler of another element', async () => {
@@ -136,7 +162,11 @@ it('opens when opened programmatically via the click handler of another element'
     button.addEventListener('click', () => (component.open = true));
     div.append(button);
     button.click();
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('closes when something outside of it is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -181,6 +211,49 @@ it('closes on Escape', async () => {
     await sendKeys({ press: 'Escape' });
     expect(component.open).to.be.false;
 });
+it('opens when open and enabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      disabled
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component.disabled = false;
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component?.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.true;
+});
+it('closes when open and disabled programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    component.disabled = true;
+    const options = component?.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.false;
+});
 it('activates an option on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
       <glide-core-dropdown-option
@@ -209,6 +282,8 @@ it('activates the next option on ArrowDown', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'ArrowDown' });
@@ -227,6 +302,8 @@ it('activates the previous option on ArrowUp', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     options[1]?.focus();
@@ -247,6 +324,8 @@ it('activates the first option on Home', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     expect(options[1].privateActive).to.be.true;
@@ -267,6 +346,8 @@ it('activates the first option on PageUp', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     options[1].focus();
@@ -287,6 +368,8 @@ it('activates the first option on ArrowUp + Meta', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
     expect(options[1]?.privateActive).to.be.true;
@@ -309,6 +392,8 @@ it('activates the last option on End', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'End' });
@@ -327,6 +412,8 @@ it('activates the last option on PageDown', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'PageDown' });
@@ -345,6 +432,8 @@ it('activates the last option on Meta + ArrowDown', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ down: 'Meta' });

package/dist/dropdown.test.interactions.multiple.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
+import { aTimeout, assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { sendMouse } from '@web/test-runner-commands';
 import GlideCoreDropdown from './dropdown.js';
@@ -25,7 +25,11 @@ it('opens on click', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('toggles open and closed when the button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -51,7 +55,10 @@ it('toggles open and closed when the button is clicked', async () => {
     component.shadowRoot
         ?.querySelector('[data-test="button"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    await elementUpdated(component);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.false;
+    expect(options?.checkVisibility()).to.be.false;
 });
 it('does not toggle open and closed when the button overflow text is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -77,7 +84,11 @@ it('does not toggle open and closed when the button overflow text is clicked', a
     component.shadowRoot
         ?.querySelector('[data-test="tag-overflow-text"]')
         ?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
     expect(component.open).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
 });
 it('selects options on click', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -123,6 +134,8 @@ it('selects options on Space', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: ' ' });
@@ -153,6 +166,8 @@ it('selects options on Enter', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.focus();
     await sendKeys({ press: 'Enter' });
@@ -398,6 +413,8 @@ it('updates `value` when a option is selected or deselected via Enter', async ()
 
       <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].focus();
     await sendKeys({ press: 'Enter' });
@@ -424,6 +441,8 @@ it('updates `value` when an option is selected or deselected via Space', async (
 
       <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[1].focus();
     await sendKeys({ press: ' ' });
@@ -626,7 +645,7 @@ it('deselects all but the last selected option when `multiple` is changed to `fa
     expect(options[0].selected).be.false;
     expect(options[1].selected).be.true;
 });
-it('selects all options when none are selected and Select All is clicked', async () => {
+it('selects all options when none are selected and Select All is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -650,7 +669,7 @@ it('selects all options when none are selected and Select All is clicked', async
     expect(options[0].selected).to.be.true;
     expect(options[1].selected).to.be.true;
 });
-it('selects all options when some are selected and Select All is clicked', async () => {
+it('selects all options when some are selected and Select All is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -675,7 +694,7 @@ it('selects all options when some are selected and Select All is clicked', async
     expect(options[0].selected).to.be.true;
     expect(options[1].selected).to.be.true;
 });
-it('deelects all options when all are selected and Select All is clicked', async () => {
+it('deselects all options when all are selected and Select All is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -701,8 +720,181 @@ it('deelects all options when all are selected and Select All is clicked', async
     expect(options[0].selected).to.be.false;
     expect(options[1].selected).to.be.false;
 });
+it('selects all options when none are selected and Select All is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: ' ' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('selects all options when some are selected and Select All is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: ' ' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('deselects all options when all are selected and Select All is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: ' ' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.false;
+    expect(options[1].selected).to.be.false;
+});
+it('selects all options when none are selected and Select All is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('selects all options when some are selected and Select All is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.true;
+    expect(options[1].selected).to.be.true;
+});
+it('deselects all options when all are selected and Select All is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      open
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    component?.shadowRoot
+        ?.querySelector('[data-test="select-all"]')
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    component.focus();
+    await sendKeys({ press: 'Enter' });
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0].selected).to.be.false;
+    expect(options[1].selected).to.be.false;
+});
 it('shows Select All', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -714,6 +906,8 @@ it('shows Select All', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     component.selectAll = true;
     await elementUpdated(component);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
@@ -786,6 +980,7 @@ it('sets Select All as indeterminate when not all options are selected', async (
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0].click();
+    await elementUpdated(component);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.privateIndeterminate).to.be.true;
 });
@@ -878,6 +1073,8 @@ it('does not select an option on Enter when the option is not focused', async ()
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const option = component.querySelector('glide-core-dropdown-option');
     option?.focus();
     await sendKeys({ down: 'Tab' });