Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Aug 31, 2025

This PR adds comprehensive documentation to help developers test applications that use DB UX Design System components. The new guide covers all major supported frameworks and addresses common testing challenges.

What's Added

New Documentation: docs/how-to-test-with-db-ux-components.md

This comprehensive guide provides framework-specific testing recommendations for:

  • React - Setup with React Testing Library, Jest, and Playwright
  • Vue - Testing with Vue Test Utils and Vitest
  • Angular - Using Angular Testing Utilities and component fixtures
  • Stencil/Web Components - Custom element registration and testing

Key Features

Complete Setup Instructions

  • Package installation commands for each framework
  • CSS styling configuration for test environments
  • Global test setup examples with proper imports

Practical Testing Examples

  • Component interaction testing (button clicks, form inputs)
  • Mocking strategies for unit testing
  • TypeScript integration and proper component typing
  • Event handling across different frameworks

Common Testing Scenarios

  • Form submission and validation testing
  • Navigation component interactions
  • Accessibility testing with axe-core integration
  • Component state management testing

Comprehensive Troubleshooting

  • CSS import issues and solutions
  • Icon loading problems and mocking strategies
  • Custom element registration for Web Components
  • TypeScript type resolution
  • Framework-specific event handling differences

Example Usage

// React Testing Example
import { render, screen, fireEvent } from '@testing-library/react';
import { DBButton } from '@db-ux/react-core-components';

test('should handle button click', () => {
  const handleClick = jest.fn();
  render(<DBButton onClick={handleClick}>Click me</DBButton>);
  
  fireEvent.click(screen.getByRole('button'));
  expect(handleClick).toHaveBeenCalled();
});

The documentation includes similar examples for Vue, Angular, and Web Components, covering all the scenarios developers commonly encounter when testing applications that use DB UX components.

This addresses the need for clear guidance on mocking strategies, component typing, interaction testing, and framework-specific best practices that were previously undocumented.

Fixes #3483.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copy link

changeset-bot bot commented Aug 31, 2025

⚠️ No Changeset found

Latest commit: 0c9d9e4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Copilot Copilot AI changed the title [WIP] Describe how to test Components (Unit Tests) Add comprehensive testing documentation for applications using DB UX components Aug 31, 2025
@Copilot Copilot AI requested a review from mfranzke August 31, 2025 15:44
Copilot finished work on behalf of mfranzke August 31, 2025 15:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Describe how to test Components (Unit Tests)
2 participants