Bugfix/fix auth bootstrap bounce

package.json

@@ -26,7 +26,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:cov": "vitest --coverage",
+    "test:cov": "vitest run --coverage",
     "verify": "npm run lint && npm run typecheck && npm run test:cov",
     "prepublishOnly": "npm run verify && npm run build"
   },
@@ -53,8 +53,8 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.13.1",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.3.6",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
     "autoprefixer": "^10.4.20",

src/providers/AuthProvider.tsx

@@ -24,7 +24,7 @@ interface Props {
 }
 
 /* ---------- tiny in-file route guard ----------------------- */
-const RequireAuth: React.FC<{ children: JSX.Element }> = ({ children }) => {
+const RequireAuth: React.FC<{ children: React.ReactElement }> = ({ children }) => {
   const { isAuthenticated } = useAuthState();
   const location = useLocation();
   return isAuthenticated
@@ -215,7 +215,7 @@ export const AuthProvider: React.FC<Props> = ({ config, children }) => {
           {/* everything else protected */}
           <Route
             path="*"
-            element={<RequireAuth>{children as JSX.Element}</RequireAuth>}
+            element={<RequireAuth>{children as React.ReactElement}</RequireAuth>}
           />
         </Routes>
 

tests/components/ProfilePage.test.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { AuthStateCtx } from '../../src/context/AuthStateContext';
+import { ProfilePage } from '../../src/components/ProfilePage';
+
+const mockUser = {
+  id: 'u1',
+  email: 'user@example.com',
+  name: 'John Doe',
+  roles: ['admin'],
+  modules: ['menus'],
+  tenantId: 't1',
+};
+
+const mockApi = {
+  get: vi.fn().mockResolvedValue({
+    data: {
+      data: {
+        email: 'user@example.com',
+        fullname: { fname: 'John', lname: 'Doe' },
+        username: 'johndoe',
+      },
+    },
+  }),
+  patch: vi.fn().mockResolvedValue({ data: {} }),
+  interceptors: {
+    request: { use: vi.fn(), eject: vi.fn() },
+    response: { use: vi.fn(), eject: vi.fn() },
+  },
+} as any;
+
+const mockSetUser = vi.fn();
+
+function renderProfile(user = mockUser, apiOverride = mockApi) {
+  return render(
+    <AuthStateCtx.Provider
+      value={{
+        isAuthenticated: true,
+        user,
+        accessToken: 'token',
+        api: apiOverride,
+        login: vi.fn(),
+        logout: vi.fn(),
+        setUser: mockSetUser,
+      }}
+    >
+      <ProfilePage />
+    </AuthStateCtx.Provider>
+  );
+}
+
+describe('ProfilePage', () => {
+  beforeEach(() => {
+    mockApi.get.mockReset();
+    mockApi.patch.mockReset();
+    mockSetUser.mockReset();
+    mockApi.get.mockResolvedValue({
+      data: {
+        data: {
+          email: 'user@example.com',
+          fullname: { fname: 'John', lname: 'Doe' },
+          username: 'johndoe',
+        },
+      },
+    });
+    mockApi.patch.mockResolvedValue({ data: {} });
+  });
+
+  it('renders "No user data available" when user is null', () => {
+    render(
+      <AuthStateCtx.Provider
+        value={{
+          isAuthenticated: false,
+          user: null,
+          accessToken: null,
+          api: mockApi,
+          login: vi.fn(),
+          logout: vi.fn(),
+          setUser: vi.fn(),
+        }}
+      >
+        <ProfilePage />
+      </AuthStateCtx.Provider>
+    );
+    expect(screen.getByText(/No user data available/i)).toBeInTheDocument();
+  });
+
+  it('loads and displays profile data on mount', async () => {
+    renderProfile();
+    await waitFor(() => {
+      // Avatar initial should be computed from loaded name
+      expect(screen.getByText('J')).toBeInTheDocument();
+    });
+  });
+
+  it('handles API error gracefully on load', async () => {
+    const errApi = {
+      ...mockApi,
+      get: vi.fn().mockRejectedValue(new Error('network error')),
+    } as any;
+    // Should not throw
+    renderProfile(mockUser, errApi);
+    await waitFor(() => {
+      // page still renders without crashing
+      expect(document.body).toBeDefined();
+    });
+  });
+
+  it('enters edit mode when Edit button is clicked', async () => {
+    renderProfile();
+    await waitFor(() => screen.getByTitle('Edit profile'));
+    fireEvent.click(screen.getByTitle('Edit profile'));
+    // After clicking Edit, save/cancel buttons should appear
+    await waitFor(() => expect(screen.getByText('Save changes')).toBeInTheDocument());
+  });
+
+  it('saves profile and shows success toast', async () => {
+    renderProfile();
+    await waitFor(() => screen.getByTitle('Edit profile'));
+    fireEvent.click(screen.getByTitle('Edit profile'));
+
+    await waitFor(() => screen.getByText('Save changes'));
+    fireEvent.click(screen.getByText('Save changes'));
+
+    await waitFor(() => {
+      expect(mockApi.patch).toHaveBeenCalledWith('/api/auth/me', expect.any(Object));
+    });
+    // Toast should appear with success
+    await waitFor(() => expect(screen.getByRole('status')).toBeInTheDocument());
+  });
+
+  it('shows error toast when save fails', async () => {
+    mockApi.patch.mockRejectedValueOnce(new Error('save error'));
+    renderProfile();
+    await waitFor(() => screen.getByTitle('Edit profile'));
+    fireEvent.click(screen.getByTitle('Edit profile'));
+
+    await waitFor(() => screen.getByText('Save changes'));
+    fireEvent.click(screen.getByText('Save changes'));
+
+    await waitFor(() => expect(screen.getByRole('status')).toBeInTheDocument());
+    expect(screen.getByText(/Save failed/i)).toBeInTheDocument();
+  });
+
+  it('cancels editing and reverts to original values', async () => {
+    renderProfile();
+    await waitFor(() => screen.getByTitle('Edit profile'));
+    fireEvent.click(screen.getByTitle('Edit profile'));
+
+    await waitFor(() => screen.getByText('Cancel'));
+    fireEvent.click(screen.getByText('Cancel'));
+
+    // Should be back to view mode (Edit profile button visible again)
+    await waitFor(() => expect(screen.getByTitle('Edit profile')).toBeInTheDocument());
+  });
+});

tests/components/SocialButton.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { SocialButton } from '../../src/components/actions/SocialButton';
+
+describe('SocialButton', () => {
+  it('renders an image with the given icon src', () => {
+    render(<SocialButton icon="https://example.com/icon.svg" label="Google" />);
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', 'https://example.com/icon.svg');
+    expect(img).toHaveAttribute('alt', 'Google');
+  });
+
+  it('renders the label text when provided', () => {
+    render(<SocialButton icon="icon.svg" label="Sign in with Google" />);
+    expect(screen.getByText('Sign in with Google')).toBeInTheDocument();
+  });
+
+  it('hides the label when no label is provided', () => {
+    render(<SocialButton icon="icon.svg" />);
+    // img with empty alt is decorative (no role); find via querySelector
+    const img = document.querySelector('img')!;
+    expect(img).toHaveAttribute('alt', '');
+    expect(img).toHaveAttribute('src', 'icon.svg');
+  });
+});

tests/exports.test.ts

@@ -0,0 +1,37 @@
+/**
+ * Smoke test: importing from the package entry point covers
+ * src/index.ts and src/main/app.ts re-export lines.
+ */
+import { describe, it, expect } from 'vitest';
+
+import {
+  AuthProvider,
+  useAuthState,
+  useHasRole,
+  useHasModule,
+  useCan,
+  RequirePermissions,
+  RbacContext,
+  RbacProvider,
+  useGrant,
+} from '../src/main/app';
+
+import { ProfilePage } from '../src/components/ProfilePage';
+
+describe('package exports', () => {
+  it('exports all expected symbols from main/app', () => {
+    expect(AuthProvider).toBeDefined();
+    expect(useAuthState).toBeDefined();
+    expect(useHasRole).toBeDefined();
+    expect(useHasModule).toBeDefined();
+    expect(useCan).toBeDefined();
+    expect(RequirePermissions).toBeDefined();
+    expect(RbacContext).toBeDefined();
+    expect(RbacProvider).toBeDefined();
+    expect(useGrant).toBeDefined();
+  });
+
+  it('exports ProfilePage from components', () => {
+    expect(ProfilePage).toBeDefined();
+  });
+});