@ministryofjustice/frontend 3.3.1 → 3.5.0

package/moj/components/filter-toggle-button/filter-toggle-button.spec.js

@@ -1,304 +0,0 @@
-const {
-  queryByRole,
-} = require("@testing-library/dom");
-const { userEvent } = require("@testing-library/user-event");
-const { configureAxe } = require("jest-axe");
-const merge = require("lodash.merge");
-const { setMedia } = require("mock-match-media");
-
-require("./filter-toggle-button.js");
-
-const user = userEvent.setup();
-const axe = configureAxe({
-  rules: {
-    // disable landmark rules when testing isolated components.
-    region: { enabled: false },
-  },
-});
-
-const createTemplate = () => {
-  html = `
-      <div class="moj-filter">
-        <div class="moj-filter__header">
-          <div class="moj-filter__header-title">
-            <h2 class="govuk-heading-m">Filter</h2>
-          </div>
-          <div class="moj-filter__header-action"></div>
-        </div>
-      </div>
-      <div class="moj-action-bar">
-        <div class="moj-action-bar__filter"></div>
-      </div>`;
-  document.body.insertAdjacentHTML("afterbegin", html);
-
-  const buttonContainer = document.querySelector(".moj-action-bar__filter");
-  const closeButtonContainer = document.querySelector(
-    ".moj-filter__header-action",
-  );
-  const filterContainer = document.querySelector(".moj-filter");
-
-  return {
-    buttonContainer: buttonContainer,
-    closeButtonContainer: closeButtonContainer,
-    filterContainer: filterContainer,
-  };
-};
-
-let baseConfig;
-
-beforeEach(() => {
-  baseConfig = {
-    bigModeMediaQuery: "(min-width: 600px)",
-    startHidden: true,
-    toggleButton: {
-      container: document.querySelector(".moj-action-bar__filter"),
-      showText: "Show filter",
-      hideText: "Hide filter",
-      classes: "govuk-button--secondary",
-    },
-    closeButton: {
-      container: document.querySelector(".moj-filter__header-action"),
-      text: "Close",
-    },
-    filter: {
-      container: document.querySelector(".moj-filter"),
-    },
-  };
-});
-
-describe("Filter toggle in big mode", () => {
-  let defaultConfig, buttonContainer, closeButtonContainer, filterContainer;
-
-  beforeEach(() => {
-    setMedia({
-      width: "800px",
-    });
-
-    ({ buttonContainer, closeButtonContainer, filterContainer } = createTemplate());
-
-    defaultConfig = merge(baseConfig, {
-      toggleButton: {
-        container: document.querySelector(".moj-action-bar__filter"),
-      },
-      closeButton: {
-        container: document.querySelector(".moj-filter__header-action"),
-      },
-      filter: { container: document.querySelector(".moj-filter") },
-    });
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = "";
-  });
-
-  test("creates toggle button", () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton).not.toBeNull();
-    expect(toggleButton.innerHTML).toBe("Show filter");
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(toggleButton).toHaveClass("govuk-button--secondary");
-
-    expect(filterContainer).toHaveAttribute("tabindex", "-1");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-  });
-
-  test("toggle button reveals filters", async () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(filterContainer).toHaveAttribute("tabindex", "-1");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(toggleButton.innerHTML).toBe("Hide filter");
-    expect(filterContainer).not.toHaveClass("moj-js-hidden");
-    expect(filterContainer).toHaveFocus();
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(toggleButton.innerHTML).toBe("Show filter");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-
-    expect(toggleButton).toHaveFocus();
-  });
-
-  test("start visible", () => {
-    const config = merge(defaultConfig, { startHidden: false });
-    new MOJFrontend.FilterToggleButton(config);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton.innerHTML).toBe("Hide filter");
-    expect(filterContainer).not.toHaveClass("moj-js-hidden");
-  });
-
-  test("custom button text", async () => {
-    const config = merge(defaultConfig, {
-      toggleButton: { showText: "Custom label", hideText: "Hide me" },
-    });
-    new MOJFrontend.FilterToggleButton(config);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton.innerHTML).toBe("Custom label");
-    await user.click(toggleButton);
-    expect(toggleButton.innerHTML).toBe("Hide me");
-  });
-
-  test("custom toggle button classes", () => {
-    const config = merge(defaultConfig, {
-      toggleButton: { classes: "classname-1 classname-2" },
-    });
-    new MOJFrontend.FilterToggleButton(config);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton).toHaveClass("classname-1 classname-2");
-  });
-
-  describe("accessibility", () => {
-    test("component has no wcag violations", async () => {
-      new MOJFrontend.FilterToggleButton(defaultConfig);
-      const toggleButton = queryByRole(buttonContainer, "button");
-      expect(await axe(document.body)).toHaveNoViolations();
-      await user.click(toggleButton);
-      expect(await axe(document.body)).toHaveNoViolations();
-    });
-  });
-});
-
-describe("Filter toggle in small mode", () => {
-  let defaultConfig, buttonContainer, closeButtonContainer, filterContainer;
-
-  beforeEach(() => {
-    setMedia({
-      width: "500px",
-    });
-
-    ({ buttonContainer, closeButtonContainer, filterContainer } = createTemplate()),
-
-    defaultConfig = merge(baseConfig, {
-      toggleButton: {
-        container: document.querySelector(".moj-action-bar__filter"),
-      },
-      closeButton: {
-        container: document.querySelector(".moj-filter__header-action"),
-      },
-      filter: { container: document.querySelector(".moj-filter") },
-    });
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = "";
-  });
-
-  test("creates toggle button", () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton).not.toBeNull();
-    expect(toggleButton.innerHTML).toBe("Show filter");
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(toggleButton).toHaveClass("govuk-button--secondary");
-
-    expect(filterContainer).toHaveAttribute("tabindex", "-1");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-  });
-
-  test("toggle button reveals filters", async () => {
-    new MOJFrontend.FilterToggleButton(defaultConfig);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(filterContainer).toHaveAttribute("tabindex", "-1");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(toggleButton.innerHTML).toBe("Hide filter");
-    expect(filterContainer).not.toHaveClass("moj-js-hidden");
-    expect(filterContainer).toHaveFocus();
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(toggleButton.innerHTML).toBe("Show filter");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-
-    expect(toggleButton).toHaveFocus();
-  });
-
-  test("start visible is ignored", () => {
-    const config = merge(defaultConfig, { startHidden: false });
-    new MOJFrontend.FilterToggleButton(config);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton.innerHTML).toBe("Show filter");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-  });
-
-  test("adds a close button", async () => {
-    const config = merge(defaultConfig, { startHidden: false });
-    new MOJFrontend.FilterToggleButton(config);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    await user.click(toggleButton);
-
-    const closeButton = queryByRole(closeButtonContainer, "button");
-
-    expect(closeButton).not.toBeNull();
-    expect(closeButton.innerHTML).toBe("Close");
-  });
-
-  test("hides on resize from big to small", async () => {
-    setMedia({
-      width: "800px",
-    });
-
-    const config = merge(defaultConfig, { startHidden: false });
-    new MOJFrontend.FilterToggleButton(config);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton.innerHTML).toBe("Hide filter");
-    expect(filterContainer).not.toHaveClass("moj-js-hidden");
-
-    setMedia({
-      width: "500px",
-    });
-
-    expect(toggleButton.innerHTML).toBe("Show filter");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-  });
-
-  test("shows on resize from small to big", async () => {
-    setMedia({
-      width: "500px",
-    });
-
-    const config = merge(defaultConfig);
-    new MOJFrontend.FilterToggleButton(config);
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton.innerHTML).toBe("Show filter");
-    expect(filterContainer).toHaveClass("moj-js-hidden");
-
-    setMedia({
-      width: "800px",
-    });
-
-    expect(toggleButton.innerHTML).toBe("Hide filter");
-    expect(filterContainer).not.toHaveClass("moj-js-hidden");
-  });
-
-  describe("accessibility", () => {
-    test("component has no wcag violations", async () => {
-      new MOJFrontend.FilterToggleButton(defaultConfig);
-      const toggleButton = queryByRole(buttonContainer, "button");
-      expect(await axe(document.body)).toHaveNoViolations();
-      await user.click(toggleButton);
-      expect(await axe(document.body)).toHaveNoViolations();
-    });
-  });
-});

package/moj/components/multi-select/multi-select.spec.js

@@ -1,135 +0,0 @@
-const {
-  queryByRole,
-  queryAllByRole,
-} = require("@testing-library/dom");
-const { userEvent } = require("@testing-library/user-event");
-const { configureAxe } = require("jest-axe");
-
-require("./multi-select.js");
-
-const user = userEvent.setup();
-const axe = configureAxe({
-  rules: {
-    // disable landmark rules when testing isolated components.
-    region: { enabled: false },
-  },
-});
-
-const createComponent = (id = "multi-select", idprefix = false) => {
-  html = `
-<table id="${id}" class="govuk-table" data-module="moj-multi-select" data-multi-select-checkbox="#${id}-select-all" ${idprefix ? 'data-multi-select-idprefix="' + idprefix + '-"' : ""}>
-  <thead class="govuk-table__head">
-    <tr class="govuk-table__row">
-      <th class="govuk-table__header" scope="col" id="${id}-select-all"></th>
-      <th class="govuk-table__header" scope="col">Name</th>
-    </tr>
-  </thead>
-  <tbody class="govuk-table__body">
-    <tr class="govuk-table__row govuk-table__row--selected">
-      <td class="govuk-table__cell">
-        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
-          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-aconcagua">
-          <label class="govuk-label govuk-checkboxes__label" for="mountain-aconcagua">
-            <span class="govuk-visually-hidden">Select Aconcagua</span>
-          </label>
-        </div>
-      </td>
-      <td class="govuk-table__cell">Aconcagua</td>
-    </tr>
-    <tr class="govuk-table__row">
-      <td class="govuk-table__cell">
-        <div class="govuk-checkboxes__item govuk-checkboxes--small moj-multi-select__checkbox">
-          <input type="checkbox" class="govuk-checkboxes__input" id="mountain-denali" value="denali">
-          <label class="govuk-label govuk-checkboxes__label" for="mountain-denali">
-            <span class="govuk-visually-hidden">Select Denali</span>
-          </label>
-        </div>
-      </td>
-      </td>
-      <td class="govuk-table__cell">Denali</td>
-    </tr>
-  </tbody>
-</table>
-`;
-  document.body.insertAdjacentHTML("afterbegin", html);
-  const component = document.querySelector(`#${id}`);
-  return component;
-};
-
-describe("multi select", () => {
-  let component, container;
-
-  beforeEach(() => {
-    component = createComponent();
-    container = component.querySelector("#multi-select-select-all");
-    checkboxes = component.querySelectorAll("tbody input[type=checkbox]");
-
-    new MOJFrontend.MultiSelect({
-      container: container,
-      checkboxes: checkboxes,
-    });
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = "";
-    component, container, (checkboxes = undefined);
-  });
-
-  test("initialises component", () => {
-    const selectToggle = queryByRole(container, "checkbox");
-
-    expect(selectToggle).not.toBeNull();
-    expect(selectToggle).toHaveAccessibleName("Select all");
-  });
-
-  test("toggles all checkboxes", async () => {
-    const selectToggle = queryByRole(container, "checkbox");
-    const tbody = component.querySelector("tbody");
-    let checkboxes = queryAllByRole(tbody, "checkbox");
-
-    expect(checkboxes.length).toBe(2);
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox).not.toBeChecked();
-    });
-
-    await user.click(selectToggle);
-    expect(selectToggle).toBeChecked();
-
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox).toBeChecked();
-    });
-
-    await user.click(selectToggle);
-    expect(selectToggle).not.toBeChecked();
-
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox).not.toBeChecked();
-    });
-  });
-
-  test("deselcting single checkbox unchecks all checkbox", async () => {
-    const selectToggle = queryByRole(container, "checkbox");
-    const tbody = component.querySelector("tbody");
-    const checkboxes = queryAllByRole(tbody, "checkbox");
-
-    expect(checkboxes.length).toBe(2);
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox).not.toBeChecked();
-    });
-
-    await user.click(selectToggle);
-    expect(selectToggle).toBeChecked();
-
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox).toBeChecked();
-    });
-
-    await user.click(checkboxes[0]);
-    expect(checkboxes[0]).not.toBeChecked();
-    expect(selectToggle).not.toBeChecked();
-
-    await user.click(checkboxes[0]);
-    expect(checkboxes[0]).toBeChecked();
-    expect(selectToggle).toBeChecked();
-  });
-});

package/moj/components/password-reveal/password-reveal.spec.js

@@ -1,55 +0,0 @@
-const { getByDisplayValue, getByText } = require("@testing-library/dom");
-const { userEvent } = require("@testing-library/user-event");
-const { configureAxe } = require("jest-axe");
-
-require("./password-reveal.js");
-
-const user = userEvent.setup();
-const axe = configureAxe({
-  rules: {
-    // disable landmark rules when testing isolated components.
-    region: { enabled: false },
-  },
-});
-
-describe("Password reveal", () => {
-  let container;
-
-  beforeEach(() => {
-    const input = document.createElement("input");
-    input.type = "password";
-    input.value = "password";
-
-    new MOJFrontend.PasswordReveal(input);
-
-    container = input.parentNode;
-  });
-
-  test("initialises container", () => {
-    expect(container).toHaveClass("moj-password-reveal");
-    expect(container).toContainElement(getByText(container, "Show"));
-  });
-
-  test("toggle reveal", async () => {
-    const input = getByDisplayValue(container, "password");
-    const button = getByText(container, "Show");
-
-    await user.click(button);
-
-    expect(input).toHaveAttribute("type", "text");
-    expect(button).toHaveTextContent("Hide");
-
-    await user.click(button);
-
-    expect(input).toHaveAttribute("type", "password");
-    expect(button).toHaveTextContent("Show");
-  });
-
-  test("accessibility", async () => {
-    const button = getByText(container, "Show");
-
-    expect(await axe(document.body)).toHaveNoViolations();
-    await user.click(button);
-    expect(await axe(document.body)).toHaveNoViolations();
-  });
-});

package/moj/components/search-toggle/search-toggle.spec.js

@@ -1,134 +0,0 @@
-const { queryByRole } = require("@testing-library/dom");
-const { userEvent } = require("@testing-library/user-event");
-const { configureAxe } = require("jest-axe");
-const $ = require("jquery");
-
-require("./search-toggle.js");
-
-const user = userEvent.setup();
-const axe = configureAxe({
-  rules: {
-    // disable landmark rules when testing isolated components.
-    region: { enabled: false },
-  },
-});
-
-const createComponent = () => {
-  html = `
-<div class="moj-search-toggle" data-module="moj-search-toggle" data-moj-search-toggle-text="Find case">
-        <div class="moj-search-toggle__toggle"></div>
-        <div class="moj-search-toggle__search">
-
-          <div class="moj-search moj-search--ondark moj-search--toggle moj-js-hidden">
-
-            <form action="" method="get">
-
-              <div class="govuk-form-group">
-                <label class="govuk-label moj-search__label govuk-visually-hidden" for="search2">
-                  Search
-                </label>
-
-                <div id="search2-hint" class="govuk-hint moj-search__hint ">
-                  Enter case number, for example 123456
-                </div>
-
-                <input class="govuk-input moj-search__input " id="search2" name="search2" type="search" aria-describedby="search2-hint">
-
-              </div>
-
-              <button type="submit" class="govuk-button moj-search__button " data-module="govuk-button">
-                Search
-              </button>
-
-            </form>
-          </div>
-
-        </div>
-      </div>
-<a href="#">link</a>`;
-  document.body.insertAdjacentHTML("afterbegin", html);
-  const component = document.querySelector(".moj-search-toggle");
-  return component;
-};
-
-describe("search toggle", () => {
-  let component, buttonContainer, searchContainer;
-
-  beforeEach(() => {
-    component = createComponent();
-    searchContainer = component.querySelector(".moj-search");
-    buttonContainer = component.querySelector(".moj-search-toggle__toggle");
-
-    new MOJFrontend.SearchToggle({
-      toggleButton: {
-        container: $(buttonContainer),
-        text: component.getAttribute("data-moj-search-toggle-text"),
-      },
-      search: {
-        container: $(searchContainer),
-      },
-    });
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = "";
-  });
-
-  test("initialises component", () => {
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    expect(toggleButton).not.toBeNull();
-    expect(toggleButton).toHaveTextContent("Find case");
-    expect(toggleButton).toHaveAttribute("aria-haspopup", "true");
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-  });
-
-  test("clicking button toggles search container", async () => {
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(searchContainer).not.toHaveClass("moj-js-hidden");
-
-    const input = queryByRole(searchContainer, "searchbox");
-    expect(input).toHaveFocus();
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-    expect(toggleButton).toHaveFocus();
-  });
-
-  test("clicking outside closes the search container", async () => {
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(searchContainer).not.toHaveClass("moj-js-hidden");
-
-    await user.click(document.body);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-  });
-
-  test("tabbing closes the search container", async () => {
-    const toggleButton = queryByRole(buttonContainer, "button");
-
-    await user.click(toggleButton);
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "true");
-    expect(searchContainer).not.toHaveClass("moj-js-hidden");
-
-    await user.tab();
-    await user.tab();
-
-    expect(toggleButton).toHaveAttribute("aria-expanded", "false");
-    expect(searchContainer).toHaveClass("moj-js-hidden");
-  });
-});

package/moj/namespace.js

@@ -1 +0,0 @@
-var MOJFrontend = {};