cob-uswds/packages/usa-banner/src/test/banner.spec.js

Customized USWDS UI components and visual style guide based on City of Boston Patterns Library

const assert = require("assert");
const fs = require("fs");
const banner = require("../index");

const TEMPLATE = fs.readFileSync(`${__dirname}/template.html`);
const EXPANDED = "aria-expanded";
const EXPANDED_CLASS = "usa-banner__header--expanded";
const HIDDEN = "hidden";

const tests = [
  { name: "document.body", selector: () => document.body },
  { name: "banner", selector: () => document.querySelector(".usa-banner") },
];

tests.forEach(({ name, selector: containerSelector }) => {
  describe(`Banner initialized at ${name}`, () => {
    const { body } = document;

    let header;
    let button;
    let content;

    beforeEach(() => {
      body.innerHTML = TEMPLATE;
      header = body.querySelector(".usa-banner__header");
      button = body.querySelector(".usa-banner__button");
      content = body.querySelector(".usa-banner__content");
      banner.on(containerSelector());
    });

    afterEach(() => {
      banner.off(containerSelector());
      body.innerHTML = "";
    });

    it("initializes closed", () => {
      assert.strictEqual(header.classList.contains(EXPANDED_CLASS), false);
      assert.strictEqual(button.getAttribute(EXPANDED), "false");
      assert(content.hasAttribute(HIDDEN));
    });

    it("opens when you click the button", () => {
      button.click();
      assert.strictEqual(header.classList.contains(EXPANDED_CLASS), true);
      assert.strictEqual(button.getAttribute(EXPANDED), "true");
      assert(content.getAttribute(HIDDEN) !== true);
    });

    it("closes when you click the button again", () => {
      button.click();
      button.click();
      assert.strictEqual(header.classList.contains(EXPANDED_CLASS), false);
      assert.strictEqual(button.getAttribute(EXPANDED), "false");
      assert(content.hasAttribute(HIDDEN));
    });
  });
});