@crowdstrike/glide-core 0.9.5 → 0.10.0

package/dist/textarea.test.basics.js

@@ -20,9 +20,9 @@ it('renders a textarea with two rows and value when attribute `value` is set ',
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
     expect(component);
-    expect(component).to.have.attribute('rows', '2');
+    expect(component?.getAttribute('rows')).to.equal('2');
     expect(textarea).to.exist;
-    expect(textarea).to.have.attribute('rows', '2');
+    expect(textarea?.getAttribute('rows')).to.equal('2');
 });
 it('renders the `rows` attribute on the textarea when set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -31,7 +31,7 @@ it('renders the `rows` attribute on the textarea when set', async () => {
       rows="5"
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('rows', '5');
+    expect(textarea?.getAttribute('rows')).to.equal('5');
 });
 it('renders a label when attribute `label` is set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -49,7 +49,7 @@ it('renders the textarea as readonly when attribute `readonly` is set', async ()
       readonly
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('readonly');
+    expect(textarea?.hasAttribute('readonly')).to.be.true;
 });
 it('renders the textarea as disabled when attribute `disabled` is set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -58,7 +58,7 @@ it('renders the textarea as disabled when attribute `disabled` is set', async ()
       disabled
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('disabled');
+    expect(textarea?.hasAttribute('disabled')).to.be.true;
 });
 it('renders the textarea with a placeholder when attribute `placeholder` is set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -67,7 +67,7 @@ it('renders the textarea with a placeholder when attribute `placeholder` is set'
       placeholder="placeholder"
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('placeholder', 'placeholder');
+    expect(textarea?.getAttribute('placeholder')).to.equal('placeholder');
 });
 it('renders `required` on textarea when set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -76,7 +76,7 @@ it('renders `required` on textarea when set', async () => {
       required
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('required');
+    expect(textarea?.hasAttribute('required')).to.be.true;
 });
 it('renders a `name` attribute on the textarea when set', async () => {
     const component = await fixture(html `<glide-core-textarea
@@ -85,7 +85,7 @@ it('renders a `name` attribute on the textarea when set', async () => {
       name="test-name"
     ></glide-core-textarea>`);
     const textarea = component.shadowRoot.querySelector('textarea');
-    expect(textarea).to.have.attribute('name', 'test-name');
+    expect(textarea?.getAttribute('name')).to.equal('test-name');
 });
 it('supports a "tooltip" slot', async () => {
     const component = await fixture(html `

package/dist/textarea.test.events.js

@@ -4,68 +4,68 @@ import * as sinon from 'sinon';
 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 textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.blur();
+        component.blur();
     });
-    const event = await oneEvent(textarea, 'input');
+    const event = await oneEvent(component, 'input');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
 });
 it('dispatches an `change` event when typed in', async () => {
-    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`);
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.blur();
+        component.blur();
     });
-    const event = await oneEvent(textarea, 'change');
+    const event = await oneEvent(component, 'change');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
 });
 it('dispatches an `invalid` event on submit when required and no value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(() => form.requestSubmit());
-    const event = await oneEvent(textarea, 'invalid');
+    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 no value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
-    setTimeout(() => textarea.checkValidity());
-    const event = await oneEvent(textarea, 'invalid');
+    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 no value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label" required></glide-core-textarea>`, {
         parentNode: form,
     });
-    setTimeout(() => textarea.reportValidity());
-    const event = await oneEvent(textarea, 'invalid');
+    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 textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.checkValidity();
+    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 required, no value, and disabled', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       required
       disabled
@@ -73,25 +73,25 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when re
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.checkValidity();
+    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 textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.reportValidity();
+    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 required, no value, and disabled', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       required
       disabled
@@ -99,78 +99,78 @@ it('does not dispatch an `invalid` event when `reportValidity` is called when re
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.reportValidity();
+    component.addEventListener('invalid', spy);
+    component.reportValidity();
     await aTimeout(0);
     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 textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
         form.requestSubmit();
     });
-    const event = await oneEvent(textarea, 'invalid');
+    const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
 });
 it('dispatches an `invalid` event after `checkValidity` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.checkValidity();
+        component.checkValidity();
     });
-    const event = await oneEvent(textarea, 'invalid');
+    const event = await oneEvent(component, 'invalid');
     expect(event instanceof Event).to.be.true;
 });
 it('dispatches an `invalid` event after `reportValidity` is called when `maxlength` exceeded', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     setTimeout(async () => {
-        textarea.focus();
+        component.focus();
         await sendKeys({ type: 'testing' });
-        textarea.reportValidity();
+        component.reportValidity();
     });
-    const event = await oneEvent(textarea, 'invalid');
+    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 `maxlength` not exceeded', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'ab' });
-    textarea.checkValidity();
+    component.checkValidity();
     await aTimeout(0);
     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 textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
       disabled
@@ -178,32 +178,32 @@ it('does not dispatch an `invalid` event after `checkValidity` is called when `m
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'test' });
-    textarea.checkValidity();
+    component.checkValidity();
     await aTimeout(0);
     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 textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
     ></glide-core-textarea>`, {
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'ab' });
-    textarea.reportValidity();
+    component.reportValidity();
     await aTimeout(0);
     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 textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       label="label"
       maxlength="3"
       disabled
@@ -211,10 +211,10 @@ it('does not dispatch an `invalid` event when `reportValidity` is called `maxlen
         parentNode: form,
     });
     const spy = sinon.spy();
-    textarea.addEventListener('invalid', spy);
-    textarea.focus();
+    component.addEventListener('invalid', spy);
+    component.focus();
     await sendKeys({ type: 'test' });
-    textarea.reportValidity();
+    component.reportValidity();
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });

package/dist/textarea.test.form.js

@@ -4,22 +4,22 @@ import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 it('can be reset to initial value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value="testing"
       label="label"
     ></glide-core-textarea>`, { parentNode: form });
-    textarea.focus();
+    component.focus();
     await sendKeys({ type: '-value' });
-    await expect(textarea.value).to.equal('testing-value');
+    await expect(component.value).to.equal('testing-value');
     form.reset();
-    expect(textarea.value).to.equal('testing');
+    expect(component.value).to.equal('testing');
 });
 it('can be reset if there was no initial value', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, { parentNode: form });
-    textarea.value = 'value';
+    const component = await fixture(html `<glide-core-textarea label="label"></glide-core-textarea>`, { parentNode: form });
+    component.value = 'value';
     form.reset();
-    expect(textarea.value).to.equal('');
+    expect(component.value).to.equal('');
 });
 it('has `formData` when it has a `value` and `name`', async () => {
     const form = document.createElement('form');
@@ -33,12 +33,12 @@ it('has `formData` when it has a `value` and `name`', async () => {
 });
 it('has `formData` when text is entered and has a `name`', async () => {
     const form = document.createElement('form');
-    const textarea = await fixture(html `<glide-core-textarea
+    const component = await fixture(html `<glide-core-textarea
       value=""
       label="label"
       name="name"
     ></glide-core-textarea>`, { parentNode: form });
-    textarea?.focus();
+    component?.focus();
     await sendKeys({ type: 'testing' });
     const formData = new FormData(form);
     expect(formData.get('name')).to.be.equal('testing');