Refactor useAuth hook, settings components, and docs for formatting and readability improvements

- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.
This commit is contained in:
2025-11-10 11:03:45 +01:00
parent 464a6140c4
commit 96df7edf88
208 changed files with 4056 additions and 4556 deletions

View File

@@ -51,13 +51,17 @@ describe('AddMemberDialog', () => {
render(<AddMemberDialog {...defaultProps} />);
expect(screen.getByRole('heading', { name: 'Add Member' })).toBeInTheDocument();
expect(screen.getByText('Add a user to this organization and assign them a role.')).toBeInTheDocument();
expect(
screen.getByText('Add a user to this organization and assign them a role.')
).toBeInTheDocument();
});
it('does not render when closed', () => {
render(<AddMemberDialog {...defaultProps} open={false} />);
expect(screen.queryByText('Add a user to this organization and assign them a role.')).not.toBeInTheDocument();
expect(
screen.queryByText('Add a user to this organization and assign them a role.')
).not.toBeInTheDocument();
});
it('renders user email select field', () => {

View File

@@ -87,7 +87,9 @@ describe('MemberActionMenu', () => {
await user.click(removeOption);
await waitFor(() => {
expect(screen.getByText(/Are you sure you want to remove.*John Doe.*from this organization/)).toBeVisible();
expect(
screen.getByText(/Are you sure you want to remove.*John Doe.*from this organization/)
).toBeVisible();
});
});

View File

@@ -6,10 +6,7 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { OrganizationActionMenu } from '@/components/admin/organizations/OrganizationActionMenu';
import {
useDeleteOrganization,
type Organization,
} from '@/lib/api/hooks/useAdmin';
import { useDeleteOrganization, type Organization } from '@/lib/api/hooks/useAdmin';
import { toast } from 'sonner';
// Mock dependencies
@@ -307,9 +304,7 @@ describe('OrganizationActionMenu', () => {
await user.click(cancelButton);
await waitFor(() => {
expect(
screen.queryByText(/Are you sure you want to delete/)
).not.toBeInTheDocument();
expect(screen.queryByText(/Are you sure you want to delete/)).not.toBeInTheDocument();
});
});
@@ -421,9 +416,7 @@ describe('OrganizationActionMenu', () => {
await user.click(confirmButton);
await waitFor(() => {
expect(
screen.queryByText(/Are you sure you want to delete/)
).not.toBeInTheDocument();
expect(screen.queryByText(/Are you sure you want to delete/)).not.toBeInTheDocument();
});
});
});

View File

@@ -6,7 +6,11 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { OrganizationFormDialog } from '@/components/admin/organizations/OrganizationFormDialog';
import { useCreateOrganization, useUpdateOrganization, type Organization } from '@/lib/api/hooks/useAdmin';
import {
useCreateOrganization,
useUpdateOrganization,
type Organization,
} from '@/lib/api/hooks/useAdmin';
// Mock ResizeObserver (needed for Textarea component)
global.ResizeObserver = jest.fn().mockImplementation(() => ({
@@ -28,8 +32,12 @@ jest.mock('sonner', () => ({
},
}));
const mockUseCreateOrganization = useCreateOrganization as jest.MockedFunction<typeof useCreateOrganization>;
const mockUseUpdateOrganization = useUpdateOrganization as jest.MockedFunction<typeof useUpdateOrganization>;
const mockUseCreateOrganization = useCreateOrganization as jest.MockedFunction<
typeof useCreateOrganization
>;
const mockUseUpdateOrganization = useUpdateOrganization as jest.MockedFunction<
typeof useUpdateOrganization
>;
describe('OrganizationFormDialog', () => {
const mockCreateMutate = jest.fn();
@@ -97,7 +105,9 @@ describe('OrganizationFormDialog', () => {
render(<OrganizationFormDialog {...createProps} />);
expect(screen.getByText('Description')).toBeInTheDocument();
expect(screen.getByPlaceholderText('A brief description of the organization...')).toBeInTheDocument();
expect(
screen.getByPlaceholderText('A brief description of the organization...')
).toBeInTheDocument();
});
it('does not render active checkbox in create mode', () => {
@@ -182,7 +192,14 @@ describe('OrganizationFormDialog', () => {
isPending: true,
} as any);
render(<OrganizationFormDialog open={true} onOpenChange={mockOnOpenChange} mode="edit" organization={mockOrganization} />);
render(
<OrganizationFormDialog
open={true}
onOpenChange={mockOnOpenChange}
mode="edit"
organization={mockOrganization}
/>
);
expect(screen.getByRole('button', { name: 'Saving...' })).toBeInTheDocument();
});

View File

@@ -11,9 +11,7 @@ import type { Organization, PaginationMeta } from '@/lib/api/hooks/useAdmin';
// Mock OrganizationActionMenu component
jest.mock('@/components/admin/organizations/OrganizationActionMenu', () => ({
OrganizationActionMenu: ({ organization }: any) => (
<button data-testid={`action-menu-${organization.id}`}>
Actions
</button>
<button data-testid={`action-menu-${organization.id}`}>Actions</button>
),
}));
@@ -141,9 +139,7 @@ describe('OrganizationListTable', () => {
/>
);
expect(
screen.getByText('No organizations found.')
).toBeInTheDocument();
expect(screen.getByText('No organizations found.')).toBeInTheDocument();
});
it('does not render pagination when empty', () => {
@@ -177,12 +173,7 @@ describe('OrganizationListTable', () => {
it('does not call onViewMembers when handler is undefined', async () => {
const user = userEvent.setup();
render(
<OrganizationListTable
{...defaultProps}
onViewMembers={undefined}
/>
);
render(<OrganizationListTable {...defaultProps} onViewMembers={undefined} />);
const memberButton = screen.getByText('15').closest('button');
expect(memberButton).not.toBeNull();
@@ -198,9 +189,7 @@ describe('OrganizationListTable', () => {
it('renders pagination info correctly', () => {
render(<OrganizationListTable {...defaultProps} />);
expect(
screen.getByText('Showing 1 to 2 of 2 organizations')
).toBeInTheDocument();
expect(screen.getByText('Showing 1 to 2 of 2 organizations')).toBeInTheDocument();
});
it('calculates pagination range correctly for page 2', () => {
@@ -218,9 +207,7 @@ describe('OrganizationListTable', () => {
/>
);
expect(
screen.getByText('Showing 21 to 40 of 50 organizations')
).toBeInTheDocument();
expect(screen.getByText('Showing 21 to 40 of 50 organizations')).toBeInTheDocument();
});
it('renders pagination buttons', () => {

View File

@@ -53,9 +53,7 @@ jest.mock('@/components/admin/organizations/OrganizationFormDialog', () => ({
}));
const mockUseRouter = useRouter as jest.MockedFunction<typeof useRouter>;
const mockUseSearchParams = useSearchParams as jest.MockedFunction<
typeof useSearchParams
>;
const mockUseSearchParams = useSearchParams as jest.MockedFunction<typeof useSearchParams>;
const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
const mockUseAdminOrganizations = useAdminOrganizations as jest.MockedFunction<
typeof useAdminOrganizations
@@ -168,9 +166,7 @@ describe('OrganizationManagementContent', () => {
});
const renderWithProviders = (ui: React.ReactElement) => {
return render(
<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
);
return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
};
describe('Component Rendering', () => {
@@ -178,17 +174,13 @@ describe('OrganizationManagementContent', () => {
renderWithProviders(<OrganizationManagementContent />);
expect(screen.getByText('All Organizations')).toBeInTheDocument();
expect(
screen.getByText('Manage organizations and their members')
).toBeInTheDocument();
expect(screen.getByText('Manage organizations and their members')).toBeInTheDocument();
});
it('renders create organization button', () => {
renderWithProviders(<OrganizationManagementContent />);
expect(
screen.getByRole('button', { name: /Create Organization/i })
).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Create Organization/i })).toBeInTheDocument();
});
it('renders OrganizationListTable component', () => {
@@ -200,9 +192,7 @@ describe('OrganizationManagementContent', () => {
it('does not render dialog initially', () => {
renderWithProviders(<OrganizationManagementContent />);
expect(
screen.queryByTestId('organization-form-dialog')
).not.toBeInTheDocument();
expect(screen.queryByTestId('organization-form-dialog')).not.toBeInTheDocument();
});
});
@@ -233,9 +223,7 @@ describe('OrganizationManagementContent', () => {
await user.click(closeButton);
await waitFor(() => {
expect(
screen.queryByTestId('organization-form-dialog')
).not.toBeInTheDocument();
expect(screen.queryByTestId('organization-form-dialog')).not.toBeInTheDocument();
});
});
});
@@ -264,9 +252,7 @@ describe('OrganizationManagementContent', () => {
await user.click(closeButton);
await waitFor(() => {
expect(
screen.queryByTestId('organization-form-dialog')
).not.toBeInTheDocument();
expect(screen.queryByTestId('organization-form-dialog')).not.toBeInTheDocument();
});
});
});