test(e2e): add 14 new web E2E test files for critical user flows

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>
2026-04-08 13:14:17 +07:00
parent 9b2b8c2ba5
commit 8e82d346aa
14 changed files with 1338 additions and 0 deletions
--- a/e2e/web/responsive.spec.ts
+++ b/e2e/web/responsive.spec.ts
@@ -0,0 +1,88 @@
+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();
+  });
+});