@crowdstrike/glide-core 0.13.0 → 0.14.0

package/dist/checkbox-group.test.basics.js

@@ -1,116 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './checkbox.js';
-import { ArgumentError } from 'ow';
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreCheckboxGroup from './checkbox-group.js';
-import expectArgumentError from './library/expect-argument-error.js';
-import sinon from 'sinon';
-GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
-it('registers', async () => {
-    expect(window.customElements.get('glide-core-checkbox-group')).to.equal(GlideCoreCheckboxGroup);
-});
-it('has defaults', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    expect(component.disabled).to.be.false;
-    expect(component.hideLabel).to.be.false;
-    expect(component.name).to.be.empty.string;
-    expect(component.required).to.be.false;
-    // Not reflected, so no attribute assertion is necessary.
-    expect(component.value).to.deep.equal([]);
-});
-it('is accessible', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-      <div slot="tooltip">Tooltip</div>
-      <div slot="description">Description</div>
-    </glide-core-checkbox-group>`);
-    await expect(component).to.be.accessible();
-});
-it('can have a label', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    expect(component.getAttribute('label')).to.equal('Checkbox Group');
-    expect(component.label).to.equal('Checkbox Group');
-});
-it('can have a description', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-      <div slot="description">Description</div>
-    </glide-core-checkbox-group>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="description"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
-});
-it('can have a name', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    expect(component.getAttribute('name')).to.equal('name');
-    expect(component.name).to.equal('name');
-});
-it('can have a tooltip', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-      <div slot="tooltip">Tooltip</div>
-    </glide-core-checkbox-group>`);
-    const assignedElements = component.shadowRoot
-        ?.querySelector('slot[name="tooltip"]')
-        ?.assignedElements();
-    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
-});
-it('can be disabled initially', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled>
-      <glide-core-checkbox label="One"></glide-core-checkbox>
-      <glide-core-checkbox label="Two"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    const checkboxes = component.querySelectorAll('glide-core-checkbox');
-    expect(checkboxes[0].disabled).to.be.true;
-    expect(checkboxes[1].disabled).to.be.true;
-    expect(component.hasAttribute('disabled')).to.be.true;
-    expect(component.disabled).to.be.true;
-});
-it('can be disabled dynamically', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="One"></glide-core-checkbox>
-      <glide-core-checkbox label="Two"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    component.disabled = true;
-    await elementUpdated(component);
-    const checkboxes = component.querySelectorAll('glide-core-checkbox');
-    expect(checkboxes[0].disabled).to.be.true;
-    expect(checkboxes[1].disabled).to.be.true;
-    expect(component.hasAttribute('disabled')).to.be.true;
-    expect(component.disabled).to.be.true;
-});
-it('can be required', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    expect(component.hasAttribute('required')).to.be.true;
-    expect(component.required).to.be.true;
-});
-it('throws if it does not have a default slot', async () => {
-    const spy = sinon.spy();
-    try {
-        await fixture(html `<glide-core-checkbox-group
-        label="Checkbox Group"
-      ></glide-core-checkbox-group>`);
-    }
-    catch (error) {
-        if (error instanceof ArgumentError) {
-            spy();
-        }
-    }
-    expect(spy.callCount).to.equal(1);
-});
-it('throws if the default slot is the incorrect type', async () => {
-    await expectArgumentError(() => {
-        return fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-        <button>Button</button>
-      </glide-core-checkbox-group>`);
-    });
-});

package/dist/checkbox-group.test.events.d.ts

@@ -1 +0,0 @@
-import './checkbox.js';

package/dist/checkbox-group.test.events.js

@@ -1,111 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './checkbox.js';
-import * as sinon from 'sinon';
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import GlideCoreCheckboxGroup from './checkbox-group.js';
-GlideCoreCheckboxGroup.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, after which the event
-// will have been dispatched, gets the job done as well.
-it('dispatches a "click" event when clicked', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    setTimeout(() => component.click());
-    const event = await oneEvent(component, 'click');
-    expect(event instanceof PointerEvent).to.be.true;
-    expect(event.bubbles).to.be.true;
-});
-it('dispatches a "change" event when clicked', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    const checkbox = component.querySelector('glide-core-checkbox');
-    setTimeout(() => checkbox?.click());
-    const event = await oneEvent(component, 'change');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-});
-it('dispatches an "input" event when clicked', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    const checkbox = component.querySelector('glide-core-checkbox');
-    setTimeout(() => checkbox?.click());
-    const event = await oneEvent(component, 'input');
-    expect(event instanceof Event).to.be.true;
-    expect(event.bubbles).to.be.true;
-});
-it('dispatches an "invalid" event on submit when required and the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    setTimeout(() => form.requestSubmit());
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('dispatches an "invalid" event after `checkValidity` is called when required and the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    setTimeout(() => component.checkValidity());
-    const event = await oneEvent(component, 'invalid');
-    expect(event instanceof Event).to.be.true;
-});
-it('dispatches an "invalid" event after `reportValidity` is called when required and the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { 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 after `checkValidity` is called when not required', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.checkValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an "invalid" event after `checkValidity` is called when disabled but required and the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.checkValidity();
-    await aTimeout(0);
-    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');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.reportValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});
-it('does not dispatch an "invalid" event when `reportValidity` is called when disabled but required and the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" disabled required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    const spy = sinon.spy();
-    component.addEventListener('invalid', spy);
-    component.reportValidity();
-    await aTimeout(0);
-    expect(spy.callCount).to.equal(0);
-});

package/dist/checkbox-group.test.focus.d.ts

@@ -1 +0,0 @@
-import './checkbox.js';

package/dist/checkbox-group.test.focus.js

@@ -1,70 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './checkbox.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import GlideCoreCheckbox from './checkbox.js';
-import GlideCoreCheckboxGroup from './checkbox-group.js';
-GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
-GlideCoreCheckbox.shadowRootOptions.mode = 'open';
-it('focuses the first enabled checkbox when `focus()` is called', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="One" disabled></glide-core-checkbox>
-      <glide-core-checkbox label="Two"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    component.focus();
-    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox:last-of-type'));
-});
-it('focuses the first checkbox after submit when required but the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    form.requestSubmit();
-    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
-});
-it('focuses the first checkbox after `reportValidity` is called when required but the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    component.reportValidity();
-    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
-});
-it('focuses the first checkbox after `requestSubmit` is called when required but the checkbox is unchecked', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    form.requestSubmit();
-    expect(document.activeElement).to.equal(component.querySelector('glide-core-checkbox'));
-});
-it('does not focus the input after `checkValidity` is called', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    component.checkValidity();
-    expect(document.activeElement).to.not.equal(component.querySelector('glide-core-checkbox'));
-});
-it('reports validity of checkboxes if blurred', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group" required>
-      <glide-core-checkbox label="Checkbox1"></glide-core-checkbox>
-      <glide-core-checkbox label="Checkbox2"></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    component.focus();
-    const checkboxes = component.querySelectorAll('glide-core-checkbox');
-    expect(document.activeElement === checkboxes[0]).to.be.true;
-    await sendKeys({ press: 'Tab' });
-    expect(document.activeElement === checkboxes[1]).to.be.true;
-    expect(checkboxes[0].isReportValidityOrSubmit).to.be.false;
-    expect(checkboxes[1].isReportValidityOrSubmit).to.be.false;
-    await sendKeys({ press: 'Tab' });
-    expect(document.activeElement === document.body).to.be.true;
-    expect(component.validity.valid).to.be.false;
-    expect(checkboxes[0].validity.valid).to.be.false;
-    expect(checkboxes[0].isReportValidityOrSubmit).to.be.true;
-    expect(checkboxes[1].validity.valid).to.be.false;
-    expect(checkboxes[1].isReportValidityOrSubmit).to.be.true;
-});

package/dist/checkbox-group.test.form.d.ts

@@ -1 +0,0 @@
-import './checkbox.js';

package/dist/checkbox-group.test.form.js

@@ -1,131 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './checkbox.js';
-import { assert, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreCheckboxGroup from './checkbox-group.js';
-GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
-it('exposes standard form control properties and methods', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="Checkbox"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, { parentNode: form });
-    expect(component.form).to.equal(form);
-    expect(component.validity instanceof ValidityState).to.be.true;
-    expect(component.willValidate).to.be.true;
-    expect(component.checkValidity).to.be.a('function');
-    expect(component.reportValidity).to.be.a('function');
-});
-it('can be reset', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox
-        label="Checkbox"
-        value="value"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const checkbox = component.querySelector('glide-core-checkbox');
-    assert(checkbox);
-    checkbox.checked = false;
-    form.reset();
-    expect(component.value).to.deep.equal(['value']);
-});
-it('has `formData` when the checkboxes are checked', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
-      <glide-core-checkbox
-        label="One"
-        value="one"
-        checked
-      ></glide-core-checkbox>
-      <glide-core-checkbox
-        label="Two"
-        value="two"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.equal('["one","two"]');
-});
-it('has `formData` when the checkbox is checked and indeterminate', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
-      <glide-core-checkbox
-        label="Checkbox"
-        value="value"
-        checked
-        indeterminate
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.equal('["value"]');
-});
-it('has no `formData` when the checkboxes are unchecked', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
-      <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
-      <glide-core-checkbox label="Two" value="two"></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` when disabled and the checkbox is checked', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name" disabled>
-      <glide-core-checkbox
-        label="Checkbox"
-        value="value"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` when the checkbox is checked but disabled', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
-      <glide-core-checkbox
-        label="Checkbox"
-        value="value"
-        checked
-        disabled
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` when without a `name` but the checkbox is checked', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox
-        label="Checkbox"
-        value="value"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});
-it('has no `formData` value when the checkbox is checked but without a `value`', async () => {
-    const form = document.createElement('form');
-    await fixture(html `<glide-core-checkbox-group label="Checkbox Group" name="name">
-      <glide-core-checkbox label="Checkbox" checked></glide-core-checkbox>
-    </glide-core-checkbox-group>`, {
-        parentNode: form,
-    });
-    const formData = new FormData(form);
-    expect(formData.get('name')).to.be.null;
-});

package/dist/checkbox-group.test.interactions.d.ts

@@ -1 +0,0 @@
-import './checkbox.js';

package/dist/checkbox-group.test.interactions.js

@@ -1,82 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './checkbox.js';
-import { assert, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
-import GlideCoreCheckboxGroup from './checkbox-group.js';
-GlideCoreCheckboxGroup.shadowRootOptions.mode = 'open';
-it('checks and unchecks Checkboxes when `value` is changed programmatically', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox label="One" value="one"></glide-core-checkbox>
-      <glide-core-checkbox label="Two" checked></glide-core-checkbox>
-
-      <glide-core-checkbox
-        label="Three"
-        value="three"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    component.value = ['one'];
-    const checkboxes = component.querySelectorAll('glide-core-checkbox');
-    expect(checkboxes[0].checked).to.be.true;
-    expect(checkboxes[1].checked).to.be.true;
-    expect(checkboxes[2].checked).to.be.false;
-});
-it('updates `value` when the `value` of a checked Checkbox is changed programmatically', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox
-        label="One"
-        value="one"
-        checked
-      ></glide-core-checkbox>
-
-      <glide-core-checkbox
-        label="Two"
-        value="two"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    const checkbox = component.querySelector('glide-core-checkbox');
-    assert(checkbox);
-    checkbox.value = 'three';
-    await elementUpdated(component);
-    expect(component.value).to.deep.equal(['three', 'two']);
-    expect(component.getAttribute('value')).to.equal('["three","two"]');
-});
-it('updates `value` when the `value` of a checked Checkbox is emptied programmatically', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox
-        label="One"
-        value="one"
-        checked
-      ></glide-core-checkbox>
-
-      <glide-core-checkbox
-        label="Two"
-        value="two"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    const checkbox = component.querySelector('glide-core-checkbox');
-    assert(checkbox);
-    checkbox.value = '';
-    await elementUpdated(component);
-    expect(component.value).to.deep.equal(['two']);
-    expect(component.getAttribute('value')).to.equal('["two"]');
-});
-it('enables disabled Checkboxes when `value` is set programmatically', async () => {
-    const component = await fixture(html `<glide-core-checkbox-group label="Checkbox Group">
-      <glide-core-checkbox
-        label="One"
-        value="one"
-        disabled
-      ></glide-core-checkbox>
-
-      <glide-core-checkbox
-        label="Two"
-        value="two"
-        checked
-      ></glide-core-checkbox>
-    </glide-core-checkbox-group>`);
-    component.value = ['one', 'two'];
-    const checkbox = component.querySelector('glide-core-checkbox');
-    expect(checkbox?.disabled).to.be.false;
-});

package/dist/checkbox-group.test.validity.d.ts

@@ -1 +0,0 @@
-import './checkbox.js';