windycoys/js/navigation.spec.js

import Navigation from "./navigation";

const navHtml = `<a href="/test">Test link</a>
<nav class="nav">
  <button class="menu">Menu</button>
  <div class="nav__content">
    <h2 class="nav__title">
      <a class="nav__title-link" href="/">WindyCOYS</a>
    </h2>
    <ul class="nav__list">
      <li class="nav__list-item">
        <a class="nav__link" href="/">Home</a>
      </li>
      <li class="nav__list-item">
        <a class="nav__link" href="/about">About</a>
      </li>
    </ul>
  </div>
  <button class="nav__close">close</button>
</nav>
<a href="/another-test">Another test link</a>`;

let nav;

beforeEach(() => {
  document.body.innerHTML = navHtml;
  // Mock Menu
  const menu = {
    container: document.querySelector(".menu"),
    showMenu: jest.fn(),
    hideMenu: jest.fn(),
  };
  nav = new Navigation({
    container: document.querySelector(".nav"),
    menu,
  });
});

describe("Navigation", () => {
  it("Should initialise", () => {
    nav.init();
    expect(nav).toMatchObject({});
  });

  it("Should fail to initialise if container is missing", () => {
    nav.init();
    expect(new Navigation().state).toBeUndefined();
  });

  it("Should fail to initialise if the menu is not provided", () => {
    const noMenu = new Navigation({
      container: document.querySelector(".nav"),
    });
    noMenu.init();
    expect(noMenu.state).toBeUndefined();
  });

  it("Should be hidden by default", () => {
    nav.init();
    expect(nav.container.classList.contains("is-open")).toBe(false);
  });

  it("Should close when the .nav element is clicked", () => {
    nav.init();
    nav.openNav();
    const event = new Event("click");
    nav.container.dispatchEvent(event);
    expect(nav.state).toBe("hidden");
  });

  it("Should close when the user presses ESC", () => {
    nav.init();
    nav.openNav();
    const event = new Event("keydown");
    event.keyCode = 27;
    nav.container.dispatchEvent(event);
    expect(nav.state).toBe("hidden");
  });

  it("Should not close when the .nav__content element is clicked", () => {
    nav.init();
    nav.openNav();
    const event = new Event("click");
    nav.container.querySelector(".nav__content").dispatchEvent(event);
    expect(nav.state).toBe("visible");
  });

  it("Should have initial ARIA attributes", () => {
    nav.init();
    expect(nav.container.getAttribute("aria-hidden")).toBe("true");
  });

  it("Should update the ARIA attributes when visible", () => {
    nav.init();
    nav.openNav();
    expect(nav.container.getAttribute("aria-hidden")).toBe("false");
  });

  it("Should update the ARIA attributes when hidden", () => {
    nav.init();
    nav.openNav();
    nav.closeNav();
    expect(nav.container.getAttribute("aria-hidden")).toBe("true");
  });
});

describe("Navigation menu button", () => {
  it("Should open the Navigation when clicked", () => {
    nav.init();
    const event = new Event("click");
    nav.menu.container.dispatchEvent(event);
    expect(nav.state).toBe("visible");
  });
});

describe("Navigation close button", () => {
  it("Should close the Navigation when clicked", () => {
    nav.init();
    nav.openNav();
    const event = new Event("click");
    nav.container.querySelector(".nav__close").dispatchEvent(event);
    expect(nav.state).toBe("hidden");
  });
});

describe("Navigation focus behaviour", () => {
  let first;
  let last;
  let menu;

  beforeEach(() => {
    menu = nav.container.querySelector(".menu");
    first = nav.container.querySelector(".nav__link");
    last = nav.container.querySelector(".nav__close");
    menu.focus();
    nav.init();
    nav.openNav();
  });

  it("Should apply focus to .nav__title-link when opened", () => {
    const link = nav.container.querySelector(".nav__title-link");
    expect(document.activeElement).toBe(link);
  });

  test("Focus moves to first element when TAB pressed on last", () => {
    last.focus();
    const event = new Event("keydown");
    event.keyCode = 9;
    last.dispatchEvent(event);
    expect(document.activeElement).toBe(first);
  });

  test("Focus moves to last element when SHIFT + TAB pressed on first", () => {
    first.focus();
    const event = new Event("keydown");
    event.shiftKey = true;
    event.keyCode = 9;
    first.dispatchEvent(event);
    expect(document.activeElement).toBe(last);
  });

  test("Focus is restored to last active element when Navigation is closed", () => {
    first.focus();
    nav.closeNav();
    expect(document.activeElement).toBe(menu);
  });
});