115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
import Menu from "./menu";
|
|
|
|
jest.useFakeTimers();
|
|
|
|
const menuHtml = `
|
|
<button class="menu">
|
|
<span class="menu__line"></span>
|
|
<span class="menu__line"></span>
|
|
<span class="menu__line"></span>
|
|
<span class="menu__text">Open menu</span>
|
|
</button>`;
|
|
|
|
describe("Menu button", () => {
|
|
let menu;
|
|
|
|
beforeEach(() => {
|
|
document.body.innerHTML = menuHtml;
|
|
menu = new Menu({
|
|
container: document.querySelector(".menu"),
|
|
});
|
|
});
|
|
|
|
it("Should initialise", () => {
|
|
menu.init();
|
|
expect(menu).toMatchObject({});
|
|
});
|
|
|
|
it("Should fail to initialise if container is missing", () => {
|
|
menu.init();
|
|
expect(new Menu().state).toBeUndefined();
|
|
});
|
|
|
|
it("Should default to visible state", () => {
|
|
expect(menu.state).toBe("visible");
|
|
});
|
|
|
|
it("Should be hidden initially", () => {
|
|
menu.init();
|
|
expect(menu.container.classList.contains("is-visible")).toBe(false);
|
|
});
|
|
|
|
it("Should be visible after 1 second", () => {
|
|
menu.init();
|
|
jest.runAllTimers();
|
|
expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);
|
|
expect(menu.container.classList.contains("is-visible")).toBe(true);
|
|
});
|
|
|
|
test("Menu can be shown", () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
expect(menu.state).toBe("visible");
|
|
expect(menu.container.classList.contains("is-visible")).toBe(true);
|
|
expect(menu.container.classList.contains("is-minimized")).toBe(false);
|
|
});
|
|
|
|
test("Menu can be hidden", () => {
|
|
menu.init();
|
|
menu.hideMenu();
|
|
expect(menu.state).toBe("hidden");
|
|
expect(menu.container.classList.contains("is-visible")).toBe(false);
|
|
expect(menu.container.classList.contains("is-minimized")).toBe(false);
|
|
});
|
|
|
|
test("Menu can be minimized", () => {
|
|
menu.init();
|
|
menu.minimizeMenu();
|
|
expect(menu.state).toBe("minimized");
|
|
expect(menu.container.classList.contains("is-visible")).toBe(false);
|
|
expect(menu.container.classList.contains("is-minimized")).toBe(true);
|
|
});
|
|
|
|
test("The state should not change on scroll if it is hidden", () => {
|
|
menu.init();
|
|
menu.hideMenu();
|
|
menu.updateState(10, 0);
|
|
expect(menu.state).toBe("hidden");
|
|
menu.updateState(0, 10);
|
|
expect(menu.state).toBe("hidden");
|
|
});
|
|
|
|
test("The state should change to minimized when scrolling down", () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
menu.updateState(0, 10);
|
|
expect(menu.state).toBe("minimized");
|
|
});
|
|
|
|
test("The state should change to visible when scrolling up", () => {
|
|
menu.init();
|
|
menu.minimizeMenu();
|
|
menu.updateState(10, 0);
|
|
expect(menu.state).toBe("visible");
|
|
});
|
|
|
|
it("Should have initial ARIA attributes", () => {
|
|
menu.init();
|
|
expect(menu.container.getAttribute("aria-haspopup")).toBe("true");
|
|
expect(menu.container.getAttribute("aria-expanded")).toBe("false");
|
|
});
|
|
|
|
it("Should have updated ARIA attribute when menu is opened", () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
expect(menu.container.getAttribute("aria-expanded")).toBe("false");
|
|
});
|
|
|
|
it("Should have updated ARIA attribute when menu is closed", () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
menu.hideMenu();
|
|
expect(menu.container.getAttribute("aria-expanded")).toBe("true");
|
|
});
|
|
});
|