Testing

Learn how to run and write tests for Attributes

Attributes uses Playwright for end-to-end testing. This guide covers how to run tests and write new ones.

Running Tests

Run All Tests

To run all tests in headless mode:

pnpm test

This command will:

• Start the test environment
• Run all test suites
• Display results in the terminal

Run Tests in Headed Mode

To run tests with a visible browser window (useful for debugging):

pnpm test:headed

This allows you to see exactly what’s happening during the tests.

Test Location

All tests are located in the packages/attributes/tests directory. Each Attribute solution has its own test file.

packages/attributes/tests/
├── accordion.spec.ts
├── autovideo.spec.ts
├── codehighlight.spec.ts
├── combobox.spec.ts
├── copyclip.spec.ts
├── displayvalues.spec.ts
└── ...

This organization makes it easy to:

• Find tests for a specific attribute
• Maintain tests alongside their implementations
• Run tests for individual attributes if needed

Writing Tests

Test Structure

When writing tests for an attribute, follow this general structure:

import { test, expect } from '@playwright/test';

test.describe('Attribute Name', () => {
  test('should do something specific', async ({ page }) => {
    // Navigate to test page
    await page.goto('/test-page.html');
    
    // Perform actions
    await page.click('[data-attribute="element"]');
    
    // Assert expected behavior
    await expect(page.locator('.result')).toBeVisible();
  });
  
  test('should handle edge case', async ({ page }) => {
    // Test edge cases and error scenarios
  });
});

Best Practices

When writing tests for Attributes:

1. Test user behavior - Focus on how users interact with attributes
2. Use semantic selectors - Prefer data attributes and ARIA labels over class names
3. Test one thing at a time - Each test should verify a single behavior
4. Include edge cases - Test error conditions and boundary cases
5. Make tests readable - Use descriptive test names and clear assertions

Example Test

Here’s an example of a well-structured test:

import { test, expect } from '@playwright/test';

test.describe('Modal Attribute', () => {
  test('should open modal when trigger is clicked', async ({ page }) => {
    await page.goto('/modal-test.html');
    
    // Modal should be hidden initially
    const modal = page.locator('[data-modal="container"]');
    await expect(modal).toBeHidden();
    
    // Click trigger button
    await page.click('[data-modal="trigger"]');
    
    // Modal should now be visible
    await expect(modal).toBeVisible();
  });
  
  test('should close modal when close button is clicked', async ({ page }) => {
    await page.goto('/modal-test.html');
    
    // Open modal
    await page.click('[data-modal="trigger"]');
    
    // Close modal
    await page.click('[data-modal="close"]');
    
    // Modal should be hidden
    const modal = page.locator('[data-modal="container"]');
    await expect(modal).toBeHidden();
  });
});

Before Submitting

Always run tests before submitting a pull request:

pnpm test

If you’re adding a new feature or fixing a bug:

1. Write tests first - Consider using test-driven development (TDD)
2. Ensure tests pass - All tests must pass before submitting
3. Add new tests - New features should include corresponding tests
4. Update existing tests - If behavior changes, update relevant tests

Your pull request will be automatically tested in CI, but running tests locally first will save time.