8e82d346aa
Cover auth (login, register, OAuth callbacks), search with filters, listing detail, dashboard, analytics, create listing form, admin dashboard/users/moderation/KYC, navigation routing, and responsive design. Total 91 test cases using Playwright with API route mocking. Co-Authored-By: Paperclip <noreply@paperclip.ing>
89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Responsive Design', () => {
|
|
test('homepage renders on mobile viewport', async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto('/');
|
|
|
|
await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
|
|
const main = page.locator('main');
|
|
await expect(main).toBeVisible();
|
|
});
|
|
|
|
test('homepage renders on tablet viewport', async ({ page }) => {
|
|
await page.setViewportSize({ width: 768, height: 1024 });
|
|
await page.goto('/');
|
|
|
|
await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
|
|
});
|
|
|
|
test('login page is usable on mobile', async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto('/login');
|
|
|
|
await expect(page.getByRole('heading', { name: 'Đăng nhập' })).toBeVisible();
|
|
await expect(page.getByLabel('Số điện thoại')).toBeVisible();
|
|
await expect(page.getByLabel('Mật khẩu')).toBeVisible();
|
|
await expect(page.getByRole('button', { name: 'Đăng nhập' })).toBeVisible();
|
|
});
|
|
|
|
test('register page is usable on mobile', async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto('/register');
|
|
|
|
await expect(page.getByRole('heading', { name: 'Tạo tài khoản' })).toBeVisible();
|
|
await expect(page.getByLabel('Họ và tên')).toBeVisible();
|
|
await expect(page.getByRole('button', { name: 'Đăng ký' })).toBeVisible();
|
|
});
|
|
|
|
test('search page shows mobile filter button on small screen', async ({ page }) => {
|
|
await page.route('**/listings**', (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ data: [], total: 0, page: 1, limit: 12, totalPages: 0 }),
|
|
}),
|
|
);
|
|
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto('/search');
|
|
|
|
await expect(page.getByRole('heading', { name: 'Tìm kiếm bất động sản' })).toBeVisible();
|
|
// Mobile filter button should be visible
|
|
await expect(page.getByRole('button', { name: /Bộ lọc/i })).toBeVisible();
|
|
});
|
|
|
|
test('search page hides sidebar filters on mobile', async ({ page }) => {
|
|
await page.route('**/listings**', (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ data: [], total: 0, page: 1, limit: 12, totalPages: 0 }),
|
|
}),
|
|
);
|
|
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto('/search');
|
|
|
|
// Sidebar should be hidden on mobile (has 'hidden lg:block' class)
|
|
const sidebar = page.locator('aside');
|
|
await expect(sidebar).toBeHidden();
|
|
});
|
|
|
|
test('split view button is hidden on mobile search', async ({ page }) => {
|
|
await page.route('**/listings**', (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ data: [], total: 0, page: 1, limit: 12, totalPages: 0 }),
|
|
}),
|
|
);
|
|
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto('/search');
|
|
|
|
// Split button should be hidden on mobile (has 'hidden lg:flex' class)
|
|
await expect(page.getByRole('button', { name: /Chia đôi/i })).toBeHidden();
|
|
});
|
|
});
|