feat: new tests and enhanced test-setup file

Author: ErwannRousseau

src/components/game/__tests__/Game.test.tsx

@@ -0,0 +1,24 @@
+import { Game } from '../Game'
+import { render, screen } from '@/test-setup'
+
+describe('Game', () => {
+  it('renders correctly', async () => {
+    const initialState = {
+      game: {
+        lines: 6,
+        linesPerMillisecond: 2,
+        skills: {},
+      },
+    }
+
+    render(<Game />, { preloadedState: initialState })
+
+    expect(screen.getByText(/6 lines/)).toBeInTheDocument()
+    expect(screen.getByText(/per second: 20/)).toBeInTheDocument()
+    expect(screen.getByText(/Skills/)).toBeInTheDocument()
+    expect(screen.getByText(/Store/)).toBeInTheDocument()
+
+    await screen.findByText(/8 lines/, undefined, { timeout: 150 })
+    await screen.findByText(/10 lines/, undefined, { timeout: 150 })
+  })
+})

src/components/game/core/__tests__/Gitcoin.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen, fireEvent } from '@/test-setup'
+import { Gitcoin } from '../Gitcoin'
+import { click } from '@/modules/game'
+
+const mockDispatch = vi.fn()
+
+vi.mock('react-redux', async () => ({
+  useDispatch: () => mockDispatch,
+}))
+
+describe('<Gitcoin />', () => {
+  it('renders correctly', () => {
+    render(<Gitcoin />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+    expect(screen.getByAltText(/Gitcoin/i)).toBeInTheDocument()
+  })
+
+  it('dispatches the click action when clicked', () => {
+    render(<Gitcoin />)
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(mockDispatch).toHaveBeenCalledTimes(1)
+    expect(mockDispatch).toHaveBeenCalledWith(click())
+  })
+})

src/components/game/core/__tests__/Score.test.tsx

@@ -0,0 +1,14 @@
+import { Score } from '../Score'
+import { render, screen } from '@/test-setup'
+
+describe('Score', () => {
+  it('should display the number of lines', () => {
+    const initialState = {
+      game: { lines: 6, linesPerMillisecond: 2, skills: {} },
+    }
+
+    render(<Score />, { preloadedState: initialState })
+
+    expect(screen.getByText(/6 lines/i)).toBeInTheDocument()
+  })
+})

src/components/game/skills/__tests__/Section.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { Section } from '../Section'
+
+describe('Section', () => {
+  it('displays the owned skills', () => {
+    render(<Section itemName="Bash" number={3} />)
+
+    expect(screen.getByText('Bash')).toBeInTheDocument()
+    expect(screen.getAllByAltText('Bash')).toHaveLength(3)
+  })
+
+  it('render anything on unknown skill', () => {
+    render(<Section itemName="Unknown" number={3} />)
+
+    expect(screen.queryByText('Unknown')).not.toBeInTheDocument()
+  })
+})

src/components/game/skills/__tests__/Skills.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@/test-setup'
+import { Skills } from '../Skills'
+
+describe('Skills', () => {
+  it('renders correctly', () => {
+    const initialState = {
+      game: {
+        lines: 6,
+        linesPerMillisecond: 2,
+        skills: { Bash: 2, Git: 3, Javascript: 4 },
+      },
+    }
+
+    render(<Skills />, { preloadedState: initialState })
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/Git/i)).toBeInTheDocument()
+    expect(screen.getByText(/Javascript/i)).toBeInTheDocument()
+  })
+})

src/components/game/store/__tests__/Item.test.tsx

@@ -0,0 +1,59 @@
+import BashIcon from 'devicon/icons/bash/bash-original.svg'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Item } from '../Item'
+
+describe('Item', () => {
+  it('Renders a buyable item', () => {
+    const item = {
+      name: 'Bash',
+      price: 10,
+      linesPerMillisecond: 0.1,
+      icon: BashIcon,
+    }
+
+    const onBuy = vi.fn()
+
+    render(
+      <Item
+        item={item}
+        lines={150}
+        onBuy={onBuy}
+      />,
+    )
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/1 lines per second/i)).toBeInTheDocument()
+    expect(screen.getByRole('button')).not.toBeDisabled()
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(onBuy).toHaveBeenCalledWith(item)
+  })
+
+  it('Renders a non buyable item', () => {
+    const item = {
+      name: 'Bash',
+      price: 10,
+      linesPerMillisecond: 0.1,
+      icon: BashIcon,
+    }
+
+    const onBuy = vi.fn()
+
+    render(
+      <Item
+        item={item}
+        lines={0}
+        onBuy={onBuy}
+      />,
+    )
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/1 lines per second/i)).toBeInTheDocument()
+    expect(screen.getByRole('button')).toBeDisabled()
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(onBuy).not.toHaveBeenCalledWith(item)
+  })
+})

src/components/game/store/__tests__/Store.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@/test-setup'
+import { Store } from '../Store'
+
+describe('Store', () => {
+  it('renders correctly', () => {
+    const initialState = {
+      game: {
+        lines: 6,
+        linesPerMillisecond: 2,
+        skills: {},
+      },
+    }
+
+    render(<Store />, { preloadedState: initialState })
+
+    expect(screen.getByText(/Bash/i)).toBeInTheDocument()
+    expect(screen.getByText(/Git/i)).toBeInTheDocument()
+    expect(screen.getByText(/Javascript/i)).toBeInTheDocument()
+    expect(screen.getByText(/React/i)).toBeInTheDocument()
+    expect(screen.getByText(/Vim/i)).toBeInTheDocument()
+  })
+})

src/components/layout/__tests__/Navbar.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@/test-setup'
+import { Navbar } from '../Navbar'
+
+describe('Navbar page', () => {
+  it('renders correctly', () => {
+    const { asFragment } = render(<Navbar />)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

src/components/layout/__tests__/__snapshots__/Navbar.test.tsx.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Navbar page > renders correctly 1`] = `
+<DocumentFragment>
+  <header
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionRelative css-1lri64z-MuiPaper-root-MuiAppBar-root"
+    style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
+  >
+    <div
+      class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-1ygil4i-MuiToolbar-root"
+    >
+      <a
+        class="navbar-link"
+        data-discover="true"
+        href="/"
+      >
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
+          data-testid="GitHubIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"
+          />
+        </svg>
+        <h6
+          class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap css-1tl44qx-MuiTypography-root"
+        >
+          Gitclicker
+        </h6>
+      </a>
+    </div>
+  </header>
+</DocumentFragment>
+`;

src/pages/__tests__/GitClicker.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@/test-setup'
+import GitClicker from '../GitClicker'
+
+describe('GitClicker page', () => {
+  it('renders correctly', () => {
+    const { asFragment } = render(<GitClicker />)
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+})