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;
}