@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/test/mainnav.test.ts

@@ -0,0 +1,313 @@
+import { SgdsMainnavItem, SgdsMainnav, SgdsMainnavDropdown } from "../src/Mainnav";
+import "../src/Mainnav";
+import {
+  fixture,
+  assert,
+  expect,
+  aTimeout,
+  fixtureCleanup,
+} from "@open-wc/testing";
+import { html } from "lit";
+
+describe("sgds-mainnav", () => {
+  afterEach(() => fixtureCleanup())
+  it("is defined", () => {
+    const el = document.createElement("sgds-mainnav");
+    assert.instanceOf(el, SgdsMainnav);
+  });
+
+  it("can be semantically compare with shadowDom trees", async () => {
+    const el = await fixture(
+      html`<sgds-mainnav collapseId="collapse-test-id"></sgds-mainnav>`
+    );
+    assert.shadowDom.equal(
+      el,
+      `<nav class="navbar navbar-expand-lg navbar-light sgds">
+       <a
+         class="me-auto navbar-brand order-1"
+         href=""
+       >
+         <slot name="brand">
+       </a>
+       <slot
+         class="order-2"
+         name="non-collapsible"
+       >
+       </slot>
+       <button
+         aria-controls="collapse-test-id"
+         aria-expanded="false"
+         aria-label="Toggle navigation"
+         class="navbar-toggler order-3"
+         type="button"
+       >
+       <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-list"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+            />
+          </svg>
+       </button>
+       <div
+         class="collapse navbar-collapse order-4"
+         id="collapse-test-id"
+       >
+         <ul class="navbar-nav">
+           <slot>
+           </slot>
+          <slot name="end">
+          </slot>
+         </ul>
+       </div>
+    `
+    );
+  });
+
+  it("brandHref props forwards to a.navbar-brand  href attribute", async () => {
+    const el = await fixture(
+      html`<sgds-mainnav brandHref="test"></sgds-mainnav>`
+    );
+    expect(
+      el.shadowRoot?.querySelector("a.navbar-brand")?.getAttribute("href")
+    ).to.equal("test");
+  });
+
+  it("when mode is offcanvas, offcanvas classes are present instead of collapse classes", async () => {
+    const el = await fixture(
+      html`<sgds-mainnav mode="offcanvas"></sgds-mainnav>`
+    );
+    expect(el.shadowRoot?.querySelector(".offcanvas.offcanvas-start.order-4"))
+      .to.exist;
+    expect(el.shadowRoot?.querySelector(".collapse.navbar-collapse.order-4"))
+      .not.to.exist;
+  });
+
+  it("when expand=always, nav class has .navbar-expand", async () => {
+    const el = await fixture(
+      html`<sgds-mainnav expand="always"></sgds-mainnav>`
+    );
+    expect(el.shadowRoot?.querySelector("nav.sgds.navbar")).to.have.class(
+      "navbar-expand"
+    );
+    const classList =
+      el.shadowRoot?.querySelector("nav.sgds.navbar")?.classList.value;
+    expect(/navbar-expand/.test(classList!)).to.be.true;
+  });
+  it("when expand=never, nav class does not have .navbar-expand", async () => {
+    const el = await fixture(
+      html`<sgds-mainnav expand="never"></sgds-mainnav>`
+    );
+    const classList =
+      el.shadowRoot?.querySelector("nav.sgds.navbar")?.classList.value;
+    expect(/navbar-expand/.test(classList!)).to.be.false;
+  });
+  const testSizes = ["sm", "md", "lg", "xl", "xxl"];
+  testSizes.forEach((size) => {
+    it(`when expand=${size}, nav class have .navbar-expand=${size}`, async () => {
+      const el = await fixture(
+        html`<sgds-mainnav expand=${size}></sgds-mainnav>`
+      );
+      const classList =
+        el.shadowRoot?.querySelector("nav.sgds.navbar")?.classList.value;
+      expect(/navbar-expand/.test(classList!)).to.be.true;
+      expect(classList).to.contain(`navbar-expand-${size}`);
+    });
+  });
+
+  it("in default mode (collapse menu), when .navbar-toggler is clicked .navbar-collapse has .show class and toggler has aria-expanded true", async () => {
+    const el = await fixture(
+      html`<sgds-mainnav expand="never"></sgds-mainnav>`
+    );
+    const mainNavCollapse = el.shadowRoot?.querySelector(".navbar-collapse");
+    expect(mainNavCollapse).not.to.have.class("show");
+    const toggler = el.shadowRoot?.querySelector(
+      "button.navbar-toggler"
+    ) as HTMLButtonElement;
+    expect(toggler.getAttribute('aria-expanded')).to.equal('false')
+    toggler?.click();
+    expect(mainNavCollapse).to.have.class("collapsing");
+    await aTimeout(500);
+    expect(mainNavCollapse).to.have.class("show");
+    expect(toggler.getAttribute('aria-expanded')).to.equal('true')
+    toggler?.click();
+    await aTimeout(500);
+    expect(mainNavCollapse).not.to.have.class("show");
+    expect(toggler.getAttribute('aria-expanded')).to.equal('false')
+  });
+  // initial window.innerWidth = 800 
+  // LG_BREAKPOINT = 992 
+  // since window.innerWidth < LG_BREAKPOINT --> expect non-collapsible slot to be .order-2 (see first test)
+  it('when expand=lg and window resize event occurs to above breakpoint, it changes order of non-collapsible slot, and end slot has class .slot-end', async() => {
+    const el = await fixture<SgdsMainnav>(
+      html`<sgds-mainnav expand="lg"></sgds-mainnav>`
+    );
+    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class('order-2')
+    expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class('slot-end')
+    Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1000, // value above LG_BREAKPOINT
+   })
+   window.dispatchEvent(new Event('resize'));
+   await el.updateComplete
+   expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class('order-5')
+   expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class('slot-end')
+
+  })
+  //SM_BREAKPOINT = 576
+  // now window.innerWidth = 1000
+  it('when expand=sm and window resize event occurs to above breakpoint, it changes order of non-collapsible slot and end slot has class slot-end ', async() => {
+    const el = await fixture<SgdsMainnav>(
+      html`<sgds-mainnav expand="sm"></sgds-mainnav>`
+    );
+    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class('order-5')
+    expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class('slot-end')
+    Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 576-1, // value below SM_BREAKPOINT
+   })
+   window.dispatchEvent(new Event('resize'));
+   await el.updateComplete
+   expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class('order-2')
+   expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class('slot-end')
+
+  })
+  // now window.innerWidth = 575
+  it('when expand=always and window resize event occurs, it NEVER changes order of non-collapsible slot and end slot ALWAYS have slot-end ', async() => {
+    const el = await fixture<SgdsMainnav>(
+      html`<sgds-mainnav expand="always"></sgds-mainnav>`
+    );
+    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class('order-5')
+    expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class('slot-end')
+
+    Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1, // trying extreme sizes
+   })
+   window.dispatchEvent(new Event('resize'));
+   await el.updateComplete
+   expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class('order-5')
+   expect(el.shadowRoot?.querySelector("slot[name='end']")).to.have.class('slot-end')
+
+
+   Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 100000, // trying extreme sizes
+   })
+   window.dispatchEvent(new Event('resize'));
+   await el.updateComplete
+   expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class('order-5')
+  })
+  it('when expand=never and window resize event occurs, it NEVER changes order of non-collapsible slot,  and end slot NEVER has class slot-end', async() => {
+    const el = await fixture<SgdsMainnav>(
+      html`<sgds-mainnav expand="never"></sgds-mainnav>`
+    );
+    expect(el.shadowRoot?.querySelector("slot[name='non-collapsible']")).to.have.class('order-2')
+    expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class('slot-end')
+
+    Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 1, // trying extreme sizes
+   })
+   window.dispatchEvent(new Event('resize'));
+   await el.updateComplete
+   expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class('order-2')
+   expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class('slot-end')
+
+   Object.defineProperty(window, 'innerWidth', {
+    writable: true,
+    configurable: true,
+    value: 100000, // trying extreme sizes
+   })
+   window.dispatchEvent(new Event('resize'));
+   await el.updateComplete
+   expect(el.shadowRoot?.querySelector('slot[name="non-collapsible"]')).to.have.class('order-2')
+   expect(el.shadowRoot?.querySelector("slot[name='end']")).not.to.have.class('slot-end')
+
+  })
+
+  // it('keyboard esc to exit offcanvas works', async() => {
+  //   const el = await fixture<SgdsMainnav>(
+  //     html`<sgds-mainnav expand="never" mode="offcanvas"></sgds-mainnav>`
+  //   );
+  //   el.shadowRoot?.querySelector('button')?.click()
+  //   await el.updateComplete
+  //   expect(el.shadowRoot?.querySelector(".offcanvas.show")).to.exist
+
+  //   el.dispatchEvent(new KeyboardEvent("keydown", {key: "Escape"}))
+  //   await el.updateComplete
+  //   expect(el.shadowRoot?.querySelector('.offcanvas')).not.to.have.class('show')
+      
+  // })
+  it('adds name attribute to elements in slot="end" only', async() => {
+    const el = await fixture<SgdsMainnav>(
+      html`<sgds-mainnav>
+        <div></div>
+        <sgds-mainnav-item slot="end"></sgds-mainnav-item>
+        <sgds-button slot="end"></sgds-button>
+      </sgds-mainnav>`
+    );
+    expect(el.querySelector('div')).not.to.have.attribute('name', 'div')
+    expect(el.querySelector('sgds-mainnav-item')).to.have.attribute('name', 'sgds-mainnav-item')
+    expect(el.querySelector('sgds-button')).to.have.attribute('name', 'sgds-button')
+
+  })
+});
+
+describe('sgds-mainnav-item', () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-mainnav-item");
+    assert.instanceOf(el, SgdsMainnavItem);
+  });
+})
+
+describe('sgds-mainnav-dropdown', () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-mainnav-dropdown");
+    assert.instanceOf(el, SgdsMainnavDropdown);
+  });
+  it("can be semantically compare with shadowDom trees", async () => {
+    const el = await fixture(html`<sgds-mainnav-dropdown togglerId="test-dropdown" togglerText="test"></sgds-mainnav-dropdown>`);
+    assert.shadowDom.equal(
+      el,
+      ` <li class="nav-item">
+      <a
+        class="nav-link"
+        aria-expanded="false"
+        id="test-dropdown"
+        tabindex="0"
+        role="button"
+        >
+        test
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"    
+          height="16"
+          fill="currentColor"
+          class="bi bi-chevron-down"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+          />
+        </svg>
+      </a>
+      <ul class="dropdown-menu" role="menu" part="menu">
+        <slot></slot>
+      </ul>
+    </li>`
+    );
+  });
+})

package/test/masthead.test.ts

@@ -0,0 +1,116 @@
+import { SgdsMasthead } from "../src/Masthead";
+import "../src/Masthead/sgds-masthead";
+import { fixture, assert, expect, elementUpdated } from "@open-wc/testing";
+import { html } from "lit";
+
+describe("sgds-masthead", () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-masthead");
+    assert.instanceOf(el, SgdsMasthead);
+  });
+
+
+  
+  it("renders with default values", async () => {
+    const el = await fixture(html`<sgds-masthead></sgds-masthead>`);
+    assert.shadowDom.equal(
+      el,
+      ` 
+      <div id="sgds-masthead" class="sgds-masthead" aria-label="A Singapore Government Agency Website">
+        <div class="container">
+          <div class="row">
+            <div class="col">
+              <div class="masthead-layout">
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="sg-crest">
+                  <title>sg-crest</title>
+                  <path d="M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z"></path>
+                  <path d="M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z"></path>
+                  <path d="M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z"></path>
+                  <path d="M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z"></path>
+                  <path d="M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z"></path>
+                  <path d="M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z"></path>
+                </svg>
+                <span>A Singapore Government Agency Website</span>
+                <div class="sgds-masthead-button" id="sgds-masthead-identify" role="button" aria-controls="sgds-masthead-content" aria-expanded="false">
+                  <span class="sgds-masthead-button-text">How to identify</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="sgds-masthead-identify-icon open">
+                    <path d="M8.65188 6.85L8.64813 6.84625L10.0031 5.49125L17.0744 12.5625L15.7194 13.9175L10.0075 8.20562L4.2875 13.9256L2.9325 12.5706L8.6525 6.85062L8.65188 6.85Z" fill="#2F60CE"></path>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="sgds-masthead-content" class="container sgds-masthead-content ">
+          <div class="row">
+            <div class="col">
+              <div class="content-grid">
+                <div class="wrapper">
+                  <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none" class="banner-icon">
+                      <path d="M0.166016 5.6665V9.00067H0.999349V13.9998H0.166016V16.4998H0.999349H3.49935H5.16602H7.66601H9.33268H11.8327H13.4993L15.9993 16.5007V16.4998H16.8327V13.9998H15.9993V9.00067H16.8327V5.6665L8.49935 0.666504L0.166016 5.6665ZM3.49935 13.9998V9.00067H5.16602V13.9998H3.49935ZM7.66601 13.9998V9.00067H9.33268V13.9998H7.66601ZM13.4993 13.9998H11.8327V9.00067H13.4993V13.9998ZM10.166 5.6665C10.166 6.58651 9.41935 7.33317 8.49935 7.33317C7.57935 7.33317 6.83268 6.58651 6.83268 5.6665C6.83268 4.7465 7.57935 3.99984 8.49935 3.99984C9.41935 3.99984 10.166 4.7465 10.166 5.6665Z" fill="#242425"></path>
+                    </svg>
+                  </div>
+                  <div class="content">
+                    <div class="title">
+                      Official website links end with .gov.sg
+                    </div>
+                    <article>
+                      Government agencies communicate via .gov.sg websites (e.g.
+                      go.gov.sg/open).
+                      <a href="https://www.gov.sg/trusted-sites#govsites" class="trusted-websites-link" rel="noreferrer" target="_blank">Trusted websites<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32" class="trusted-websites-icon">
+                          <title>Trusted websites</title>
+                          <path d="M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z"></path>
+                          <path d="M22.667 25.333h-16v-16h8v-2.667h-8c-1.473 0-2.667 1.194-2.667 2.667v16c0 1.473 1.194 2.667 2.667 2.667h16c1.473 0 2.667-1.194 2.667-2.667v-8h-2.667v8z"></path></svg></a>
+                    </article>
+                  </div>
+                </div>
+                <div class="wrapper">
+                  <div class="icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18" fill="none" class="banner-icon">
+                      <path d="M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z" fill="#242425"></path>
+                    </svg>
+                  </div>
+                  <div class="content">
+                    <div class="title">Secure websites use HTTPS</div>
+                    <article>
+                      Look for a<b> lock </b>(<svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 15 18" fill="none" class="banner-icon-inline">
+                        <path d="M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z" fill="#242425"></path></svg>) or https:// as an added precaution. Share sensitive
+                      information only on official, secure websites.
+                    </article>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      `
+    );
+  });
+
+  it("when clicked on #sgds-masthead-identify, shows #sgds-masthead-content", async () => {
+    const el = await fixture<SgdsMasthead>(html`<sgds-masthead></sgds-masthead>`);
+    expect(
+      el.shadowRoot?.getElementById("sgds-masthead-content")?.classList.value
+    ).not.to.contain("show");
+    el.shadowRoot?.getElementById("sgds-masthead-identify")?.click();
+    await elementUpdated(el);
+    expect(
+      el.shadowRoot?.getElementById("sgds-masthead-content")
+    ).to.have.class("show");
+  });
+
+  it("when fluid attriubute is inserted, .container class should update to .container-fluid", async () => {
+    const el = await fixture<SgdsMasthead>(html`<sgds-masthead></sgds-masthead>`);
+    const containerWrapper = el.shadowRoot?.getElementById("sgds-masthead")?.children[0]
+    expect(
+      containerWrapper?.classList.value
+    ).to.contain("container");
+    el.setAttribute("fluid","")
+    await elementUpdated(el);
+    expect(
+      containerWrapper?.classList.value
+    ).to.contain("container-fluid");
+  });
+});

package/test/modal.test.ts

@@ -0,0 +1,149 @@
+import { SgdsModal } from '../src/Modal/sgds-modal'
+import '../src/Modal/sgds-modal';
+import { expect, fixture, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon  from 'sinon';
+import { html } from "lit";
+
+describe('<sgds-modal>', () => {
+  it('should be visible with the open attribute', async () => {
+    const el = await fixture<SgdsModal>(html`
+      <sgds-modal open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should not be visible without the open attribute', async () => {
+    const el = await fixture<SgdsModal>(
+      html` <sgds-modal>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal> `
+    );
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+
+    expect(base.hidden).to.be.true;
+  });
+
+  it('should emit sgds-show and sgds-after-show when calling show()', async () => {
+    const el = await fixture<SgdsModal>(html`
+      <sgds-modal>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('sgds-show', showHandler);
+    el.addEventListener('sgds-after-show', afterShowHandler);
+    el.show();
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit sgds-hide and sgds-after-hide when calling hide()', async () => {
+    const el = await fixture<SgdsModal>(html`
+      <sgds-modal open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('sgds-hide', hideHandler);
+    el.addEventListener('sgds-after-hide', afterHideHandler);
+    el.hide();
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+
+  it('should emit sgds-show and sgds-after-show when setting open = true', async () => {
+    const el = await fixture<SgdsModal>(html`
+      <sgds-modal>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const showHandler = sinon.spy();
+    const afterShowHandler = sinon.spy();
+
+    el.addEventListener('sgds-show', showHandler);
+    el.addEventListener('sgds-after-show', afterShowHandler);
+    el.open = true;
+
+    await waitUntil(() => showHandler.calledOnce);
+    await waitUntil(() => afterShowHandler.calledOnce);
+
+    expect(showHandler).to.have.been.calledOnce;
+    expect(afterShowHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.false;
+  });
+
+  it('should emit sgds-hide and sgds-after-hide when setting open = false', async () => {
+    const el = await fixture<SgdsModal>(html`
+      <sgds-modal open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal>
+    `);
+    const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
+    const hideHandler = sinon.spy();
+    const afterHideHandler = sinon.spy();
+
+    el.addEventListener('sgds-hide', hideHandler);
+    el.addEventListener('sgds-after-hide', afterHideHandler);
+    el.open = false;
+
+    await waitUntil(() => hideHandler.calledOnce);
+    await waitUntil(() => afterHideHandler.calledOnce);
+
+    expect(hideHandler).to.have.been.calledOnce;
+    expect(afterHideHandler).to.have.been.calledOnce;
+    expect(base.hidden).to.be.true;
+  });
+
+  it('should not close when sgds-request-close is prevented', async () => {
+    const el = await fixture<SgdsModal>(html`
+      <sgds-modal open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal>
+    `);
+    const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part="overlay"]')!;
+
+    el.addEventListener('sgds-request-close', event => {
+      event.preventDefault();
+    });
+    overlay.click();
+
+    expect(el.open).to.be.true;
+  });
+
+  it('should allow initial focus to be set', async () => {
+    const el = await fixture<SgdsModal>(html` <sgds-modal><input /></sgds-modal> `);
+    const input = el.querySelector('input')!;
+    const initialFocusHandler = sinon.spy((event: Event) => {
+      event.preventDefault();
+      input.focus();
+    });
+
+    el.addEventListener('sgds-initial-focus', initialFocusHandler);
+    el.show();
+
+    await waitUntil(() => initialFocusHandler.calledOnce);
+
+    expect(initialFocusHandler).to.have.been.calledOnce;
+    expect(document.activeElement).to.equal(input);
+  });
+
+  it('should close when pressing Escape', async () => {
+    const el = await fixture<SgdsModal>(html` <sgds-modal open></sgds-modal> `);
+    const hideHandler = sinon.spy();
+
+    el.addEventListener('sgds-hide', hideHandler);
+
+    await sendKeys({ press: 'Escape' });
+    await waitUntil(() => hideHandler.calledOnce);
+
+    expect(el.open).to.be.false;
+  });
+});

package/test/quantitytoggle.test.ts

@@ -0,0 +1,76 @@
+import { SgdsQuantityToggle } from '../src/QuantityToggle/sgds-quantitytoggle';
+import '../src/QuantityToggle/sgds-quantitytoggle';
+import {fixture, assert, expect, aTimeout, waitUntil} from '@open-wc/testing';
+import {html} from 'lit';
+import sinon  from 'sinon';
+import { sendKeys } from "@web/test-runner-commands";
+import { SgdsButton } from '../src/Button';
+
+describe('sgds-quantitytoggle', () => {
+    it('is defined', () => {
+        const el = document.createElement('sgds-quantitytoggle');
+        assert.instanceOf(el, SgdsQuantityToggle)
+    })
+});
+
+describe('when minusBtn or plusBtn is clicked', () => {
+
+    it('should decrease and increase the count by 1 respectively', async () => {
+        const el = await fixture<SgdsQuantityToggle>(html`<sgds-quantitytoggle count="10"></sgds-quantitytoggle>`);
+        const minusBtn = el.shadowRoot?.querySelector('.button-group_button-first') as SgdsButton;
+        const plusBtn = el.shadowRoot?.querySelector('.button-group_button-last') as SgdsButton;
+        const inputEl = el.shadowRoot?.querySelector('.form-control');
+
+        const minusclickHandler = sinon.spy();
+        el.addEventListener('click', minusclickHandler);
+        minusBtn.click()
+        await waitUntil(() => minusclickHandler.calledOnce);
+
+        expect(el.count).to.equal(9);
+
+        const plusclickHandler = sinon.spy();
+        el.addEventListener('click', plusclickHandler);
+        plusBtn.click()
+        await waitUntil(() => plusclickHandler.calledOnce);
+        
+        expect(el.count).to.equal(10);
+    })
+
+    
+});
+
+describe('when count change', ()=> {
+    it("fires sgds-input event when value is entered", async () => {
+        const el = await fixture<SgdsQuantityToggle>(html`<sgds-quantitytoggle count="10"></sgds-quantitytoggle>`);
+        const inputEl = el.shadowRoot?.querySelector('input.form-control') as HTMLInputElement;
+        const inputHandler = sinon.spy();
+        inputEl.focus();
+        el.addEventListener("sgds-input", inputHandler);
+        await sendKeys({ press: "0" });
+        waitUntil(() => inputHandler.calledOnce);
+        expect(inputHandler).to.have.been.calledOnce;
+    });
+})
+
+describe('when step', ()=> {
+    it("should decrease and increase with steps", async () => {
+        const el = await fixture<SgdsQuantityToggle>(html`<sgds-quantitytoggle count="10" step="91"></sgds-quantitytoggle>`);
+        const minusBtn = el.shadowRoot?.querySelector('.button-group_button-first') as SgdsButton;
+        const plusBtn = el.shadowRoot?.querySelector('.button-group_button-last') as SgdsButton;
+        const inputEl = el.shadowRoot?.querySelector('.form-control');
+
+        const minusclickHandler = sinon.spy();
+        el.addEventListener('click', minusclickHandler);
+        minusBtn.click()
+        await waitUntil(() => minusclickHandler.calledOnce);
+
+        expect(el.count).to.equal(0);
+
+        const plusclickHandler = sinon.spy();
+        el.addEventListener('click', plusclickHandler);
+        plusBtn.click()
+        await waitUntil(() => plusclickHandler.calledOnce);
+        
+        expect(el.count).to.equal(91);
+    })
+});