chore: add basic tests (#15)

* configure vitest and happy-dom

* add createUrl tests

* explicitly values for enum

* add getUpdatedClues tests

* add puzzleEncoder tests

* add puzzleCreator tests

* remove jest leftover dependencies

* simplify useTimeout implementation

* add useTimeout tests

* add useLocalStorage tests

* make useHistory abstract

* add useHistory tests

* remove unused deps and code

Author: bgonp

package-lock.json

@@ -11,7 +11,9 @@
     "css-types": "tcm src/styles/components -w",
     "lint": "tcm src/styles/components -s && tsc && prettier -w --log-level=silent src && eslint '**/*.{ts,tsx}' --quiet --fix",
     "prepare": "husky install",
-    "dev": "vite"
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -21,14 +23,10 @@
     "wouter": "2.12.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.5.1",
     "@types/classnames": "2.2.11",
-    "@types/jest": "29.5.5",
     "@types/node": "18.18.4",
     "@types/react": "18.2.25",
-    "@types/react-copy-to-clipboard": "5.0.0",
     "@types/react-dom": "18.2.11",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
@@ -37,12 +35,14 @@
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "happy-dom": "12.9.0",
     "husky": "6.0.0",
     "postcss-preset-env": "9.1.4",
     "prettier": "3.0.3",
     "typed-css-modules": "0.7.2",
     "typescript": "5.2.2",
-    "vite": "4.4.11"
+    "vite": "4.4.11",
+    "vitest": "0.34.6"
   },
   "browserslist": {
     "production": [

package.json

@@ -19,7 +19,7 @@ type Props = {
   setCellState: (r: number, c: number) => (s: CellState) => void
 }
 
-export const Board: FC<Props> = ({
+const Board: FC<Props> = ({
   blocked = false,
   buttons = null,
   crossable = false,

src/components/Board.tsx

@@ -20,7 +20,7 @@ type Props = {
   setState: (s: CellState) => void
 }
 
-export const Cell: FC<Props> = ({
+const Cell: FC<Props> = ({
   className = '',
   clickedState,
   crossable,

src/components/Cell.tsx

@@ -6,7 +6,7 @@ import Button from 'components/Button'
 import { RefreshIcon, UndoIcon } from 'components/icons'
 import ShareButton from 'components/ShareButton'
 import { useModalContext } from 'contexts/ModalContext'
-import { ROUTE_HOME } from 'constants/router.constants'
+import { ROUTES } from 'constants/router.constants'
 import { COLORS } from 'constants/colors.constants'
 import { CellState, Puzzle } from 'models/Puzzle'
 
@@ -48,7 +48,7 @@ const Play: FC<Props> = ({
     [reset, showConfirm]
   )
 
-  const handleClick = useCallback(() => navigate(ROUTE_HOME), [navigate])
+  const handleClick = useCallback(() => navigate(ROUTES.HOME), [navigate])
 
   const buttons = useMemo(
     () => (

src/components/Play.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useLocation } from 'wouter'
 
 import Button from 'components/Button'
-import { ROUTE_CREATE } from 'constants/router.constants'
+import { ROUTES } from 'constants/router.constants'
 import { Puzzle } from 'models/Puzzle'
 import { createPuzzleFromSize } from 'utils/puzzleCreator'
 
@@ -19,7 +19,7 @@ const Welcome: FC<Props> = ({ setPuzzle }) => {
   const setMediumPuzzle = () => setPuzzle(createPuzzleFromSize(10))
   const setHardPuzzle = () => setPuzzle(createPuzzleFromSize(15))
   const setExpertPuzzle = () => setPuzzle(createPuzzleFromSize(20))
-  const navigateToCreate = () => navigate(ROUTE_CREATE)
+  const navigateToCreate = () => navigate(ROUTES.CREATE)
 
   return (
     <div className={styles.welcome}>

src/components/Welcome.tsx

@@ -1,4 +1,3 @@
 export const MIN_SIZE = 5
 export const MAX_SIZE = 20
-export const DEFAULT_SIZE = 10
-export const STEPS_LIMIT = 10
+export const HISTORY_LIMIT = 10

src/constants/puzzle.constants.ts

@@ -1,11 +1,6 @@
-export const ROUTE_CREATE = '/create'
-export const ROUTE_HOME = '/'
-export const ROUTE_LOAD = '/load/:code'
-export const ROUTE_PLAY = '/play'
-
 export const ROUTES = {
-  CREATE: ROUTE_CREATE,
-  HOME: ROUTE_HOME,
-  LOAD: ROUTE_LOAD,
-  PLAY: ROUTE_PLAY,
+  CREATE: '/create',
+  HOME: '/',
+  LOAD: '/load/:code',
+  PLAY: '/play',
 }

src/constants/router.constants.ts

@@ -0,0 +1,53 @@
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, describe, expect, test } from 'vitest'
+
+import { useHistory } from './useHistory'
+
+describe('useHistory', () => {
+  afterEach(() => {
+    window.localStorage.clear()
+  })
+
+  test('initializes empty', () => {
+    const { result } = renderHook(() => useHistory<number>('id', 3))
+
+    expect(result.current.hasHistory).toBe(false)
+    expect(result.current.getEntry()).toBe(null)
+  })
+
+  test('adds and gets entries', () => {
+    const { result } = renderHook(() => useHistory<string>('id', 3))
+
+    act(() => result.current.addEntry('foo'))
+
+    expect(result.current.hasHistory).toBe(true)
+    expect(result.current.getEntry()).toBe('foo')
+  })
+
+  test('limits the number of entries', () => {
+    const { result } = renderHook(() => useHistory<string>('id', 3))
+
+    act(() => result.current.addEntry('foo'))
+    act(() => result.current.addEntry('bar'))
+    act(() => result.current.addEntry('fizz'))
+    act(() => result.current.addEntry('buzz'))
+
+    expect(result.current.hasHistory).toBe(true)
+    act(() => expect(result.current.getEntry()).toBe('buzz'))
+    act(() => expect(result.current.getEntry()).toBe('fizz'))
+    act(() => expect(result.current.getEntry()).toBe('bar'))
+    expect(result.current.hasHistory).toBe(false)
+    expect(result.current.getEntry()).toBe(null)
+  })
+
+  test('cleans the history', () => {
+    const { result } = renderHook(() => useHistory<string>('id', 3))
+
+    act(() => result.current.addEntry('foo'))
+    act(() => result.current.addEntry('bar'))
+    act(() => result.current.cleanHistory())
+
+    expect(result.current.hasHistory).toBe(false)
+    expect(result.current.getEntry()).toBe(null)
+  })
+})

src/hooks/useHistory.test.ts

@@ -1,43 +1,40 @@
 import { useCallback } from 'react'
 
-import { STEPS_LIMIT } from 'constants/puzzle.constants'
-import { ST_HISTORY } from 'constants/storage.constants'
 import { useLocalStorage } from 'hooks/useLocalStorage'
-import { CellState } from 'models/Puzzle'
 
-type Step = [number, number, CellState]
-
-type UseHistoryType = {
+type UseHistoryType<T> = {
   hasHistory: boolean
-  addStep: (row: number, col: number, state: CellState) => void
-  getStep: () => Step | null
-  cleanSteps: () => void
+  addEntry: (entry: T) => void
+  getEntry: () => T | null
+  cleanHistory: () => void
 }
 
-export const useHistory = (): UseHistoryType => {
-  const [history, setHistory, cleanHistory] = useLocalStorage(ST_HISTORY, [] as Step[])
+export const useHistory = <T>(
+  storageId: string,
+  entriesLimit: number
+): UseHistoryType<T> => {
+  const [history, setHistory, clearHistory] = useLocalStorage(storageId, [] as T[])
 
   const hasHistory = history.length > 0
 
-  const addStep = useCallback(
-    (row: number, col: number, state: CellState) => {
-      const newStep = [row, col, state] as Step
-      setHistory((steps) => [newStep, ...steps].slice(0, STEPS_LIMIT))
+  const addEntry = useCallback(
+    (newEntry: T) => {
+      setHistory((entries) => [newEntry, ...entries].slice(0, entriesLimit))
     },
-    [setHistory]
+    [entriesLimit, setHistory]
   )
 
-  const getStep = useCallback(() => {
+  const getEntry = useCallback(() => {
     if (!hasHistory) return null
-    const [step, ...nextHistory] = history
+    const [entry, ...nextHistory] = history
     setHistory(nextHistory)
-    return step as Step
+    return entry as T
   }, [hasHistory, history, setHistory])
 
-  const cleanSteps = useCallback(() => {
-    cleanHistory()
+  const cleanHistory = useCallback(() => {
+    clearHistory()
     setHistory([])
-  }, [cleanHistory, setHistory])
+  }, [clearHistory, setHistory])
 
-  return { hasHistory, addStep, getStep, cleanSteps }
+  return { hasHistory, addEntry, getEntry, cleanHistory }
 }