Add Jest tests and run automatically on PRs

.github/workflows/nextjs.yml → .github/workflows/deploy-to-github-pages.yml

@@ -1,4 +1,4 @@
-# Publish Flowit react to githup pages.
+# Deploy Flowit react to githup pages.
 # Based on workflow from https://github.com/actions/starter-workflows/blob/main/pages/nextjs.yml
 
 name: Deploy flowit-react to Pages

.github/workflows/run-tests.yml

@@ -0,0 +1,48 @@
+# Run jest tests on pull request
+name: Run jest tests on PR
+
+on:
+  # Runs on pull requests targeting the default branch
+  pull_request:
+    branches:
+      - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Only one set of tests running per PR at a time.
+# If a PR is updated while tests are running cancel the in progress tests and start the new ones.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+          cache: yarn
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Clone levels repository
+        run: git clone https://github.com/Flowit-Game/Levels.git
+      - name: Install dependencies
+        run: yarn
+      - name: Convert levels from xml to typescript
+        run: yarn convert-levels
+      - name: Run Jest tests
+        run: yarn test

components/Game/Game.test.tsx

@@ -0,0 +1,41 @@
+import {Game} from "./Game";
+import "@testing-library/jest-dom";
+import {render, screen} from "@testing-library/react";
+import React from "react";
+import {LevelContext, levelProgressDefault} from "@/pages";
+import userEvent from '@testing-library/user-event'
+
+
+jest.mock('next/router', () => require('next-router-mock'));
+
+describe("First Level", () => {
+  it("Solve the second level", async () => {
+    // The solution to easy level 2 is probably not too much of a spoiler,
+    // and it's a good initial test to check that we can click buttons
+    // solve a level.
+
+    // TODO https://github.com/jsdom/jsdom/issues/3363
+    global.structuredClone = jest.fn(val => {
+      return JSON.parse(JSON.stringify(val));
+    });
+
+    const user = userEvent.setup()
+    render(
+      <LevelContext.Provider value={{
+        levelNumber: 1,
+        changeLevelNumber: () => {},
+        changeCurrentScreen: () => {},
+        levelProgress: levelProgressDefault,
+        changeLevelProgress: () => {},
+        pack: "Easy",
+        changePack: () => {},
+      }}>
+        <Game/>
+      </LevelContext.Provider>
+    )
+    expect(screen.getByTestId("square-0-0")).toBeInTheDocument()
+    await user.click(screen.getByTestId("square-4-0"));
+    await user.click(screen.getByTestId("square-2-2"))
+    expect(screen.getByTestId("message-modal")).toBeInTheDocument()
+  });
+});

components/MessageModal/MessageModal.tsx

@@ -22,7 +22,7 @@ export function MessageModal(props: MessageModalProps) {
     </div>
   }
   return (
-    <div className={styles.modal}>
+    <div className={styles.modal} data-testid="message-modal">
       <div className={styles.modalBanner} onClick={props.onClick}>
         <div className={styles.modalContent}>
           <div className={styles[props.message]}></div>

components/SelectPack/SelectPack.tsx

@@ -1,46 +1,28 @@
 import {useContext} from "react";
 import {LevelContext, screens} from "@/pages";
 import styles from "./SelectPack.module.css"
+import {packChoices} from "@/levels/levelsUtils";
 
 export function SelectPack() {
 
   const {changeCurrentScreen, changePack} = useContext(
     LevelContext
   );
+  const packs: Array<packChoices> = ["Easy", "Medium", "Hard", "Community"]
   return (
     <div className={styles.contentArea}>
       <h1>Select Pack</h1>
-      <div className={styles.selector}>
-        <button onClick={() => {
-          changeCurrentScreen(screens.SelectLevel)
-          changePack("Easy")
-        }}>Easy
-        </button>
-      </div>
-
-      <div className={styles.selector}>
-        <button onClick={() => {
-          changeCurrentScreen(screens.SelectLevel)
-          changePack("Medium")
-        }}>Medium
-        </button>
-      </div>
-
-      <div className={styles.selector}>
-        <button onClick={() => {
-          changeCurrentScreen(screens.SelectLevel)
-          changePack("Hard")
-        }}>Hard
-        </button>
-      </div>
-
-      <div className={styles.selector}>
-        <button onClick={() => {
-          changeCurrentScreen(screens.SelectLevel)
-          changePack("Community")
-        }}>Community
-        </button>
-      </div>
+      {packs.map((packName, index) => (
+        <div className={styles.selector} key={index}>
+          <button
+            data-testid={`${packName}-pack-button`}
+            onClick={() => {
+            changeCurrentScreen(screens.SelectLevel)
+            changePack(packName)
+          }}>{packName}
+          </button>
+        </div>
+      ))}
     </div>
   );
 }

components/Square/Square.tsx

@@ -37,6 +37,7 @@ export type SquareProps = {
 export function Square(props: SquareProps) {
   return (
     <button
+      data-testid={`square-${props.x}-${props.y}`}
       className={styles.square}
       style={{ backgroundColor: props.color, borderColor: props.targetColor }}
       onClick={props.onClick}

jest.config.ts

@@ -0,0 +1,17 @@
+import nextJest from 'next/jest'
+import {Config} from 'jest'
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const config: Config = {
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '^@/(.*)$': ['<rootDir>/$1'],
+  },
+}
+
+// createJestConfig is exported this way to ensure that
+// next/jest can load the Next.js config which is async
+export default createJestConfig(config)

package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test": "jest",
     "convert-levels": "ts-node -O '{\"module\": \"commonjs\"}' ./levels/convert-levels.ts"
   },
   "dependencies": {
@@ -16,12 +17,19 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
     "@types/node": "^20.6.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.49.0",
     "eslint-config-next": "^13.4.19",
     "fast-xml-parser": "^4.2.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "next-router-mock": "^0.9.9",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
   }

pages/index.tsx

@@ -47,9 +47,9 @@ export const levelProgressDefault: levelPackProgressProps = {
 
 // TODO
 //  Update game screen one square at a time so you get a nice flow, e.g. medium 47
-//  Jest tests
 //  Fix all the ts-ignore errors.
 //  Handle back button (move from game back to level select)
+//  Alternate color schemes for accessibility
 
 
 const defaultPack: packChoices = "Easy"

tests/index.test.tsx

@@ -0,0 +1,13 @@
+import Home from "../pages/index";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+jest.mock('next/router', () => require('next-router-mock'));
+
+describe("Home Screen", () => {
+  it("Home screen starts with select pack", () => {
+    render(<Home />);
+    // Proof of concept to make sure that jest works.
+    expect(screen.getByTestId("Easy-pack-button")).toBeInTheDocument();
+  });
+});