refactor: Cập nhật các thành phần UI để sử dụng các lớp Tailwind CSS ngữ nghĩa cho việc tạo chủ đề tốt hơn và xóa tài liệu thiết kế.

This commit is contained in:
Ho Ngoc Hai
2026-01-05 11:01:49 +07:00
parent ffebc9399d
commit dfa045e06c
15 changed files with 186 additions and 448 deletions

View File

@@ -11,24 +11,35 @@ test.describe('Authentication', () => {
});
test('should display login page', async ({ page }) => {
await expect(page.getByText('Sign In / Đăng nhập')).toBeVisible();
await expect(page.getByPlaceholderText(/email/i)).toBeVisible();
await expect(page.getByPlaceholderText(/password/i)).toBeVisible();
// EN: Check for heading "Sign In" / VI: Kiểm tra heading "Sign In"
await expect(page.getByRole('heading', { name: 'Sign In' })).toBeVisible();
// EN: Check for email input with exact placeholder / VI: Kiểm tra input email với placeholder chính xác
await expect(page.getByPlaceholder('you@example.com')).toBeVisible();
// EN: Check for password input with placeholder / VI: Kiểm tra input password với placeholder
await expect(page.getByPlaceholder('Password')).toBeVisible();
});
test('should show validation errors for empty form', async ({ page }) => {
await page.getByRole('button', { name: /sign in/i }).click();
// EN: Check for validation errors / VI: Kiểm tra lỗi validation
await expect(page.getByText(/email is required/i)).toBeVisible();
const submitButton = page.getByRole('button', { name: 'Sign In' });
await submitButton.click();
// EN: Wait for validation to complete / VI: Đợi validation hoàn thành
await page.waitForTimeout(500);
// EN: Check for validation errors (email or password required) / VI: Kiểm tra lỗi validation (email hoặc password required)
const emailError = page.getByText('Email is required');
const passwordError = page.getByText('Password is required');
// EN: At least one error should be visible / VI: Ít nhất một lỗi phải hiển thị
const hasError = await emailError.isVisible().catch(() => false) ||
await passwordError.isVisible().catch(() => false);
expect(hasError).toBeTruthy();
});
test('should navigate to register page', async ({ page }) => {
await page.getByRole('link', { name: /sign up/i }).click();
await page.getByRole('link', { name: 'Sign up' }).click();
await expect(page).toHaveURL(/.*\/register/);
});
test('should navigate to forgot password page', async ({ page }) => {
await page.getByRole('link', { name: /forgot password/i }).click();
await page.getByRole('link', { name: 'Forgot password?' }).click();
await expect(page).toHaveURL(/.*\/forgot-password/);
});
});

View File

@@ -11,14 +11,18 @@ test.describe('Chat', () => {
});
test('should display chat interface', async ({ page }) => {
// EN: Check for chat input / VI: Kiểm tra chat input
await expect(page.getByPlaceholderText(/type your message/i)).toBeVisible();
// EN: Check for chat input with exact placeholder / VI: Kiểm tra chat input với placeholder chính xác
await expect(page.getByPlaceholder('Type your message...')).toBeVisible();
});
test('should send message', async ({ page }) => {
const input = page.getByPlaceholderText(/type your message/i);
await input.fill('Test message');
await page.getByRole('button', { name: /send/i }).click();
const input = page.getByPlaceholder('Type your message...');
// EN: Type into the textarea (controlled component) / VI: Nhập vào textarea (controlled component)
await input.type('Test message');
// EN: Wait for send button to be enabled / VI: Đợi nút send được kích hoạt
const sendButton = page.getByRole('button', { name: 'Send message' });
await expect(sendButton).toBeEnabled();
await sendButton.click();
// EN: Check if message appears / VI: Kiểm tra nếu tin nhắn xuất hiện
// Note: This would require WebSocket mocking in actual implementation
// Lưu ý: Điều này sẽ cần mock WebSocket trong implementation thực tế