@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/dropdown.test.basics.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
 import { ArgumentError } from 'ow';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
 import { repeat } from 'lit/directives/repeat.js';
 import GlideCoreDropdown from './dropdown.js';
 import expectArgumentError from './library/expect-argument-error.js';
@@ -42,6 +42,36 @@ it('has defaults', async () => {
     // Not reflected, so no attribute assertion is necessary.
     expect(component.value).to.deep.equal([]);
 });
+it('can be open', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
+    expect(component.open).to.be.true;
+    expect(component.hasAttribute('open')).to.be.true;
+    expect(options?.checkVisibility()).to.be.true;
+});
+it('cannot be open when disabled', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      disabled
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component?.shadowRoot?.querySelector('[data-test="options"]');
+    expect(options?.checkVisibility()).to.be.false;
+});
 it('can have a label', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
@@ -208,6 +238,117 @@ it('activates the last selected option when options are initially selected', asy
     expect(options[1]?.privateActive).to.be.false;
     expect(options[2]?.privateActive).to.be.true;
 });
+it('is scrollable', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <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-option
+        label="Three"
+        value="three"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Four"
+        value="four"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Five"
+        value="five"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Six"
+        value="six"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Seven"
+        value="seven"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Eight"
+        value="eight"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Nine"
+        value="nine"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Ten"
+        value="ten"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
+    assert(options);
+    expect(options.scrollHeight).to.be.greaterThan(options.clientHeight);
+});
+it('is not scrollable', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <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-option
+        label="Three"
+        value="three"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Four"
+        value="four"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Five"
+        value="five"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Six"
+        value="six"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Seven"
+        value="seven"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Eight"
+        value="eight"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Nine"
+        value="nine"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
+    const options = component.shadowRoot?.querySelector('[data-test="options"]');
+    assert(options);
+    expect(options.scrollHeight).to.equal(options.clientHeight);
+});
 it('throws if the default slot is the incorrect type', async () => {
     await expectArgumentError(() => {
         return fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
@@ -230,5 +371,5 @@ it('does not throw if the default slot only contains whitespace', async () => {
             spy();
         }
     }
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './dropdown.option.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 it('is accessible', async () => {
@@ -112,6 +112,7 @@ it('shows Select All', async () => {
       placeholder="Placeholder"
       multiple
       select-all
+      open
     >
       <glide-core-dropdown-option
         label="One"
@@ -124,8 +125,10 @@ it('shows Select All', async () => {
         value="two"
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
+    // Wait for it to open.
+    await aTimeout(0);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
-    expect(selectAll?.checkVisibility()).to.be.ok;
+    expect(selectAll?.checkVisibility()).to.be.true;
 });
 it('sets Select All as selected when all options are initially selected', async () => {
     const component = await fixture(html `<glide-core-dropdown

package/dist/dropdown.test.events.filterable.js

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import * as sinon from 'sinon';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreDropdown from './dropdown.js';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+const defaultSlot = html `
+  <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-option
+    label="Three"
+    value="three"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Four"
+    value="four"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Five"
+    value="five"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Six"
+    value="six"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Seven"
+    value="seven"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Eight"
+    value="eight"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Nine"
+    value="nine"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Ten"
+    value="ten"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Eleven"
+    value="eleven"
+  ></glide-core-dropdown-option>
+`;
+it('does not dispatch "input" events on input', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    component.focus();
+    await sendKeys({ type: ' one ' });
+    expect(spy.callCount).to.equal(0);
+});

package/dist/dropdown.test.events.js

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import * as sinon from 'sinon';
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+import { aTimeout, assert, expect, fixture, html, oneEvent, } from '@open-wc/testing';
 import GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
@@ -11,160 +10,6 @@ GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 // timeout, which would make for a slow test. Its timeout can likely be
 // configured. But waiting a turn of the event loop, when which the event
 // will have been dispatched, gets the job done as well.
-it('dispatches a "change" event when an option is selected via click', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const spy = sinon.spy();
-    component.addEventListener('change', spy);
-    setTimeout(() => {
-        component.querySelector('glide-core-dropdown-option')?.click();
-    });
-    const event = await oneEvent(component, 'change');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(spy.calledOnce).to.be.true;
-});
-it('dispatches a "change" event when an option is selected via Enter', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const spy = sinon.spy();
-    component.addEventListener('change', spy);
-    // Activate the first option before selecting it. The second option is
-    // currently active because it's selected.
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    component.focus();
-    sendKeys({ press: 'Enter' });
-    const event = await oneEvent(component, 'change');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(spy.calledOnce).to.be.true;
-});
-it('dispatches a "change" event when an option is selected via Space', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const spy = sinon.spy();
-    component.addEventListener('change', spy);
-    // Activate the first option before selecting it. The second option is
-    // currently active because it's selected.
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    component.focus();
-    sendKeys({ press: ' ' });
-    const event = await oneEvent(component, 'change');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(spy.calledOnce).to.be.true;
-});
-it('dispatches an "input" event when an option is selected via click', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const spy = sinon.spy();
-    component.addEventListener('input', spy);
-    setTimeout(() => {
-        component.querySelector('glide-core-dropdown-option')?.click();
-    });
-    const event = await oneEvent(component, 'input');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(spy.calledOnce).to.be.true;
-});
-it('dispatches an "input" event when an option is selected via Enter', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const spy = sinon.spy();
-    component.addEventListener('input', spy);
-    // Activate the first option before selecting it. The second option is
-    // currently active because it's selected.
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    component.focus();
-    sendKeys({ press: 'Enter' });
-    const event = await oneEvent(component, 'input');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(spy.calledOnce).to.be.true;
-});
-it('dispatches an "input" event when an option is selected via Space', async () => {
-    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-        selected
-      ></glide-core-dropdown-option>
-    </glide-core-dropdown>`);
-    const spy = sinon.spy();
-    component.addEventListener('input', spy);
-    // Activate the first option before selecting it. The second option is
-    // currently active because it's selected.
-    component
-        .querySelector('glide-core-dropdown-option')
-        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-    component.focus();
-    sendKeys({ press: ' ' });
-    const event = await oneEvent(component, 'input');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-    expect(spy.calledOnce).to.be.true;
-});
 it('dispatches an "invalid" event on submit when required and no option is selected', async () => {
     const form = document.createElement('form');
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
@@ -213,7 +58,7 @@ it('does not dispatch an "invalid" event when `checkValidity` is called when not
     component.addEventListener('invalid', spy);
     component.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `checkValidity` is called when required, disabled, and no option is selected', async () => {
     const form = document.createElement('form');
@@ -232,7 +77,7 @@ it('does not dispatch an "invalid" event when `checkValidity` is called when req
     component.addEventListener('invalid', spy);
     component.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
     const form = document.createElement('form');
@@ -246,7 +91,7 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when no
     component.addEventListener('invalid', spy);
     component.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an "invalid" event when `reportValidity` is called when required, disabled, and no option is selected', async () => {
     const form = document.createElement('form');
@@ -265,5 +110,49 @@ it('does not dispatch an "invalid" event when `reportValidity` is called when re
     component.addEventListener('invalid', spy);
     component.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a "change" event when an option is selected programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <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>`);
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    setTimeout(() => {
+        const option = component?.querySelector('glide-core-dropdown-option');
+        assert(option);
+        option.selected = true;
+    });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
+});
+it('does not dispatch a "input" event when an option is selected programmatically', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
+      <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>`);
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    setTimeout(() => {
+        const option = component?.querySelector('glide-core-dropdown-option');
+        assert(option);
+        option.selected = true;
+    });
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(0);
 });