User Profile Component Tests

Build a comprehensive server-side test suite for a user profile web component using a mock DOM environment. The tests should verify component rendering, property handling, and user interactions without requiring a real browser.

Component Specification

The component to test has the following behavior:

• Displays user information: name, email, and bio
• Has a "Show Details" button that toggles visibility of the bio section
• Emits a "detailsToggled" custom event when the button is clicked
• Accepts user data through properties

Test Coverage

Create tests that validate the following:

Initial Rendering

• Component renders correctly with user data (name: "Alice Smith", email: "alice@test.com", bio: "Software engineer") @test
• Bio section is initially hidden on first render @test

User Interaction

• Clicking "Show Details" button makes bio section visible @test
• Component emits "detailsToggled" event with correct detail value when button is clicked @test

Implementation

@generates

API

/**
 * Test suite for UserProfile component using server-side mock DOM
 */

// Test helper types
interface TestPage {
  root: HTMLElement;
  body: HTMLElement;
  doc: Document;
  win: Window;
  waitForChanges(): Promise<void>;
}

interface UserProfileComponent {
  name: string;
  email: string;
  bio: string;
}

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides web component development and server-side testing with mock DOM support.

@satisfied-by