@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/test/footer.test.ts

@@ -0,0 +1,181 @@
+import { SgdsFooter, ColumnLinks } from "../src/Footer";
+import "../src/Footer/sgds-footer";
+import { fixture, assert, expect } from "@open-wc/testing";
+import { html } from "lit";
+
+describe("button-element", () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-footer");
+    assert.instanceOf(el, SgdsFooter);
+  });
+  it("renders with default values", async () => {
+    const el = await fixture(html`<sgds-footer></sgds-footer>`);
+    assert.shadowDom.equal(
+      el,
+      `
+          <footer class="sgds footer">
+          <section class="footer-top" part="footer-top">
+            <div class="container-fluid">
+              <div class="row footer-header">
+                <div class="col col-lg-6 col-md-12">
+                  <div class="title"></div>
+                  <div class="description"></div>
+                </div>
+              </div>
+              <div class="row footer-items">
+              </div>
+              <div class="row footer-contact-links">
+                <div class="col">
+                  <div class="d-flex justify-content-lg-end">
+                    <ul>
+                      <li><a href="#">Contact</a></li>
+                      <li><a href="#">Feedback</a></li>
+                      <li>
+                        <a
+                          href="https://www.reach.gov.sg/"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          >Reach.gov.sg</a
+                        >
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+          <section class="footer-bottom" part="footer-bottom">
+            <div class="container-fluid">
+              <div class="row footer-mandatory-links">
+                <div class="col">
+                  <ul>
+                    <li>
+                      <a
+                        href="#"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >Report Vulnerability</a
+                      >
+                    </li>
+                    <li><a href="#">Privacy Statement</a></li>
+                    <li><a href="#">Terms of use</a></li>
+                  </ul>
+                </div>
+              </div>
+              <div class="row footer-copyrights">
+                <div class="col">
+                  <div class="d-flex justify-content-lg-end text-end">
+                    © ${new Date().getFullYear()} Government of Singapore<br />
+                    Last Updated
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </footer>
+          `
+    );
+  });
+
+  it("description prop forward to .description class", async () => {
+    const el = await fixture(
+      html`<sgds-footer description="test description"></sgds-footer>`
+    );
+    expect(el.shadowRoot?.querySelector(".description")?.textContent).to.equal(
+      "test description"
+    );
+  });
+
+  it("title prop forward to approriate .title class", async () => {
+    const el = await fixture(
+      html`<sgds-footer title="test title"></sgds-footer>`
+    );
+    expect(el.shadowRoot?.querySelector(".title")?.textContent).to.equal(
+      "test title"
+    );
+  });
+  it("lastUpdatedDate prop forward to approriate div el", async () => {
+    const el = await fixture(
+      html`<sgds-footer lastUpdatedDate="08 Feb 2022"></sgds-footer>`
+    );
+    expect(
+      el.shadowRoot?.querySelector(".footer-copyrights>div.col>div")
+        ?.textContent
+    ).to.contain("08 Feb 2022");
+  });
+
+  it("contactHref prop forward to contact's href attr", async () => {
+    const el = await fixture(
+      html`<sgds-footer contactHref="test"></sgds-footer>`
+    );
+    expect(
+      el.shadowRoot?.querySelector("a[href='test']")?.textContent
+    ).to.contain("Contact");
+  });
+
+  it("feedbackHref prop forward to feedback's href attr", async () => {
+    const el = await fixture(
+      html`<sgds-footer feedbackHref="test"></sgds-footer>`
+    );
+    expect(
+      el.shadowRoot?.querySelector("a[href='test']")?.textContent
+    ).to.contain("Feedback");
+  });
+  it("vulnerabilityHref prop forward to Report Vulnerability's href attr", async () => {
+    const el = await fixture(
+      html`<sgds-footer vulnerabilityHref="test"></sgds-footer>`
+    );
+    expect(
+      el.shadowRoot?.querySelector("a[href='test']")?.textContent
+    ).to.contain("Report Vulnerability");
+  });
+  it("privacyHref prop forward to Privacy Statement's href attr", async () => {
+    const el = await fixture(
+      html`<sgds-footer privacyHref="test"></sgds-footer>`
+    );
+    expect(
+      el.shadowRoot?.querySelector("a[href='test']")?.textContent
+    ).to.contain("Privacy Statement");
+  });
+  it("termsOfUseHref prop forward to Terms of use's href attr", async () => {
+    const el = await fixture(
+      html`<sgds-footer termsOfUseHref="test"></sgds-footer>`
+    );
+    expect(
+      el.shadowRoot?.querySelector("a[href='test']")?.textContent
+    ).to.contain("Terms of use");
+  });
+
+  
+  it("links prop accepts an array", async () => {
+    const linkArray: ColumnLinks[] = [
+      {
+        title: "test-1",
+        links: [
+          { href: "test-href-1", label: "test-label-1" },
+          { href: "test-href-2", label: "test-label-2" },
+        ],
+      },
+      {
+        title: "test-2",
+        links: [
+          { href: "test-href-1", label: "test-label-1" },
+          { href: "test-href-2", label: "test-label-2" },
+        ],
+      },
+    ];
+    const el = await fixture(
+      html`<sgds-footer .links=${linkArray}></sgds-footer>`
+    );
+    
+    expect(el.shadowRoot?.querySelectorAll('.footer-items>div').length).to.equal(2)
+    expect(el.shadowRoot?.querySelectorAll('.footer-items>div')[0].textContent).to.contain('test-1')
+    expect(el.shadowRoot?.querySelectorAll('.footer-items>div')[1].textContent).to.contain('test-2')
+    expect(el.shadowRoot?.querySelectorAll('ul.links>li>a').length).to.equal(4)
+    expect(el.shadowRoot?.querySelectorAll('li>a[href="test-href-1"]').length).to.equal(2)
+    expect(el.shadowRoot?.querySelectorAll('li>a[href="test-href-1"]')[0].textContent).to.equal('test-label-1')
+    expect(el.shadowRoot?.querySelectorAll('li>a[href="test-href-2"]').length).to.equal(2)
+    expect(el.shadowRoot?.querySelectorAll('li>a[href="test-href-2"]')[0].textContent).to.equal('test-label-2')
+    
+  });
+});

package/test/generateId.test.ts

@@ -0,0 +1,18 @@
+import generateId from "../src/utils/generateId";
+import { expect } from "@open-wc/testing";
+import sinon from "sinon";
+
+describe("generateId function", () => {
+  sinon.stub(Math, "random").returns(1234567);
+
+  it("returns a string", () => {
+    expect(typeof generateId()).to.equal("string");
+  });
+  it("returns an id with the correct structure", () => {
+    expect(generateId()).to.equal("id-3456-sgds--");
+  });
+
+  it("when suffix specified , should return with suffix", () => {
+    expect(generateId("test", 'test')).to.equal("id-3456-sgds-test-test");
+  });
+});

package/test/input.element.test.ts

@@ -0,0 +1,316 @@
+import { SgdsInput } from "../src/Input/sgds-input";
+import type SgdsButton from "../src/Button/sgds-button";
+import "../src/Input";
+import "../src/Button";
+import {
+  expect,
+  fixture,
+  html,
+  oneEvent,
+  waitUntil,
+  assert,
+  elementUpdated,
+} from "@open-wc/testing";
+import sinon from "sinon";
+import { sendKeys } from "@web/test-runner-commands";
+
+describe("sgds-input", () => {
+  it("is defined", () => {
+    const el = document.createElement("sgds-input");
+    assert.instanceOf(el, SgdsInput);
+  });
+  it("renders with default values", async () => {
+    const el = await fixture(
+      html`<sgds-input inputId="test-id" label="label"></sgds-input>`
+    );
+    assert.shadowDom.equal(
+      el,
+      `
+        <label class="form-label" for="test-id">label</label>
+        <input type="text" class="form-control " id="test-id" placeholder="Placeholder" aria-invalid="false">
+        <div class="invalid-feedback" id="test-id-invalid">default feedback</div>
+    `
+    );
+  });
+
+  it("should be disabled with the disabled attribute", async () => {
+    const el = await fixture<SgdsInput>(
+      html` <sgds-input disabled></sgds-input> `
+    );
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>("input")!;
+
+    expect(input.disabled).to.be.true;
+  });
+
+  // Labels
+  it("should replace label value the if updated", async () => {
+    const el = await fixture(html`<sgds-input></sgds-input>`);
+    el.setAttribute("label", "Enter your name");
+    await elementUpdated(el);
+    const labelText = el.shadowRoot?.querySelector(".form-label");
+    expect(labelText?.textContent).to.contain("Enter your name");
+  });
+
+  // Hint Text
+  it("should render hint text element if hintText attribute is defined", async () => {
+    const el = await fixture(html`<sgds-input hintText="hint"></sgds-input>`);
+    const hintText = el.shadowRoot?.querySelector(".form-text");
+    el.setAttribute("hintText", "hint");
+    await elementUpdated(el);
+    expect(hintText?.textContent).to.equal("hint");
+    expect(hintText).to.exist;
+  });
+
+  // Icon
+  it("should render with fom-control-group if iconName attribute is defined", async () => {
+    const el = await fixture(
+      html`<sgds-input iconName="search" inputId="defaultID"></sgds-input>`
+    );
+    assert.shadowDom.equal(
+      el,
+      `
+        <div class="sgds form-control-group">
+          <span class="form-control-icon">
+            <sl-icon name="search"></sl-icon> 
+          </span>
+          <input type="text" class="form-control " id="defaultID" placeholder="Placeholder" aria-invalid="false">
+          <div class="invalid-feedback" id="defaultID-invalid">default feedback</div>
+        </div>
+      `
+    );
+  });
+
+  it("updates the iconName attribute value to 'stack'", async () => {
+    const el = await fixture(html`<sgds-input iconName="search"></sgds-input>`);
+    const iconElement = el.shadowRoot?.querySelector("sl-icon");
+    iconElement?.setAttribute("name", "stack");
+    await elementUpdated(el);
+    expect(iconElement?.getAttribute("name")).to.equal("stack");
+  });
+
+  //Name
+  it("updates the name attribute value to 'Hello'", async () => {
+    const el = await fixture(html`<sgds-input></sgds-input>`);
+    el?.setAttribute("name", "Hello");
+    await elementUpdated(el);
+    const name = el.shadowRoot?.querySelector(".form-control");
+    expect(name?.getAttribute("name")).to.equal("Hello");
+  });
+
+  //Placeholder
+  it("updates the default placeholder value to 'Hello'", async () => {
+    const el = await fixture(html`<sgds-input></sgds-input>`);
+    el?.setAttribute("placeholder", "Hello");
+    await elementUpdated(el);
+    const placeHolder = el.shadowRoot?.querySelector(".form-control");
+    expect(placeHolder?.getAttribute("placeholder")).to.equal("Hello");
+  });
+
+  it("should focus the input when clicking on the label", async () => {
+    const el = await fixture<SgdsInput>(
+      html` <sgds-input label="Name"></sgds-input> `
+    );
+    const label = el.shadowRoot?.querySelector("label")!;
+    const submitHandler = sinon.spy();
+
+    el.addEventListener("sgds-focus", submitHandler);
+    (label as HTMLElement).click();
+    await waitUntil(() => submitHandler.calledOnce);
+
+    expect(submitHandler).to.have.been.calledOnce;
+  });
+});
+describe("when using constraint validation", () => {
+  it("by default, invalid and valid should be false", async () => {
+    const el = await fixture<SgdsInput>(html` <sgds-input></sgds-input> `);
+    expect(el.invalid).to.be.false;
+    expect(el.valid).to.be.false;
+    expect(el.reportValidity()).to.be.true;
+  });
+  it("when required, validation occurs upon typing ", async () => {
+    const el = await fixture<SgdsInput>(
+      html` <sgds-input required></sgds-input> `
+    );
+    expect(el.invalid).to.be.false;
+    expect(el.valid).to.be.false;
+
+    el.focus()
+    await sendKeys({ type: "s" });
+    await el.updateComplete;
+
+    expect(el.value).to.equal('s')
+    expect(el.invalid).to.be.false;
+    expect(el.valid).to.be.true;
+    expect(el.reportValidity()).to.be.true;
+
+    await sendKeys({press: 'Backspace'})
+    await el.updateComplete;
+    expect(el.value).to.equal('')
+
+    expect(el.invalid).to.be.true;
+    expect(el.valid).to.be.false;
+    expect(el.reportValidity()).to.be.false;
+  });
+
+  it('should be invalid when the pattern does not match', async () => {
+    const el = await fixture<SgdsInput>(html` <sgds-input pattern="failtest" value="fail"></sgds-input> `);
+    expect(el.invalid).to.be.false;
+    expect(el.valid).to.be.false;
+    expect(el.reportValidity()).to.be.false;
+
+    await sendKeys({type: 'tes'})
+    await el.updateComplete
+    expect(el.value).to.equal('failtes')
+    expect(el.invalid).to.be.true;
+    expect(el.valid).to.be.false;
+    expect(el.reportValidity()).to.be.false;
+
+    await sendKeys({type: 't'})
+    await el.updateComplete
+    expect(el.value).to.equal('failtest')
+    expect(el.invalid).to.be.false;
+    expect(el.valid).to.be.true;
+    expect(el.reportValidity()).to.be.true;
+
+    await sendKeys({press: 'Backspace'})
+    await el.updateComplete
+    expect(el.value).to.equal('failtes')
+    expect(el.invalid).to.be.true;
+    expect(el.valid).to.be.false;
+    expect(el.reportValidity()).to.be.false;
+
+  });
+
+  it("should be invalid when required and disabled is removed", async () => {
+    const el = await fixture<SgdsInput>(
+      html` <sgds-input disabled required></sgds-input> `
+    );
+    el.disabled = false;
+    await el.updateComplete;
+    expect(el.invalid).to.be.true;
+  });
+});
+
+describe("when calling HTMLFormElement.reportValidity()", () => {
+  it("should be invalid when the input is empty and form.reportValidity() is called", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <sgds-input required value=""></sgds-input>
+      </form>
+    `);
+
+    expect(form.reportValidity()).to.be.false;
+  });
+
+  it("should be valid when the input is empty, reportValidity() is called, and the form has novalidate", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form novalidate>
+        <sgds-input required value=""></sgds-input>
+      </form>
+    `);
+
+    expect(form.reportValidity()).to.be.true;
+  });
+
+  it("fires sgds-input event when value is entered", async () => {
+    const el = await fixture<SgdsInput>(html` <sgds-input></sgds-input> `);
+    const inputHandler = sinon.spy();
+    el.focus();
+    el.addEventListener("sgds-input", inputHandler);
+    await sendKeys({ press: "A" });
+    waitUntil(() => inputHandler.calledOnce);
+    expect(inputHandler).to.have.been.calledOnce;
+  });
+});
+
+describe("when submitting a form", () => {
+  it("should submit the form when pressing enter in a form without a submit button", async () => {
+    const form = await fixture<HTMLFormElement>(
+      html` <form><sgds-input></sgds-input></form> `
+    );
+    const input = form.querySelector<SgdsInput>("sgds-input")!;
+    const submitHandler = sinon.spy((event: SubmitEvent) =>
+      event.preventDefault()
+    );
+
+    form.addEventListener("submit", submitHandler);
+    input.focus();
+    await sendKeys({ press: "Enter" });
+    await waitUntil(() => submitHandler.calledOnce);
+
+    expect(submitHandler).to.have.been.calledOnce;
+  });
+
+  it("should submit the form when pressing enter in a form with a submit button", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <sgds-input></sgds-input>
+        <sgds-button type="submit"></sgds-button>
+      </form>
+    `);
+    const input = form.querySelector<SgdsInput>("sgds-input")!;
+    const submitButton = form.querySelector<SgdsButton>("sgds-button")!;
+    const submitHandler = sinon.spy((event: SubmitEvent) =>
+      event.preventDefault()
+    );
+
+    form.addEventListener("submit", submitHandler);
+    submitButton.click();
+    await waitUntil(() => submitHandler.calledOnce);
+    expect(submitHandler).to.have.been.calledOnce;
+  });
+
+  it("should prevent submission when pressing enter in an input and canceling the keydown event", async () => {
+    const form = await fixture<HTMLFormElement>(
+      html` <form><sgds-input></sgds-input></form> `
+    );
+    const input = form.querySelector<SgdsInput>("sgds-input")!;
+    const submitHandler = sinon.spy((event: SubmitEvent) =>
+      event.preventDefault()
+    );
+    const keydownHandler = sinon.spy((event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
+    });
+
+    form.addEventListener("submit", submitHandler);
+    input.addEventListener("keydown", keydownHandler);
+    input.focus();
+    await sendKeys({ press: "Enter" });
+    await waitUntil(() => keydownHandler.calledOnce);
+
+    expect(keydownHandler).to.have.been.calledOnce;
+    expect(submitHandler).to.not.have.been.called;
+  });
+});
+
+describe("when resetting a form", () => {
+  it("should reset the element to its initial value", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <sgds-input name="a" value="test"></sgds-input>
+        <sgds-button type="reset">Reset</sgds-button>
+      </form>
+    `);
+    const button = form.querySelector<SgdsButton>("sgds-button")!;
+    const input = form.querySelector<SgdsInput>("sgds-input")!;
+    input.value = "1234";
+
+    await input.updateComplete;
+
+    setTimeout(() => button.click());
+    await oneEvent(form, "reset");
+    await input.updateComplete;
+
+    expect(input.value).to.equal("test");
+
+    input.defaultValue = "";
+
+    setTimeout(() => button.click());
+    await oneEvent(form, "reset");
+    await input.updateComplete;
+
+    expect(input.value).to.equal("");
+  });
+});

package/test/link-element.test.ts

@@ -0,0 +1,38 @@
+import "../mocks/link";
+import { MockLink } from "../mocks/link";
+import { fixture, assert, expect } from "@open-wc/testing";
+import { html } from "lit";
+
+describe("link-element", () => {
+  it("renders with default values", async () => {
+    const el = await fixture<MockLink>(html`<mock-link></mock-link>`);
+    assert.shadowDom.equal(
+      el,
+      ` <li>
+        <a
+          aria-disabled="false"
+          class="nav-link"
+          href=""
+        >
+          <slot>
+          </slot>
+      </a>
+      </li>
+    `
+    );
+  });
+  it("href prop is forwarded to a tag href attr", async () => {
+    const el = await fixture(html`<mock-link href="#">test</mock-link>`);
+    expect(el.shadowRoot?.querySelector("a")).to.have.attribute("href", "#");
+  });
+  it("active prop is forwarded to <a> class", async () => {
+    const el = await fixture(html`<mock-link active>test</mock-link>`);
+    expect(el.shadowRoot?.querySelector("a")).to.have.class("active");
+  });
+  it('disabled prop apply disable props and attr to anchor element', async() => {
+    const el = await fixture(html`<mock-link disabled>test</mock-link>`);
+    expect(el.shadowRoot?.querySelector("a")).to.have.class("disabled");
+    expect(el.shadowRoot?.querySelector("a")).to.have.attribute("disabled");
+    expect(el.shadowRoot?.querySelector("a")).to.have.attribute("aria-disabled", "true");
+  })
+});