81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
const mockLoginSuccess = { code: 200, message: '登录成功' };
|
|
const mockLoginFailure = { code: 401, message: '账号或密码错误' };
|
|
const mockTasks = { code: 200, data: { records: [] } };
|
|
const mockFeed = { code: 200, data: [] };
|
|
|
|
test.describe('Login page', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/login');
|
|
await page.waitForSelector('.login-page', { timeout: 10_000 });
|
|
});
|
|
|
|
test('renders the login form with title and inputs', async ({ page }) => {
|
|
await expect(page.locator('h2')).toContainText('账号登录');
|
|
await expect(page.locator('.login-form')).toBeVisible();
|
|
// Element Plus inputs
|
|
const inputs = page.locator('.el-input');
|
|
await expect(inputs).toHaveCount(2);
|
|
await expect(page.locator('.submit-btn')).toBeVisible();
|
|
});
|
|
|
|
test('shows validation errors when fields are empty', async ({ page }) => {
|
|
await page.locator('.submit-btn').click();
|
|
// Element Plus validation shows error messages
|
|
await expect(page.locator('.el-form-item__error').first()).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('shows error on invalid credentials', async ({ page }) => {
|
|
await page.route('**/api/login**', (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(mockLoginFailure),
|
|
}),
|
|
);
|
|
await page.route('**/api/tasks**', (route) =>
|
|
route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) }),
|
|
);
|
|
await page.route('**/api/review/feed**', (route) =>
|
|
route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
|
|
);
|
|
|
|
// Fill in inputs using Element Plus el-input inner input
|
|
const usernameInput = page.locator('.el-form-item').filter({ hasText: '账号' }).locator('input');
|
|
const passwordInput = page.locator('.el-form-item').filter({ hasText: '密码' }).locator('input');
|
|
await usernameInput.fill('wronguser');
|
|
await passwordInput.fill('wrongpass');
|
|
await page.locator('.submit-btn').click();
|
|
|
|
// Element Plus error message appears in a popup
|
|
await expect(page.locator('.el-message--error')).toBeVisible({ timeout: 5000 });
|
|
});
|
|
|
|
test('successful login navigates to /welcome', async ({ page }) => {
|
|
await page.route('**/api/login**', (route) =>
|
|
route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(mockLoginSuccess),
|
|
}),
|
|
);
|
|
await page.route('**/api/tasks**', (route) =>
|
|
route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockTasks) }),
|
|
);
|
|
await page.route('**/api/review/feed**', (route) =>
|
|
route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockFeed) }),
|
|
);
|
|
|
|
const usernameInput = page.locator('.el-form-item').filter({ hasText: '账号' }).locator('input');
|
|
const passwordInput = page.locator('.el-form-item').filter({ hasText: '密码' }).locator('input');
|
|
await usernameInput.fill('admin');
|
|
await passwordInput.fill('password123');
|
|
await page.locator('.submit-btn').click();
|
|
|
|
await expect(page).toHaveURL(/\/welcome/, { timeout: 10_000 });
|
|
const isLoggedIn = await page.evaluate(() => localStorage.getItem('isLoggedIn'));
|
|
expect(isLoggedIn).toBe('true');
|
|
});
|
|
});
|