@crowdstrike/glide-core 0.8.0 → 0.9.1

package/dist/textarea.test.basics.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import { expect, fixture } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTextarea from './textarea.js';
 GlideCoreTextarea.shadowRootOptions.mode = 'open';
@@ -7,13 +7,17 @@ it('registers', async () => {
     expect(window.customElements.get('glide-core-textarea')).to.equal(GlideCoreTextarea);
 });
 it('is accessible', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     await expect(element).to.be.accessible();
 });
 it('renders a textarea with two rows and value when attribute `value` is set ', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(element);
     expect(element).to.have.attribute('rows', '2');
@@ -21,119 +25,151 @@ it('renders a textarea with two rows and value when attribute `value` is set ',
     expect(textarea).to.have.attribute('rows', '2');
 });
 it('renders the `rows` attribute on the textarea when set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" rows="5"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      rows="5"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('rows', '5');
 });
 it('renders a label when attribute `label` is set', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     const label = element.shadowRoot.querySelector('label');
     expect(label).to.exist;
     expect(label?.textContent?.trim()).to.be.equal('label');
 });
 it('renders the textarea as readonly when attribute `readonly` is set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" readonly></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      readonly
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('readonly');
 });
 it('renders the textarea as disabled when attribute `disabled` is set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" disabled></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      disabled
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('disabled');
 });
 it('renders the textarea with a placeholder when attribute `placeholder` is set', async () => {
-    const template = `<glide-core-textarea value="" label="label" placeholder="placeholder"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value=""
+      label="label"
+      placeholder="placeholder"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('placeholder', 'placeholder');
 });
 it('renders `required` on textarea when set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" required></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      required
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('required');
 });
 it('renders a `name` attribute on the textarea when set', async () => {
-    const template = `<glide-core-textarea value="value" label="label" name="test-name"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+      name="test-name"
+    ></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     expect(textarea).to.have.attribute('name', 'test-name');
 });
 it('supports a "tooltip" slot', async () => {
-    const template = `
+    const element = await fixture(html `
     <glide-core-textarea value="value" label="label" required>
       <div slot="tooltip">Tooltip</div>
     </glide-core-textarea>
-  `;
-    const element = await fixture(template);
+  `);
     const assignedElements = element.shadowRoot
         ?.querySelector('slot[name="tooltip"]')
         ?.assignedElements();
     expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
 });
 it('renders a slot with description', async () => {
-    const template = `<glide-core-textarea value="value" label="label"><span slot="description" data-test-content>Description</slot></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="value" label="label"
+      ><span slot="description" data-test-content
+        >Description</span
+      ></glide-core-textarea
+    >`);
     expect(element).to.exist;
     const contentRendered = element.querySelector('[data-test-content]');
     expect(contentRendered).to.exist;
     expect(contentRendered?.textContent).to.be.equal('Description');
 });
+it('displays visually hidden character count text for screenreaders', async () => {
+    const element = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="10"
+    ></glide-core-textarea>`);
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 0 of 10');
+});
 it('renders a character count when attribute `maxlength` is set greater than zero', async () => {
-    const template = `<glide-core-textarea value="value" label="label" maxlength="10"><span slot="description">Description</span></glide-core-textarea>`;
-    const element = await fixture(template);
-    const container = element.shadowRoot.querySelector('[data-test-maxlength]');
+    const element = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="10"
+      ><span slot="description">Description</span></glide-core-textarea
+    >`);
+    const container = element.shadowRoot.querySelector('[data-test="character-count-text"]');
     expect(container?.textContent?.trim()).to.be.equal('5/10');
 });
 it('does not render a character count when attribute `maxlength` is set less than than zero', async () => {
-    const template = `<glide-core-textarea value="value" label="label" maxlength="0"><span slot="description" data-test-content>Description</span></glide-core-textarea>`;
-    const element = await fixture(template);
-    const container = element.shadowRoot.querySelector('[data-test-description-container]');
-    expect(container?.textContent?.trim()).to.be.equal('');
+    const element = await fixture(html `<glide-core-textarea value="value" label="label" maxlength="0"
+      ><span slot="description">Description</span></glide-core-textarea
+    >`);
+    const container = element.shadowRoot?.querySelector('[data-test="character-count-container"]');
+    expect(container).to.be.null;
 });
 it('focuses the textarea when the label is clicked', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     const label = element.shadowRoot.querySelector('label');
     label?.click();
     expect(element).to.have.focus;
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('has tabbable textarea', async () => {
-    const template = `<glide-core-textarea value="value" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea
+      value="value"
+      label="label"
+    ></glide-core-textarea>`);
     await sendKeys({ press: 'Tab' });
     expect(element).to.have.focus;
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('renders text when typed into text area', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     const textarea = element.shadowRoot.querySelector('textarea');
     element.focus();
     await sendKeys({ type: 'test text' });
     expect(textarea?.value).to.equal('test text');
 });
 it('returns the content of the textarea when getting the `value` property', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     element.focus();
     await sendKeys({ type: 'test text' });
     expect(element.value).to.equal('test text');
 });
-it('focuses the textarea when `focus` is called', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+it('focuses the textarea when `focus()` is called', async () => {
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     element.focus();
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
 });
 it('blurs the textarea when `blur` is called', async () => {
-    const template = `<glide-core-textarea value="" label="label"></glide-core-textarea>`;
-    const element = await fixture(template);
+    const element = await fixture(html `<glide-core-textarea value="" label="label"></glide-core-textarea>`);
     element.focus();
     await expect(element.shadowRoot?.activeElement?.tagName.toLocaleLowerCase()).to.be.equal('textarea');
     element.blur();

package/dist/textarea.test.events.js

@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './textarea.js';
 import * as sinon from 'sinon';
-import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 it('dispatches a `input` event when typed in', async () => {
-    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
         textarea.focus();
         await sendKeys({ type: 'testing' });
@@ -16,8 +15,7 @@ it('dispatches a `input` event when typed in', async () => {
     expect(event.bubbles).to.be.true;
 });
 it('dispatches an `change` event when typed in', async () => {
-    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
-    const textarea = await fixture(template);
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
         textarea.focus();
         await sendKeys({ type: 'testing' });
@@ -29,8 +27,7 @@ it('dispatches an `change` event when typed in', async () => {
 });
 it('dispatches an `invalid` event on submit when required and no value', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => form.requestSubmit());
@@ -39,8 +36,7 @@ it('dispatches an `invalid` event on submit when required and no value', async (
 });
 it('dispatches an `invalid` event after `checkValidity` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => textarea.checkValidity());
@@ -49,8 +45,7 @@ it('dispatches an `invalid` event after `checkValidity` is called when required
 });
 it('dispatches an `invalid` event after `reportValidity` is called when required and no value', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" required></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => textarea.reportValidity());
@@ -59,56 +54,62 @@ it('dispatches an `invalid` event after `reportValidity` is called when required
 });
 it('does not dispatch an `invalid` event after `checkValidity` is called when not required', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event after `checkValidity` is called when required, no value, and disabled', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" required disabled></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      required
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.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');
-    const template = `<glide-core-textarea label="label"></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.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, no value, and disabled', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" required disabled></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      required
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
     textarea.addEventListener('invalid', spy);
     textarea.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('dispatches an `invalid` event after `requestSubmit` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
@@ -121,8 +122,10 @@ it('dispatches an `invalid` event after `requestSubmit` is called when `maxlengt
 });
 it('dispatches an `invalid` event after `checkValidity` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
@@ -135,8 +138,10 @@ it('dispatches an `invalid` event after `checkValidity` is called when `maxlengt
 });
 it('dispatches an `invalid` event after `reportValidity` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
@@ -149,8 +154,10 @@ it('dispatches an `invalid` event after `reportValidity` is called when `maxleng
 });
 it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` not exceeded', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -159,12 +166,15 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when `m
     await sendKeys({ type: 'ab' });
     textarea.checkValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });
 it('does not dispatch an `invalid` event after `checkValidity` is called when `maxlength` exceeded and disabled', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" maxlength="3" disabled></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -173,12 +183,14 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when `m
     await sendKeys({ type: 'test' });
     textarea.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 and `maxlength` is not exceeded,', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" maxlength="3"></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -187,12 +199,15 @@ it('does not dispatch an `invalid` event when `reportValidity` is called and `ma
     await sendKeys({ type: 'ab' });
     textarea.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 `maxlength` exceeded and disabled,', async () => {
     const form = document.createElement('form');
-    const template = `<glide-core-textarea label="label" maxlength="3" disabled></glide-core-textarea>`;
-    const textarea = await fixture(template, {
+    const textarea = await fixture(html `<glide-core-textarea
+      label="label"
+      maxlength="3"
+      disabled
+    ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
@@ -201,5 +216,5 @@ it('does not dispatch an `invalid` event when `reportValidity` is called `maxlen
     await sendKeys({ type: 'test' });
     textarea.reportValidity();
     await aTimeout(0);
-    expect(spy.notCalled).to.be.true;
+    expect(spy.callCount).to.equal(0);
 });

package/dist/textarea.test.translations.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/textarea.test.translations.js

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTextarea from './textarea.js';
+GlideCoreTextarea.shadowRootOptions.mode = 'open';
+it('renders dynamic strings in Japanese', async () => {
+    const element = await fixture(html `
+    <glide-core-textarea
+      label="Test"
+      value="lorem"
+      maxlength="40"
+    ></glide-core-textarea>
+  `);
+    document.documentElement.setAttribute('lang', 'ja');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+});
+it('renders dynamic strings in French', async () => {
+    const element = await fixture(html `
+    <glide-core-textarea
+      label="Test"
+      value="lorem"
+      maxlength="40"
+    ></glide-core-textarea>
+  `);
+    document.documentElement.setAttribute('lang', 'fr');
+    await elementUpdated(element);
+    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
+    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
+    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
+    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
+});