129 lines
2.5 KiB
TypeScript
129 lines
2.5 KiB
TypeScript
import { useState } from "react";
|
|
import { LeftMenu, RightMenu } from "../../src/components/SideMenu";
|
|
|
|
// Test Fixtures
|
|
function newTestApp(position: "left" | "right") {
|
|
const Menu = position === "left" ? LeftMenu : RightMenu;
|
|
|
|
return function TestApp() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
data-cy="app"
|
|
className="appContainer"
|
|
style={{ overflowX: "hidden" }}
|
|
>
|
|
<button
|
|
data-cy="toggle-menu"
|
|
onClick={() => setIsMenuOpen((prev) => !prev)}
|
|
>
|
|
Open Menu
|
|
</button>
|
|
<Menu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)}>
|
|
Menu Contents
|
|
</Menu>
|
|
<div data-cy="main-content">Main Content</div>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
// Tests
|
|
function menuTest(position: "left" | "right") {
|
|
const isLeft = position === "left";
|
|
|
|
// 1. Check initial state
|
|
cy.dataCy(`${position}-menu`)
|
|
.as("menu")
|
|
.should("not.be.visible")
|
|
|
|
.contains("Menu Contents")
|
|
.should("not.be.visible");
|
|
|
|
// 2. Open menu
|
|
cy.dataCy("toggle-menu")
|
|
.as("toggle")
|
|
.click()
|
|
|
|
.get("@menu")
|
|
.should("be.visible")
|
|
|
|
.contains("Menu Contents")
|
|
.should("be.visible");
|
|
|
|
// 3. Close menu with button
|
|
cy.dataCy("close-menu")
|
|
.as("close")
|
|
.click()
|
|
|
|
.get("@menu")
|
|
.should("not.be.visible")
|
|
|
|
.contains("Menu Contents")
|
|
.should("not.be.visible");
|
|
|
|
// 4. Reopen menu, verify interactivity, then close with underlay
|
|
cy.get("@toggle")
|
|
.click()
|
|
|
|
.get("@menu")
|
|
.should("be.visible")
|
|
.click("center")
|
|
|
|
.get("@menu")
|
|
.should("be.visible")
|
|
|
|
.dataCy("app")
|
|
.click(isLeft ? "topRight" : "topLeft")
|
|
|
|
.get("@menu")
|
|
.should("not.be.visible");
|
|
}
|
|
|
|
beforeEach(() => {
|
|
cy.disableTransitions();
|
|
});
|
|
|
|
afterEach(() => {
|
|
cy.enableTransitions();
|
|
});
|
|
|
|
describe("LeftMenu Tests", () => {
|
|
beforeEach(() => {
|
|
const TestApp = newTestApp("left");
|
|
cy.mount(<TestApp />);
|
|
});
|
|
|
|
afterEach(() => {
|
|
cy.enableTransitions();
|
|
});
|
|
|
|
it("works in portrait", () => {
|
|
cy.viewport("iphone-6");
|
|
menuTest("left");
|
|
});
|
|
|
|
it("works in landscape", () => {
|
|
cy.viewport("iphone-6", "landscape");
|
|
menuTest("left");
|
|
});
|
|
});
|
|
|
|
describe("RightMenu Tests", () => {
|
|
beforeEach(() => {
|
|
const TestApp = newTestApp("right");
|
|
cy.mount(<TestApp />);
|
|
});
|
|
|
|
it("works in portrait", () => {
|
|
cy.viewport("iphone-6");
|
|
menuTest("right");
|
|
});
|
|
|
|
it("works in landscape", () => {
|
|
cy.viewport("iphone-6", "landscape");
|
|
menuTest("right");
|
|
});
|
|
});
|