Add Playwright E2E integration tests for cart state management

[Copilot]

Purpose

Implements comprehensive Playwright integration tests covering cart state synchronization across AlbumCard, CartDrawer, and CartIcon components. Tests verify all 11 Gherkin scenarios from issue requirements plus additional quantity management and clear cart functionality.

Does this introduce a breaking change?

[ ] Yes
[x] No

Pull Request Type

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

How to Test

• Get the code

git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
cd album-viewer
npm install
npx playwright install

• Test the code

# Run all E2E tests
npm run test:e2e

# Run with UI mode (recommended)
npm run test:e2e:ui

# Run in debug mode
npm run test:e2e:debug

# View test report
npm run test:e2e:report

What to Check

Verify that the following are valid

• All 34 test scenarios execute successfully (11 core Gherkin + 12 quantity management + 6 clear cart + 5 edge cases)
• Tests properly isolate state via localStorage cleanup in beforeEach hooks
• Page Object Model architecture maintains clean separation between test logic and UI interactions
• Cart state synchronization validated across component boundaries
• LocalStorage persistence verified across page reloads

Other Information

Test Architecture

Page Object Model with two primary abstractions:

• AlbumListPage - Album card interactions, cart icon state
• CartDrawerPage - Cart drawer operations, quantity controls, totals

Coverage Map

// Core Gherkin scenarios (cart-state-updates.spec.ts)
- Add album → cart state + icon count + total update
- Multiple albums → cumulative count
- Remove item → state propagation + drawer content
- Empty cart → zero state handling
- Drawer content → price display validation
- Total calculation → add/remove operations
- Component lifecycle → localStorage persistence
- Immediate updates → reactivity validation
- Multi-component sync → state consistency

// Quantity management (cart-quantity-management.spec.ts)
- Increment/decrement via UI controls
- Quantity persistence across reloads
- Total recalculation with quantities

// Clear cart (cart-clear-functionality.spec.ts)
- Bulk removal + state reset
- AlbumCard button state updates
- Post-clear additions

Test Files Structure

album-viewer/
├── playwright.config.ts           # Chromium + auto-server start
├── tests/
│   ├── e2e/
│   │   ├── cart-state-updates.spec.ts
│   │   ├── cart-state-updates-enhanced.spec.ts
│   │   ├── cart-quantity-management.spec.ts
│   │   └── cart-clear-functionality.spec.ts
│   ├── page-objects/
│   │   ├── AlbumListPage.ts
│   │   └── CartDrawerPage.ts
│   └── helpers/
│       └── cart-helpers.ts        # clearCart, parsePrice, waitFor utils

Dependencies Added:

• @playwright/test: ^1.48.2

CI/CD Configuration:

• 2 retries on failure
• Screenshot + trace capture on failure
• Headless by default, parallelization enabled

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• esm.ubuntu.com
  • Triggering command: /usr/lib/apt/methods/https (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Integration Tests: Cart State Updates</issue_title>
<issue_description>## Description
Write integration tests to verify cart functionality across components.

Tasks

• Test cart state updates when adding albums from AlbumCard
• Test cart state updates when removing items from CartDrawer
• Test cart icon count updates when cart changes
• Test cart drawer content updates when items are added/removed
• Test cart persistence across component lifecycle
• Test cart total calculation updates correctly

Acceptance Criteria

• Cart state flows correctly between components
• Adding/removing items updates all dependent UI elements
• State persistence works across component mount/unmount
• All integration tests pass

Parent Issue: #3</issue_description>

<agent_instructions>Use Playwright MCP server and implement the gherkin scenario from the discussion</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@ljeanner ## Gherkin Feature Specification

Feature: Cart State Updates
  As a user of the music store
  I want the cart to update correctly across all components
  So that I have a consistent shopping experience

  Background:
    Given the album viewer application is loaded
    And the cart is empty

  Scenario: Adding an album from AlbumCard updates cart state
    Given I am viewing an album card for "Abbey Road"
    When I click the "Add to Cart" button
    Then the cart should contain 1 item
    And the cart icon should display count "1"
    And the cart total should be updated

  Scenario: Adding multiple albums updates cart count
    Given I am viewing the album list
    When I add "Abbey Road" to the cart
    And I add "Dark Side of the Moon" to the cart
    Then the cart should contain 2 items
    And the cart icon should display count "2"

  Scenario: Removing an item from CartDrawer updates cart state
    Given the cart contains "Abbey Road"
    And the cart contains "Dark Side of the Moon"
    When I open the cart drawer
    And I remove "Abbey Road" from the cart
    Then the cart should contain 1 item
    And the cart icon should display count "1"
    And the cart drawer should show only "Dark Side of the Moon"

  Scenario: Removing all items empties the cart
    Given the cart contains "Abbey Road"
    When I open the cart drawer
    And I remove "Abbey Road" from the cart
    Then the cart should be empty
    And the cart icon should display count "0"
    And the cart drawer should show no items

  Scenario: Cart drawer content reflects added items
    Given the cart is empty
    When I add "Abbey Road" to the cart
    And I open the cart drawer
    Then the cart drawer should display "Abbey Road"
    And the cart drawer should show the correct price for "Abbey Road"

  Scenario: Cart total calculation updates when items are added
    Given the cart is empty
    When I add an album priced at 15.99 to the cart
    And I add an album priced at 12.99 to the cart
    Then the cart total should be 28.98

  Scenario: Cart total calculation updates when items are removed
    Given the cart contains an album priced at 15.99
    And the cart contains an album priced at 12.99
    When I open the cart drawer
    And I remove the album priced at 12.99
    Then the cart total should be 15.99

  Scenario: Cart state persists across component unmount and remount
    Given I have added "Abbey Road" to the cart
    When the AlbumCard component unmounts
    And the AlbumCard component remounts
    Then the cart should still contain "Abbey Road"
    And the cart icon should still display count "1"

  Scenario: Cart icon updates immediately when item is added
    Given I am viewing an album card
    And the cart icon shows count "0"
    When I add the album to the cart
    Then the cart icon count should update to "1" immediately

  Scenario: Cart icon updates immediately when item is removed
    Given the cart contains 2 items
    And the cart icon shows count "2"
    When I open the cart drawer
    And I remove one item
    Then the cart icon count should update to "1" immediately

  Scenario: Multiple components reflect same cart state
    Given I have the cart drawer open
    And the cart is empty
    When I add "Abbey Road" from an album card
    Then the cart drawer should immediately show "Abbey Road"
    And the cart icon should show count "1"
    And all components should reflect the same cart state
```</body></comment_new>
</comments>

• Fixes Integration Tests: Cart State Updates #7

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.