Skip to content
Closed
Prev Previous commit
Next Next commit
Add test for unusual class directive characters
  • Loading branch information
sirreal committed Oct 2, 2024
commit 99112535592e731589f5da1387a96c55c60de38b
Original file line number Diff line number Diff line change
Expand Up @@ -85,4 +85,8 @@ class="foo"
data-testid="can use classes with several dashes"
></div>

<div
data-wp-class--#[^+-]$="context.value"
data-testid="class name no-aplhanumeric"
></div>
</div>
13 changes: 13 additions & 0 deletions test/e2e/specs/interactivity/directive-class.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,17 @@ test.describe( 'data-wp-class', () => {
const el = page.getByTestId( 'can use classes with several dashes' );
await expect( el ).toHaveClass( 'main-bg----color' );
} );

test( 'can use class names with non-alphanumeric characters', async ( {
page,
} ) => {
const expectedClassName = '#[^+-]$';
const el = page.getByTestId( 'class name no-aplhanumeric' );
const toggle = page.getByTestId( 'toggle context value' );
await expect( el ).not.toHaveClass( expectedClassName );
await toggle.click();
await expect( el ).toHaveClass( expectedClassName );
await toggle.click();
await expect( el ).not.toHaveClass( expectedClassName );
} );
} );