Add navigation tests

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .env
+cypress/videos/*

Routes.tsx

@@ -23,6 +23,7 @@ export function Routes() {
         <Route path="/streams" element={() => <>streams</>} />
         <Route path="/*all" element={() => <>overview</>} />
       </Route>
+      <Route path="/links" element={() => <div>links page</div>} />
       <Route path="/" element={() => <>home!</>} />
       <Route path="/*all" element={() => <>Not found</>} />
     </SolidAppRoutes>

cypress.json

@@ -1,3 +1,4 @@
 {
-  "pluginsFile": "cypress/plugins/index.cjs"
+  "pluginsFile": "cypress/plugins/index.cjs",
+  "baseUrl": "http://localhost:3000"
 }

cypress/integration/navigation.spec.ts

@@ -0,0 +1,37 @@
+describe("Desktop navigation", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("Links lead to new pages", () => {
+    cy.getCy("nav-link-links").click();
+    cy.contains("links page");
+  });
+
+  it("Directs log in to backend", () => {
+    cy.getCy("log-in-button").should("not.be.disabled");
+    cy.getCy("log-in-form")
+      .should("have.attr", "action")
+      .and("include", "/auth/discord");
+  });
+});
+
+describe("Mobile navigation", () => {
+  beforeEach(() => {
+    cy.visit("/");
+    cy.viewport(320, 568);
+  });
+
+  it("Opens mobile nav and links lead to a new page", () => {
+    cy.getCy("hamburger-button").click();
+    cy.getCy("mobile-nav-link-links").click();
+    cy.contains("links page");
+  });
+
+  it("Directs log in to backend", () => {
+    cy.getCy("log-in-button").should("not.be.disabled");
+    cy.getCy("log-in-form")
+      .should("have.attr", "action")
+      .and("include", "/auth/discord");
+  });
+});

cypress/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

cypress/support/index.ts

@@ -0,0 +1,14 @@
+export {};
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable<Subject> {
+      getCy(id: string): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
+Cypress.Commands.add("getCy", (value: string) => {
+  return cy.get(`[data-cy=${value}]`);
+});

package.json

@@ -11,9 +11,10 @@
     "migration:apply:dev": "npx prisma migrate dev",
     "migration:apply:prod": "npx prisma migrate deploy",
     "seed": "npx prisma db seed",
-    "seed:reset": "npx prisma migrate reset",
+    "seed:reset": "npx prisma migrate reset --force",
     "lint:styles": "stylelint \"**/*.css\"",
-    "cy:open": "npx cypress open"
+    "cy:open": "npx cypress open",
+    "cy:run": "npx cypress run"
   },
   "license": "MIT",
   "dependencies": {

scenes/layout/components/HamburgerButton.tsx

@@ -12,6 +12,7 @@ export function HamburgerButton(p: {
       aria-label="Toggle menu visibility"
       aria-expanded={expandedString()}
       onClick={p.onClick}
+      data-cy="hamburger-button"
     >
       <svg
         width="32"

scenes/layout/components/Layout.tsx

@@ -30,7 +30,10 @@ export function Layout(p: { children: JSXElement }) {
           <HamburgerButton isExpanded={menuExpanded()} onClick={toggleMenu} />
         </div>
       </header>
-      <MobileNav isExpanded={menuExpanded()} />
+      <MobileNav
+        isExpanded={menuExpanded()}
+        closeMenu={() => setMenuExpanded(false)}
+      />
       <nav class={s.nav}>
         <div class={s.navItems}>
           <For each={navItems}>
@@ -39,7 +42,11 @@ export function Layout(p: { children: JSXElement }) {
                 <div class={s.navGroupTitle}>{navGroup.title}</div>
                 <For each={navGroup.items}>
                   {(navItem) => (
-                    <Link class={s.navLink} href="/">
+                    <Link
+                      class={s.navLink}
+                      href={navItem}
+                      data-cy={`nav-link-${navItem}`}
+                    >
                       <img
                         src={`/img/layout/${navItem.replace(" ", "")}.webp`}
                         class={s.navIcon}

scenes/layout/components/MobileNav.tsx

@@ -4,7 +4,7 @@ import s from "../styles/MobileNav.module.css";
 import { navItems } from "../utils";
 import { SearchInput } from "./SearchInput";
 
-export function MobileNav(p: { isExpanded: boolean }) {
+export function MobileNav(p: { isExpanded: boolean; closeMenu: () => void }) {
   return (
     <div
       class={s.container}
@@ -23,7 +23,9 @@ export function MobileNav(p: { isExpanded: boolean }) {
                 {(navItem, i) => (
                   <Link
                     class={s.mobileNavLink}
-                    href="/"
+                    href={navItem}
+                    onClick={p.closeMenu}
+                    data-cy={`mobile-nav-link-${navItem}`}
                     data-order={
                       i() === 0
                         ? "first"

scenes/layout/components/UserItem.tsx

@@ -15,8 +15,9 @@ export function UserItem() {
           <form
             action={`${import.meta.env.VITE_BACKEND_URL}/auth/discord`}
             method="post"
+            data-cy="log-in-form"
           >
-            <button type="submit" class={s.logInButton}>
+            <button type="submit" class={s.logInButton} data-cy="log-in-button">
               <DiscordIcon /> Log in
             </button>
           </form>

scenes/tournament/components/ActionSection.tsx

@@ -72,6 +72,7 @@ export function ActionSection() {
           {/* @ts-expect-error */}
           <form use:_formSubmit={fn}>
             <label for="team-name">Team name</label>
+            {/* TODO: auto focus when opening ActionSection */}
             <input
               name="team-name"
               id="team-name"

tsconfig.json

@@ -12,6 +12,6 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite/client"]
+    "types": ["vite/client", "cypress"]
   }
 }