feat: setup vite and vitest

.github/workflows/ci.yml

@@ -28,8 +28,12 @@ jobs:
         run: cd frontend && yarn lint
       - name: Type check
         run: cd frontend && yarn type-check
-      - name: Run tests
-        run: cd frontend && yarn test
+      - name: Run tests and coverage
+        run: cd frontend && yarn test && yarn test:coverage
+      - name: ✅ Upload coverage to Codecov
+        uses: codecov/[email protected]
+        with:
+          flags: frontend
   backend-test:
     name: 🧪 backend-ci
     runs-on: ubuntu-latest

.gitignore

@@ -126,7 +126,10 @@ cdk.out
 .aws-sam/
 
 *.js
+!vite.config.js
 !config.js
 !lib/inline-lambda/index.js
 *.d.ts
 # !frontend/src/radis.d.ts
+frontend/coverage
+frontend/html

codecov.yml

@@ -0,0 +1,23 @@
+coverage:
+  status:
+    project: off
+    patch: off
+
+flag_management:
+  individual_flags:
+    - name: frontend
+      paths:
+        - frontend/
+      statuses:
+        - type: project
+          target: 80%
+      carryforward: true
+    # - name: backend
+    #   paths:
+    #     - server/
+    #   statuses:
+    #     - type: project
+    #       target: 80%
+github_checks:
+  annotations: true
+

frontend/__tests__/src/App.test.tsx

@@ -0,0 +1,6 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import App from "../../src/App";
+test("renders the page", () => {
+  render(<App />);
+});

frontend/src/__test__/unit_test/PathLength.test.tsx → frontend/__tests__/src/components/fields/PathLength.test.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import React from "react";
+import App from "../../../../src/App";
 describe("testing pathLength field ", () => {
   test("testing pathLength field render with defaultValue and perfectly visible", () => {
     render(<App />);

frontend/src/__test__/unit_test/Pressure.test.tsx → frontend/__tests__/src/components/fields/Pressure.test.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import React from "react";
+import App from "../../../../src/App";
 describe("testing pressure field ", () => {
   test("testing pressure field render with defaultValue and perfectly visible", () => {
     render(<App />);

frontend/src/__test__/unit_test/Tgas.test.tsx → frontend/__tests__/src/components/fields/Tgas.test.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import React from "react";
+import App from "../../../../src/App";
 describe("testing tgas field ", () => {
   test("testing tgas field render with defaultValue and perfectly visible", () => {
     render(<App />);

frontend/src/__test__/unit_test/Trot.test.tsx → frontend/__tests__/src/components/fields/Trot.test.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import React from "react";
+import App from "../../../../src/App";
 describe("testing trot field ", () => {
   test("testing trot rendered but not visible if non-equilibrium-switch* is not checked", () => {
     render(<App />);

frontend/src/__test__/unit_test/Tvib.test.tsx → frontend/__tests__/src/components/fields/Tvib.test.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable react/react-in-jsx-scope */
 import { fireEvent, render, screen } from "@testing-library/react";
 import user from "@testing-library/user-event";
-import App from "../../App";
+import React from "react";
+import App from "../../../../src/App";
 describe("testing tvib field ", () => {
   test("testing tvib rendered but not visible if non-equilibrium-switch* is not checked", () => {
     render(<App />);

frontend/public/index.html → frontend/index.html

@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web app for RADIS: fast molecular spectra. https://radis.github.io/"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

frontend/package.json

@@ -12,9 +12,11 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "13.5.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "axios": "0.27.2",
     "dotenv": "^16.0.3",
     "fontsource-roboto": "4.0.0",
+    "jsdom": "^22.1.0",
     "plotly.js": "2.13.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -28,10 +30,12 @@
     "yup": "0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext js,ts,tsx,jsx"
   },
@@ -59,13 +63,16 @@
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@types/react-plotly.js": "2.5.1",
+    "@vitest/coverage-v8": "^0.32.2",
+    "@vitest/ui": "^0.32.2",
     "eslint": "8.20.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.30.1",
     "prettier": "2.7.1",
     "prettier-eslint": "15.0.1",
-    "typescript-eslint": "0.0.1-alpha.0"
+    "typescript-eslint": "0.0.1-alpha.0",
+    "vitest": "^0.32.2"
   }
 }

frontend/tsconfig.json

@@ -22,7 +22,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "types": ["vitest/globals"]
+
   },
   "include": [
     "src"

frontend/vite.config.ts

@@ -0,0 +1,28 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig(() => {
+  return {
+    server: {
+      //   open: true, /*opens up the browser */
+      hmr: { overlay: false },
+    },
+    build: {
+      outDir: "build",
+    },
+    test: {
+      globals: true,
+      environment: "jsdom",
+      setupFiles: ["./src/setupTests.ts"],
+      coverage: {
+        provider: "v8",
+        reporter: ["text", "json", "html"],
+        reportsDirectory: "./__tests__/coverage" /*coverage report*/,
+      },
+    },
+    plugins: [react()],
+  };
+});