Added useSlider hook and mouse interaction test.

2025-07-22 07:46:18 -04:00
parent 936c513a73
commit d224f335e9
13 changed files with 308 additions and 17 deletions
@@ -1,128 +0,0 @@
-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");
-  });
-});