[ENG-10544] Feature/angular upgrade

.github/scripts/check-coverage-thresholds.js

@@ -1,9 +1,8 @@
-const fs = require('fs');
 const coverage = require('../../coverage/coverage-summary.json');
-const jestConfig = require('../../jest.config.js');
+const vitestConfig = require('../../vitest.config.ts');
 
 const summary = coverage.total;
-const thresholds = jestConfig.coverageThreshold.global;
+const thresholds = vitestConfig.default.test.coverage.thresholds;
 
 let failed = false;
 const errors = [];
@@ -29,7 +28,7 @@ for (const key of ['branches', 'functions', 'lines', 'statements']) {
     );
     errors.push(
       formatErrorsWithAlignedStars(
-        `Please update the coverageThreshold.global.${key} in the jest.config.js to ---> ${current} <---`,
+        `Please update test.coverage.thresholds.${key} in vitest.config.ts to ---> ${current} <---`,
         true
       )
     );
@@ -41,9 +40,9 @@ for (const key of ['branches', 'functions', 'lines', 'statements']) {
 if (failed) {
   const stars = '*'.repeat(warnMessage.length + 8);
   console.log('\n\nCongratulations! You have successfully run the coverage check and added tests.');
-  console.log('\n\nThe jest.config.js file is not insync with your new test additions.');
-  console.log('Please update the coverage thresholds in jest.config.js.');
-  console.log('You will need to commit again once you have updated the jst.config.js file.');
+  console.log('\n\nThe vitest.config.ts file is not in sync with your new test additions.');
+  console.log('Please update test.coverage.thresholds in vitest.config.ts.');
+  console.log('You will need to commit again once you have updated the vitest.config.ts file.');
   console.log('This is only necessary until we hit 100% coverage.');
   console.log(`\n\n${stars}`);
   errors.forEach((err) => {
@@ -55,5 +54,4 @@ if (failed) {
   console.log(`${leftBracket}${warnMessage}${rightBracket}`);
   console.log(`${leftBracket}${' '.repeat(warnMessage.length)}${rightBracket}`);
   console.log(`${stars}\n\n`);
-  // process.exit(1);
 }

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Run Jest Tests
+name: Run Vitest Tests
 
 on:
   pull_request:
@@ -26,7 +26,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run Jest tests
+      - name: Run Vitest tests
         run: npm run ci:test
   test-coverage:
     runs-on: ubuntu-latest
@@ -43,7 +43,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run Jest tests with coverage
+      - name: Run Vitest tests with coverage
         run: npm run ci:test:coverage
 
       - name: Check coverage thresholds

.prettierignore

@@ -34,6 +34,7 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+/public
 
 # System files
 .DS_Store

README.md

@@ -36,26 +36,23 @@ take up to 60 seconds once the docker build finishes.
 
 ## Testing the project
 
-The project uses jest for unit testing.
-A "counter" script executes before and after each test run to track how many times the unit
-tests are run locally. The output is displayed.
+The project uses Vitest through Angular's unit test builder (`ng test`).
+A "counter" script displays local run stats after coverage runs.
 
 ```bash
-npm run test (single test run)
-npm run test:watch (single run after file save)
-npm run test:coverage (code coverage results)
+npm run test               # single test run (no watch)
+npm run test:one "src/path/to/file.spec.ts"  # run one spec file
+npm run test:watch         # watch mode
+npm run test:coverage      # coverage reports
 ```
 
-- all commits must pass the local pipeline for test coverage
+Coverage thresholds are configured in `vitest.config.ts` (`test.coverage.thresholds`).
+To validate threshold updates after improving coverage:
 
 ```bash
 npm run test:check-coverage-thresholds
 ```
 
-- Verifies newly added tests match the thresholds
-- This is only used until we hit 100% test coverage
-- all commits must pass the local pipeline for test coverage
-
 ## Volta
 
 OSF uses volta to manage node and npm versions inside of the repository

angular.json

@@ -16,12 +16,11 @@
       "prefix": "osf",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/osf",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "allowedCommonJsDependencies": [
@@ -68,6 +67,9 @@
             "outputMode": "server",
             "ssr": {
               "entry": "src/server.ts"
+            },
+            "security": {
+              "allowedHosts": ["localhost", "127.0.0.1"]
             }
           },
           "configurations": {
@@ -168,7 +170,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "hmr": false
           },
@@ -197,13 +199,21 @@
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
-        },
         "test": {
-          "builder": "@angular-devkit/build-angular:jest",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "tsConfig": "tsconfig.spec.json"
+            "runnerConfig": "vitest.config.ts",
+            "coverageInclude": ["src/app/**/*.ts"],
+            "coverageExclude": [
+              "src/main.ts",
+              "src/app/app.{config,routes}.ts",
+              "**/theme/*.ts",
+              "**/*.{routes,server}.ts",
+              "**/index.ts",
+              "**/mappers/**",
+              "**/constants/**",
+              "**/*.{enum,model,type,interface}.ts"
+            ]
           }
         },
         "lint": {

docs/docker.md

@@ -161,7 +161,6 @@ If the application does not open in your browser at [http://localhost:4200](http
    This should return something like `0.0.0.0:4200` or `127.0.0.1:4200`.
 
 6. **Bypass browser caching issues**
-
    - Open the site in an incognito/private window.
    - Or test with:
      ```bash

docs/git-convention.md

@@ -37,7 +37,6 @@ The local pipeline is managed via husky
 To contribute to this repository, follow these steps:
 
 1. **Fork the Repository**
-
    - Go to the main repository page on GitHub [OSF Angular Project](https://github.com/CenterForOpenScience/angular-osf).
    - Click the **Fork** button (top-right corner).
    - This creates a copy of the repository under your GitHub account.
@@ -56,7 +55,6 @@ To contribute to this repository, follow these steps:
    ```
 
 4. **Make Your Changes**
-
    - Follow the commit conventions outlined below.
    - Ensure all tests pass before committing.