Resolve all e2e test failures and export helper functions to their own file.
modified: e2e/picklist.spec.ts modified: e2e/product-filter.spec.ts new file: e2e/test-helpers.ts modified: src/screens/ManageProductsScreen.tsx modified: src/screens/StartPickListScreen.tsx
This commit is contained in:
@@ -0,0 +1,326 @@
|
||||
// e2e/test-helpers.ts
|
||||
import { expect, Page } from '@playwright/test';
|
||||
|
||||
/* -----------------------
|
||||
Shared constants
|
||||
----------------------- */
|
||||
export const areaName = 'Drinks';
|
||||
export const additionalProduct = 'Pump 750';
|
||||
export const listProductName = 'List Flow Soda';
|
||||
export const updatedListProductName = 'List Flow Soda Zero';
|
||||
export const searchTerm = 'E2E Search';
|
||||
export const matchingProducts = [`${searchTerm} Alpha`, `${searchTerm} Beta`];
|
||||
export const nonMatchingProduct = 'E2E Other Gamma';
|
||||
export const secondaryProduct = 'Mount Franklin 600ml';
|
||||
|
||||
/* -----------------------
|
||||
Small helpers
|
||||
----------------------- */
|
||||
export const waitForScreenHeading = async (page: Page, heading: string, timeout = 15000) => {
|
||||
try {
|
||||
await page.locator('text=Loading…').waitFor({ state: 'hidden', timeout: 5000 });
|
||||
} catch {
|
||||
// ignore if no fallback
|
||||
}
|
||||
await expect(page.getByRole('heading', { name: heading })).toBeVisible({ timeout });
|
||||
};
|
||||
|
||||
export const openSelect = async (page: Page, label: string, optionName: string, testId?: string) => {
|
||||
const tryOpen = async (lbl: string) => {
|
||||
// 1) Try testId wrapper if provided
|
||||
if (testId) {
|
||||
const wrapper = page.getByTestId(testId);
|
||||
if ((await wrapper.count()) > 0) {
|
||||
await wrapper.first().waitFor({ state: 'visible', timeout: 10000 });
|
||||
|
||||
// native <select>
|
||||
const nativeSelect = wrapper.locator('select').first();
|
||||
if ((await nativeSelect.count()) > 0) {
|
||||
try {
|
||||
await nativeSelect.selectOption({ label: optionName });
|
||||
return true;
|
||||
} catch {
|
||||
// fallback
|
||||
}
|
||||
}
|
||||
|
||||
// click wrapper itself (sometimes opens)
|
||||
try {
|
||||
await wrapper.first().click();
|
||||
const opt = page.getByRole('option', { name: optionName }).first();
|
||||
if ((await opt.count()) > 0) {
|
||||
await opt.waitFor({ state: 'visible', timeout: 4000 }).catch(() => {});
|
||||
await opt.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
} catch {
|
||||
// continue
|
||||
}
|
||||
|
||||
// inner role=button
|
||||
const buttonInside = wrapper.getByRole('button').first();
|
||||
if ((await buttonInside.count()) > 0) {
|
||||
try {
|
||||
await buttonInside.waitFor({ state: 'visible', timeout: 5000 });
|
||||
await buttonInside.click();
|
||||
const opt = page.getByRole('option', { name: optionName }).first();
|
||||
if ((await opt.count()) > 0) {
|
||||
await opt.waitFor({ state: 'visible', timeout: 4000 }).catch(() => {});
|
||||
await opt.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
} catch {
|
||||
// continue
|
||||
}
|
||||
}
|
||||
|
||||
// MUI select classes
|
||||
const selectInside = wrapper.locator('.MuiSelect-root, .MuiSelect-select, .MuiOutlinedInput-root').first();
|
||||
if ((await selectInside.count()) > 0) {
|
||||
try {
|
||||
await selectInside.waitFor({ state: 'visible', timeout: 5000 });
|
||||
await selectInside.click();
|
||||
const opt = page.getByRole('option', { name: optionName }).first();
|
||||
if ((await opt.count()) > 0) {
|
||||
await opt.waitFor({ state: 'visible', timeout: 4000 }).catch(() => {});
|
||||
await opt.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
} catch {
|
||||
// continue
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2) combobox role (MUI sometimes exposes combobox)
|
||||
try {
|
||||
const combo = page.getByRole('combobox', { name: new RegExp(`^${lbl}`, 'i') });
|
||||
if ((await combo.count()) > 0) {
|
||||
await combo.first().waitFor({ state: 'visible', timeout: 8000 });
|
||||
await combo.first().click().catch(() => {});
|
||||
const opt = page.getByRole('option', { name: optionName }).first();
|
||||
if ((await opt.count()) > 0) {
|
||||
await opt.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
|
||||
await opt.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
await page.waitForTimeout(200);
|
||||
if ((await opt.count()) > 0) {
|
||||
await opt.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore and continue
|
||||
}
|
||||
|
||||
// 3) labelled control (native select or clickable)
|
||||
try {
|
||||
const labelled = page.getByLabel(lbl);
|
||||
if ((await labelled.count()) > 0) {
|
||||
await labelled.first().waitFor({ state: 'visible', timeout: 8000 });
|
||||
const selectElem = labelled.locator('select').first();
|
||||
if ((await selectElem.count()) > 0) {
|
||||
try {
|
||||
await selectElem.selectOption({ label: optionName });
|
||||
return true;
|
||||
} catch {
|
||||
// fallback
|
||||
}
|
||||
}
|
||||
// click labelled control and try option
|
||||
await labelled.first().click().catch(() => {});
|
||||
const opt2 = page.getByRole('option', { name: optionName }).first();
|
||||
if ((await opt2.count()) > 0) {
|
||||
await opt2.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
|
||||
await opt2.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
||||
// 4) button with accessible name starting with label
|
||||
try {
|
||||
const buttonLocator = page.getByRole('button', { name: new RegExp(`^${lbl}`, 'i') });
|
||||
if ((await buttonLocator.count()) > 0) {
|
||||
await buttonLocator.first().waitFor({ state: 'visible', timeout: 8000 });
|
||||
await buttonLocator.first().click().catch(() => {});
|
||||
const option = page.getByRole('option', { name: optionName }).first();
|
||||
if ((await option.count()) > 0) {
|
||||
await option.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
|
||||
await option.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
||||
// 5) try clicking option directly if already visible
|
||||
try {
|
||||
const optDirect = page.getByRole('option', { name: optionName }).first();
|
||||
if ((await optDirect.count()) > 0) {
|
||||
await optDirect.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
|
||||
await optDirect.click().catch(() => {});
|
||||
return true;
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
// Try the requested label first
|
||||
const ok = await tryOpen(label);
|
||||
if (ok) return;
|
||||
|
||||
// If that failed, attempt a small list of fallback labels
|
||||
const fallbacks = ['Category', 'Add product category', 'Filter by category'];
|
||||
for (const alt of fallbacks) {
|
||||
if (alt === label) continue;
|
||||
const okAlt = await tryOpen(alt);
|
||||
if (okAlt) return;
|
||||
}
|
||||
|
||||
throw new Error(`openSelect: failed to open select for label="${label}" option="${optionName}" testId="${testId}"`);
|
||||
};
|
||||
|
||||
/* -----------------------
|
||||
Data creation helpers via UI (E2E approach)
|
||||
----------------------- */
|
||||
export const ensureAreaExists = async (page: Page, name: string) => {
|
||||
await page.goto('/');
|
||||
await waitForScreenHeading(page, 'StockFill');
|
||||
|
||||
await page.getByRole('link', { name: 'Manage Areas' }).click();
|
||||
await waitForScreenHeading(page, 'Manage Areas');
|
||||
|
||||
if ((await page.locator(`text=${name}`).count()) > 0) return;
|
||||
|
||||
const input = page.getByLabel('Area name');
|
||||
await input.click();
|
||||
await input.fill(name);
|
||||
const addButton = page.getByRole('button', { name: 'Add' });
|
||||
await expect(addButton).toBeEnabled();
|
||||
await addButton.click();
|
||||
await expect(page.getByText(name)).toBeVisible({ timeout: 5000 });
|
||||
};
|
||||
|
||||
export const ensureCategoryExists = async (page: Page, name: string) => {
|
||||
await page.goto('/');
|
||||
await waitForScreenHeading(page, 'StockFill');
|
||||
|
||||
await page.getByRole('link', { name: 'Manage Products' }).click();
|
||||
await waitForScreenHeading(page, 'Manage Products');
|
||||
|
||||
const editCategories = page.getByRole('button', { name: 'Edit Categories' });
|
||||
if ((await editCategories.count()) > 0) {
|
||||
await editCategories.first().click();
|
||||
} else {
|
||||
await page.goto('/categories');
|
||||
}
|
||||
await waitForScreenHeading(page, 'Manage Categories');
|
||||
|
||||
if ((await page.getByText(name).count()) > 0) return;
|
||||
|
||||
const input = page.getByLabel('Category name');
|
||||
await input.click();
|
||||
await input.fill(name);
|
||||
const addButton = page.getByRole('button', { name: 'Add' });
|
||||
await expect(addButton).toBeEnabled();
|
||||
await addButton.click();
|
||||
await expect(page.getByText(name)).toBeVisible({ timeout: 5000 });
|
||||
};
|
||||
|
||||
export const ensureProductsExist = async (page: Page, productNames: string[], categoryName = 'Drinks') => {
|
||||
await ensureCategoryExists(page, categoryName);
|
||||
|
||||
await page.goto('/');
|
||||
await waitForScreenHeading(page, 'StockFill');
|
||||
await page.getByRole('link', { name: 'Manage Products' }).click();
|
||||
await waitForScreenHeading(page, 'Manage Products');
|
||||
|
||||
for (const productName of productNames) {
|
||||
if ((await page.getByRole('button', { name: `Edit ${productName}` }).count()) > 0) continue;
|
||||
|
||||
const nameField = page.getByLabel('Name');
|
||||
await nameField.click();
|
||||
await nameField.fill(productName);
|
||||
|
||||
try {
|
||||
await openSelect(page, 'Add product category', categoryName, 'select-add-product-category');
|
||||
} catch {
|
||||
await openSelect(page, 'Category', categoryName);
|
||||
}
|
||||
|
||||
const saveButton = page.getByRole('button', { name: 'Save Product' });
|
||||
if ((await saveButton.count()) > 0) {
|
||||
await saveButton.first().click();
|
||||
} else {
|
||||
await page.locator('[aria-label="Save product"]').first().click();
|
||||
}
|
||||
|
||||
await Promise.race([
|
||||
page.getByText('Product added.').waitFor({ state: 'visible', timeout: 5000 }).catch(() => {}),
|
||||
page.getByRole('button', { name: `Edit ${productName}` }).waitFor({ state: 'visible', timeout: 5000 }).catch(() => {}),
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
/* -----------------------
|
||||
Assertion helpers for pick items
|
||||
----------------------- */
|
||||
export const expectProductVisible = async (page: Page, productName: string, timeout = 15000) => {
|
||||
await expect(
|
||||
page.locator('[data-testid="pick-item-title-row"]', { hasText: productName }).first()
|
||||
).toBeVisible({ timeout });
|
||||
};
|
||||
|
||||
export const expectProductQuantity = async (page: Page, productName: string, quantity: number, timeout = 15000) => {
|
||||
const pattern = new RegExp(`^\\s*${quantity}\\s*x\\s*${productName}`, 'i');
|
||||
await expect(
|
||||
page.locator('[data-testid="pick-item-title-row"]', { hasText: pattern }).first()
|
||||
).toBeVisible({ timeout });
|
||||
};
|
||||
|
||||
/* -----------------------
|
||||
Add product helper (uses stable test-id for input)
|
||||
----------------------- */
|
||||
export const addProductToPickList = async (page: Page, productName: string) => {
|
||||
const searchInput = page.getByTestId('product-search-input');
|
||||
await searchInput.click();
|
||||
await searchInput.fill(productName);
|
||||
|
||||
const productOption = page
|
||||
.getByRole('option', { name: new RegExp(`${productName} \\(${areaName}\\)`, 'i') })
|
||||
.first();
|
||||
|
||||
await expect(productOption).toBeVisible({ timeout: 15000 });
|
||||
await productOption.click();
|
||||
|
||||
// Wait for the pick item to appear (title row containing product name)
|
||||
await expectProductVisible(page, productName, 15000);
|
||||
};
|
||||
|
||||
/* -----------------------
|
||||
Flow: create pick list and open active list
|
||||
----------------------- */
|
||||
export const navigateToNewPickList = async (page: Page) => {
|
||||
await ensureAreaExists(page, areaName);
|
||||
await ensureProductsExist(page, [additionalProduct, secondaryProduct, 'Nutrient Water Focus']);
|
||||
|
||||
await page.goto('/');
|
||||
await waitForScreenHeading(page, 'StockFill');
|
||||
|
||||
await page.getByRole('link', { name: 'Create Pick List' }).click();
|
||||
await waitForScreenHeading(page, 'Create Pick List');
|
||||
|
||||
await openSelect(page, 'Area', areaName, 'select-area');
|
||||
|
||||
await page.getByRole('button', { name: 'Save Pick List' }).click();
|
||||
await waitForScreenHeading(page, `${areaName} List`);
|
||||
};
|
||||
Reference in New Issue
Block a user