Add jest-dom

jest.config.ts

@@ -144,7 +144,7 @@ const config: JestConfigWithTsJest = {
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],
-  setupFilesAfterEnv: ['/workspace/setup-jest.ts'],
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

package.json

@@ -47,6 +47,8 @@
     "@angular/compiler-cli": "^19.0.5",
     "@compodoc/compodoc": "^1.1.26",
     "@eslint/markdown": "^6.2.1",
+    "@testing-library/angular": "^17.3.5",
+    "@testing-library/jest-dom": "^6.6.3",
     "@types/jest": "^29.5.14",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",

setup-jest.ts

@@ -7,6 +7,9 @@
 // setup-jest.ts
 import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless';
 
+// add extended jest matchers
+import '@testing-library/jest-dom';
+
 // suppress console output during tests
 global.console = {
   ...console,

src/app/portal/features/site-header/site-header.component.html

@@ -36,13 +36,13 @@
         >Docs<mat-icon class="float-right">open_in_new</mat-icon></a
       ></mat-nav-list
     >
-    <div class="basis-1/4 text-right">
+    <div class="my-4 basis-1/4 text-right">
       @if (isLoggedIn()) {
-        <button mat-icon-button (click)="onLogout()">
+        <button mat-icon-button (click)="onLogout()" aria-label="Logout">
           <mat-icon>logout</mat-icon>
         </button>
       } @else {
-        <button mat-icon-button (click)="onLogin()">
+        <button mat-icon-button (click)="onLogin()" aria-label="Login">
           <mat-icon>login</mat-icon>
         </button>
       }