89 lines
3.4 KiB
TypeScript
89 lines
3.4 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('main')).toBeVisible();
|
|
await expect(page.getByText(/GGI HCM|Top biến động giá|Khu vực xu hướng/i).first()).toBeVisible();
|
|
});
|
|
|
|
test('homepage renders on tablet viewport', async ({ page }) => {
|
|
await page.setViewportSize({ width: 768, height: 1024 });
|
|
await page.goto('/');
|
|
|
|
await expect(page.getByRole('main')).toBeVisible();
|
|
await expect(page.getByText(/GGI HCM|Top biến động giá|Khu vực xu hướng/i).first()).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: 'Đăng ký' })).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();
|
|
});
|
|
});
|