Merge remote-tracking branch 'origin/develop'

Author: micnil

apps/node-chess/src/Server.ts

@@ -27,8 +27,8 @@ const start = (app: App, appConfig: AppConfig): ServerType => {
 
   // graceful shutdown
   process.on('SIGINT', () => {
+    app.close();
     server.close();
-    app.socketRouter.close();
     process.exit(0);
   });
   process.on('SIGTERM', () => {

apps/web-chess/src/app/features/auth/components/UsernameForm.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex } from '@radix-ui/themes';
+import { Box, Button, Flex, Text } from '@radix-ui/themes';
 import { FC } from 'react';
 import { Alert } from '../../../components/Alert';
 import { UsernameField } from './UsernameField';
@@ -32,17 +32,22 @@ export const UsernameForm: FC<Props> = ({
     >
       <Flex direction="column" gap="3">
         <Alert text={error} />
-
-        <UsernameField
-          name="username"
-          defaultValue={initialUsername}
-          type="text"
-          placeholder="Username"
-          isUsernameAvailable={isUsernameAvailable}
-          required
-          disabled={isLoading}
-          onChange={(e) => onUsernameChange(e.target.value)}
-        />
+        <Box>
+          <Text as="label" htmlFor="username">
+            Username
+          </Text>
+          <UsernameField
+            id="username"
+            name="username"
+            defaultValue={initialUsername}
+            type="text"
+            placeholder="Username"
+            isUsernameAvailable={isUsernameAvailable}
+            required
+            disabled={isLoading}
+            onChange={(e) => onUsernameChange(e.target.value)}
+          />
+        </Box>
 
         <Button
           mt={'1'}

apps/web-chess/src/app/features/auth/container/__tests__/UsernameFormContainer.spec.tsx

@@ -0,0 +1,18 @@
+import {
+  render,
+  screen,
+} from '../../../../../test/utils/custom-testing-library';
+import { UsernameFormContainer } from '../UsernameFormContainer';
+
+describe('UsernameFormContainer', () => {
+  it('should render correctly with default value', async () => {
+    render(<UsernameFormContainer />);
+
+    const usernameInput = await screen.findByLabelText('Username');
+    expect(usernameInput).toBeEnabled();
+    expect(usernameInput).toHaveValue('');
+    await screen.findByDisplayValue('testuser');
+    const submitButton = screen.getByRole('button', { name: /submit/i });
+    expect(submitButton).toBeEnabled();
+  });
+});

apps/web-chess/src/app/features/lobby/__tests__/GameLobby.spec.tsx

@@ -8,10 +8,10 @@ import {
 import { GameLobby } from '../GameLobby';
 
 describe('GameLobby', () => {
-  it('should render the game lobby header', () => {
-    const { getByText } = render(<GameLobby />);
+  it('should render the game lobby header', async () => {
+    const { getByText, findByText } = render(<GameLobby />);
 
-    expect(getByText('Lobby')).toBeTruthy();
+    expect(await findByText('Lobby')).toBeTruthy();
     expect(getByText('+ Create Game')).toBeTruthy();
   });
 
@@ -33,10 +33,9 @@ describe('GameLobby', () => {
       data: gameDetailsMockV1,
     });
 
-    const { getByText } = render(<GameLobby onCreateGame={onCreateGame} />);
+    const { findByRole } = render(<GameLobby onCreateGame={onCreateGame} />);
 
-    const createButton = getByText('+ Create Game');
-    expect(createButton).toBeTruthy();
+    const createButton = await findByRole('button', { name: '+ Create Game' });
 
     await user.click(createButton);
 

apps/web-chess/src/app/pages/WelcomePage.tsx

@@ -1,5 +1,5 @@
 import { Maybe } from '@michess/common-utils';
-import { Card, Flex, Text } from '@radix-ui/themes';
+import { Card, Flex } from '@radix-ui/themes';
 import { FC } from 'react';
 import { useAuth } from '../api/hooks/useAuth';
 import { Link } from '../components/Link';
@@ -25,9 +25,6 @@ export const WelcomePage: FC<Props> = ({ type }) => {
           />
           {type === 'social' && (
             <Flex direction="column" gap="2">
-              <Text as={'label'} color="gray">
-                Change username
-              </Text>
               <UsernameFormContainer />
             </Flex>
           )}

apps/web-chess/src/test/mocks/node-chess.ts

@@ -14,6 +14,7 @@ export const mswHandlers = [
         image: null,
         id: 'test-user-id',
         name: 'Test User',
+        username: 'testuser',
         email: 'test@example.com',
       },
       session: {

apps/web-chess/src/test/utils/custom-testing-library.tsx

@@ -1,7 +1,14 @@
 import { Theme } from '@radix-ui/themes';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
 import { render, RenderOptions } from '@testing-library/react';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { Api } from '../../app/api/Api';
 import { ApiContext } from '../../app/api/context/ApiContext';
 import { AuthClient } from '../../app/api/infra/AuthClient';
@@ -22,11 +29,13 @@ const api = Api.create(
   socketClient,
 );
 
-const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+const AllTheProviders = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <ApiContext.Provider value={api}>
-        <Theme>{children}</Theme>
+        <Theme>
+          <Outlet />
+        </Theme>
       </ApiContext.Provider>
     </QueryClientProvider>
   );
@@ -35,7 +44,29 @@ const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
 const customRender = (
   ui: ReactElement,
   options?: Omit<RenderOptions, 'wrapper'>,
-) => render(ui, { wrapper: AllTheProviders, ...options });
+) => {
+  const rootRoute = createRootRoute({
+    component: AllTheProviders,
+  });
+
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+
+    component: () => {
+      return ui;
+    },
+  });
+
+  const routerTree = rootRoute.addChildren([indexRoute]);
+  const router = createRouter({
+    routeTree: routerTree,
+    defaultPendingMinMs: 0,
+    defaultPendingMs: 0,
+  });
+
+  return render(<RouterProvider router={router} />, { ...options });
+};
 
 export * from '@testing-library/react';
 export { api, queryClient, customRender as render, socketClient };

apps/web-chess/src/test/utils/setup-tests.ts

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/vitest';
 import { fetch } from 'cross-fetch';
 import { server } from '../mocks/node-chess';
 global.fetch = fetch;

apps/web-chess/tsconfig.spec.json

@@ -6,6 +6,7 @@
       "vitest/globals",
       "vitest/importMeta",
       "vite/client",
+      "@testing-library/jest-dom/vitest",
       "node",
       "vitest",
       "@nx/react/typings/cssmodule.d.ts",

libs/api-router/src/lib/App.ts

@@ -11,6 +11,7 @@ export type App = {
   restRouter: Hono<any>;
   socketRouter: Server;
   init: () => Promise<void>;
+  close: () => Promise<void>;
 };
 
 const from = (
@@ -24,8 +25,14 @@ const from = (
     restRouter,
     socketRouter,
     init: async () => {
+      await api.games.initialize();
       await api.usageMetrics.initialize();
     },
+    close: async () => {
+      socketRouter.close();
+      await api.games.close();
+      await api.usageMetrics.close();
+    },
   };
 };
 export const App = {