openfoodnetwork/spec/javascripts/stimulus/tabs_and_panels_controller_test.js

/**
 * @jest-environment jsdom
 */

import { Application } from "stimulus";
import tabs_and_panels_controller from "../../../app/webpacker/controllers/tabs_and_panels_controller";

describe("TabsAndPanelsController", () => {
  beforeAll(() => {
    const application = Application.start();
    application.register("tabs-and-panels", tabs_and_panels_controller);
  });

  beforeEach(() => {
    document.body.innerHTML = `
      <div data-controller="tabs-and-panels" data-tabs-and-panels-class-name-value="selected" data-action="orderCycleSelected@window->tabs-and-panels#activateDefaultPanel">
        <a id="peek_tab" href="#peek_panel" data-action="tabs-and-panels#activate" class="selected" data-tabs-and-panels-target="tab">Peek</a>
        <a id="ka_tab" href="#ka_panel" data-action="tabs-and-panels#activate" data-tabs-and-panels-target="tab">Ka</a>
        <a id="boo_tab" href="#boo_panel" data-action="tabs-and-panels#activate" data-tabs-and-panels-target="tab">Boo</a>

        <div id="peek_panel" data-tabs-and-panels-target="panel default">Peek me</div>
        <div id="ka_panel" data-tabs-and-panels-target="panel">Ka you</div>
        <div id="boo_panel" data-tabs-and-panels-target="panel">Boo three</div>
      </div>`;
  });

  it("#activate by clicking on tab", () => {
    const peakTab = document.getElementById("peek_tab");
    const kaTab = document.getElementById("ka_tab");
    const booTab = document.getElementById("boo_tab");
    const peakPanel = document.getElementById("peek_panel");
    const kaPanel = document.getElementById("ka_panel");
    const booPanel = document.getElementById("boo_panel");

    expect(peakTab.classList.contains("selected")).toBe(true);
    expect(kaTab.classList.contains("selected")).toBe(false);
    expect(booTab.classList.contains("selected")).toBe(false);

    expect(peakPanel.style.display).toBe("block");
    expect(kaPanel.style.display).toBe("none");
    expect(booPanel.style.display).toBe("none");

    kaTab.click();

    expect(peakTab.classList.contains("selected")).toBe(false);
    expect(kaTab.classList.contains("selected")).toBe(true);
    expect(booTab.classList.contains("selected")).toBe(false);

    expect(peakPanel.style.display).toBe("none");
    expect(kaPanel.style.display).toBe("block");
    expect(booPanel.style.display).toBe("none");
  });

  it("#activateDefaultPanel on orderCycleSelected event", () => {
    const peakTab = document.getElementById("peek_tab");
    const kaTab = document.getElementById("ka_tab");
    const booTab = document.getElementById("boo_tab");
    const peakPanel = document.getElementById("peek_panel");
    const kaPanel = document.getElementById("ka_panel");
    const booPanel = document.getElementById("boo_panel");

    expect(peakTab.classList.contains("selected")).toBe(true);
    expect(kaTab.classList.contains("selected")).toBe(false);
    expect(booTab.classList.contains("selected")).toBe(false);

    expect(peakPanel.style.display).toBe("block");
    expect(kaPanel.style.display).toBe("none");
    expect(booPanel.style.display).toBe("none");

    kaTab.click();

    expect(peakTab.classList.contains("selected")).toBe(false);
    expect(kaTab.classList.contains("selected")).toBe(true);
    expect(booTab.classList.contains("selected")).toBe(false);

    expect(peakPanel.style.display).toBe("none");
    expect(kaPanel.style.display).toBe("block");
    expect(booPanel.style.display).toBe("none");

    const event = new Event("orderCycleSelected");
    window.dispatchEvent(event);

    expect(peakTab.classList.contains("selected")).toBe(true);
    expect(kaTab.classList.contains("selected")).toBe(false);
    expect(booTab.classList.contains("selected")).toBe(false);

    expect(peakPanel.style.display).toBe("block");
    expect(kaPanel.style.display).toBe("none");
    expect(booPanel.style.display).toBe("none");
  });

  describe("when valid anchor is specified in the url", () => {
    const oldWindowLocation = window.location;
    beforeAll(() => {
      Object.defineProperty(window, "location", {
        value: new URL("http://example.com/#boo_panel"),
        configurable: true,
      });
    });
    afterAll(() => {
      delete window.location;
      window.location = oldWindowLocation;
    });

    it("#activateFromWindowLocationOrDefaultPanelTarget show panel based on anchor", () => {
      const peakTab = document.getElementById("peek_tab");
      const kaTab = document.getElementById("ka_tab");
      const booTab = document.getElementById("boo_tab");
      const peakPanel = document.getElementById("peek_panel");
      const kaPanel = document.getElementById("ka_panel");
      const booPanel = document.getElementById("boo_panel");

      expect(peakTab.classList.contains("selected")).toBe(false);
      expect(kaTab.classList.contains("selected")).toBe(false);
      expect(booTab.classList.contains("selected")).toBe(true);

      expect(peakPanel.style.display).toBe("none");
      expect(kaPanel.style.display).toBe("none");
      expect(booPanel.style.display).toBe("block");
    });
  });

  describe("when non valid anchor is specified in the url", () => {
    const oldWindowLocation = window.location;
    beforeAll(() => {
      Object.defineProperty(window, "location", {
        value: new URL("http://example.com/#non_valid_panel"),
        configurable: true,
      });
    });
    afterAll(() => {
      delete window.location;
      window.location = oldWindowLocation;
    });

    it("#activateFromWindowLocationOrDefaultPanelTarget show default panel", () => {
      const peakTab = document.getElementById("peek_tab");
      const kaTab = document.getElementById("ka_tab");
      const booTab = document.getElementById("boo_tab");
      const peakPanel = document.getElementById("peek_panel");
      const kaPanel = document.getElementById("ka_panel");
      const booPanel = document.getElementById("boo_panel");

      expect(peakTab.classList.contains("selected")).toBe(true);
      expect(kaTab.classList.contains("selected")).toBe(false);
      expect(booTab.classList.contains("selected")).toBe(false);

      expect(peakPanel.style.display).toBe("block");
      expect(kaPanel.style.display).toBe("none");
      expect(booPanel.style.display).toBe("none");
    });
  });
});