Improvement/589-migrate-to-vite-and-vitest

Dockerfile

@@ -40,7 +40,7 @@ RUN mkdir -p /var/docat/doc
 
 # install the application
 RUN mkdir -p /var/www/html
-COPY --from=frontend /app/frontend/build /var/www/html
+COPY --from=frontend /app/frontend/dist /var/www/html
 COPY docat /app/docat
 WORKDIR /app/docat
 

web/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .prettierrc

web/public/index.html → web/index.html

@@ -11,5 +11,6 @@
       <strong>We're sorry docat web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

web/package.json

@@ -20,23 +20,29 @@
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/parser": "^5.54.1",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitest/coverage-v8": "^0.34.3",
     "eslint": "^8.0.1",
     "fuse.js": "^6.6.2",
     "http-proxy-middleware": "^2.0.6",
+    "jsdom": "^22.1.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.3",
     "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
     "typescript": "*",
+    "vite": "^4.4.9",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.34.3",
     "web-vitals": "^3.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --watchAll=false --testMatch **/src/**/*.test.ts",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest --watch=false",
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx"
   },
   "eslintConfig": {
@@ -57,7 +63,6 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000/",
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "eslint-config-standard-with-typescript": "^23.0.0",

web/src/tests/repositories/ProjectRepository.test.ts

@@ -5,21 +5,21 @@ import ProjectRepository from '../../repositories/ProjectRepository'
 import ProjectDetails from '../../models/ProjectDetails'
 import { Project } from '../../models/ProjectsResponse'
 const mockFetchData = (fetchData: any): void => {
-  global.fetch = jest.fn().mockImplementation(async () => await Promise.resolve({
+  global.fetch = vi.fn().mockImplementation(async () => await Promise.resolve({
     ok: true,
     json: async () => await Promise.resolve(fetchData)
   }))
 }
 
 const mockFetchError = (errorMsg = 'Error'): void => {
-  global.fetch = jest.fn().mockImplementation(async () => await Promise.resolve({
+  global.fetch = vi.fn().mockImplementation(async () => await Promise.resolve({
     ok: false,
     json: async () => await Promise.resolve({ message: errorMsg })
   }))
 }
 
 const mockFetchStatus = (status: number, message?: string): void => {
-  global.fetch = jest.fn().mockImplementation(async () => await Promise.resolve({
+  global.fetch = vi.fn().mockImplementation(async () => await Promise.resolve({
     ok: false,
     status,
     json: async () => await Promise.resolve({ message: message ?? 'Error' })
@@ -44,7 +44,7 @@ describe('get versions', () => {
     const projectName = 'test'
 
     mockFetchError('Test Error')
-    console.error = jest.fn()
+    console.error = vi.fn()
 
     const result = await ProjectRepository.getVersions(projectName)
 

web/tsconfig.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client", "vitest/globals"]
   },
   "include": [
     "src"

web/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

web/vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react()],
+  assetsInclude: ['**/*.md'],
+  server: {
+    port: 8080,
+    proxy: {
+      "/api": {
+	 target: "http://localhost:5000",
+	 changeOrigin: true,
+	 secure: false,
+      },
+      "/doc": {
+	target: "http://localhost:5000",
+	changeOrigin: true,
+        secure: false,
+      }
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    css: true,
+    reporters: ['verbose'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*'],
+      exclude: [],
+    }
+  }
+})