fix(jest-serializer): fix reset class handling (#585)

microsoft · Jul 12, 2024 · 7279fe9 · 7279fe9
1 parent 026d62b
commit 7279fe9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
diff --git a/change/@griffel-jest-serializer-a5cad9b7-42a8-4a48-b2ba-e8218d04c1e9.json b/change/@griffel-jest-serializer-a5cad9b7-42a8-4a48-b2ba-e8218d04c1e9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: fix reset class 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
@@ -19,10 +19,13 @@ const useStyles3 = makeStyles({
   display: { display: 'none' },
 });
 
-const useBaseStyles = makeResetStyles({
+const useResetStylesA = makeResetStyles({
   color: 'red',
   marginLeft: '20px',
 });
+const useResetStylesB = makeResetStyles({
+  color: 'blue',
+});
 
 const TestComponent: React.FC<{ id?: string }> = ({ id }) => {
   const styles1 = useStyles1();
@@ -42,13 +45,15 @@ const TestComponent: React.FC<{ id?: string }> = ({ id }) => {
 
 const TestResetComponent: React.FC<{ id?: string; children?: React.ReactNode }> = ({ id, children }) => {
   const classes = useStyles1();
-  const baseClassName = useBaseStyles();
+  const resetClassNameA = useResetStylesA();
+  const resetClassNameB = useResetStylesB();
 
-  const className = mergeClasses('class-reset-a', baseClassName, classes.paddingLeft, 'class-reset-b');
+  const rootClassName = mergeClasses('class-reset-a', resetClassNameA, classes.paddingLeft, 'class-reset-b');
+  const innerClassName = mergeClasses('class-reset-inner', resetClassNameB);
 
   return (
-    <div data-testid={id} className={className}>
-      {children}
+    <div data-testid={id} className={rootClassName}>
+      <div className={innerClassName}>{children}</div>
     </div>
   );
 };
@@ -95,7 +100,11 @@ describe('serializer', () => {
     expect(render(<TestResetComponent />).container.firstChild).toMatchInlineSnapshot(`
       <div
         class="class-reset-a class-reset-b"
-      />
+      >
+        <div
+          class="class-reset-inner"
+        />
+      </div>
     `);
 
     expect(render(<TestComponent />, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
@@ -107,7 +116,11 @@ describe('serializer', () => {
     expect(render(<TestResetComponent />, { wrapper: RtlWrapper }).container.firstChild).toMatchInlineSnapshot(`
       <div
         class="class-reset-a class-reset-b"
-      />
+      >
+        <div
+          class="class-reset-inner"
+        />
+      </div>
     `);
 
     expect(render(<div className="foo bar" />).container.firstChild).toMatchInlineSnapshot(`
@@ -119,7 +132,7 @@ describe('serializer', () => {
 
   it('handles HTML strings', () => {
     expect(render(<TestResetComponent />).container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="class-reset-a class-reset-b"></div>"`,
+      `"<div class="class-reset-a class-reset-b"><div class="class-reset-inner"></div></div>"`,
     );
     expect(render(<TestComponent />).container.innerHTML).toMatchInlineSnapshot(
       `"<div class="class-a class-b" data-test-attr="true"></div>"`,
@@ -138,9 +151,13 @@ describe('serializer', () => {
         class="class-reset-a class-reset-b"
       >
         <div
-          class="class-a class-b"
-          data-test-attr="true"
-        />
+          class="class-reset-inner"
+        >
+          <div
+            class="class-a class-b"
+            data-test-attr="true"
+          />
+        </div>
       </div>
     `);
 
@@ -151,7 +168,7 @@ describe('serializer', () => {
         </TestResetComponent>,
       ).container.innerHTML,
     ).toMatchInlineSnapshot(
-      `"<div class="class-reset-a class-reset-b"><div class="class-a class-b" data-test-attr="true"></div></div>"`,
+      `"<div class="class-reset-a class-reset-b"><div class="class-reset-inner"><div class="class-a class-b" data-test-attr="true"></div></div></div>"`,
     );
   });
 

diff --git 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, SEQUENCE_PREFIX } from '@griffel/core';
+import { DEBUG_RESET_CLASSES, DEFINITION_LOOKUP_TABLE, SEQUENCE_PREFIX, RESET_HASH_PREFIX } from '@griffel/core';
 
 export function print(val: unknown) {
   /**
@@ -64,11 +64,13 @@ export function print(val: unknown) {
 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 Object.prototype.hasOwnProperty.call(DEFINITION_LOOKUP_TABLE, value);
+  }
+
+  if (value[0] === RESET_HASH_PREFIX) {
+    return Object.prototype.hasOwnProperty.call(DEBUG_RESET_CLASSES, value);
   }
 
   return false;