Bump typescript from 5.9.3 to 6.0.2 in /user-interface/authentication

user-interface/authentication/package.json

@@ -15,7 +15,7 @@
     "build": "rsbuild build",
     "preview": "rsbuild preview",
     "compile": "tsc",
-    "test": "jest"
+    "test": "rstest"
   },
   "dependencies": {
     "react": "^19.2.3",
@@ -25,17 +25,14 @@
     "@rsbuild/core": "1.7.3",
     "@rsbuild/plugin-react": "^1.4.6",
     "@rsbuild/plugin-type-check": "^1.3.4",
+    "@rstest/core": "^0.9.7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/jest": "^30.0.0",
     "@types/node": "^25.3.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.3.0",
-    "jest-fetch-mock": "^3.0.3",
-    "ts-jest": "^29.4.9",
-    "typescript": "^5.9.3"
+    "happy-dom": "^20.8.9",
+    "typescript": "^6.0.2"
   }
 }

user-interface/authentication/rstest.config.mts

@@ -0,0 +1,8 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig } from '@rstest/core';
+
+export default defineConfig({
+    plugins: [pluginReact()],
+    testEnvironment: 'happy-dom',
+    setupFiles: ['./rstest.setup.mts'],
+});

user-interface/authentication/rstest.setup.mts

@@ -0,0 +1,10 @@
+import { afterEach, expect } from '@rstest/core';
+import { cleanup } from '@testing-library/react';
+import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(jestDomMatchers);
+
+// Clean up after each test to prevent test pollution
+afterEach(() => {
+    cleanup();
+});

user-interface/authentication/src/LoginForm.test.tsx

@@ -1,16 +1,13 @@
-import React, {act} from 'react';
+import {expect, rs, test} from '@rstest/core';
 import {render, screen} from '@testing-library/react';
 import LoginForm from './LoginForm';
-import fetchMock from "jest-fetch-mock";
+import {CsrfToken} from "./api";
 
-test('renders login form', async () => {
-
-    fetchMock.mockResponse(JSON.stringify({csrfToken: 'aardvark'}));
+rs.mock('./api', () => ({
+    fetchCsrfToken: (): Promise<CsrfToken> => Promise.resolve({csrfToken: 'aardvark'}),
+}));
 
-    await act(async () => {
-        render(<LoginForm />);
-    });
-
-    const loginButton = screen.getByText(/Login/i);
-    expect(loginButton).toBeInTheDocument();
+test('renders login form', async () => {
+    render(<LoginForm/>);
+    expect(await screen.findByText(/Login/i)).toBeDefined();
 });

user-interface/authentication/src/LoginForm.tsx

@@ -1,6 +1,7 @@
 import React, {ChangeEvent, FormEvent, MouseEvent} from "react";
+import {fetchAuthentication, fetchCsrfToken} from "./api";
 
-declare namespace LoginForm {
+export declare namespace LoginForm {
 
     interface Props {
         authenticationEndpoint: string,
@@ -42,13 +43,7 @@ export class LoginForm extends React.Component<LoginForm.Props, LoginForm.State>
     }
 
     async refreshCsrfToken() {
-        return window
-            .fetch(this.props.sessionEndpoint, {
-                method: "GET",
-                headers: {'accept': 'application/json'},
-                credentials: "include"
-            })
-            .then(response => response.json())
+        return fetchCsrfToken(this.props.sessionEndpoint)
             .then(result => this.setState({csrfToken: result.csrfToken}))
             .catch(error => console.error("Get CSRF token error:", error));
     }
@@ -75,18 +70,8 @@ export class LoginForm extends React.Component<LoginForm.Props, LoginForm.State>
 
         // TODO - What if we know we have no CSRF token, now we're doing via extra fetch?
 
-        await fetch((this.props.authenticationEndpoint), {
-                method: "POST",
-                headers: {'content-type': 'application/json'},
-                credentials: "include",
-                body: JSON.stringify({
-                    username: this.state.username,
-                    password: this.state.password.split(""),
-                    csrfToken: this.state.csrfToken
-                })
-            })
-            .then(response => response.json())
-            .then(result => window.location.reload())
+        await fetchAuthentication(this.state, this.props.authenticationEndpoint)
+            .then(_ => window.location.reload())
             .catch(exception => console.error("Authentication error:", exception));
 
         // TODO - Handle invalid CSRF token by refreshing the page.

user-interface/authentication/src/api.ts

@@ -0,0 +1,35 @@
+import LoginForm from "./LoginForm";
+
+export interface CsrfToken {
+    csrfToken: string
+}
+
+export async function fetchCsrfToken(endpoint: string): Promise<CsrfToken> {
+    return window
+        .fetch(endpoint, {
+            method: "GET",
+            headers: {'accept': 'application/json'},
+            credentials: "include"
+        })
+        .then(response => response.json());
+}
+
+export interface AuthenticationResult {
+    type: "success" | "failure";
+    username?: string;
+}
+
+export async function fetchAuthentication(state: LoginForm.State, endpoint: string): Promise<AuthenticationResult> {
+    return window
+        .fetch(endpoint, {
+            method: "POST",
+            headers: {'content-type': 'application/json'},
+            credentials: "include",
+            body: JSON.stringify({
+                username: state.username,
+                password: state.password.split(""),
+                csrfToken: state.csrfToken
+            })
+        })
+        .then(response => response.json())
+}

user-interface/authentication/tsconfig.json

@@ -19,8 +19,9 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "rootDir": "src",
   },
   "include": [
     "src"
-  ]
+  ],
 }