- Create requirements document based on master cljs implementation - Add Playwright e2e tests covering happy path, validation, and distribution - Fix hiccup id syntax in SSR bulk code form (div#id.class order) - Add missing account location validation to SSR bulk code submit - Enhance test server with multiple transactions and fixed-location account
388 lines
13 KiB
TypeScript
388 lines
13 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
let testInfoCache: any = null;
|
|
|
|
async function getTestInfo(page: any) {
|
|
const response = await page.request.get('/test-info');
|
|
testInfoCache = await response.json();
|
|
return testInfoCache;
|
|
}
|
|
|
|
async function navigateToTransactions(page: any) {
|
|
await page.goto('/transaction2');
|
|
await page.waitForSelector('table tbody tr');
|
|
}
|
|
|
|
async function selectTransactionByIndex(page: any, index: number) {
|
|
const rows = page.locator('table tbody tr');
|
|
const row = rows.nth(index);
|
|
const checkbox = row.locator('input[type="checkbox"][name="id"]').first();
|
|
await checkbox.click();
|
|
await page.waitForTimeout(200);
|
|
}
|
|
|
|
async function selectAllTransactions(page: any) {
|
|
const headerCheckbox = page.locator('input#checkbox-all').first();
|
|
await headerCheckbox.click();
|
|
await page.waitForTimeout(200);
|
|
}
|
|
|
|
async function openBulkCodeModal(page: any) {
|
|
const codeButton = page.locator('button:has-text("Code")').first();
|
|
await codeButton.click();
|
|
await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
|
|
await page.waitForSelector('#wizardmodal');
|
|
}
|
|
|
|
async function closeBulkCodeModal(page: any) {
|
|
// The success response swaps the modal content, but the modal holder stays open
|
|
// Wait for the success message to appear
|
|
await page.waitForSelector('text=Successfully coded', { timeout: 10000 });
|
|
}
|
|
|
|
async function selectAccountFromTypeahead(page: any, rowIndex: number, accountKey: string) {
|
|
const testInfo = await getTestInfo(page);
|
|
const accountId = testInfo.accounts[accountKey];
|
|
|
|
if (!accountId) {
|
|
throw new Error(`Could not find account with key ${accountKey}`);
|
|
}
|
|
|
|
const allRows = page.locator('#account-entries tbody tr');
|
|
const rowCount = await allRows.count();
|
|
|
|
let accountRow = null;
|
|
let accountRowIndex = 0;
|
|
for (let i = 0; i < rowCount; i++) {
|
|
const row = allRows.nth(i);
|
|
const hasAccountInput = await row.locator('input[name*="account"]').count() > 0;
|
|
if (hasAccountInput) {
|
|
if (accountRowIndex === rowIndex) {
|
|
accountRow = row;
|
|
break;
|
|
}
|
|
accountRowIndex++;
|
|
}
|
|
}
|
|
|
|
if (!accountRow) {
|
|
throw new Error(`Could not find account row at index ${rowIndex}`);
|
|
}
|
|
|
|
const hiddenInput = accountRow.locator('input[type="hidden"][name*="[account]"]').first();
|
|
|
|
await hiddenInput.evaluate((el: HTMLInputElement, value: string) => {
|
|
// Replace the Alpine-managed hidden input with a plain one
|
|
const newInput = document.createElement('input');
|
|
newInput.type = 'hidden';
|
|
newInput.name = el.name;
|
|
newInput.value = value;
|
|
|
|
el.parentNode.replaceChild(newInput, el);
|
|
}, accountId.toString());
|
|
|
|
await page.waitForTimeout(300);
|
|
|
|
// Trigger the location select reload by dispatching 'changed' event
|
|
const locationContainer = accountRow.locator('[x-dispatch\\:changed]').first();
|
|
if (await locationContainer.count() > 0) {
|
|
await locationContainer.evaluate((el: HTMLElement) => {
|
|
el.dispatchEvent(new CustomEvent('changed', { bubbles: true }));
|
|
});
|
|
await page.waitForTimeout(500);
|
|
}
|
|
}
|
|
|
|
async function findAccountRow(page: any, rowIndex: number) {
|
|
const allRows = page.locator('#account-entries tbody tr');
|
|
const rowCount = await allRows.count();
|
|
|
|
let accountRowIndex = 0;
|
|
for (let i = 0; i < rowCount; i++) {
|
|
const row = allRows.nth(i);
|
|
const hasAccountInput = await row.locator('input[name*="account"]').count() > 0;
|
|
if (hasAccountInput) {
|
|
if (accountRowIndex === rowIndex) {
|
|
return row;
|
|
}
|
|
accountRowIndex++;
|
|
}
|
|
}
|
|
|
|
throw new Error(`Could not find account row at index ${rowIndex}`);
|
|
}
|
|
|
|
async function setAccountPercentage(page: any, rowIndex: number, percentage: string) {
|
|
const row = await findAccountRow(page, rowIndex);
|
|
const percentageInput = row.locator('input[name*="percentage"]').first();
|
|
await percentageInput.fill(percentage);
|
|
await percentageInput.dispatchEvent('change');
|
|
await page.waitForTimeout(300);
|
|
}
|
|
|
|
async function setAccountLocation(page: any, rowIndex: number, location: string) {
|
|
const row = await findAccountRow(page, rowIndex);
|
|
const locationSelect = row.locator('select[name*="location"]').first();
|
|
|
|
// If the option doesn't exist, add it (for testing invalid locations)
|
|
const optionExists = await locationSelect.locator(`option[value="${location}"]`).count() > 0;
|
|
if (!optionExists) {
|
|
await locationSelect.evaluate((el: HTMLSelectElement, value: string) => {
|
|
const option = document.createElement('option');
|
|
option.value = value;
|
|
option.textContent = value;
|
|
el.appendChild(option);
|
|
}, location);
|
|
}
|
|
|
|
await locationSelect.selectOption(location);
|
|
await locationSelect.dispatchEvent('change');
|
|
await page.waitForTimeout(300);
|
|
}
|
|
|
|
async function addNewAccount(page: any) {
|
|
const newAccountButton = page.locator('a:has-text("New account")').first();
|
|
await newAccountButton.click();
|
|
await page.waitForTimeout(500);
|
|
}
|
|
|
|
async function submitBulkCodeForm(page: any) {
|
|
const form = page.locator('#wizard-form');
|
|
await form.evaluate((el: HTMLFormElement) => {
|
|
el.dispatchEvent(new Event('submit', { bubbles: true }));
|
|
});
|
|
}
|
|
|
|
async function getModalErrorText(page: any) {
|
|
const errorElement = page.locator('#form-errors .error-content');
|
|
try {
|
|
await errorElement.waitFor({ state: 'visible', timeout: 3000 });
|
|
return await errorElement.textContent();
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
test.describe.configure({ mode: 'serial' });
|
|
|
|
test.describe('Bulk Code Transactions - Happy Path', () => {
|
|
test('should bulk code a single transaction with vendor, status, and 100% account', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
// Verify modal shows correct count
|
|
await expect(page.locator('text=Bulk editing 1 transactions')).toBeVisible();
|
|
|
|
// Select vendor
|
|
const vendorHidden = page.locator('input[type="hidden"][name="step-params[vendor]"]').first();
|
|
const testInfo = await getTestInfo(page);
|
|
await vendorHidden.evaluate((el: HTMLInputElement, value: string) => {
|
|
const newInput = document.createElement('input');
|
|
newInput.type = 'hidden';
|
|
newInput.name = el.name;
|
|
newInput.value = value;
|
|
el.parentNode.replaceChild(newInput, el);
|
|
}, testInfo.accounts.vendor.toString());
|
|
await page.waitForTimeout(300);
|
|
|
|
// Select approval status
|
|
const statusSelect = page.locator('select[name="step-params[approval-status]"]').first();
|
|
await statusSelect.selectOption('approved');
|
|
|
|
// Add account
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
await setAccountLocation(page, 0, 'Shared');
|
|
await setAccountPercentage(page, 0, '100');
|
|
|
|
// Submit
|
|
await submitBulkCodeForm(page);
|
|
await closeBulkCodeModal(page);
|
|
|
|
// Verify success by checking table refreshed
|
|
await page.waitForSelector('table tbody tr');
|
|
});
|
|
|
|
test('should bulk code multiple selected transactions', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await selectTransactionByIndex(page, 1);
|
|
await openBulkCodeModal(page);
|
|
|
|
// Should show count of selected transactions
|
|
await expect(page.locator('text=Bulk editing 2 transactions')).toBeVisible();
|
|
|
|
// Add account at 100%
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
await setAccountLocation(page, 0, 'Shared');
|
|
await setAccountPercentage(page, 0, '100');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await closeBulkCodeModal(page);
|
|
|
|
await page.waitForSelector('table tbody tr');
|
|
});
|
|
|
|
test('should bulk code all visible transactions via header checkbox', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectAllTransactions(page);
|
|
await openBulkCodeModal(page);
|
|
|
|
// Should show all transactions
|
|
await expect(page.locator('text=Bulk editing 3 transactions')).toBeVisible();
|
|
|
|
// Add account at 100%
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
await setAccountLocation(page, 0, 'Shared');
|
|
await setAccountPercentage(page, 0, '100');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await closeBulkCodeModal(page);
|
|
|
|
await page.waitForSelector('table tbody tr');
|
|
});
|
|
});
|
|
|
|
test.describe('Bulk Code Transactions - Validation', () => {
|
|
test('should reject when no vendor, status, or accounts provided', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
// Submit without any changes
|
|
await submitBulkCodeForm(page);
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Modal should still be open
|
|
await expect(page.locator('#modal-holder[x-show="open"]')).toBeVisible();
|
|
});
|
|
|
|
test('should reject when account percentages total less than 100%', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
await setAccountLocation(page, 0, 'Shared');
|
|
await setAccountPercentage(page, 0, '50');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Modal should still be open
|
|
await expect(page.locator('#modal-holder[x-show="open"]')).toBeVisible();
|
|
|
|
// Should show validation error
|
|
const errorText = await getModalErrorText(page);
|
|
expect(errorText).toContain('does not equal 100%');
|
|
});
|
|
|
|
test('should reject when account percentages total more than 100%', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
await setAccountLocation(page, 0, 'Shared');
|
|
await setAccountPercentage(page, 0, '150');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Modal should still be open
|
|
await expect(page.locator('#modal-holder[x-show="open"]')).toBeVisible();
|
|
});
|
|
|
|
test('should reject invalid location for account with fixed location', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
await addNewAccount(page);
|
|
// Use the fixed-location account
|
|
await selectAccountFromTypeahead(page, 0, 'fixed-location-account');
|
|
// Try to set wrong location (account is fixed to "DT", try "INVALID")
|
|
await setAccountLocation(page, 0, 'INVALID');
|
|
await setAccountPercentage(page, 0, '100');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Modal should still be open
|
|
await expect(page.locator('#modal-holder[x-show="open"]')).toBeVisible();
|
|
|
|
// Should show validation error about location mismatch
|
|
const errorText = await getModalErrorText(page);
|
|
expect(errorText).toContain('location');
|
|
});
|
|
|
|
test('should reject location not belonging to client', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
// Client only has "DT" location, try "GR"
|
|
await setAccountLocation(page, 0, 'GR');
|
|
await setAccountPercentage(page, 0, '100');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Modal should still be open
|
|
await expect(page.locator('#modal-holder[x-show="open"]')).toBeVisible();
|
|
|
|
// Should show validation error
|
|
const errorText = await getModalErrorText(page);
|
|
expect(errorText).toContain('location');
|
|
});
|
|
});
|
|
|
|
test.describe('Bulk Code Transactions - Account Distribution', () => {
|
|
test('should split 50/50 between two accounts', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
// First account at 50%
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
await setAccountLocation(page, 0, 'DT');
|
|
await setAccountPercentage(page, 0, '50');
|
|
|
|
// Second account at 50%
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 1, 'second-account');
|
|
await setAccountLocation(page, 1, 'DT');
|
|
await setAccountPercentage(page, 1, '50');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await closeBulkCodeModal(page);
|
|
|
|
await page.waitForSelector('table tbody tr');
|
|
});
|
|
|
|
test('should allow Shared location for account without fixed location', async ({ page }) => {
|
|
await navigateToTransactions(page);
|
|
await selectTransactionByIndex(page, 0);
|
|
await openBulkCodeModal(page);
|
|
|
|
await addNewAccount(page);
|
|
await selectAccountFromTypeahead(page, 0, 'test-account');
|
|
// "Shared" should be valid for accounts without fixed location
|
|
await setAccountLocation(page, 0, 'Shared');
|
|
await setAccountPercentage(page, 0, '100');
|
|
|
|
await submitBulkCodeForm(page);
|
|
await closeBulkCodeModal(page);
|
|
|
|
await page.waitForSelector('table tbody tr');
|
|
});
|
|
});
|