Merge pull request #105 from beatz174-bit/codex/check-for-errors-in-picklist.spec.ts

Refine picklist e2e tests

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 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 expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
 
     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(secondaryProduct, { exact: true })).toBeVisible();
-    await expect(page.getByText('Qty: 1 unit')).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 addProductToPickList(page, additionalProduct);
-    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 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 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 expect(page.getByRole('heading', { name: `${areaName} List` })).toBeVisible();
-
     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 addProductToPickList(page, additionalProduct);
-    await searchInput.click();
-    await searchInput.fill(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('/');
+    await navigateToNewPickList(page);
-
-  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();
 
     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 addProductToPickList(page, productName);
-      await searchInput.fill(productName);
-      await page
-        .getByRole('option', { name: new RegExp(`${productName} \\(${areaName}\\)`, 'i') })
-        .first()
-        .click();
-
-      await expect(page.getByText(productName).first()).toBeVisible();
     }
 
     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');
+  test('adjusts item quantities with increment and decrement controls', async ({ page }) => {
-    await searchInput.click();
+    await navigateToNewPickList(page);
-    await searchInput.fill(secondaryProduct);
+    await addProductToPickList(page, additionalProduct);
-    await page
-      .getByRole('option', { name: new RegExp(`${secondaryProduct} \\(${areaName}\\)`, 'i') })
-      .first()
-      .click();
 
-    await searchInput.fill(additionalProduct);
+    const quantityLabel = page.getByText(/Qty:\s*1\s+unit/i);
-    await page
-      .getByRole('option', { name: new RegExp(`${additionalProduct} \\(${areaName}\\)`, 'i') })
-      .first()
-      .click();
-
-    const quantityLabel = page.getByText('Qty: 1 Unit');
     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();