Switch from CRA to Vite and clean up tests (#692)

* Switch from CRA to Vite and clean up tests * Fixed issue with loading screen continuing even after cancel button click. Updated local test config. Globus transfers still not working. --------- Co-authored-by: Zach Price <pricezt@ornl.gov> Co-authored-by: downiec <42552189+downiec@users.noreply.github.com>
esgf2-us · Dec 7, 2024 · 18ba9dc · 18ba9dc
1 parent a65405a
commit 18ba9dc
Show file tree

Hide file tree

Showing 26 changed files with 3,345 additions and 6,689 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -62,7 +62,14 @@
   "eslint.workingDirectories": ["./frontend/"],
   // Jest
   // -----------------------------
-  "jest.pathToJest": "yarn test:watch",
+  "jest.rootPath": "./frontend/src",
+  "jest.jestCommandLine": "yarn jest  --runInBand",
+  "jest.monitorLongRun": "off",
+  "jest.enable": true,
+  "jest.runMode": {
+    "type": "on-demand",
+    "coverage": true
+  },
   // HTML, CSS, JSON
   // -----------------------------
   "[html]": {
@@ -78,9 +85,6 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "python.analysis.extraPaths": ["backend/venv/bin/python"],
-  "jest.rootPath": "./frontend/src",
-  "jest.jestCommandLine": "yarn test",
   "python.testing.pytestEnabled": true,
-  "python.testing.pytestArgs": ["backend/"],
-  "jest.monitorLongRun": "off"
+  "python.testing.pytestArgs": ["backend"]
 }
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <base href="%PUBLIC_URL%/" />
+    <base href="/" />
     <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 site created using create-react-app" />
-    <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.
@@ -27,6 +27,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.

diff --git a/frontend/package.json b/frontend/package.json
@@ -3,16 +3,15 @@
   "version": "1.3.0",
   "private": true,
   "scripts": {
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "lint": "eslint './src/**/*.{js,jsx,ts,tsx,json}' --fix --max-warnings=0 --no-error-on-unmatched-pattern && tsc --noemit",
     "precommit": "eslint './src/**/*.{js,jsx,ts,tsx,json}' --max-warnings=0 --no-error-on-unmatched-pattern",
-    "start": "react-scripts start",
-    "test": "CI=1 react-scripts test --runInBand",
-    "test:coverage": "CI=1 react-scripts test --coverage",
-    "test:watch": "react-scripts test --runInBand"
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch"
   },
-  "proxy": "http://django:5000",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -34,15 +33,10 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "**/*.{js,jsx,ts,tsx}",
-      "!**/node_modules/**",
-      "!**/coverage/**",
+      "src/**/*.{js,jsx,ts,tsx}",
       "!src/index.tsx",
       "!src/test/**",
       "!src/assets",
-      "!src/test/mock/**",
-      "!**/serviceWorker.js",
-      "!**/react-app-env.d.ts",
       "!**/lib/**"
     ],
     "coverageThreshold": {
@@ -57,15 +51,26 @@
       }
     },
     "moduleNameMapper": {
-      "react-markdown": "<rootDir>/src/test/__mocks__/ReactMarkdownMock.tsx"
+      "react-markdown": "<rootDir>/src/test/__mocks__/ReactMarkdownMock.tsx",
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|less)$": "<rootDir>/src/test/__mocks__/assetFileMock.js"
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+.tsx?$": [
+        "ts-jest",
+        {}
+      ]
     }
   },
   "dependencies": {
     "@ant-design/icons": "5.2.6",
     "@babel/plugin-syntax-flow": "7.23.3",
     "@babel/plugin-transform-react-jsx": "7.23.4",
     "@react-keycloak/web": "3.4.0",
-    "antd": "5.19.2",
+    "antd": "^5.22.2",
     "autoprefixer": "10.4.14",
     "axios": "0.26.1",
     "dayjs": "1.11.10",
@@ -83,30 +88,30 @@
     "react-joyride": "2.5.3",
     "react-markdown": "9.0.1",
     "react-router-dom": "^6.9.0",
-    "react-scripts": "5.0.1",
     "recoil": "0.7.7",
     "typescript": "5.4.2",
-    "uuid": "8.3.2"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@babel/core": "7.24.1",
     "@babel/eslint-parser": "7.24.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "7.24.0",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/gtag.js": "^0.0.20",
     "@types/humps": "2.0.6",
-    "@types/jest": "29.5.12",
+    "@types/jest": "^29.5.14",
     "@types/node": "20.11.30",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "@types/react-router-dom": "5.3.3",
     "@types/uuid": "9.0.8",
     "@typescript-eslint/eslint-plugin": "7.3.1",
     "@typescript-eslint/parser": "7.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
@@ -116,9 +121,15 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "msw": "0.28.1",
+    "eslint-plugin-testing-library": "^7.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "msw": "1.3.5",
     "postcss": "8.4.31",
     "prettier": "2.2.1",
-    "setimmediate": "1.0.5"
+    "setimmediate": "1.0.5",
+    "ts-jest": "^29.2.5",
+    "vite": "^6.0.1",
+    "vite-jest": "^0.1.4"
   }
 }
diff --git a/frontend/src/api/routes.ts b/frontend/src/api/routes.ts
@@ -42,6 +42,7 @@ type ApiRoutes = {
   tempStorageGet: ApiRoute;
   tempStorageSet: ApiRoute;
   frontendConfig: ApiRoute;
+  introMarkdown: ApiRoute;
 };
 
 /**
@@ -124,6 +125,10 @@ const apiRoutes: ApiRoutes = {
     path: `${window.location.origin}/frontend-config.js`,
     handleErrorMsg: (HTTPCode) => mapHTTPErrorCodes('Frontend Config', HTTPCode),
   },
+  introMarkdown: {
+    path: `${window.location.origin}/messages/metagrid_messages.md`,
+    handleErrorMsg: (HTTPCode) => mapHTTPErrorCodes('Introduction Markdown', HTTPCode),
+  },
 };
 
 export default apiRoutes;