diff --git a/e2e/picklist.spec.ts b/e2e/picklist.spec.ts index bb5c212..6fa0565 100644 --- a/e2e/picklist.spec.ts +++ b/e2e/picklist.spec.ts @@ -1,4 +1,4 @@ -import { expect, test } from '@playwright/test'; +import { expect, Page, test } from '@playwright/test'; const areaName = 'Drinks'; const additionalProduct = 'Pump 750'; @@ -9,63 +9,55 @@ const matchingProducts = [`${searchTerm} Alpha`, `${searchTerm} Beta`]; const nonMatchingProduct = 'E2E Other Gamma'; const secondaryProduct = 'Mount Franklin 600ml'; +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); + await page + .getByRole('option', { name: new RegExp(`${productName} \\(${areaName}\\)`, 'i') }) + .first() + .click(); + + await expect(page.getByText(productName).first()).toBeVisible(); +}; + test.describe('Active pick list', () => { test('adds a product via search and renders it with quantity and packaging', async ({ 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(); + await navigateToNewPickList(page); const searchInput = page.getByPlaceholder('Search products'); - await searchInput.fill('Mount Franklin 600ml'); + await searchInput.fill(secondaryProduct); await page - .getByRole('option', { name: /Mount Franklin 600ml \(Drinks\)/i }) + .getByRole('option', { name: new RegExp(`${secondaryProduct} \\(${areaName}\\)`, 'i') }) .first() .click(); - await expect(page.getByText('Mount Franklin 600ml', { exact: true })).toBeVisible(); - await expect(page.getByText('Qty: 1 unit')).toBeVisible(); + await expect(page.getByText(secondaryProduct, { exact: true })).toBeVisible(); + await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible(); }); test('creates a pick list and adds products from the search bar', async ({ page }) => { - await page.goto('/'); + await navigateToNewPickList(page); - 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 addProductToPickList(page, additionalProduct); - await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible(); - - const searchInput = page.getByPlaceholder('Search products'); - await searchInput.click(); - await searchInput.fill(additionalProduct); - await page - .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') }) - .first() - .click(); - - await expect(page.getByText(additionalProduct).first()).toBeVisible(); await expect(page.getByRole('button', { name: 'Save and Return' })).toBeEnabled(); }); test('adds a product to an existing pick list from the search input', async ({ 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(); - + await navigateToNewPickList(page); await page.getByRole('button', { name: 'Save and Return' }).click(); await expect(page.getByRole('heading', { name: 'Pick Lists' })).toBeVisible(); @@ -73,17 +65,8 @@ test.describe('Active pick list', () => { await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible(); - const searchInput = page.getByPlaceholder('Search products'); - await searchInput.click(); - await searchInput.fill(additionalProduct); + await addProductToPickList(page, additionalProduct); - const productOption = page.getByRole('option', { - name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i'), - }); - await expect(productOption).toBeVisible(); - await productOption.click(); - - await expect(page.getByText(additionalProduct).first()).toBeVisible(); await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible(); }); @@ -114,7 +97,6 @@ test.describe('Active pick list', () => { await expect(page.getByText('Playwright Cola Zero')).toBeVisible(); }); - test('adds, edits, and deletes a product directly from the list', async ({ page }) => { test('filters the manage products list using the search bar', async ({ page }) => { await page.goto('/'); @@ -148,6 +130,7 @@ test.describe('Active pick list', () => { 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(); @@ -169,43 +152,14 @@ test.describe('Active pick list', () => { } await expect(page.getByRole('button', { name: `Edit ${nonMatchingProduct}` })).toHaveCount(0); - test('adjusts item quantities with increment and decrement controls', async ({ page }) => { - test('toggles picked visibility and disables the filter when all items are picked', async ({ page }) => { - await page.goto('/'); - - test('toggles a product to picked and updates status indicators', async ({ page }) => { - await page.goto('/'); + }); test('marks every item as picked when completing the pick list', async ({ page }) => { - await page.goto('/'); - - test('toggles packaging type and persists the selection', async ({ page }) => { - await page.goto('/'); - - test('lets a user mark an item as picked then revert it back to pending', async ({ page }) => { - await page.goto('/'); - - test('removes a product from the pick list when deleted', async ({ 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 navigateToNewPickList(page); const productsToAdd = ['Pump 750', 'Nutrient Water Focus', 'Mount Franklin 600ml']; - const searchInput = page.getByPlaceholder('Search products'); - for (const productName of productsToAdd) { - await searchInput.click(); - await searchInput.fill(productName); - await page - .getByRole('option', { name: new RegExp(`${productName} \\(${areaName}\\)`, 'i') }) - .first() - .click(); - - await expect(page.getByText(productName).first()).toBeVisible(); + await addProductToPickList(page, productName); } const pickStatusToggles = page.getByLabel('Toggle picked status'); @@ -224,40 +178,37 @@ test.describe('Active pick list', () => { const showPickedToggle = page.getByRole('checkbox', { name: 'Show picked' }); await expect(showPickedToggle).toBeChecked(); await expect(showPickedToggle).toBeDisabled(); - await expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible(); + }); - const searchInput = page.getByPlaceholder('Search products'); - await searchInput.click(); - await searchInput.fill(secondaryProduct); - await page - .getByRole('option', { name: new RegExp(`${secondaryProduct} \\(${areaName}\\)`, 'i') }) - .first() - .click(); + test('adjusts item quantities with increment and decrement controls', async ({ page }) => { + await navigateToNewPickList(page); + await addProductToPickList(page, additionalProduct); - await searchInput.fill(additionalProduct); - await page - .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') }) - .first() - .click(); - - const quantityLabel = page.getByText('Qty: 1 Unit'); + const quantityLabel = page.getByText(/Qty:\s*1\s+unit/i); await expect(quantityLabel).toBeVisible(); await page.getByRole('button', { name: 'Increase quantity' }).click(); - await expect(page.getByText('Qty: 2 Unit')).toBeVisible(); + await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible(); await page.reload(); - await expect(page.getByText('Qty: 2 Unit')).toBeVisible(); + await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible(); const decrementButton = page.getByRole('button', { name: 'Decrease quantity' }); await decrementButton.click(); await decrementButton.click(); await decrementButton.click(); - await expect(page.getByText('Qty: 1 Unit')).toBeVisible(); + await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible(); await page.reload(); - await expect(page.getByText('Qty: 1 Unit')).toBeVisible(); + await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible(); + }); + + test('toggles picked visibility and disables the filter when all items are picked', async ({ page }) => { + await navigateToNewPickList(page); + await addProductToPickList(page, secondaryProduct); + await addProductToPickList(page, additionalProduct); + const showPickedToggle = page.getByLabel('Show picked'); const itemToggles = page.getByRole('checkbox', { name: 'Toggle picked status' }); @@ -281,6 +232,12 @@ test.describe('Active pick list', () => { await expect(showPickedToggle).toBeDisabled(); await expect(showPickedToggle).toBeChecked(); + }); + + test('toggles packaging type and persists the selection', async ({ page }) => { + await navigateToNewPickList(page); + await addProductToPickList(page, additionalProduct); + const pickedToggle = page.getByLabel('Toggle picked status'); await expect(pickedToggle).not.toBeChecked(); await pickedToggle.click(); @@ -289,23 +246,24 @@ test.describe('Active pick list', () => { const showPickedToggle = page.getByLabel('Show picked'); await expect(showPickedToggle).toBeChecked(); await expect(showPickedToggle).toBeDisabled(); + const increaseButton = page.getByLabel('Increase quantity'); await increaseButton.click(); - await expect(page.getByText('Qty: 2 unit')).toBeVisible(); + await expect(page.getByText(/Qty:\s*2\s+unit/i)).toBeVisible(); await page.getByLabel('Switch to carton packaging').click(); - await expect(page.getByText('Qty: 2 carton')).toBeVisible(); + await expect(page.getByText(/Qty:\s*2\s+carton/i)).toBeVisible(); await page.getByLabel('Decrease quantity').click(); - await expect(page.getByText('Qty: 1 carton')).toBeVisible(); + await expect(page.getByText(/Qty:\s*1\s+carton/i)).toBeVisible(); await page.getByLabel('Switch to unit packaging').click(); - await expect(page.getByText('Qty: 1 unit')).toBeVisible(); + await expect(page.getByText(/Qty:\s*1\s+unit/i)).toBeVisible(); await increaseButton.click(); await increaseButton.click(); await page.getByLabel('Switch to carton packaging').click(); - await expect(page.getByText('Qty: 3 carton')).toBeVisible(); + await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible(); await page.getByRole('button', { name: 'Save and Return' }).click(); await expect(page.getByRole('heading', { name: 'Pick Lists' })).toBeVisible(); @@ -313,8 +271,14 @@ test.describe('Active pick list', () => { 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: 3 carton')).toBeVisible(); + await expect(page.getByText(/Qty:\s*3\s+carton/i)).toBeVisible(); await expect(page.getByLabel('Switch to unit packaging')).toBeVisible(); + }); + + test('lets a user mark an item as picked then revert it back to pending', async ({ page }) => { + await navigateToNewPickList(page); + await addProductToPickList(page, additionalProduct); + const itemStatusToggle = page.getByLabel('Toggle picked status').first(); const showPickedToggle = page.getByLabel('Show picked'); @@ -330,12 +294,19 @@ test.describe('Active pick list', () => { await expect(itemStatusToggle).not.toBeChecked(); await expect(showPickedToggle).toBeEnabled(); - const productRow = page.getByText(additionalProduct).locator( - 'xpath=ancestor::div[contains(@class, "MuiStack-root")]//button[@aria-label="Delete item"]', - ); + }); + + test('removes a product from the pick list when deleted', async ({ page }) => { + await navigateToNewPickList(page); + await addProductToPickList(page, additionalProduct); + + const productRowDeleteButton = page + .getByText(additionalProduct) + .locator('xpath=ancestor::div[contains(@class, "MuiStack-root")]//button[@aria-label="Delete item"]') + .first(); await expect(page.getByText(additionalProduct).first()).toBeVisible(); - await productRow.first().click(); + await productRowDeleteButton.click(); await expect(page.getByRole('dialog', { name: 'Delete item' })).toBeVisible(); await page.getByRole('button', { name: 'Delete', exact: true }).click();