@govtechsg/sgds-web-component 0.0.10 → 0.0.11

package/test/radio.test.ts

@@ -1,310 +0,0 @@
-import { SgdsRadio, SgdsRadioGroup } from "../src/Radio";
-import "../src/Radio";
-import "../src/Button";
-import {
-  fixture,
-  assert,
-  expect,
-  waitUntil,
-  elementUpdated,
-  aTimeout,
-  fixtureCleanup,
-  triggerFocusFor,
-} from "@open-wc/testing";
-import { html } from "lit";
-import sinon from "sinon";
-import { SgdsButton } from "../src/Button";
-import { sendKeys } from "@web/test-runner-commands";
-
-describe("<sgds-radio>", () => {
-  afterEach(() => fixtureCleanup());
-  it("is defined", () => {
-    const el = document.createElement("sgds-radio");
-    assert.instanceOf(el, SgdsRadio);
-  });
-
-  it("by default, tabindex='-1'", async () => {
-    const el = await fixture(html`<sgds-radio></sgds-radio>`);
-    expect(el).to.have.attribute("tabindex", "-1");
-  });
-
-  it("when isInline prop is passed, radio class should have class .form-check-inline", async () => {
-    const el = await fixture(html`<sgds-radio isInline></sgds-radio>`);
-    const radio = el.shadowRoot?.querySelector("div");
-    expect(radio?.classList.value).to.contain("form-check-inline");
-  });
-
-  it("should be able to pass in value to attributes(id/for pair)", async () => {
-    const el = await fixture(
-      html`<sgds-radio radioId="radio-123"></sgds-radio>`
-    );
-    const input = el.shadowRoot?.querySelector("input");
-    expect(input).to.have.attribute("id", "radio-123");
-    const label = el.shadowRoot?.querySelector("label");
-    expect(label).to.have.attribute("for", "radio-123");
-  });
-
-  it("should be disabled with the disabled attribute & aria-disabled to be true", async () => {
-    const el = await fixture(html`<sgds-radio disabled></sgds-radio>`);
-    const radio = el.shadowRoot?.querySelector("input");
-    expect(radio?.disabled).to.be.true;
-    expect(radio).to.have.attribute("aria-disabled", "true");
-  });
-
-  it("should render aria-label attribute value", async () => {
-    const el = await fixture(html`<sgds-radio ariaLabel="label"></sgds-radio>`);
-    const radio = el.shadowRoot?.querySelector("label");
-    expect(radio).to.have.attribute("aria-label", "label");
-  });
-
-  it("should be able to pass in value to value attribute", async () => {
-    const el = await fixture(html`<sgds-radio value="3"></sgds-radio>`);
-    const radio = el.shadowRoot?.querySelector("input");
-    expect(radio).to.have.attribute("value", "3");
-  });
-});
-
-describe("<sgds-radiogroup>", () => {
-  it("is defined", () => {
-    const el = document.createElement("sgds-radiogroup");
-    assert.instanceOf(el, SgdsRadioGroup);
-  });
-
-  it("should render the name attribute when passed", async () => {
-    const el = await fixture(
-      html`<sgds-radiogroup name="option"></sgds-radiogroup>`
-    );
-    const fieldset = el.shadowRoot?.querySelector("fieldset");
-    expect(fieldset).to.have.attribute("name", "option");
-  });
-
-  it("radio2 should have aria-checked to be true when checked", async () => {
-    const el = await fixture(
-      html`<sgds-radiogroup name="option"
-        ><sgds-radio id="radio1" value="1">one</sgds-radio
-        ><sgds-radio id="radio2" value="2">two</sgds-radio></sgds-radiogroup
-      >`
-    );
-    const radio1 = <SgdsRadio>el.querySelector("sgds-radio#radio1");
-    const radio2 = <SgdsRadio>el.querySelector("sgds-radio#radio2");
-    expect(radio1.checked).to.be.false;
-    expect(radio2.checked).to.be.false;
-    expect(radio1).to.have.attribute("aria-checked", "false");
-    expect(radio2).to.have.attribute("aria-checked", "false");
-
-    radio2.click();
-    await Promise.all([radio1.updateComplete, radio2.updateComplete]);
-
-    expect(radio1.checked).to.be.false;
-    expect(radio2.checked).to.be.true;
-    expect(radio2).to.have.attribute("aria-checked", "true");
-  });
-
-  it("radiogroup should emit sgds-change event when one of the radio is clicked", async () => {
-    const el = await fixture(
-      html`<sgds-radiogroup name="option">
-        <sgds-radio id="radio2" value="2">two</sgds-radio></sgds-radiogroup
-      >`
-    );
-    const toggleHandler = sinon.spy();
-    el.addEventListener("sgds-change", toggleHandler);
-    const radio2 = <SgdsRadio>el.querySelector("sgds-radio#radio2");
-    radio2.click();
-    await Promise.all([elementUpdated(el)]);
-    expect(toggleHandler).to.have.been.calledOnce;
-  });
-
-  it("radiogroup should update and reflect the value for the checked radio", async () => {
-    const el = await fixture<SgdsRadioGroup>(
-      html`<sgds-radiogroup id="radiogroup">
-        <sgds-radio id="radio2" value="2">two</sgds-radio>
-      </sgds-radiogroup>`
-    );
-
-    expect(el).to.have.attribute("value", undefined);
-
-    const radio = el.querySelector("sgds-radio");
-    radio?.click();
-    await el.updateComplete;
-    expect(el).to.have.attribute("value", "2");
-  });
-
-  it("should be invalid state on form submission with required passed in", async () => {
-    const el = await fixture<HTMLFormElement>(
-      html`<form>
-        <sgds-radiogroup id="radiogroup" required>
-          <sgds-radio id="radio2" value="2">two</sgds-radio>
-        </sgds-radiogroup>
-        <sgds-button type="submit">Submit</sgds-button>
-      </form>`
-    );
-
-    const button = <SgdsButton>el.querySelector("sgds-button");
-    button?.click();
-    await el.updateComplete;
-    expect(el.reportValidity()).to.be.false;
-    const radioGroup = <SgdsRadioGroup>el.querySelector("sgds-radiogroup");
-    expect(radioGroup.invalid).to.be.true;
-  });
-
-  it("upon validation, it should have invalid feedback with text 'default feedback' by default, and also able to render other text when specified", async () => {
-    const el = await fixture<SgdsRadioGroup>(
-      html`
-        <sgds-radiogroup id="radiogroup" required>
-          <sgds-radio id="radio2" value="2">two</sgds-radio>
-        </sgds-radiogroup>
-      `
-    );
-    const invalidFeedback = el.shadowRoot?.querySelector(
-      "div.invalid-feedback"
-    );
-    expect(invalidFeedback?.textContent).to.contain("default feedback");
-    el.setAttribute("invalidFeedback", "Fill up this field.");
-    await elementUpdated(el);
-    expect(invalidFeedback?.textContent).to.contain("Fill up this field.");
-  });
-
-  it("by default, first radio is tabindex 0", async () => {
-    const el = await fixture<SgdsRadioGroup>(html`<sgds-radiogroup>
-      <sgds-radio value="1">one</sgds-radio>
-      <sgds-radio value="2">two</sgds-radio>
-      <sgds-radio value="3">three</sgds-radio>
-    </sgds-radiogroup>`);
-
-    expect(el.querySelectorAll("sgds-radio")[0]).to.have.attribute(
-      "tabindex",
-      "0"
-    );
-    expect(el.querySelectorAll("sgds-radio")[1]).to.have.attribute(
-      "tabindex",
-      "-1"
-    );
-    expect(el.querySelectorAll("sgds-radio")[2]).to.have.attribute(
-      "tabindex",
-      "-1"
-    );
-  });
-
-  it("should toggle tabindex 0 for checked radio & tabindex -1 when unchecked upon clicking", async () => {
-    const el = await fixture<SgdsRadioGroup>(html`<sgds-radiogroup>
-      <sgds-radio value="1">one</sgds-radio>
-      <sgds-radio value="2">two</sgds-radio>
-      <sgds-radio value="3">three</sgds-radio>
-    </sgds-radiogroup>`);
-
-    const radio1 = el.querySelectorAll("sgds-radio")[0];
-    const radio2 = el.querySelectorAll("sgds-radio")[1];
-    const radio3 = el.querySelectorAll("sgds-radio")[2];
-
-    radio1.click();
-    await el.updateComplete;
-
-    expect(radio1).to.have.attribute("tabindex", "0");
-    expect(radio2).to.have.attribute("tabindex", "-1");
-    expect(radio3).to.have.attribute("tabindex", "-1");
-
-    radio2.click();
-    await el.updateComplete;
-
-    expect(radio1).to.have.attribute("tabindex", "-1");
-    expect(radio2).to.have.attribute("tabindex", "0");
-    expect(radio3).to.have.attribute("tabindex", "-1");
-  });
-
-  it("clicking label should focus on first radio when radios unchecked", async () => {
-    const el = await fixture<SgdsRadioGroup>(html`<sgds-radiogroup
-      label="Hello world"
-    >
-      <sgds-radio value="1">one</sgds-radio>
-      <sgds-radio value="2">two</sgds-radio>
-      <sgds-radio value="3">three</sgds-radio>
-    </sgds-radiogroup>`);
-
-    const radio1 = el.querySelectorAll("sgds-radio")[0];
-
-    const label = <HTMLLabelElement>(
-      el.shadowRoot?.querySelector("label.form-label")
-    );
-    label.click();
-
-    await triggerFocusFor(radio1);
-    expect(document.activeElement === radio1).to.be.true;
-  });
-
-  it("when a radio is checked, clicking label should focus on the checked radio", async () => {
-    const el = await fixture<SgdsRadioGroup>(html`<sgds-radiogroup
-      label="Hello world"
-    >
-      <sgds-radio value="1">one</sgds-radio>
-      <sgds-radio value="2">two</sgds-radio>
-      <sgds-radio value="3">three</sgds-radio>
-    </sgds-radiogroup>`);
-
-    const radio2 = el.querySelectorAll("sgds-radio")[1];
-
-    radio2.click();
-    await el.updateComplete;
-
-    const label = <HTMLLabelElement>(
-      el.shadowRoot?.querySelector("label.form-label")
-    );
-    label.click();
-
-    await triggerFocusFor(radio2);
-    expect(document.activeElement === radio2).to.be.true;
-  });
-
-  it("should allow for the following keyboard interactions upon keydown", async () => {
-    const el = await fixture<SgdsRadioGroup>(html`<sgds-radiogroup
-      label="Hello world"
-    >
-      <sgds-radio value="1">one</sgds-radio>
-      <sgds-radio value="2">two</sgds-radio>
-      <sgds-radio value="3">three</sgds-radio>
-    </sgds-radiogroup>`);
-
-    const radio1 = el.querySelectorAll("sgds-radio")[0];
-    const radio2 = el.querySelectorAll("sgds-radio")[1];
-    const radio3 = el.querySelectorAll("sgds-radio")[2];
-
-    const label = <HTMLLabelElement>(
-      el.shadowRoot?.querySelector("label.form-label")
-    );
-    label.click();
-
-    await triggerFocusFor(radio1);
-    expect(document.activeElement === radio1).to.be.true;
-
-    // spacebar key
-    await sendKeys({ press: " " });
-    expect(radio1).to.have.attribute("tabindex", "0");
-    expect(radio1).to.have.attribute("aria-checked", "true");
-    expect(el).to.have.attribute("value", "1");
-
-    // arrowright incr index
-    await sendKeys({ press: "ArrowRight" });
-    expect(radio2).to.have.attribute("tabindex", "0");
-    expect(radio2).to.have.attribute("aria-checked", "true");
-    expect(el).to.have.attribute("value", "2");
-
-    // arrowdown incr index
-    await sendKeys({ press: "ArrowDown" });
-    expect(radio3).to.have.attribute("tabindex", "0");
-    expect(radio3).to.have.attribute("aria-checked", "true");
-    expect(el).to.have.attribute("value", "3");
-
-    // arrowleft decr index
-    await sendKeys({ press: "ArrowLeft" });
-    expect(radio2).to.have.attribute("tabindex", "0");
-    expect(radio2).to.have.attribute("aria-checked", "true");
-    expect(el).to.have.attribute("value", "2");
-
-    // arrowup decr index
-    await sendKeys({ press: "ArrowLeft" });
-    expect(radio1).to.have.attribute("tabindex", "0");
-    expect(radio1).to.have.attribute("aria-checked", "true");
-    expect(el).to.have.attribute("value", "1");
-  });
-});
-
-// Keyboard interactions (arrowdown, arrowup) --> to keep check on the handleKeyDown() you wrote --> and that it updates the sgds-radio-group

package/test/selectable-card.test.ts

@@ -1,159 +0,0 @@
-import {
-    aTimeout,
-    expect,
-    fixture,
-    html,
-    oneEvent,
-    assert,
-    waitUntil,
-    elementUpdated,
-  } from "@open-wc/testing";
-  import sinon from "sinon";
-  import "../src/Card";
-  import { SgdsActionCard } from "../src/Card";
-  import "../src/Checkbox";
-  import "../src/Radio";
-  import { SgdsCheckbox } from "../src/Checkbox";
-  import { SgdsButton } from "../src/Button";
-  import { sendKeys } from "@web/test-runner-commands";
-  import { CardElement } from "../src/utils/card-element";
-  import { Button } from "bootstrap";
-  
-  describe("<sgds-action-card>", () => {
-    // Card test cases
-    it("is defined", () => {
-      const el = document.createElement("sgds-action-card");
-      assert.instanceOf(el, SgdsActionCard);
-    });
-  
-    it("should have sgds prefix on wrapper", async () => {
-      const el = await fixture(html`<sgds-action-card></sgds-action-card>`);
-      const slCard = el.shadowRoot?.querySelector("div");
-      expect(slCard?.classList.value).to.contain("sgds");
-    });
-  
-    it("accepts a bg prop", async () => {
-      const el = await fixture(html`<sgds-action-card></sgds-action-card>`);
-      el?.setAttribute("bgColor", "primary");
-      await elementUpdated(el);
-      const bgColor = el.shadowRoot?.querySelector("div");
-      expect(bgColor?.classList.value).to.contain("bg-primary");
-    });
-  
-    it("accepts a text prop", async () => {
-      const el = await fixture(html`<sgds-action-card></sgds-action-card>`);
-      el?.setAttribute("borderColor", "primary");
-      await elementUpdated(el);
-      const borderColor = el.shadowRoot?.querySelector("div");
-      expect(borderColor?.classList.value).to.contain("border-primary");
-    });
-  
-    it("accepts a border prop", async () => {
-      const el = await fixture(html`<sgds-action-card></sgds-action-card>`);
-      el?.setAttribute("textColor", "primary");
-      await elementUpdated(el);
-      const bgColor = el.shadowRoot?.querySelector("div");
-      expect(bgColor?.classList.value).to.contain("text-primary");
-    });
-  
-    it("can be semantically compare with shadowDom trees", async () => {
-      const el = await fixture(
-        html`<sgds-action-card inputId="checkbox"></sgds-action-card>`
-      );
-      assert.shadowDom.equal(
-        el,
-        `
-        <div tabindex="0" variant="card-action" class="sgds card
-            
-          ">
-          <div class="card-body">
-            <h6 class="text-muted card-subtitle">
-              <div>
-              
-                <slot name="card-subtitle"></slot>
-                </div>
-              <div class="card-input">
-             <sgds-checkbox checkboxid="checkbox" arialabel="checkbox"></sgds-checkbox>
-            </div>
-            </h6>
-            <h5 class="card-title"><slot name="card-title"></slot></h5>
-            <p class="card-text"><slot name="card-text"></slot></p>
-          </div>
-        </div>
-      `
-      );
-    });
-  
-    it("it should have type checkbox and variant card-action by default", async () => {
-      const el = await fixture(html`<sgds-action-card></sgds-action-card>`);
-      expect(el?.getAttribute("type")).to.equal("checkbox");
-      expect(el?.getAttribute("variant")).to.equal("card-action");
-    });
-  
-    it("it should have type radio when specified", async () => {
-      const el = await fixture(
-        html`<sgds-action-card type="radio"></sgds-action-card>`
-      );
-      expect(el?.getAttribute("type")).to.equal("radio");
-    });
-  
-    it("when card is clicked, card should contain class is-active", async () => {
-      const el = await fixture<SgdsActionCard>(
-        html`<sgds-action-card></sgds-action-card>`
-      );
-  
-      expect(el.shadowRoot?.querySelector("div.sgds.card")).to.not.have.class(
-        "is-active"
-      );
-      const cardBody = el.shadowRoot?.querySelector(
-        "div.card-body"
-      ) as HTMLInputElement;
-      cardBody.click();
-      await el.updateComplete;
-      expect(el.shadowRoot?.querySelector("div.sgds.card")).to.have.class(
-        "is-active"
-      );
-    });
-  
-    it("when card is disabled, card should be clickable and does not contain class is-active", async () => {
-      const el = await fixture<SgdsActionCard>(
-        html`<sgds-action-card disabled></sgds-action-card>`
-      );
-  
-      expect(el.shadowRoot?.querySelector("div.sgds.card")).to.not.have.class(
-        "is-active"
-      );
-      const cardBody = el.shadowRoot?.querySelector(
-        "div.card-body"
-      ) as HTMLInputElement;
-      cardBody.click();
-      await el.updateComplete;
-      expect(el.shadowRoot?.querySelector("div.sgds.card")).to.not.have.class(
-        "is-active"
-      );
-    });
-  
-    it("when card is focus, card should be able to be checked with key Enter and contains class is-active", async () => {
-      const el = await fixture<SgdsActionCard>(
-        html`<sgds-action-card></sgds-action-card>`
-      );
-  
-      expect(el.shadowRoot?.querySelector("div.sgds.card")).to.not.have.class(
-        "is-active"
-      );
-      // const cardBody = el.shadowRoot?.querySelector(
-      //   "div.card-body"
-      // ) as HTMLInputElement;
-      const card = el.shadowRoot?.querySelector(
-        "div.sgds.card"
-      ) as HTMLInputElement;
-      card.focus();
-      await sendKeys({ press: "Enter" });
-      await el.updateComplete;
-      expect(el.shadowRoot?.querySelector("div.sgds.card")).to.have.class(
-        "is-active"
-      );
-    });
-  });
-  
-