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.Open /cart with two items
- 2.Click trash icon on the first line
- 3.Click trash icon on the remaining line
- 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
ts12345678910
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();
});