Add vitest

.github/actions/frontend-build/action.yml

@@ -148,3 +148,48 @@ runs:
         github-token: ${{ env.GH_TOKEN }}
         review-message: "Please take a look :eyes:"
         tags: "TODO:,FIXME:,BUG:"
+
+    - name: vitest
+      shell: bash
+      working-directory: ${{ inputs.working_directory }}
+      run: yarn coverage
+
+    - uses: dorny/test-reporter@v1
+      id: test-reporter
+      with:
+        name: "Frontend Tests"
+        working-directory: ${{ inputs.working_directory }}
+        path: "coverage/junit-report.xml"
+        reporter: jest-junit
+        fail-on-error: false
+
+    - name: Code Coverage Report
+      uses: irongut/[email protected]
+      with:
+        filename: "src/frontend/coverage/cobertura-coverage.xml"
+        badge: true
+        fail_below_min: false
+        format: markdown
+        hide_branch_rate: false
+        hide_complexity: true
+        indicators: true
+        output: both
+        thresholds: "60 80"
+
+    - name: Create output variable
+      id: code-coverage-summary
+      shell: bash
+      working-directory: ${{ inputs.working_directory }}
+      run: |
+        cat ../../code-coverage-results.md >> $GITHUB_STEP_SUMMARY
+        echo "markdown<<EOF" >> $GITHUB_OUTPUT
+        cat ../../code-coverage-results.md >> $GITHUB_OUTPUT
+        echo "EOF" >> $GITHUB_OUTPUT
+
+    - name: "Create or Update PR Comment"
+      uses: im-open/[email protected]
+      if: ${{ always() && github.event_name == 'pull_request' }}
+      with:
+        github-token: ${{ env.GH_TOKEN }}
+        comment-identifier: "${{ env.WORKFLOW_SHORT_NAME }}-CodeCoverageSummary"
+        comment-content: ${{ steps.code-coverage-summary.outputs.markdown }}

src/frontend/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["vitest.explorer", "ryanluker.vscode-coverage-gutters"]
+}

src/frontend/package.json

@@ -12,7 +12,9 @@
     "format/check": "prettier . --check",
     "format/fix": "prettier . --write",
     "preview": "vite preview",
-    "orval": "orval --config ./orval.config.cjs"
+    "orval": "orval --config ./orval.config.cjs",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.45.1",
@@ -29,11 +31,15 @@
     "@cspell/eslint-plugin": "^8.9.1",
     "@eslint/js": "8.57.0",
     "@faker-js/faker": "^8.4.1",
+    "@testing-library/dom": "^10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/coverage-istanbul": "^1.6.0",
     "eslint": "8.57.0",
     "eslint-config-love": "^53.0.0",
     "eslint-config-prettier": "8.10.0",
@@ -45,13 +51,15 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-sonarjs": "^1.0.3",
     "eslint-ts-patch": "^8.57.0-0",
+    "jsdom": "^24.1.0",
     "msw": "^2.2.14",
     "openapi-types": "^12.1.3",
     "orval": "^6.30.2",
     "prettier": "^3.3.2",
     "typescript": "^5.2.2",
     "typescript-eslint": "^7.8.0",
     "vite": "^5.3.1",
-    "vite-plugin-mkcert": "^1.17.5"
+    "vite-plugin-mkcert": "^1.17.5",
+    "vitest": "^1.6.0"
   }
 }

src/frontend/src/mock.ts

@@ -1,8 +1,18 @@
+/* TODO: can be used to mock the API during development
 import { setupWorker } from 'msw/browser'
 
-import { getWeatherForecastMock } from './api/endpoints/weather-forecast/weather-forecast.msw'
+import { getBloggingMock } from '~/api/endpoints/blogging/blogging.msw'
+import { getSendMessageMock } from '~/api/endpoints/send-message/send-message.msw'
+import { getServiceMock } from '~/api/endpoints/service/service.msw'
+import { getWeatherForecastMock } from '~/api/endpoints/weather-forecast/weather-forecast.msw'
 
-const worker = setupWorker(...getWeatherForecastMock())
+const worker = setupWorker(
+  ...getBloggingMock(),
+  ...getSendMessageMock(),
+  ...getServiceMock(),
+  ...getWeatherForecastMock(),
+)
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises
 worker.start()
+*/

src/frontend/src/pages/index/__tests__/+Page.test.tsx

@@ -0,0 +1,10 @@
+import { expect, it } from 'vitest'
+
+import { render, screen } from '~/test/testUtils'
+
+import Page from '../+Page'
+
+it('renders welcome message', () => {
+  render(<Page />, { mockAuthContext: true, withQueryProvider: true })
+  expect(screen.getByText('Vite + React')).toBeInTheDocument()
+})

src/frontend/src/test/setupTests.ts

@@ -0,0 +1,38 @@
+import type matchers from '@testing-library/jest-dom/matchers'
+
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { setupServer } from 'msw/node'
+import { afterAll, afterEach, beforeAll } from 'vitest'
+
+import { getBloggingMock } from '~/api/endpoints/blogging/blogging.msw'
+import { getSendMessageMock } from '~/api/endpoints/send-message/send-message.msw'
+import { getServiceMock } from '~/api/endpoints/service/service.msw'
+import { getWeatherForecastMock } from '~/api/endpoints/weather-forecast/weather-forecast.msw'
+
+const server = setupServer(
+  ...getBloggingMock(),
+  ...getSendMessageMock(),
+  ...getServiceMock(),
+  ...getWeatherForecastMock(),
+)
+
+// Start server before all tests
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' })
+})
+
+//  Close server after all tests
+afterAll(() => {
+  server.close()
+})
+
+// Reset handlers after each test `important for test isolation`
+afterEach(() => {
+  cleanup()
+  server.resetHandlers()
+})
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends jest.Matchers<void, T>, matchers.TestingLibraryMatchers<T, void> {}
+}

src/frontend/src/test/testUtils.tsx

@@ -0,0 +1,67 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { type RenderOptions, render } from '@testing-library/react'
+import { vi } from 'vitest'
+
+interface IExtendedRenderOptions extends RenderOptions {
+  //withRouter?: boolean
+  //routerHistory?: string[]
+  //withRedux?: boolean
+  //mockAxiosCalls?: any
+  mockAuthContext?: boolean | null
+  //mockInitialState?: any
+  withQueryProvider?: boolean | null
+}
+
+const createTestQueryClient = (): QueryClient =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+    // logger: {
+    //   error: () => {},
+    //   log: console.log,
+    //   warn: console.warn,
+    // },
+  })
+
+const wrapInQueryProvider = (componentTree: React.JSX.Element): React.JSX.Element => {
+  const testQueryClient = createTestQueryClient()
+  return <QueryClientProvider client={testQueryClient}>{componentTree}</QueryClientProvider>
+}
+
+const setupComponent = (ui: React.JSX.Element, renderOptions?: IExtendedRenderOptions): React.JSX.Element => {
+  if (renderOptions == null) return ui
+  let componentTree = <>{ui}</>
+  //if (renderOptions.withRouter) componentTree = wrapInRouter(componentTree, renderOptions.routerHistory);
+  //if (renderOptions.withRedux) componentTree = wrapInRedux(componentTree, renderOptions);
+  if (renderOptions.withQueryProvider !== false) componentTree = wrapInQueryProvider(componentTree)
+  if (renderOptions?.mockAuthContext !== false) {
+    // TODO: also remove it afterAll
+    vi.mock('~/auth.context', () => ({
+      useAuthDispatch: () => {
+        return vi.fn()
+      },
+    }))
+  }
+  return componentTree
+}
+
+const customRender = (ui: React.JSX.Element, renderOptions?: IExtendedRenderOptions): ReturnType<typeof render> => {
+  try {
+    // mockAxiosCallResponsesIfAny(renderOptions)
+    const componentTree = setupComponent(ui, renderOptions)
+    return render(componentTree)
+  } catch (error) {
+    console.log(error)
+    // eslint-disable-next-line @typescript-eslint/only-throw-error
+    throw error
+  }
+}
+
+// eslint-disable-next-line import/export
+export * from '@testing-library/react'
+//export { default as userEvent } from '@testing-library/user-event'
+// override render export
+export { type IExtendedRenderOptions, customRender as render }

src/frontend/vite.config.ts

@@ -1,5 +1,5 @@
 import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import vike from 'vike/plugin'
 import mkcert from 'vite-plugin-mkcert'
 
@@ -15,4 +15,20 @@ export default defineConfig({
       '~components': '/src/components',
     },
   },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setupTests.ts',
+    mockReset: true,
+    coverage: { enabled: true, provider: 'istanbul', reporter: ['cobertura', 'lcov', 'html'] },
+    reporters: ['verbose', 'github-actions', 'junit'],
+    outputFile: {
+      junit: './coverage/junit-report.xml',
+      json: './coverage/json-report.json',
+    },
+  },
 })