@crowdstrike/glide-core 0.5.1 → 0.6.0

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

@@ -0,0 +1,270 @@
+import './dropdown.option.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdown from './dropdown.js';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
+    await expect(component).to.be.accessible();
+});
+it('sets `value` to that of the initially selected options', async () => {
+    const component = await fixture(html `<glide-core-dropdown 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-option
+        label="Three"
+        value="three"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.value).to.deep.equal(['two', 'three']);
+});
+it('has selected option labels when options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <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>`);
+    const labels = component.shadowRoot?.querySelectorAll('[data-test="selected-option-label"]');
+    expect(labels?.length).to.equal(2);
+    expect(labels?.[0]?.textContent?.trim()).to.equal('One,');
+    expect(labels?.[1]?.textContent?.trim()).to.equal('Two,');
+});
+it('has a tag when an option is initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" 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>`);
+    const tag = component.shadowRoot?.querySelector('[data-test="tag"]');
+    expect(tag?.checkVisibility()).to.be.true;
+    expect(tag?.textContent?.trim()).to.equal('One');
+});
+it('only has so many tags when many options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <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-option
+        label="Three"
+        value="three"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Four"
+        value="four"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const tagContainers = [
+        ...(component.shadowRoot?.querySelectorAll('[data-test="tag-container"]') ?? []),
+    ].filter((element) => element.checkVisibility());
+    expect(tagContainers?.length).to.equal(3);
+});
+it('shows Select All', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      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>`);
+    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.checkVisibility()).to.be.ok;
+});
+it('sets Select All as selected when all options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      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>`);
+    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.selected).to.be.true;
+});
+it('sets Select All as deselected when no options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      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>`);
+    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.selected).to.be.false;
+});
+it('sets Select All as indeterminate when not all options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      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>`);
+    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.privateIndeterminate).to.be.true;
+});
+it('does not set Select All as indeterminate when no options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      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>`);
+    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.privateIndeterminate).to.be.false;
+});
+it('does not set Select All as indeterminate when all options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      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>`);
+    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.privateIndeterminate).to.be.false;
+});
+it('sets its internal label to `placeholder` when no option is initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <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 label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
+    expect(label?.textContent?.trim()).to.equal('Placeholder');
+});
+it('has no internal label when an option is initially selected', 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>`);
+    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
+    expect(label).to.not.exist;
+});

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

@@ -0,0 +1,79 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdown from './dropdown.js';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+it('is accessible ', 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>`);
+    await expect(component).to.be.accessible();
+});
+it('has a selected option label when an option is initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const labels = component.shadowRoot?.querySelectorAll('[data-test="selected-option-label"]');
+    expect(labels?.length).to.equal(1);
+    expect(labels?.[0]?.textContent?.trim()).to.equal('One,');
+});
+it('sets its internal label to the last initially selected option', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <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>`);
+    const label = component.shadowRoot?.querySelector('[data-test="internal-label"]');
+    expect(label?.textContent?.trim()).to.equal('Two');
+});
+it('sets `value` to that of the last initially selected option', 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"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Three"
+        value="three"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.value).to.deep.equal(['three']);
+});
+it('hides Select All', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <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>`);
+    const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
+    expect(selectAll?.checkVisibility()).to.not.be.ok;
+});

package/dist/dropdown.test.events.js

@@ -0,0 +1,268 @@
+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';
+// `await aTimeout(0)` is used throughout. Using `oneEvent` instead and
+// expecting it to throw would work. But it wouldn't throw until its
+// 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>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, { parentNode: form });
+    setTimeout(() => form.requestSubmit());
+    const event = await oneEvent(component, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an "invalid" event when `checkValidity` is called 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>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, { parentNode: form });
+    setTimeout(() => component.checkValidity());
+    const event = await oneEvent(component, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('dispatches an "invalid" event when `reportValidity` is called 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>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, { parentNode: form });
+    setTimeout(() => component.reportValidity());
+    const event = await oneEvent(component, 'invalid');
+    expect(event instanceof Event).to.be.true;
+});
+it('does not dispatch an "invalid" event when `checkValidity` is called when not required', async () => {
+    const form = document.createElement('form');
+    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>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+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');
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      disabled
+      required
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.checkValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+it('does not dispatch an "invalid" event when `reportValidity` is called when not required,', async () => {
+    const form = document.createElement('form');
+    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>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});
+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');
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      disabled
+      required
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`, { parentNode: form });
+    const spy = sinon.spy();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
+    await aTimeout(0);
+    expect(spy.notCalled).to.be.true;
+});