@uswds/web-components/src/components/usa-link/usa-link.spec.js

> [!CAUTION] > Work on the next version of the Design System is happening in this repo. The code in this repository is not yet ready for production use.

import { beforeEach, describe, expect, it } from "vitest";

import "./index.js";

function getInsideLink() {
  return document.body
    .querySelector("usa-link")
    ?.shadowRoot?.querySelector("a");
}

describe("usa-link component", async () => {
  beforeEach(async () => {
    document.body.innerHTML = `<usa-link href="http://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</usa-link>`;
  });

  it("should show href props", () => {
    getInsideLink();
    expect(getInsideLink().getAttribute("href")).toContain(".gov");
  });

  it("should show slotted children", () => {
    getInsideLink();
    expect(
      document.body
        .querySelector("usa-link")
        ?.shadowRoot?.querySelector("slot")
        .assignedNodes({ flatten: true })[0].textContent,
    ).toContain("dangerous");
  });
});

describe("progressively enhanced usa-link component", async () => {
  beforeEach(async () => {
    document.body.innerHTML = `<usa-link><a href="http://designsystem.digital.gov">It's dangerous to go alone. Here, take this.</a></usa-link>`;
  });

  it("should show href props", () => {
    getInsideLink();
    expect(getInsideLink().getAttribute("href")).toContain(".gov");
  });

  it("should render link with component markup", () => {
    expect(getInsideLink().className).toContain("usa-link");
  });
});