@crowdstrike/glide-core 0.8.0 → 0.9.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);
 });

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

@@ -1,10 +1,211 @@
 /* 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 GlideCoreDropdown from './dropdown.js';
 import GlideCoreDropdownOption from './dropdown.option.js';
 GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('dispatches one "change" event when an option is selected via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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(() => {
+        // Calling `click()` isn't sufficient because it simply sets
+        // `selected` and so isn't likely to produce a duplicate event,
+        // we assert against below. The checkbox, because it produces
+        // its own "change" event, is most likely where the duplicate would
+        // come from.
+        component
+            .querySelector('glide-core-dropdown-option')
+            ?.shadowRoot?.querySelector('[data-test="checkbox"]')
+            ?.click();
+    });
+    const event = await oneEvent(component, 'change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "change" event when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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.callCount).to.equal(1);
+});
+it('dispatches one "change" event when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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.callCount).to.equal(1);
+});
+it('dispatches one "input" event when an option is selected via click', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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(() => {
+        // Calling `click()` isn't sufficient because it simply sets
+        // `selected` and so isn't likely to produce a duplicate event,
+        // we assert against below. The checkbox, because it produces
+        // its own "change" event, is most likely where the duplicate would
+        // come from.
+        component
+            .querySelector('glide-core-dropdown-option')
+            ?.shadowRoot?.querySelector('[data-test="checkbox"]')
+            ?.click();
+    });
+    const event = await oneEvent(component, 'input');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "input" event when an option is selected via Enter', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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.callCount).to.equal(1);
+});
+it('dispatches one "input" event when an option is selected via Space', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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.callCount).to.equal(1);
+});
 it('dispatches one "change" event when Select All is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
@@ -32,7 +233,7 @@ it('dispatches one "change" event when Select All is clicked', async () => {
             ?.click();
     });
     await aTimeout(0);
-    expect(spy.calledOnce).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('dispatches one "input" event when Select All is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -61,7 +262,7 @@ it('dispatches one "input" event when Select All is clicked', async () => {
             ?.click();
     });
     await aTimeout(0);
-    expect(spy.calledOnce).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
 it('does not dispatch a "change" event when `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -92,7 +293,7 @@ it('does not dispatch a "change" event when `value` is changed programmatically'
         component.value = ['one', 'two'];
     });
     await aTimeout(0);
-    expect(spy.called).to.be.false;
+    expect(spy.callCount).to.equal(0);
 });
 it('continues to dispatch "change" events upon selection after `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -156,7 +357,7 @@ it('does not dispatch an "input" event when `value` is changed programmatically'
         component.value = ['one', 'two'];
     });
     await aTimeout(0);
-    expect(spy.called).to.be.false;
+    expect(spy.callCount).to.equal(0);
 });
 it('continues to dispatch "input" events upon selection after `value` is changed programmatically', async () => {
     const component = await fixture(html `<glide-core-dropdown
@@ -191,7 +392,7 @@ it('continues to dispatch "input" events upon selection after `value` is changed
     const event = await oneEvent(component, 'input');
     expect(event instanceof Event).to.be.true;
 });
-it('dispatches a "change" event when an option is selected after Select All is clicked', async () => {
+it('dispatches one "change" event when an option is selected after Select All is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -222,9 +423,9 @@ it('dispatches a "change" event when an option is selected after Select All is c
         component.querySelector('glide-core-dropdown-option')?.click();
     });
     await aTimeout(0);
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
 });
-it('dispatches an "input" event when an option is selected after Select All is clicked', async () => {
+it('dispatches one "input" event when an option is selected after Select All is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown
       label="Label"
       placeholder="Placeholder"
@@ -255,5 +456,61 @@ it('dispatches an "input" event when an option is selected after Select All is c
         component.querySelector('glide-core-dropdown-option')?.click();
     });
     await aTimeout(0);
-    expect(spy.called).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "change" event when a tag is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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>`);
+    setTimeout(() => {
+        component.shadowRoot
+            ?.querySelector('[data-test="tag"]')
+            ?.click();
+    });
+    const spy = sinon.spy();
+    component.addEventListener('change', spy);
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "input" event when a tag is removed', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      open
+      multiple
+    >
+      <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>`);
+    setTimeout(() => {
+        component.shadowRoot
+            ?.querySelector('[data-test="tag"]')
+            ?.click();
+    });
+    const spy = sinon.spy();
+    component.addEventListener('input', spy);
+    await aTimeout(0);
+    expect(spy.callCount).to.equal(1);
 });