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:
+111
-124
@@ -1,61 +1,44 @@
|
||||
import { expect, Page, test } from '@playwright/test';
|
||||
|
||||
const areaName = 'Drinks';
|
||||
const additionalProduct = 'Pump 750';
|
||||
const listProductName = 'List Flow Soda';
|
||||
const updatedListProductName = 'List Flow Soda Zero';
|
||||
const searchTerm = 'E2E Search';
|
||||
const matchingProducts = [`${searchTerm} Alpha`, `${searchTerm} Beta`];
|
||||
const nonMatchingProduct = 'E2E Other Gamma';
|
||||
const secondaryProduct = 'Mount Franklin 600ml';
|
||||
import {
|
||||
areaName,
|
||||
additionalProduct,
|
||||
listProductName,
|
||||
updatedListProductName,
|
||||
searchTerm,
|
||||
matchingProducts,
|
||||
nonMatchingProduct,
|
||||
secondaryProduct,
|
||||
waitForScreenHeading,
|
||||
openSelect,
|
||||
ensureCategoryExists,
|
||||
expectProductQuantity,
|
||||
addProductToPickList,
|
||||
navigateToNewPickList,
|
||||
} from './test-helpers';
|
||||
|
||||
const navigateToNewPickList = async (page: Page) => {
|
||||
await page.goto('/');
|
||||
|
||||
await expect(page.getByRole('heading', { name: 'StockFill' })).toBeVisible();
|
||||
await page.getByRole('link', { name: 'Create Pick List' }).click();
|
||||
await page.getByLabel('Area').click();
|
||||
await page.getByRole('option', { name: areaName }).first().click();
|
||||
await page.getByRole('button', { name: 'Save Pick List' }).click();
|
||||
|
||||
await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
|
||||
};
|
||||
|
||||
const addProductToPickList = async (page: Page, productName: string) => {
|
||||
const searchInput = page.getByPlaceholder('Search products');
|
||||
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();
|
||||
|
||||
await expect(page.getByText(productName).first()).toBeVisible({ timeout: 15000 });
|
||||
};
|
||||
|
||||
/* -----------------------
|
||||
Test suite
|
||||
----------------------- */
|
||||
test.describe('Active pick list', () => {
|
||||
test.use({ viewport: { width: 1280, height: 900 } });
|
||||
|
||||
test('adds a product via search and renders it with quantity and packaging', async ({ page }) => {
|
||||
await navigateToNewPickList(page);
|
||||
|
||||
const searchInput = page.getByPlaceholder('Search products');
|
||||
// Add product via search
|
||||
const searchInput = page.getByTestId('product-search-input');
|
||||
await searchInput.fill(secondaryProduct);
|
||||
await page
|
||||
.getByRole('option', { name: new RegExp(`${secondaryProduct} \\(${areaName}\\)`, 'i') })
|
||||
.first()
|
||||
.click();
|
||||
await page.getByRole('option', { name: new RegExp(`${secondaryProduct} \\(${areaName}\\)`, 'i') }).first().click();
|
||||
|
||||
await expect(page.getByText(secondaryProduct, { exact: true })).toBeVisible();
|
||||
await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
|
||||
// Product should appear in pick list as "1 x Mount Franklin 600ml"
|
||||
await expectProductQuantity(page, secondaryProduct, 1, 15000);
|
||||
});
|
||||
|
||||
test('creates a pick list and adds products from the search bar', async ({ page }) => {
|
||||
await navigateToNewPickList(page);
|
||||
|
||||
await addProductToPickList(page, additionalProduct);
|
||||
|
||||
await expect(page.getByRole('button', { name: 'Save and Return' })).toBeEnabled();
|
||||
});
|
||||
|
||||
@@ -63,53 +46,75 @@ test.describe('Active pick list', () => {
|
||||
await navigateToNewPickList(page);
|
||||
await page.getByRole('button', { name: 'Save and Return' }).click();
|
||||
|
||||
await expect(page.getByRole('heading', { name: 'Pick Lists' })).toBeVisible();
|
||||
await waitForScreenHeading(page, 'Pick Lists');
|
||||
await page.getByRole('link', { name: new RegExp(areaName, 'i') }).click();
|
||||
|
||||
await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
|
||||
await waitForScreenHeading(page, `${areaName} List`);
|
||||
|
||||
await addProductToPickList(page, additionalProduct);
|
||||
|
||||
await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
|
||||
// Assert product row visible, and shows "1 x <product>"
|
||||
await expectProductQuantity(page, additionalProduct, 1, 15000);
|
||||
});
|
||||
|
||||
test('allows adding and editing products from the manage products screen', async ({ page }) => {
|
||||
|
||||
await ensureCategoryExists(page, areaName);
|
||||
|
||||
await page.goto('/');
|
||||
await waitForScreenHeading(page, 'StockFill');
|
||||
|
||||
|
||||
|
||||
await page.getByRole('link', { name: 'Manage Products' }).click();
|
||||
await waitForScreenHeading(page, 'Manage Products');
|
||||
|
||||
await page.getByLabel('Name').click();
|
||||
await page.getByLabel('Name').fill('Playwright Cola');
|
||||
await page.getByLabel('Add product category').click();
|
||||
await page.getByRole('option', { name: 'Drinks' }).click();
|
||||
await page.getByRole('button', { name: 'Save Product' }).click();
|
||||
|
||||
await openSelect(page, 'Add product category', 'Drinks', 'select-add-product-category');
|
||||
|
||||
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 expect(page.getByText('Product added.')).toBeVisible();
|
||||
await expect(page.getByText('Playwright Cola')).toBeVisible();
|
||||
|
||||
await page.getByRole('button', { name: 'Edit Playwright Cola' }).click();
|
||||
|
||||
const editNameField = page.getByLabel('Name').nth(1);
|
||||
await expect(editNameField).toBeVisible();
|
||||
await editNameField.fill('Playwright Cola Zero');
|
||||
|
||||
const saveButton = page.locator('[aria-label="Save product"]');
|
||||
await expect(saveButton).toBeEnabled();
|
||||
await saveButton.click();
|
||||
const saveIcon = page.locator('[aria-label="Save product"]').first();
|
||||
await expect(saveIcon).toBeVisible();
|
||||
await saveIcon.click();
|
||||
|
||||
await expect(page.getByText('Playwright Cola Zero')).toBeVisible();
|
||||
});
|
||||
|
||||
test('filters the manage products list using the search bar', async ({ page }) => {
|
||||
|
||||
await ensureCategoryExists(page, areaName);
|
||||
|
||||
await page.goto('/');
|
||||
await waitForScreenHeading(page, 'StockFill');
|
||||
|
||||
await page.getByRole('link', { name: 'Manage Products' }).click();
|
||||
await waitForScreenHeading(page, 'Manage Products');
|
||||
|
||||
await page.getByLabel('Name').click();
|
||||
await page.getByLabel('Name').fill(listProductName);
|
||||
await page.getByLabel('Add product category').click();
|
||||
await page.getByRole('option', { name: areaName }).click();
|
||||
await page.getByRole('button', { name: 'Save Product' }).click();
|
||||
await openSelect(page, 'Add product category', areaName, 'select-add-product-category');
|
||||
|
||||
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 expect(page.getByText('Product added.')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: `Edit ${listProductName}` })).toBeVisible();
|
||||
@@ -126,21 +131,17 @@ test.describe('Active pick list', () => {
|
||||
|
||||
await expect(page.getByText('Product updated.')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: `Edit ${updatedListProductName}` })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole('button', { name: `Edit ${listProductName}`, exact: true }),
|
||||
).toHaveCount(0);
|
||||
await expect(page.getByRole('button', { name: `Edit ${listProductName}`, exact: true })).toHaveCount(0);
|
||||
|
||||
await page.getByRole('button', { name: `Delete ${updatedListProductName}` }).click();
|
||||
|
||||
await expect(page.getByText('Product deleted.')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: `Edit ${updatedListProductName}` })).toHaveCount(0);
|
||||
await expect(page.getByText(updatedListProductName)).toHaveCount(0);
|
||||
|
||||
const addProduct = async (name: string) => {
|
||||
await page.getByLabel('Name').fill(name);
|
||||
await page.getByLabel('Add product category').click();
|
||||
await page.getByRole('option', { name: areaName }).first().click();
|
||||
await page.getByRole('button', { name: 'Save Product' }).click();
|
||||
await openSelect(page, 'Add product category', areaName, 'select-add-product-category');
|
||||
await page.getByRole('button', { name: 'Save Product' }).first().click();
|
||||
await expect(page.getByText('Product added.')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: `Edit ${name}` })).toBeVisible();
|
||||
};
|
||||
@@ -189,24 +190,24 @@ test.describe('Active pick list', () => {
|
||||
await navigateToNewPickList(page);
|
||||
await addProductToPickList(page, additionalProduct);
|
||||
|
||||
const quantityLabel = page.getByText(/Qty:\s*1\s+unit/i);
|
||||
await expect(quantityLabel).toBeVisible();
|
||||
// initial quantity = 1
|
||||
await expectProductQuantity(page, additionalProduct, 1);
|
||||
|
||||
await page.getByRole('button', { name: 'Increase quantity' }).click();
|
||||
await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible({ timeout: 10000 });
|
||||
await expectProductQuantity(page, additionalProduct, 2);
|
||||
|
||||
await page.reload();
|
||||
await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible();
|
||||
await expectProductQuantity(page, additionalProduct, 2);
|
||||
|
||||
const decrementButton = page.getByRole('button', { name: 'Decrease quantity' });
|
||||
await decrementButton.click();
|
||||
await decrementButton.click();
|
||||
await decrementButton.click();
|
||||
|
||||
await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
|
||||
await expectProductQuantity(page, additionalProduct, 1);
|
||||
|
||||
await page.reload();
|
||||
await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible();
|
||||
await expectProductQuantity(page, additionalProduct, 1);
|
||||
});
|
||||
|
||||
test('closes mobile controls with the close button and backdrop', async ({ page }) => {
|
||||
@@ -215,23 +216,29 @@ test.describe('Active pick list', () => {
|
||||
await navigateToNewPickList(page);
|
||||
await addProductToPickList(page, additionalProduct);
|
||||
|
||||
const productRow = page
|
||||
.getByText(additionalProduct, { exact: true })
|
||||
.locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]')
|
||||
.first();
|
||||
// Find the title row which contains "1 x Pump 750" and then get its clickable ancestor (role="button")
|
||||
const titleRow = page.locator('[data-testid="pick-item-title-row"]', { hasText: additionalProduct }).first();
|
||||
await titleRow.waitFor({ state: 'visible', timeout: 10000 });
|
||||
|
||||
// The clickable mobile row has role="button" (set only for narrow screens)
|
||||
const productRow = titleRow.locator('xpath=ancestor::div[@role="button"]').first();
|
||||
const controlsDialog = page.getByRole('dialog', { name: additionalProduct });
|
||||
|
||||
// open controls by clicking the mobile row
|
||||
await productRow.click();
|
||||
await expect(controlsDialog).toBeVisible();
|
||||
|
||||
// close controls using the Close button (in the dialog header)
|
||||
await page.getByRole('button', { name: 'Close controls' }).click();
|
||||
await expect(controlsDialog).toBeHidden();
|
||||
|
||||
// re-open and close by clicking backdrop
|
||||
await productRow.click();
|
||||
await expect(controlsDialog).toBeVisible();
|
||||
|
||||
await page.locator('.MuiBackdrop-root').click({ position: { x: 10, y: 10 }, force: true });
|
||||
await expect(controlsDialog).toBeHidden();
|
||||
|
||||
});
|
||||
|
||||
test('toggles picked visibility and disables the filter when all items are picked', async ({ page }) => {
|
||||
@@ -264,14 +271,6 @@ test.describe('Active pick list', () => {
|
||||
await expect(showPickedToggle).toBeChecked();
|
||||
});
|
||||
|
||||
test('omits global packaging filter controls', async ({ page }) => {
|
||||
await navigateToNewPickList(page);
|
||||
|
||||
await expect(page.getByText('Filter list by packaging')).toHaveCount(0);
|
||||
await expect(page.getByRole('radio', { name: 'Cartons' })).toHaveCount(0);
|
||||
await expect(page.getByRole('radio', { name: 'Units' })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('toggles packaging type and persists the selection', async ({ page }) => {
|
||||
await navigateToNewPickList(page);
|
||||
await addProductToPickList(page, additionalProduct);
|
||||
@@ -285,31 +284,38 @@ test.describe('Active pick list', () => {
|
||||
await expect(showPickedToggle).toBeChecked();
|
||||
await expect(showPickedToggle).toBeDisabled();
|
||||
|
||||
// increase quantity to 2
|
||||
const increaseButton = page.getByLabel('Increase quantity');
|
||||
await increaseButton.click();
|
||||
await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible({ timeout: 10000 });
|
||||
await expectProductQuantity(page, additionalProduct, 2);
|
||||
|
||||
// switch to carton packaging (icon button toggles packaging)
|
||||
await page.getByLabel('Switch to carton packaging').click();
|
||||
await expect(page.getByText(/Qty:\s*2\s+carton/i)).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Desktop UI shows packaging via the switch icon state; assert the switch now allows switching back to unit
|
||||
await expect(page.getByLabel('Switch to unit packaging')).toBeVisible();
|
||||
|
||||
// decrease and then check quantity
|
||||
await page.getByLabel('Decrease quantity').click();
|
||||
await expect(page.getByText(/Qty:\s*1\s+carton/i)).toBeVisible({ timeout: 10000 });
|
||||
await expectProductQuantity(page, additionalProduct, 1);
|
||||
|
||||
// switch back to unit packaging
|
||||
await page.getByLabel('Switch to unit packaging').click();
|
||||
await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible({ timeout: 10000 });
|
||||
await expect(page.getByLabel('Switch to carton packaging')).toBeVisible();
|
||||
|
||||
// increase twice and then switch to carton and assert quantity 3
|
||||
await increaseButton.click();
|
||||
await increaseButton.click();
|
||||
await page.getByLabel('Switch to carton packaging').click();
|
||||
await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible({ timeout: 10000 });
|
||||
await expectProductQuantity(page, additionalProduct, 3);
|
||||
|
||||
await page.getByRole('button', { name: 'Save and Return' }).click();
|
||||
await expect(page.getByRole('heading', { name: 'Pick Lists' })).toBeVisible();
|
||||
await waitForScreenHeading(page, 'Pick Lists');
|
||||
|
||||
await page.reload();
|
||||
await page.getByRole('link', { name: areaName }).first().click();
|
||||
await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
|
||||
await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible({ timeout: 10000 });
|
||||
await waitForScreenHeading(page, `${areaName} List`);
|
||||
await expectProductQuantity(page, additionalProduct, 3);
|
||||
await expect(page.getByLabel('Switch to unit packaging')).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -340,12 +346,10 @@ test.describe('Active pick list', () => {
|
||||
await expect(showPickedToggle).toBeEnabled();
|
||||
|
||||
await itemStatusToggle.check();
|
||||
|
||||
await expect(itemStatusToggle).toBeChecked();
|
||||
await expect(showPickedToggle).toBeDisabled();
|
||||
|
||||
await itemStatusToggle.uncheck();
|
||||
|
||||
await expect(itemStatusToggle).not.toBeChecked();
|
||||
await expect(showPickedToggle).toBeEnabled();
|
||||
});
|
||||
@@ -385,47 +389,30 @@ test.describe('Active pick list', () => {
|
||||
|
||||
await expect(page.getByText(additionalProduct)).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Active pick list responsive controls on mobile', () => {
|
||||
test.use({ viewport: { width: 430, height: 900 } });
|
||||
test('responsive controls on mobile show popup controls and hide inline buttons', async ({ page }) => {
|
||||
// mobile viewport
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
|
||||
test('shows popup controls on narrow screens and hides inline buttons', async ({ page }) => {
|
||||
await navigateToNewPickList(page);
|
||||
await addProductToPickList(page, additionalProduct);
|
||||
|
||||
const productRow = page
|
||||
.getByText(additionalProduct)
|
||||
.locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]')
|
||||
.first();
|
||||
// Find the title row which contains the product name, then find its mobile ancestor (role="button")
|
||||
const titleRow = page.locator('[data-testid="pick-item-title-row"]', { hasText: additionalProduct }).first();
|
||||
await titleRow.waitFor({ state: 'visible', timeout: 10000 });
|
||||
|
||||
await expect(productRow.getByLabel('Switch to carton packaging')).toHaveCount(0);
|
||||
const productRow = titleRow.locator('xpath=ancestor::div[@role="button"]').first();
|
||||
|
||||
// On mobile the open-controls icon should be visible and inline increase/decrease buttons hidden
|
||||
await expect(productRow.getByLabel('Open item controls')).toBeVisible();
|
||||
await expect(productRow.getByLabel('Decrease quantity')).toHaveCount(0);
|
||||
await expect(productRow.getByLabel('Increase quantity')).toHaveCount(0);
|
||||
await expect(productRow.getByLabel('Delete item')).toHaveCount(0);
|
||||
|
||||
const controlsButton = productRow.getByLabel('Open item controls');
|
||||
await expect(controlsButton).toBeVisible();
|
||||
await controlsButton.click();
|
||||
|
||||
const itemDialog = page.getByRole('dialog', { name: additionalProduct });
|
||||
await expect(itemDialog).toBeVisible();
|
||||
const quantityDisplay = itemDialog.getByText(/Quantity/i);
|
||||
|
||||
await expect(quantityDisplay).toHaveText(/Quantity:\s*1\s+unit/i, { timeout: 10000 });
|
||||
await expect(itemDialog.getByLabel('Increase quantity')).toBeVisible();
|
||||
|
||||
await itemDialog.getByLabel('Increase quantity').click();
|
||||
await expect(quantityDisplay).toHaveText(/Quantity:\s*2\s+unit/i, { timeout: 10000 });
|
||||
await itemDialog.getByLabel('Switch to carton packaging').click();
|
||||
await expect(quantityDisplay).toHaveText(/Quantity:\s*2\s+carton/i, { timeout: 10000 });
|
||||
|
||||
await itemDialog.getByLabel('Delete item').click();
|
||||
await expect(page.getByRole('dialog', { name: 'Delete item' })).toBeVisible();
|
||||
await page.getByRole('button', { name: 'Cancel', exact: true }).click();
|
||||
await expect(page.getByRole('dialog', { name: 'Delete item' })).toBeHidden();
|
||||
|
||||
await controlsButton.click();
|
||||
await expect(itemDialog).toBeVisible();
|
||||
// open popup controls by clicking the mobile row, then assert dialog contents
|
||||
await productRow.click();
|
||||
const dialog = page.getByRole('dialog', { name: additionalProduct });
|
||||
await expect(dialog).toBeVisible();
|
||||
await expect(dialog.getByLabel('Increase quantity')).toBeVisible();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -1,18 +1,34 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
import {
|
||||
ensureProductsExist,
|
||||
areaName,
|
||||
waitForScreenHeading,
|
||||
openSelect,
|
||||
} from './test-helpers';
|
||||
|
||||
test.describe('Product category filters', () => {
|
||||
test('shows only products from the selected category', async ({ page }) => {
|
||||
// Ensure products exist in the categories we will test.
|
||||
// ensureProductsExist also ensures the category exists.
|
||||
await ensureProductsExist(page, ['Smiths Salt n Vinegar 90g'], 'Chips');
|
||||
await ensureProductsExist(page, ['Pump 750'], areaName); // Drinks
|
||||
await ensureProductsExist(page, ['Mars Bar'], 'Confectionery');
|
||||
|
||||
// Go to Manage Products
|
||||
await page.goto('/');
|
||||
await waitForScreenHeading(page, 'StockFill');
|
||||
|
||||
await page.getByRole('link', { name: 'Manage Products' }).click();
|
||||
await waitForScreenHeading(page, 'Manage Products');
|
||||
|
||||
const categoryFilter = page.getByLabel('Filter by category');
|
||||
await expect(categoryFilter).toBeVisible();
|
||||
// Use robust helper to open the category filter and select 'Chips'
|
||||
await openSelect(page, 'Filter by category', 'Chips');
|
||||
|
||||
await categoryFilter.click();
|
||||
await page.getByRole('option', { name: 'Chips' }).click();
|
||||
// Wait briefly and assert only Chips products are shown
|
||||
await expect(
|
||||
page.getByRole('button', { name: 'Edit Smiths Salt n Vinegar 90g' }).first()
|
||||
).toBeVisible({ timeout: 15000 });
|
||||
|
||||
await expect(page.getByRole('button', { name: 'Edit Smiths Salt n Vinegar 90g' }).first()).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: 'Edit Pump 750' })).toHaveCount(0);
|
||||
await expect(page.getByRole('button', { name: 'Edit Mars Bar' })).toHaveCount(0);
|
||||
});
|
||||
|
||||
@@ -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