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:
@@ -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', () => {
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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', () => {
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user