Replace Jest with Vitest (uhawaii-system-its-ti-iam#118)

.github/workflows/badges.yml

@@ -2,7 +2,7 @@ name: Generate badges
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   create-branch:
@@ -29,7 +29,7 @@ jobs:
             echo "Branch $branch_name already exists."
           fi
 
-  generate-jest-badges:
+  generate-badges:
     needs: create-branch
     runs-on: ubuntu-latest
     steps:
@@ -41,7 +41,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Installing dependencies
         run: |
@@ -59,9 +59,9 @@ jobs:
           git switch badges
 
       - name: Generating coverage badges
-        uses: jpb06/jest-badges-action@latest
+        uses: jpb06/coverage-badges-action@latest
         with:
-          branches: '*'
+          branches: "*"
           coverage-summary-path: ui/coverage/coverage-summary.json
           no-commit: true
           target-branch: badges
@@ -73,61 +73,6 @@ jobs:
             git config --global user.name 'Groupings Project'
             git config --global user.email '[email protected]'
             git add *.svg
-            git commit -m "Autogenerated Jest badges" *.svg
+            git commit -m "Autogenerated Vitest badges" *.svg
             git push origin badges -f
           fi
-
-  # Re-enable once UH Groupings API is added to this repo
-  # generate-jacoco-badges:
-  #   needs: create-branch
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - name: Checkout repository
-  #       uses: actions/checkout@v3
-  #       with:
-  #         fetch-depth: 0
-
-  #     - name: Set up JDK 17
-  #       uses: actions/setup-java@v1
-  #       with:
-  #         java-version: 17
-
-  #     - name: Build with Maven and Generate JaCoCo Report
-  #       run: |
-  #         mvn clean test jacoco:report -f api/pom.xml -D'logging.level.edu.hawaii.its.holiday=OFF' -D'logging.level.org.springframework=ERROR' -D'spring.main.banner-mode=off'
-  #         mv api/target/ target/
-
-  #     - name: Switch to badges branch
-  #       run: |
-  #         git fetch
-  #         git switch badges   
-
-  #     - name: Generate Jacoco Badge
-  #       id: jacoco
-  #       uses: cicirello/jacoco-badge-generator@v2
-  #       with:
-  #         coverage-label: junit coverage
-  #         badges-directory: badges
-  #         generate-branches-badge: true
-
-  #     - name: Log coverage percentage
-  #       run: |
-  #         echo "coverage = ${{ steps.jacoco.outputs.coverage }}"
-
-  #     - name: Commit and push
-  #       if: ${{ github.event_name != 'pull_request' }}
-  #       run: |
-  #         cd badges
-  #         if [[ `git status --porcelain *.svg` ]]; then
-  #           git config --global user.name 'Groupings Project'
-  #           git config --global user.email '[email protected]'
-  #           git add *.svg
-  #           git commit -m "Autogenerated JaCoCo coverage badge" *.svg
-  #           git push origin badges -f 
-  #         fi
-
-  #     - name: Upload Jacoco coverage report
-  #       uses: actions/upload-artifact@v2
-  #       with:
-  #         name: jacoco-report
-  #         path: target/site/jacoco/

.github/workflows/ci.yml

@@ -2,34 +2,16 @@ name: CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
-  # Re-enable once UH Groupings API is added to this repo
-  # junit:
-  #   runs-on: [ubuntu-latest, macos-latest, windows-latest]
-
-  #   steps:
-  #     - name: Checkout code
-  #       uses: actions/checkout@v3
-
-  #     - name: Set up JDK 17
-  #       uses: actions/setup-java@v1
-  #       with:
-  #         java-version: 17
-
-  #     - name: Build with Maven
-  #       run: |
-  #         cd api 
-  #         mvn clean test
-
-  jest:
+  vitest:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-13, windows-latest]
-        node-version: [ 18.x, 20.x ]
+        node-version: [18.x, 20.x]
     runs-on: ${{ matrix.os }}
 
     steps:
@@ -51,7 +33,7 @@ jobs:
           cd ui
           npm run lint
 
-      - name: Run Jest Tests
+      - name: Run Vitest Tests
         run: |
           cd ui
           npm run test

README.md

@@ -9,4 +9,4 @@ Groupings can be synchronized with one or more of the following: email LISTSERV
 UH Groupings utilizes the Internet2 Grouper project. Grouper is an enterprise access management system designed for the highly distributed management environment and heterogeneous information technology environment common to universities.
 
 [![CI](https://github.com/uhawaii-system-its-ti-iam/uh-groupings/actions/workflows/ci.yml/badge.svg)](https://github.com/uhawaii-system-its-ti-iam/uh-groupings/actions/workflows/ci.yml)
-![Jest coverage](https://github.com/uhawaii-system-its-ti-iam/uh-groupings/blob/badges/badges/coverage-jest%20coverage.svg)
+![Test coverage](https://github.com/uhawaii-system-its-ti-iam/uh-groupings/blob/badges/badges/ui/coverage-total.svg)

ui/.gitignore

@@ -9,6 +9,7 @@ package-lock.json
 
 # testing
 /coverage
+.swc
 
 # next.js
 /.next/

ui/package.json

@@ -8,9 +8,9 @@
         "build": "next build",
         "start": "next start",
         "lint": "next lint",
-        "test": "jest",
-        "test:coverage": "jest --coverage",
-        "test:watch": "jest --watch"
+        "test": "vitest",
+        "test:ui": "vitest --ui",
+        "test:coverage": "vitest run --coverage"
     },
     "dependencies": {
         "@fortawesome/free-regular-svg-icons": "^6.6.0",
@@ -33,7 +33,7 @@
         "dotenv": "^16.4.1",
         "lucide-react": "^0.453.0",
         "next": "14.2.15",
-        "next-cas-client": "^1.2.2",
+        "next-cas-client": "^1.3.2",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.50.1",
@@ -45,32 +45,34 @@
     },
     "devDependencies": {
         "@stylistic/eslint-plugin": "^2.8.0",
-        "@swc/core": "^1.3.106",
-        "@testing-library/jest-dom": "^6.3.0",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.0.1",
         "@testing-library/user-event": "^14.5.2",
-        "@types/jest": "^29.5.11",
         "@types/node": "^22.7.4",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "@types/uniqid": "^5.3.4",
         "@typescript-eslint/eslint-plugin": "^6.19.1",
         "@typescript-eslint/parser": "^6.19.1",
+        "@vitejs/plugin-react": "^4.3.4",
+        "@vitest/coverage-istanbul": "^2.1.8",
+        "@vitest/ui": "^2.1.8",
         "autoprefixer": "^10.0.1",
         "eslint": "^8",
         "eslint-config-next": "14.2.15",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-testing-library": "^6.2.0",
         "eslint-plugin-tsdoc": "^0.2.17",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
-        "jest-fetch-mock": "^3.0.3",
+        "jsdom": "^25.0.1",
         "postcss": "^8.4.33",
-        "postcss-preset-mantine": "^1.12.3",
         "postcss-simple-vars": "^7.0.1",
         "prettier": "^3.2.5",
         "tailwindcss": "^3.3.0",
         "ts-node": "^10.9.2",
-        "typescript": "^5.3.3"
+        "typescript": "^5.3.3",
+        "vite-tsconfig-paths": "^5.1.4",
+        "vitest": "^2.1.8",
+        "vitest-fetch-mock": "^0.4.2"
     }
 }

ui/src/app/about/_components/technical-info-section.tsx

@@ -2,7 +2,7 @@ const TechnicalInfoSection = () => {
     const technicalInfoItems = [
         { name: 'React.js', url: 'https://react.dev/learn', description: '(Quickstart)' },
         { name: 'shadcn/ui', url: 'https://ui.shadcn.com/docs', description: '(Guide)' },
-        { name: 'Jest', url: 'https://jestjs.io/docs/getting-started', description: '(Introduction)' },
+        { name: 'Vitest', url: 'https://vitest.dev/guide/', description: '(Introduction)' },
         { name: 'Next.js', url: 'https://nextjs.org/docs', description: '(Introduction)' },
         {
             name: 'Tanstack Table',

ui/src/lib/access/authorization.ts

@@ -1,8 +1,7 @@
+import { isOwner, isAdmin } from '../fetchers';
 import Role from './role';
 import User from './user';
 
-const apiBaseUrl = process.env.NEXT_PUBLIC_API_2_1_BASE_URL as string;
-
 /**
  * Sets the appropriate roles for a user.
  *
@@ -26,30 +25,6 @@ export const setRoles = async (user: User): Promise<void> => {
     }
 };
 
-/**
- * Calls UH Groupings API to check if the uhIdentifier is an owner.
- *
- * @param uhIdentifier - The uid or uhUuid
- *
- * @returns True if the uhIdentifier is an owner of a grouping
- */
-const isOwner = async (uhIdentifier: string): Promise<boolean> =>
-    await fetch(`${apiBaseUrl}/owners`, { headers: { current_user: uhIdentifier } })
-        .then((res) => res.json())
-        .catch(() => false);
-
-/**
- * Calls UH Groupings API to check if the uhIdentifier is an admin.
- *
- * @param uhIdentifier - The uid or uhUuid
- *
- * @returns True if the uhIdentifier is an admin
- */
-const isAdmin = async (uhIdentifier: string): Promise<boolean> =>
-    await fetch(`${apiBaseUrl}/admins`, { headers: { current_user: uhIdentifier } })
-        .then((res) => res.json())
-        .catch(() => false);
-
 /**
  * Checks if uhUuid is valid using Regex.
  *

ui/src/lib/fetchers.ts

@@ -7,8 +7,7 @@ import {
     GroupingGroupMembers,
     GroupingPaths,
     MembershipResults,
-    GroupingGroupsMembers,
-    ApiError
+    GroupingGroupsMembers
 } from './types';
 import { getUser } from '@/lib/access/user';
 
@@ -97,7 +96,7 @@ export const groupingOptAttributes = async (groupingPath: string): Promise<Group
  *
  * @returns The promise of the grouping admins
  */
-export const groupingAdmins = async (): Promise<GroupingGroupMembers & ApiError> => {
+export const groupingAdmins = async (): Promise<GroupingGroupMembers> => {
     const currentUser = await getUser();
     const endpoint = `${baseUrl}/groupings/admins`;
     return getRequest<GroupingGroupMembers>(endpoint, currentUser.uid);
@@ -108,7 +107,7 @@ export const groupingAdmins = async (): Promise<GroupingGroupMembers & ApiError>
  *
  * @returns The promise of all the grouping paths
  */
-export const getAllGroupings = async (): Promise<GroupingPaths /* & ApiError*/> => {
+export const getAllGroupings = async (): Promise<GroupingPaths> => {
     const currentUser = await getUser();
     const endpoint = `${baseUrl}/groupings`;
     return getRequest<GroupingPaths>(endpoint, currentUser.uid);
@@ -208,3 +207,27 @@ export const isSoleOwner = async (uhIdentifier: string, groupingPath: string): P
     const endpoint = `${baseUrl}/groupings/${groupingPath}/owners/${uhIdentifier}`;
     return getRequest<boolean>(endpoint, currentUser.uid);
 };
+
+/**
+ * Check if the uhIdentifier is an owner.
+ *
+ * @param uhIdentifier - The uid or uhUuid
+ *
+ * @returns True if the uhIdentifier is an owner of a grouping
+ */
+export const isOwner = async (uhIdentifier: string): Promise<boolean> => {
+    const endpoint = `${baseUrl}/owners`;
+    return getRequest<boolean>(endpoint, uhIdentifier);
+};
+
+/**
+ * Check if the uhIdentifier is an admin.
+ *
+ * @param uhIdentifier - The uid or uhUuid
+ *
+ * @returns True if the uhIdentifier is an admin
+ */
+export const isAdmin = async (uhIdentifier: string): Promise<boolean> => {
+    const endpoint = `${baseUrl}/admins`;
+    return getRequest<boolean>(endpoint, uhIdentifier);
+};