Files
pos-system/apps/web-client/src/__tests__/users-components.smoke.test.tsx

111 lines
3.4 KiB
TypeScript

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { UsersTable } from '../features/shared/components/users/UsersTable';
import { UserCard } from '../features/shared/components/users/UserCard';
import { UserForm } from '../features/shared/components/users/UserForm';
/**
* EN: Smoke tests for users components
* VI: Smoke tests cho users components
*
* These tests ensure components render without crashing and have basic functionality.
*/
describe('Users Components - Smoke Tests', () => {
const mockUser = {
id: '1',
email: 'test@example.com',
role: 'USER',
isActive: true,
createdAt: '2024-01-01T00:00:00Z',
updatedAt: '2024-01-01T00:00:00Z',
};
const mockUsers = [mockUser];
describe('UsersTable', () => {
it('renders without crashing', () => {
render(<UsersTable users={mockUsers} />);
expect(screen.getByText('test@example.com')).toBeInTheDocument();
});
it('renders loading state', () => {
render(<UsersTable users={[]} loading={true} />);
expect(screen.getByText('Loading users...')).toBeInTheDocument();
});
it('renders empty state', () => {
render(<UsersTable users={[]} />);
expect(screen.getByText('No users found')).toBeInTheDocument();
});
it('renders bulk actions when users selected', () => {
// This would require more complex setup with user interactions
// For smoke test, just ensure it renders
render(<UsersTable users={mockUsers} showBulkActions />);
expect(screen.getByText('test@example.com')).toBeInTheDocument();
});
});
describe('UserCard', () => {
it('renders user information', () => {
render(<UserCard user={mockUser} />);
expect(screen.getByText('test@example.com')).toBeInTheDocument();
expect(screen.getByText('USER')).toBeInTheDocument();
expect(screen.getByText('Active')).toBeInTheDocument();
});
it('renders compact mode', () => {
render(<UserCard user={mockUser} compact />);
expect(screen.getByText('test@example.com')).toBeInTheDocument();
});
it('shows admin actions when enabled', () => {
render(<UserCard user={mockUser} showAdminActions />);
expect(screen.getByText('Edit')).toBeInTheDocument();
});
});
describe('UserForm', () => {
it('renders create form', () => {
render(
<UserForm
isCreate
onSubmit={() => {}}
onCancel={() => {}}
/>
);
expect(screen.getByText('Create New User')).toBeInTheDocument();
expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
});
it('renders edit form', () => {
render(
<UserForm
user={mockUser}
onSubmit={() => {}}
onCancel={() => {}}
/>
);
expect(screen.getByText('Edit User')).toBeInTheDocument();
expect(screen.getByDisplayValue('test@example.com')).toBeInTheDocument();
});
it('shows validation errors', async () => {
render(
<UserForm
isCreate
onSubmit={() => {}}
onCancel={() => {}}
/>
);
const submitButton = screen.getByRole('button', { name: /create user/i });
submitButton.click();
// Note: Form validation requires react-hook-form setup
// This is just a basic smoke test
expect(submitButton).toBeInTheDocument();
});
});
});