@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/test/sidenav.test.ts

@@ -0,0 +1,390 @@
+import { SgdsSidenav, SgdsSidenavItem, SgdsSidenavLink } from "../src/Sidenav";
+import "../src/Sidenav";
+import {
+  fixture,
+  assert,
+  expect,
+  waitUntil,
+  elementUpdated,
+  aTimeout,
+} from "@open-wc/testing";
+import { html } from "lit";
+import sinon from "sinon";
+
+describe("sgds-sidenav", () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-sidenav");
+    assert.instanceOf(el, SgdsSidenav);
+  });
+
+  it("can be semantically compare with shadowDom trees", async () => {
+    const el = await fixture(html`<sgds-sidenav></sgds-sidenav>`);
+    assert.shadowDom.equal(
+      el,
+      ` <nav class="sidenav">
+         <ul>
+          <slot></slot>
+        </ul>
+      </nav>`
+    );
+  });
+});
+
+describe("sgds-sidenav-item", () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-sidenav-item");
+    assert.instanceOf(el, SgdsSidenavItem);
+  });
+  it("without href, can be semantically compare with shadowDom trees", async () => {
+    const el = await fixture(html`<sgds-sidenav-item collapseId="collapseEg" buttonId="buttonEg"></sgds-sidenav-item>`);
+    assert.shadowDom.equal(
+      el,
+      `  <li class="sidenav-item" aria-haspopup="true">
+       <button class="collapsed sidenav-btn" aria-expanded="false" aria-controls="collapseEg" aria-selected="false" id="buttonEg" aria-disabled="false">
+         <slot name="title">
+         </slot>
+       </button>
+       <div class="collapse" id="collapseEg">
+         <ul class="sidenav-list" aria-labelledby="buttonEg">
+           <slot>
+           </slot>
+         </ul>
+       </div>
+     </li>`
+    );
+  });
+  it("with href, can be semantically compare with shadowDom trees", async () => {
+    const el = await fixture(html`<sgds-sidenav-item href="#"></sgds-sidenav-item>`);
+    assert.shadowDom.equal(
+      el,
+      `    <li class="sidenav-item" aria-haspopup="false">
+       <a
+         class="sidenav-btn"
+         href="#"
+         aria-selected="false"
+         aria-disabled="false"
+       >
+           <slot name="title">
+           </slot>
+       </a>`
+    );
+  });
+  it("when active is true, it conveys active class to .sidenav-btn", async () => {
+    const el = await fixture(html`<sgds-sidenav-item active></sgds-sidenav-item>`);
+    const sideNavBtn = el.shadowRoot?.querySelector(".sidenav-btn");
+    expect(sideNavBtn?.classList.value).to.contain("active");
+  });
+  it("when active is true, with href defined, it conveys active class to .sidenav-btn", async () => {
+    const el = await fixture(
+      html`<sgds-sidenav-item active href="#"></sgds-sidenav-item>`
+    );
+    const sideNavBtn = el.shadowRoot?.querySelector(".sidenav-btn");
+    expect(sideNavBtn?.classList.value).to.contain("active");
+  });
+  it("when disabled is true it conveys disabled class to .sidenav-btn and attributes", async () => {
+    const el = await fixture(
+      html`<sgds-sidenav-item disabled ></sgds-sidenav-item>`
+    );
+    const sideNavBtn = el.shadowRoot?.querySelector(".sidenav-btn");
+    expect(sideNavBtn?.classList.value).to.contain("disabled");
+    expect(sideNavBtn).to.have.attribute("disabled");
+    expect(sideNavBtn).to.have.attribute("aria-disabled", "true");
+  });
+  it("should emit sgds-toggle event when button is clicked", async () => {
+    const el = await fixture(html`<sgds-sidenav-item></sgds-sidenav-item>`);
+    const toggleHandler = sinon.spy();
+    el.addEventListener("sgds-toggle", toggleHandler);
+    el.shadowRoot?.querySelector("button")?.click();
+    expect(toggleHandler).to.have.been.calledOnce;
+  });
+  it("as a link (href defined), should emit sgds-toggle event when button is clicked", async () => {
+    const el = await fixture<SgdsSidenavItem>(
+      html`<sgds-sidenav-item href="#"></sgds-sidenav-item>`
+    );
+
+    const toggleHandler = sinon.spy();
+    el.addEventListener("sgds-toggle", toggleHandler);
+
+    el.shadowRoot?.querySelector("a")?.click();
+    expect(toggleHandler).to.have.been.calledOnce;
+  });
+  it("openItem and closeItem methods changes active class of sidenav button", async () => {
+    const el = await fixture<SgdsSidenavItem>(html`<sgds-sidenav-item></sgds-sidenav-item>`);
+    expect(
+      el.shadowRoot?.querySelector("button")?.classList.value
+    ).not.to.contain("active");
+    el.openItem();
+    await elementUpdated(el);
+    expect(el.shadowRoot?.querySelector("button")?.classList.value).to.contain(
+      "active"
+    );
+    el.closeItem();
+    await elementUpdated(el);
+    expect(
+      el.shadowRoot?.querySelector("button")?.classList.value
+    ).not.to.contain("active");
+  });
+  it("openItem and closeItem methods changes active class of sidenav button when href defined", async () => {
+    const el = await fixture<SgdsSidenavItem>(
+      html`<sgds-sidenav-item href="#"></sgds-sidenav-item>`
+    );
+    expect(el.shadowRoot?.querySelector("a")?.classList.value).not.to.contain(
+      "active"
+    );
+    el.openItem();
+    await elementUpdated(el);
+    expect(el.shadowRoot?.querySelector("a")?.classList.value).to.contain(
+      "active"
+    );
+    el.closeItem();
+    await elementUpdated(el);
+    expect(el.shadowRoot?.querySelector("a")?.classList.value).not.to.contain(
+      "active"
+    );
+  });
+  it("when clicked on an inactive sidenav-btn, turns it into active", async () => {
+    const el = await fixture<SgdsSidenavItem>(html`<sgds-sidenav-item></sgds-sidenav-item>`);
+    expect(
+      el.shadowRoot?.querySelector("button")?.classList.value
+    ).not.to.contain("active");
+    el.shadowRoot?.querySelector("button")?.click();
+    await elementUpdated(el);
+    expect(el.shadowRoot?.querySelector("button")).to.have.class("active");
+  });
+  it("when clicked on an inactive sidenav-btn link, turns it into active", async () => {
+    const el = await fixture<SgdsSidenavItem>(
+      html`<sgds-sidenav-item href="#"></sgds-sidenav-item>`
+    );
+    expect(el.shadowRoot?.querySelector("a")?.classList.value).not.to.contain(
+      "active"
+    );
+    el.shadowRoot?.querySelector("a")?.click();
+    await elementUpdated(el);
+    expect(el.shadowRoot?.querySelector("a")).to.have.class("active");
+  });
+});
+
+describe("sgds-sidenav-link", () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-sidenav-link");
+    assert.instanceOf(el, SgdsSidenavLink);
+  });
+});
+
+describe("sgds-sidenav, -item, -link interactions", () => {
+  it("by default when click on another item (link or button) should close opened sidenav", async () => {
+    const el = await fixture(html` <sgds-sidenav>
+      <sgds-sidenav-item active>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+      <sgds-sidenav-item>
+        <span slot="title">Title 2</span>
+        <sgds-sidenav-link href="https://google.com">4</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">5</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">6</sgds-sidenav-link>
+      </sgds-sidenav-item>
+      <sgds-sidenav-item href="#">
+        <span slot="title">Title 3</span>
+      </sgds-sidenav-item>
+    </sgds-sidenav>`);
+    // assert.shadowDom.equal(el, 'test')
+    expect(el.querySelectorAll("sgds-sidenav-item").length).to.equal(3);
+    const SgdsSidenavItemOne = el.querySelectorAll("sgds-sidenav-item")[0];
+    const SgdsSidenavItemTwo = el.querySelectorAll("sgds-sidenav-item")[1];
+    const SgdsSidenavItemThree = el.querySelectorAll("sgds-sidenav-item")[2];
+
+    expect(SgdsSidenavItemThree.shadowRoot?.querySelector("div")).to.be.null;
+    await waitUntil(() =>
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    );
+    await waitUntil(() =>
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    );
+    expect(
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    ).to.have.class("show");
+    expect(
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    ).not.to.have.class("show");
+
+    //onclick SgdsSidenavItemTwo button, should remove show from first
+    SgdsSidenavItemTwo?.shadowRoot?.querySelector("button")?.click();
+
+    await waitUntil(() =>
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse.show")
+    );
+    expect(
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    ).not.to.have.class("show");
+    expect(
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    ).to.have.class("show");
+
+    // click on link should collapse the other two side navs
+    SgdsSidenavItemThree?.shadowRoot?.querySelector("a")?.click();
+
+    // wait sometime for collapse to take place
+    await aTimeout(500);
+    expect(
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    ).not.to.have.class("show");
+    expect(
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    ).not.to.have.class("show");
+    expect(
+      SgdsSidenavItemThree.shadowRoot?.querySelector("a.sidenav-btn")
+    ).to.have.class("active");
+  });
+  it("when alwaysOpen is true, click on another item (link or button) should NOT close other opened sidenav", async () => {
+    const el = await fixture(html` <sgds-sidenav alwaysOpen>
+      <sgds-sidenav-item active>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+      <sgds-sidenav-item>
+        <span slot="title">Title 2</span>
+        <sgds-sidenav-link href="https://google.com">4</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">5</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">6</sgds-sidenav-link>
+      </sgds-sidenav-item>
+      <sgds-sidenav-item href="#">
+        <span slot="title">Title 3</span>
+      </sgds-sidenav-item>
+    </sgds-sidenav>`);
+
+    expect(el.querySelectorAll("sgds-sidenav-item").length).to.equal(3);
+    const SgdsSidenavItemOne = el.querySelectorAll("sgds-sidenav-item")[0];
+    const SgdsSidenavItemTwo = el.querySelectorAll("sgds-sidenav-item")[1];
+    const SgdsSidenavItemThree = el.querySelectorAll("sgds-sidenav-item")[2];
+
+    expect(SgdsSidenavItemThree.shadowRoot?.querySelector("div")).to.be.null;
+    await waitUntil(() =>
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    );
+    await waitUntil(() =>
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    );
+    expect(
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    ).to.have.class("show");
+    expect(
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    ).not.to.have.class("show");
+
+    //onclick SgdsSidenavItemTwo button, should NOT remove show from first
+    SgdsSidenavItemTwo?.shadowRoot?.querySelector("button")?.click();
+
+    await waitUntil(() =>
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse.show")
+    );
+    expect(
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    ).to.have.class("show");
+    expect(
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    ).to.have.class("show");
+
+    // click on link should NOT collapse the other two side navs
+    SgdsSidenavItemThree?.shadowRoot?.querySelector("a")?.click();
+
+    // wait sometime for collapse to take place
+    await aTimeout(500);
+    expect(
+      SgdsSidenavItemOne.shadowRoot?.querySelector("div.collapse")
+    ).to.have.class("show");
+    expect(
+      SgdsSidenavItemTwo.shadowRoot?.querySelector("div.collapse")
+    ).to.have.class("show");
+    expect(
+      SgdsSidenavItemThree.shadowRoot?.querySelector("a.sidenav-btn")
+    ).to.have.class("active");
+  });
+});
+describe("a11y - sgds-sidenav-item", () => {
+  it("button have aria-expanded=true when active", async () => {
+    const el = await fixture(html`
+      <sgds-sidenav-item active>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+    `);
+    const button = el.shadowRoot?.querySelector("button");
+    expect(button).to.have.attribute("aria-expanded", "true");
+  });
+  it("button to have aria-expanded=false when not active", async () => {
+    const el = await fixture(html`
+      <sgds-sidenav-item>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+    `);
+    const button = el.shadowRoot?.querySelector("button");
+    expect(button).to.have.attribute("aria-expanded", "false");
+  });
+  it("button to have a default aria-controls pointing to id of div.collapse element", async () => {
+    const el = await fixture(html`
+      <sgds-sidenav-item>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+    `);
+    const button = el.shadowRoot?.querySelector("button");
+    const buttonAriaControlAttr = button?.getAttribute('aria-controls')
+    const collapseId = el.shadowRoot?.querySelector("div.collapse")?.getAttribute('id')
+    expect(collapseId).to.contain('sidenav')
+    expect(collapseId).to.contain('collapse')
+    expect(buttonAriaControlAttr).to.equal(collapseId)
+  });
+  it("ul.sidenav-list el to have a default aria-labelledby pointing to id of button element", async () => {
+    const el = await fixture(html`
+      <sgds-sidenav-item>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+    `);
+    const button = el.shadowRoot?.querySelector("button");
+    const buttonId = button?.getAttribute('id')
+    expect(buttonId).to.contain('button')
+    expect(buttonId).to.contain('sidenav')
+    const ulSideNavListAttr = el.shadowRoot?.querySelector("ul.sidenav-list")?.getAttribute('aria-labelledby')
+    expect(buttonId).to.equal(ulSideNavListAttr)
+  });
+  it("when active, button should have aria-selected=true ", async () => {
+    const el = await fixture(html`
+      <sgds-sidenav-item active>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+    `);
+    const button = el.shadowRoot?.querySelector("button");
+    expect(button).to.have.attribute('aria-selected', 'true')
+  });
+  it("when active, anchor should have aria-selected=true ", async () => {
+    const el = await fixture(html`
+      <sgds-sidenav-item href="#" active>
+        <span slot="title">Title 1</span>
+        <sgds-sidenav-link href="https://google.com" active>1</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">2</sgds-sidenav-link>
+        <sgds-sidenav-link href="https://google.com">3</sgds-sidenav-link>
+      </sgds-sidenav-item>
+    `);
+    const anchor = el.shadowRoot?.querySelector("a");
+    expect(anchor).to.have.attribute('aria-selected', 'true')
+  });
+
+});

package/test/tab.test.ts

@@ -0,0 +1,76 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { SgdsTab } from '../src/Tab/sgds-tab'
+import '../src/Tab';
+
+describe('<sgds-tab>', () => {
+  it('passes accessibility test', async () => {
+    const el = await fixture<SgdsTab>(html`
+      <sgds-tab-group>
+        <sgds-tab slot="nav">Test</sgds-tab>
+      </sgds-tab-group>
+    `);
+    await expect(el).to.be.accessible();
+  });
+
+  it('should render default tab', async () => {
+    const el = await fixture<SgdsTab>(html` <sgds-tab>Test</sgds-tab> `);
+
+    const tab = el.shadowRoot!.querySelector<HTMLElement>('.tab')!;
+    expect(el.getAttribute('role')).to.equal('tab');
+    expect(el.getAttribute('aria-disabled')).to.equal('false');
+    expect(el.getAttribute('aria-selected')).to.equal('false');
+    expect(tab.getAttribute('tabindex')).to.equal('0');
+    expect(tab.getAttribute('class')).to.equal(' tab ');
+    expect(el.active).to.equal(false);
+    expect(el.disabled).to.equal(false);
+  });
+
+  it('should disable tab by attribute', async () => {
+    const el = await fixture<SgdsTab>(html` <sgds-tab disabled>Test</sgds-tab> `);
+
+    const tab = el.shadowRoot!.querySelector<HTMLElement>('.tab')!;
+
+    expect(el.disabled).to.equal(true);
+    expect(el.getAttribute('aria-disabled')).to.equal('true');
+    expect(tab.getAttribute('class')).to.equal(' tab tab--disabled ');
+    expect(tab.getAttribute('tabindex')).to.equal('-1');
+  });
+
+  it('should set active tab by attribute', async () => {
+    const el = await fixture<SgdsTab>(html` <sgds-tab active>Test</sgds-tab> `);
+
+    const tab = el.shadowRoot!.querySelector<HTMLElement>('.tab')!;
+
+    expect(el.active).to.equal(true);
+    expect(el.getAttribute('aria-selected')).to.equal('true');
+    expect(tab.getAttribute('class')).to.equal(' tab tab--active ');
+    expect(tab.getAttribute('tabindex')).to.equal('0');
+  });
+
+  describe('focus', () => {
+    it('should focus inner div', async () => {
+      const el = await fixture<SgdsTab>(html` <sgds-tab>Test</sgds-tab> `);
+
+      const tab = el.shadowRoot!.querySelector<HTMLElement>('.tab')!;
+
+      el.focus();
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement).to.equal(tab);
+    });
+  });
+
+  describe('blur', () => {
+    it('should blur inner div', async () => {
+      const el = await fixture<SgdsTab>(html` <sgds-tab>Test</sgds-tab> `);
+
+      el.focus();
+      await el.updateComplete;
+
+      el.blur();
+      await el.updateComplete;
+
+      expect(el.shadowRoot!.activeElement).to.equal(null);
+    });
+  });
+});

package/test/textarea.test.ts

@@ -0,0 +1,126 @@
+import { SgdsTextArea } from '../src/Textarea/sgds-textarea';
+import '../src/Textarea';
+import {SgdsButton} from '../src/Button/sgds-button';
+import '../src/Button';
+import { assert, fixture, html, expect, waitUntil, oneEvent } from '@open-wc/testing';
+import sinon from 'sinon';
+
+describe('sgds-textarea', () => {
+  it('is defined', () => {
+      const el = document.createElement('sgds-textarea');
+      assert.instanceOf(el, SgdsTextArea)
+  })
+  it('renders with default values', async () => {
+    const el = await fixture(html`<sgds-textarea textareaId="test" required invalidFeedback="Do not leave blank" maxlength="10"></sgds-textarea>`);
+    assert.shadowDom.equal(
+      el,
+      `
+      <div class="text-area-label-wrapper d-flex justify-content-between">
+        <label class="form-label" for="test">label</label>
+        <div class="form-text">0/10</div>
+      </div>
+      <textarea class=" form-control textarea-resize-vertical " id="test" rows="4" placeholder="Placeholder" maxlength="10" aria-invalid="false" spellcheck="false" required=""></textarea>
+      <div class="invalid-feedback" id="test-invalid">Do not leave blank</div>
+    `
+    );
+  })
+
+
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture<SgdsTextArea>(html` <sgds-textarea disabled></sgds-textarea> `);
+    const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('textarea')!;
+
+    expect(textarea.disabled).to.be.true;
+  });
+
+  it('should focus the textarea when clicking on the label', async () => {
+    const el = await fixture<SgdsTextArea>(html` <sgds-textarea label="Name"></sgds-textarea> `);
+    const label = el.shadowRoot!.querySelector('.form-label')!;
+    const submitHandler = sinon.spy();
+
+    el.addEventListener('sgds-focus', submitHandler);
+    (label as HTMLLabelElement).click();
+    await waitUntil(() => submitHandler.calledOnce);
+
+    expect(submitHandler).to.have.been.calledOnce;
+  });
+
+});
+
+describe('when using constraint validation', () => {
+  it('should be valid by default', async () => {
+    const el = await fixture<SgdsTextArea>(html` <sgds-textarea></sgds-textarea> `);
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should be valid when required and empty by default', async () => {
+    const el = await fixture<SgdsTextArea>(html` <sgds-textarea required></sgds-textarea> `);
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should be invalid when required and after removing disabled ', async () => {
+    const el = await fixture<SgdsTextArea>(html` <sgds-textarea disabled required></sgds-textarea> `);
+
+    el.disabled = false;
+    await el.updateComplete;
+
+    expect(el.invalid).to.be.true;
+  });
+
+  it('should be invalid when required and disabled is removed', async () => {
+    const el = await fixture<SgdsTextArea>(html` <sgds-textarea disabled required></sgds-textarea> `);
+    el.disabled = false;
+    await el.updateComplete;
+    expect(el.invalid).to.be.true;
+  });
+});
+
+describe('when resetting a form', () => {
+  it('should reset the element to its initial value', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <sgds-textarea name="a" value="test"></sgds-textarea>
+        <sgds-button type="reset">Reset</sgds-button>
+      </form>
+    `);
+    const button = form.querySelector<SgdsButton>('sgds-button')!;
+    const textarea = form.querySelector<SgdsTextArea>('sgds-textarea')!;
+    textarea.value = '1234';
+
+    await textarea.updateComplete;
+
+    setTimeout(() => button.click());
+    await oneEvent(form, 'reset');
+    await textarea.updateComplete;
+
+    expect(textarea.value).to.equal('test');
+
+    textarea.defaultValue = '';
+
+    setTimeout(() => button.click());
+    await oneEvent(form, 'reset');
+    await textarea.updateComplete;
+
+    expect(textarea.value).to.equal('');
+  });
+});
+
+describe('when maxlength is declared', () => {
+  it('form text should exist', async () => {
+    const el = await fixture<SgdsTextArea>(html` 
+      <sgds-textarea required maxlength="250"></sgds-textarea>
+    `);
+    const formtext = el.shadowRoot?.querySelector('.form-text');
+
+    expect(formtext).to.exist;
+    expect(formtext?.textContent).to.contain('0/250')
+
+    el.setAttribute('maxlength', '300')
+    await el.updateComplete;
+
+    expect(formtext).to.exist;
+    expect(formtext?.textContent).to.contain('0/300')
+
+  });
+});

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "lib": ["es2017", "dom", "dom.iterable"],
+    "declaration": true,
+    "declarationDir": "lib",
+    "sourceMap": true,
+    "inlineSources": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "rootDir": "src",
+  },
+  "include": [
+    "**/*.ts",
+  ],
+  "exclude": [
+    "node_modules",
+    "lib",
+    "test",
+     "mocks"
+  ],
+}

package/tsconfig.test.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+      "target": "es2017",
+      "module": "es2015",
+      "moduleResolution": "node",
+      "lib": ["es2017", "dom", "dom.iterable"],
+      "declaration": true,
+      "sourceMap": true,
+      "inlineSources": true,
+      "experimentalDecorators": true,
+      "skipLibCheck": true,
+      "noImplicitAny": false,
+      "importHelpers": true,
+      "allowSyntheticDefaultImports": true,
+    },
+    "include": [
+      "**/*.ts",
+    ],
+    "exclude": [
+      "node_modules",
+      "lib",
+      "src",
+    ],
+  }

package/typings/scss.d.ts

@@ -0,0 +1,5 @@
+declare module '*.scss' {
+  import { CSSResultGroup } from 'lit';
+  const styles: CSSResultGroup;
+  export default styles;
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,7 @@
+import { esbuildPlugin } from "@web/dev-server-esbuild";
+
+export default {
+  nodeResolve: true,
+  plugins: [esbuildPlugin({ ts: true })],
+  exportConditions: "production"
+};