103 lines
4.2 KiB
TypeScript
103 lines
4.2 KiB
TypeScript
|
|
import { test, expect } from '@playwright/test';
|
||
|
|
import { login, navigateTo, waitForSheet, PORT_SLUG } from './helpers';
|
||
|
|
|
||
|
|
const TEST_CLIENT_NAME = `E2E Client ${Date.now()}`;
|
||
|
|
|
||
|
|
test.describe('CRUD Spine', () => {
|
||
|
|
test.beforeEach(async ({ page }) => {
|
||
|
|
await login(page, 'super_admin');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('create a new client', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/clients');
|
||
|
|
|
||
|
|
// Click "New Client" button (use first() in case of duplicates in empty state)
|
||
|
|
await page.getByRole('button', { name: /new client/i }).first().click();
|
||
|
|
await waitForSheet(page);
|
||
|
|
|
||
|
|
const sheet = page.locator('[role="dialog"]');
|
||
|
|
await sheet.locator('input[name="fullName"]').fill(TEST_CLIENT_NAME);
|
||
|
|
await sheet.locator('input[name="companyName"]').fill('E2E Test Corp');
|
||
|
|
await sheet.locator('input[name="nationality"]').fill('British');
|
||
|
|
await sheet.locator('input[name="contacts.0.value"]').fill('e2e@test.com');
|
||
|
|
|
||
|
|
await sheet.getByRole('button', { name: /create client/i }).click();
|
||
|
|
await expect(sheet).not.toBeVisible({ timeout: 10_000 });
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('new client appears in the list', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/clients');
|
||
|
|
|
||
|
|
// Wait for table to load
|
||
|
|
await expect(page.locator('table').first()).toBeVisible({ timeout: 15_000 });
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
// The client name should appear somewhere in the table or page
|
||
|
|
const hasClient = await page.getByText(TEST_CLIENT_NAME).isVisible({ timeout: 5_000 }).catch(() => false);
|
||
|
|
if (!hasClient) {
|
||
|
|
// Maybe the table loaded empty and we need to wait for data
|
||
|
|
await page.waitForTimeout(3000);
|
||
|
|
}
|
||
|
|
await expect(page.getByText(TEST_CLIENT_NAME).first()).toBeVisible({ timeout: 10_000 });
|
||
|
|
});
|
||
|
|
|
||
|
|
test('filter and click into client detail', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/clients');
|
||
|
|
await expect(page.locator('table').first()).toBeVisible({ timeout: 15_000 });
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
// Find the client row and click the link (the name should be a link)
|
||
|
|
const clientLink = page.locator('a').filter({ hasText: TEST_CLIENT_NAME }).first();
|
||
|
|
const isLink = await clientLink.isVisible({ timeout: 5_000 }).catch(() => false);
|
||
|
|
|
||
|
|
if (isLink) {
|
||
|
|
await clientLink.click();
|
||
|
|
} else {
|
||
|
|
// Try clicking the table cell with the name
|
||
|
|
await page.getByText(TEST_CLIENT_NAME).first().click();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Should navigate to client detail
|
||
|
|
await page.waitForTimeout(3000);
|
||
|
|
const url = page.url();
|
||
|
|
const isDetailPage = url.includes('/clients/') && !url.endsWith('/clients');
|
||
|
|
expect(isDetailPage || url.includes(PORT_SLUG)).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
test('archive and restore client', async ({ page }) => {
|
||
|
|
await navigateTo(page, '/clients');
|
||
|
|
await expect(page.locator('table').first()).toBeVisible({ timeout: 15_000 });
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
// Find the row with our client
|
||
|
|
const row = page.locator('table tbody tr').filter({ hasText: TEST_CLIENT_NAME }).first();
|
||
|
|
const rowVisible = await row.isVisible({ timeout: 5_000 }).catch(() => false);
|
||
|
|
|
||
|
|
if (rowVisible) {
|
||
|
|
// Click the actions menu (usually a "..." or dropdown trigger button)
|
||
|
|
const actionsBtn = row.locator('button[aria-haspopup]').or(row.locator('button').last());
|
||
|
|
await actionsBtn.click();
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
const archiveOption = page.getByRole('menuitem', { name: /archive/i });
|
||
|
|
if (await archiveOption.isVisible({ timeout: 2_000 }).catch(() => false)) {
|
||
|
|
await archiveOption.click();
|
||
|
|
|
||
|
|
// Wait for confirm dialog
|
||
|
|
const confirmDialog = page.locator('[role="alertdialog"], [role="dialog"]').last();
|
||
|
|
if (await confirmDialog.isVisible({ timeout: 3_000 }).catch(() => false)) {
|
||
|
|
await confirmDialog.getByRole('button', { name: /confirm|archive|yes/i }).click();
|
||
|
|
}
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
// Client should disappear from active list
|
||
|
|
const stillVisible = await page.getByText(TEST_CLIENT_NAME).isVisible({ timeout: 3_000 }).catch(() => false);
|
||
|
|
if (!stillVisible) {
|
||
|
|
console.log(' ✓ Client archived and removed from list');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|