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>
This commit is contained in:
Ho Ngoc Hai
193
e2e/web/listing-detail.spec.ts
Normal file
193
e2e/web/listing-detail.spec.ts
Normal file
@@ -0,0 +1,193 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
const mockListing = {
|
||||
id: 'listing-1',
|
||||
transactionType: 'SALE',
|
||||
priceVND: '5000000000',
|
||||
pricePerM2: 66666667,
|
||||
rentPriceMonthly: null,
|
||||
commissionPct: 2.5,
|
||||
status: 'ACTIVE',
|
||||
viewCount: 120,
|
||||
saveCount: 15,
|
||||
inquiryCount: 8,
|
||||
publishedAt: '2026-01-15T00:00:00Z',
|
||||
property: {
|
||||
id: 'prop-1',
|
||||
propertyType: 'APARTMENT',
|
||||
title: 'Căn hộ cao cấp Quận 1',
|
||||
description: 'Căn hộ đẹp view sông Sài Gòn, nội thất cao cấp, tiện ích đầy đủ.',
|
||||
address: '123 Nguyễn Huệ',
|
||||
ward: 'Bến Nghé',
|
||||
district: 'Quận 1',
|
||||
city: 'Hồ Chí Minh',
|
||||
latitude: 10.7769,
|
||||
longitude: 106.7009,
|
||||
areaM2: 75,
|
||||
bedrooms: 2,
|
||||
bathrooms: 2,
|
||||
floors: 1,
|
||||
direction: 'SOUTH',
|
||||
yearBuilt: 2022,
|
||||
legalStatus: 'Sổ hồng',
|
||||
projectName: 'Vinhomes Central Park',
|
||||
amenities: ['Hồ bơi', 'Gym', 'Bãi đỗ xe'],
|
||||
media: [
|
||||
{ id: 'm1', url: '/placeholder.jpg', type: 'IMAGE', order: 0 },
|
||||
{ id: 'm2', url: '/placeholder2.jpg', type: 'IMAGE', order: 1 },
|
||||
],
|
||||
},
|
||||
seller: { id: 's1', fullName: 'Nguyen Van A', phone: '0912345678' },
|
||||
agent: { id: 'a1', agency: 'GoodGo Realty', licenseNumber: 'AGT-001' },
|
||||
};
|
||||
|
||||
test.describe('Listing Detail Page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route('**/listings/listing-1', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockListing),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
test('renders listing title and price', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByRole('heading', { name: 'Căn hộ cao cấp Quận 1' })).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(page.getByText(/5\.0 tỷ/)).toBeVisible();
|
||||
await expect(page.getByText('VND')).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays breadcrumb navigation', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByRole('link', { name: 'Trang chu' })).toBeVisible();
|
||||
await expect(page.getByRole('link', { name: 'Tim kiem' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows property badges (transaction type and property type)', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
// Transaction type and property type badges
|
||||
const badges = page.locator('[class*="badge"]');
|
||||
await expect(badges.first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays address information', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText(/123 Nguyễn Huệ/)).toBeVisible();
|
||||
await expect(page.getByText(/Bến Nghé/)).toBeVisible();
|
||||
await expect(page.getByText(/Quận 1/)).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows quick stats bar', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText('75 m²')).toBeVisible();
|
||||
await expect(page.getByText('Dien tich')).toBeVisible();
|
||||
await expect(page.getByText('Phong ngu')).toBeVisible();
|
||||
await expect(page.getByText('Phong tam')).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays description section', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText('Mo ta')).toBeVisible();
|
||||
await expect(page.getByText('Căn hộ đẹp view sông Sài Gòn')).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows detailed property info grid', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText('Thong tin chi tiet')).toBeVisible();
|
||||
await expect(page.getByText('Loai BDS')).toBeVisible();
|
||||
await expect(page.getByText('Sổ hồng')).toBeVisible();
|
||||
await expect(page.getByText('Vinhomes Central Park')).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays amenities', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText('Tien ich')).toBeVisible();
|
||||
await expect(page.getByText('Hồ bơi')).toBeVisible();
|
||||
await expect(page.getByText('Gym')).toBeVisible();
|
||||
await expect(page.getByText('Bãi đỗ xe')).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows seller contact card', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText('Lien he')).toBeVisible();
|
||||
await expect(page.getByText('Nguyen Van A')).toBeVisible();
|
||||
await expect(page.getByText('0912345678')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /Goi ngay/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /Nhan tin/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows agent info when available', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText('Moi gioi')).toBeVisible();
|
||||
await expect(page.getByText('GoodGo Realty')).toBeVisible();
|
||||
await expect(page.getByText(/2\.5%/)).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays listing statistics', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByText('120')).toBeVisible(); // viewCount
|
||||
await expect(page.getByText('Luot xem')).toBeVisible();
|
||||
await expect(page.getByText('Luot luu')).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows error state for non-existent listing', async ({ page }) => {
|
||||
await page.route('**/listings/nonexistent', (route) =>
|
||||
route.fulfill({ status: 404, contentType: 'application/json', body: '{}' }),
|
||||
);
|
||||
|
||||
await page.goto('/listings/nonexistent');
|
||||
|
||||
await expect(page.getByText(/Khong/)).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByRole('link', { name: /Quay lai tim kiem/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows loading skeleton initially', async ({ page }) => {
|
||||
await page.route('**/listings/listing-1', async (route) => {
|
||||
await new Promise((r) => setTimeout(r, 2000));
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockListing),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
// Skeleton elements should be visible during loading
|
||||
const skeleton = page.locator('.animate-pulse');
|
||||
await expect(skeleton.first()).toBeVisible({ timeout: 3000 });
|
||||
});
|
||||
|
||||
test('breadcrumb navigates to search page', async ({ page }) => {
|
||||
await page.goto('/listings/listing-1');
|
||||
|
||||
await expect(page.getByText('Căn hộ cao cấp Quận 1').first()).toBeVisible({ timeout: 10000 });
|
||||
await page.getByRole('link', { name: 'Tim kiem' }).click();
|
||||
await expect(page).toHaveURL(/\/search/);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user