Merge remote-tracking branch 'origin/main' into feature/metadata_summ…

…ary_and_browser_GSI-1217

.devcontainer/dev_install

@@ -3,7 +3,7 @@
 
 cd /workspace
 
-corepack prepare pnpm@9.14.2 --activate
+corepack prepare pnpm@9.15.3 --activate
 echo "Updating pnpm..."
 npm install -g pnpm
 

.devcontainer/devcontainer.json

@@ -51,7 +51,8 @@
         "visualstudioexptteam.vscodeintellicode",
         "esbenp.prettier-vscode",
         "dbaeumer.vscode-eslint",
-        "angular.ng-template"
+        "angular.ng-template",
+        "orta.vscode-jest"
       ]
     }
   },

.github/workflows/lint.yml

@@ -1,23 +1,22 @@
-name: ESLint
+name: Lint
+
 on:
   push:
 
 jobs:
   build:
     runs-on: ubuntu-24.04
-    strategy:
-      matrix:
-        node-version: [22]
     steps:
-    - uses: actions/checkout@v4
-    - name: Install pnpm
-      uses: pnpm/action-setup@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'pnpm'
-    - name: Install dependencies
-      run: pnpm install
-    - name: Run Linter
-      run: npm run lint
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run Linter
+        run: npm run lint

.github/workflows/test.yml

@@ -0,0 +1,22 @@
+name: Test
+
+on:
+  push:
+
+jobs:
+  build:
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run tests
+        run: npm run test

README.md

@@ -1,6 +1,6 @@
 # GHGA Data Portal
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0-rc.0.
+This repository contains the Angular 19 front-end application for the GHGA data portal.
 
 ## Development server
 
@@ -34,7 +34,7 @@ The development server will serve the application via SSL in this mode, using th
 
 In this mode, the `data_portal_oidc_client_id` and the other OIDC settings must be set properly as required by the OIDC provider.
 
-You will also need to changed the hosts file on your host computer so that localhost points to the staging backend. If you use the default staging backend, then you can browse the application at `https://data.staging.ghga.dev`.
+You will also need to change the hosts file on your host computer so that localhost points to the staging backend. If you use the default staging backend, then you can browse the application at `https://data.staging.ghga.dev`.
 
 To test against the real backend and with the real OIDC provider, you can start the development server like this:
 
@@ -74,55 +74,61 @@ ng build
 
 This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
 
-## Running unit tests
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+## Package Manager
+
+This project uses pnpm to install dependencies, which is a replacement for the much slower npm. Run
 
 ```bash
-ng test
+pnpm install
 ```
 
-## Running end-to-end tests
+to install the dependencies. It is important to note that you should not have a `package-lock.json` but instead a `pnpm-lock.yaml`. You can still use npm for running other commands or to install global packages but not to add dependencies or to install all dependencies.
 
-For end-to-end (e2e) testing, run:
+## Linter, Commits, and Documentation
 
-```bash
-ng e2e
-```
+The repository is set up in such a way to only allow linted commits. That means commits are blocked by Husky if they cause linter errors (currently, warnings are accepted). This ensures that code quality standards are maintained without building up technical debt that has to be fixed later on.
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+To ensure deterministic behavior, the pre-commit hook _does not_ attempt to fix linter errors. Most of the time, you will be fine by simply running `ng lint --fix`, which attempts to automatically fix most of the issues. If we ran that in the hook, however, you would be committing different code than the one you checked. So if you cannot commit your code, run lint fix. If that doesn't resolve all the issues (which you can see by running `ng lint`), resolve those issues and try again.
 
-## Additional Resources
+## Ease of use
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+For comfort, we are adding these shorthands: `npm run lint`, `npm run lf` (for `lint --fix`), and `npm run docs` (to build and serve the documentation). Apart from seeing the linter warnings when you (try to) commit or run the linter manually, your IDE should also show you these warnings in the code, and fixing (the auto-fixable ones) should be offered in the context menu on hover or via `Ctrl-.`.
 
-## Package Manager
+## Running unit-tests
 
-This project uses pnpm to install dependencies which is a replacement for the much slower npm. Run
+We are using [Jest](https://jestjs.io/) for unit testing in this project. If possible, the queries and matchers from the [Testing Library](https://testing-library.com/) should be used. See the documentation for the [Angular Testing Library](https://testing-library.com/docs/angular-testing-library/intro/) and [jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/).
 
-```bash
-pnpm install
-```
+The unit tests are not included in the linting process and can be executed separately by running `npm run test`. These three variants of running the tests are provided:
 
-to install the dependencies. It is important to note that you should not have a package-lock.json but instead a pnpm-lock.yaml. You can still use npm for run and other commands or to install global packages but not to add dependencies or to install all dependencies.
+- `npm run test:coverage` - also collect and report test coverage information
+- `npm run test:parallel` - use parallel processes (currently slower, probably due to inefficient transpilation)
+- `npm run test:watch` - continually watch files for changes and rerun tests related to changed files
 
-## Linter, Commits and Documentation
+You can also use the VS Code extension for Jest to run tests interactively using the test explorer in the side bar.
 
-The repository is setup in such a way to only allow linted commits. That means, that commits are blocked by husky if they cause linter errors (currently, warnings are accepted). This ensures that code quality standards are maintained without build up technical debt that has to be fixed later on.
+Note that modernizing the unit testing tooling is on the roadmap of the Angular team for 2025. We may need to change some parts of the tooling when the official solution is provided.
 
-To ensure deterministic behavior, the pre-commit hook _does not_ attempt to fix linter errors. Most of the time, you will be fine by simply running `ng lint --fix` which attempts to automatically fix most of the issues. If we ran that in the hook, however, you would be committing different code than the one you checked. So if you cannot commit your code, run lint fix. If that doesn't resolve all the issues (which you can see by running ng lint) resolve those issues and try again.
+## Running end-to-end tests
 
-## Ease of use
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
 
-For comfort, we are adding these shorthands: `npm run lint`, `npm run lf` (for `lint --fix`) and `npm run docs` (to build and serve the documentation). Apart from seeing the linter warnings when you (try to) commit or run the linter manually, your IDE should also show you these warnings in the code and fixing (the auto-fixable ones) should be offered in the context menu on hover or via Ctrl-`.`.
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
 ## The Architecture Matrix
 
 This application is built as a modularized frontend monolith (a "modulith") using vertical slices and layers as module boundaries, which are enforced using the linter.
 
 The vertical slices correspond to the different feature areas or bounded contexts within the application, such as _metadata_ or _access-requests_. Additionally, we have a vertical slice called _portal_ that contains all overarching features, such as the home page (which displays a metadata summary) and the user profile page (which shows the user's access requests). Another slice, called _shared_, provides UI components or utilities used across all feature areas. Authentication and user session handling are implemented in a separate slice called _auth_.
 
-The horizontal layers are named _features_ (for feature components, i.e., smart components), _ui_ (for presentational components, i.e., dumb components), _services_ (for accessing domain objects and corresponding application logic), _models_ (for interfaces of domain objects), and _utils_ (for feature-specific utility functions)." The _services_ layer primarily contains Angular services, while the _utils_ layer includes pure pipes, guards, and custom utility functions.
+The horizontal layers are named _features_ (for feature components, i.e., smart components), _ui_ (for presentational components, i.e., dumb components), _services_ (for accessing domain objects and corresponding application logic), _models_ (for interfaces of domain objects), and _utils_ (for feature-specific utility functions). The _services_ layer primarily contains Angular services, while the _utils_ layer includes pure pipes, guards, and custom utility functions.
 
 This results in the following architecture matrix:
 

angular.json

@@ -82,27 +82,6 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n"
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": [],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              },
-              {
-                "glob": "mockServiceWorker.js",
-                "input": "src/mocks",
-                "output": "./"
-              }
-            ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
-        },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {

eslint.config.js

@@ -280,6 +280,11 @@ export default [
           mode: 'folder',
           pattern: 'src/mocks',
         },
+        {
+          type: 'setup',
+          mode: 'file',
+          pattern: ['jest.config.ts', 'setup-jest.ts'],
+        },
       ],
     },
   },