Counter Component with Event Testing

Build a simple web component that displays a counter and emits custom events. Create E2E tests that listen for and verify these events.

Component Requirements

Create a counter-button component that:

• Displays a count starting at 0
• Has an "Increment" button that increases the count by 1
• Emits a counterChanged event each time the count changes, with the new count as the event detail

Test Requirements

Create E2E tests that:

• Listen for the counterChanged event when the increment button is clicked and verify it was emitted @test
• Verify the counterChanged event detail contains the value 1 after one click @test
• Verify the counterChanged event detail contains the value 3 after three clicks @test
• Verify clicking the button 5 times results in the event being emitted exactly 5 times @test

API

/**
 * A counter button component that emits events on count changes
 */
export class CounterButton {
  /**
   * Current count value
   */
  count: number;

  /**
   * Event emitted when counter changes, with the new count as detail
   */
  counterChanged: EventEmitter<number>;
}

Implementation

@generates

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides web component compilation and testing utilities.

@describes