Playwright E2E Testing

[jantimon]

As next-yak continues to grow in complexity and feature set, we need to ensure that the CSS generation and application works correctly across various contexts. (e.g: dev, prod app-router, pages-router and soon turbopack)

E2E tests will allow us to:

1. Verify compiled CSS is correctly applied to DOM elements
2. Test cross-file mixins and selectors
3. Catch regressions that might occur with Next.js version updates

Testing Strategy

The idea would be to:

1. Start a Next.js dev or production server with test components
2. Navigate to specific test pages
3. Verify that elements have the expected computed styles
4. Test interactive behavior where applicable

Test Cases

Core Functionality

1. Basic Styling

   • Test static styles with the styled API
   • Verify correct CSS class generation and application
   • Check specificity and inheritance patterns

2. Dynamic Styles

   • Test conditional class toggling based on props
   • Verify correct style application when props change
   • Test style override behavior

3. Dynamic Properties

   • Test CSS variable generation for dynamic props
   • Verify correct application of custom properties
   • Test updates to dynamic values

4. Keyframes Animations

   • Test keyframe animation definitions
   • Verify correct animation application
   • Test animation name generation

Advanced Patterns

5. Cross-File Mixins

   • Test importing and using mixins from different files
   • Verify correct CSS generation and application
   • Test nested mixins across files

6. Cross-File Selectors

   • Test targeting components defined in other files
   • Verify selector specificity and cascade
   • Test complex cross-file selector patterns

7. CSS Prop

   • Test inline css prop usage
   • Verify composition with className and style props
   • Test dynamic values in css props

8. Tailwind/Atomic CSS Integration

   • Test atoms API with Tailwind classes
   • Verify correct class application
   • Test conditional Tailwind class application

9. Nested Selectors

   • Test parent-child relationships in styled components
   • Verify correct nesting of selectors
   • Test pseudo-class and pseudo-element behavior

10. Component Targeting

    • Test targeting styled components within other components
    • Verify hover, focus, and other interactive states
    • Test complex component selector patterns

Edge Cases

11. Media Queries

    • Test responsive styles with media queries
    • Verify correct application at different viewport sizes
    • Test media query prioritization and cascade

12. Build-Time Constants

    • Test .yak.ts constant resolution
    • Verify correct constant usage in styles
    • Test complex constant value patterns

13. Class Minification

    • Test production builds with minified class names
    • Compare development and production class patterns
    • Verify correct style application with minified classes

14. Theming Support

    • Test theme context and application
    • Verify theme value propagation to styled components
    • Test theme switching behavior

[jantimon]

@oly-wan-kenobi said will look into this 👍