diff --git a/change/@griffel-jest-serializer-4d8d3102-ee2f-4b0f-bd12-6447c2e066ea.json b/change/@griffel-jest-serializer-4d8d3102-ee2f-4b0f-bd12-6447c2e066ea.json new file mode 100644 index 000000000..11dfd8b6e --- /dev/null +++ b/change/@griffel-jest-serializer-4d8d3102-ee2f-4b0f-bd12-6447c2e066ea.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: improve trailing space handling", + "packageName": "@griffel/jest-serializer", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/jest-serializer/src/index.test.tsx b/packages/jest-serializer/src/index.test.tsx index 946bbd718..2e50aed39 100644 --- a/packages/jest-serializer/src/index.test.tsx +++ b/packages/jest-serializer/src/index.test.tsx @@ -37,16 +37,20 @@ const TestComponent: React.FC<{ id?: string }> = ({ id }) => { 'class-b', ); - return
; + return
; }; -const TestResetComponent: React.FC<{ id?: string }> = ({ id }) => { +const TestResetComponent: React.FC<{ id?: string; children?: React.ReactNode }> = ({ id, children }) => { const classes = useStyles1(); const baseClassName = useBaseStyles(); - const className = mergeClasses('class-a', baseClassName, classes.paddingLeft, 'class-b'); + const className = mergeClasses('class-reset-a', baseClassName, classes.paddingLeft, 'class-reset-b'); - return
; + return ( +
+ {children} +
+ ); }; const RtlWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => ( @@ -85,22 +89,24 @@ describe('serializer', () => { expect(render().container.firstChild).toMatchInlineSnapshot(`
`); expect(render().container.firstChild).toMatchInlineSnapshot(`
`); expect(render(, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
`); expect(render(, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
`); @@ -113,10 +119,49 @@ describe('serializer', () => { it('handles HTML strings', () => { expect(render().container.innerHTML).toMatchInlineSnapshot( - `"
"`, + `"
"`, ); expect(render().container.innerHTML).toMatchInlineSnapshot( - `"
"`, + `"
"`, + ); + }); + + it('handles nested elements', () => { + expect( + render( + + + , + ).container.firstChild, + ).toMatchInlineSnapshot(` +
+
+
+ `); + + expect( + render( + + + , + ).container.innerHTML, + ).toMatchInlineSnapshot( + `"
"`, ); }); + + it('does not assert on non-sequence strings', () => { + expect({ + toString: () => 'class="foo"', + }).toMatchInlineSnapshot(` + Object { + "toString": [Function], + } + `); + }); }); diff --git a/packages/jest-serializer/src/index.ts b/packages/jest-serializer/src/index.ts index 885291e68..993f142f3 100644 --- a/packages/jest-serializer/src/index.ts +++ b/packages/jest-serializer/src/index.ts @@ -1,5 +1,5 @@ import type { CSSClasses } from '@griffel/core'; -import { DEBUG_RESET_CLASSES, DEFINITION_LOOKUP_TABLE } from '@griffel/core'; +import { DEBUG_RESET_CLASSES, DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX } from '@griffel/core'; export function print(val: unknown) { /** @@ -56,15 +56,29 @@ export function print(val: unknown) { /** * Trim whitespace from className */ - return `"${valStrippedClassNames.replace(/(?:class|className)="(.*)"/, (match, p1) => + return `"${valStrippedClassNames.replace(/(?:class|className)="([^"]+)"/g, (match, p1) => match.replace(p1, p1.trim()), )}"`; } +function isRegisteredSequence(value: string) { + // Heads up! + // There will be a lot of strings that will be tested here, assert only if it's a sequence-like string + if (value.indexOf(SEQUENCE_PREFIX) === 0) { + return ( + Object.prototype.hasOwnProperty.call(DEFINITION_LOOKUP_TABLE, value) || + Object.prototype.hasOwnProperty.call(DEBUG_RESET_CLASSES, value) + ); + } + + return false; +} + export function test(val: unknown) { if (typeof val === 'string') { - return val.split(' ').some(v => DEBUG_RESET_CLASSES[v] || DEFINITION_LOOKUP_TABLE[v]); + return val.split(' ').some(v => isRegisteredSequence(v)); } + return false; }