E-Commerce

Remove from cart

Removing the last item empties the cart and disables checkout.

User story

As a shopper, I want to remove items from my cart and see checkout disabled when the cart is empty.

Acceptance criteria

  • Trash icon removes the line
  • Cart total recomputes
  • Empty cart copy + 'Browse shop' CTA appear
  • Checkout button is disabled when total is 0

Manual test steps

  1. 1.Open /cart with two items
  2. 2.Click trash icon on the first line
  3. 3.Click trash icon on the remaining line
  4. 4.Inspect checkout button + empty state

Expected result

Empty state appears; checkout button has the disabled attribute.

Possible bug risks

  • Trash icon double-removes adjacent rows
  • Total sticks at the previous value due to stale closure
  • Checkout submits even when disabled because aria-disabled is the only flag

Reference Playwright spec

remove-cart.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
import { test, expect } from '@playwright/test';

test('emptying cart disables checkout @regression', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/cart');
  for (const row of await page.getByRole('row', { name: /remove/i }).all()) {
    await row.getByRole('button', { name: /remove/i }).click();
  }
  await expect(page.getByText(/your cart is empty/i)).toBeVisible();
  await expect(page.getByRole('button', { name: /checkout/i })).toBeDisabled();
});