add more test cases

clerk · alexcarpenter · Jul 22, 2025 · Jul 15, 2025 · Jul 15, 2025 · Jul 16, 2025
commit de43a5df361ac18711c38f011b4a36a2617ff5d6
diff --git a/packages/clerk-js/src/utils/__tests__/appearance.spec.ts b/packages/clerk-js/src/utils/__tests__/appearance.spec.ts
@@ -170,4 +170,92 @@ describe('processCssLayerNameExtraction', () => {
       expect((result.baseTheme as BaseTheme & { cssLayerName?: string }).cssLayerName).toBeUndefined();
     }
   });
+
+  it('handles empty baseTheme array', () => {
+    const appearance: Appearance = {
+      baseTheme: [],
+    };
+
+    const result = processCssLayerNameExtraction(appearance);
+
+    expect(result?.cssLayerName).toBeUndefined();
+    expect(result?.baseTheme).toEqual([]);
+    expect(Array.isArray(result?.baseTheme)).toBe(true);
+  });
+
+  it('uses first valid cssLayerName from mixed array when appearance.cssLayerName is absent', () => {
+    const appearance: Appearance = {
+      baseTheme: [
+        {
+          __type: 'prebuilt_appearance' as const,
+          // No cssLayerName in first theme
+        },
+        {
+          __type: 'prebuilt_appearance' as const,
+          cssLayerName: 'second-theme-layer',
+        },
+        {
+          __type: 'prebuilt_appearance' as const,
+          cssLayerName: 'third-theme-layer',
+        },
+      ],
+    };
+
+    const result = processCssLayerNameExtraction(appearance);
+
+    expect(result?.cssLayerName).toBe('second-theme-layer');
+    expect(Array.isArray(result?.baseTheme)).toBe(true);
+    if (Array.isArray(result?.baseTheme)) {
+      expect(result.baseTheme).toHaveLength(3);
+      // Check that cssLayerName was removed from all themes
+      result.baseTheme.forEach(theme => {
+        expect((theme as BaseTheme & { cssLayerName?: string }).cssLayerName).toBeUndefined();
+      });
+    }
+  });
+
+  it('preserves appearance.cssLayerName over baseTheme array cssLayerName', () => {
+    const appearance: Appearance = {
+      cssLayerName: 'appearance-level-layer',
+      baseTheme: [
+        {
+          __type: 'prebuilt_appearance' as const,
+          cssLayerName: 'theme-layer-1',
+        },
+        {
+          __type: 'prebuilt_appearance' as const,
+          cssLayerName: 'theme-layer-2',
+        },
+      ],
+    };
+
+    const result = processCssLayerNameExtraction(appearance);
+
+    expect(result?.cssLayerName).toBe('appearance-level-layer');
+    expect(Array.isArray(result?.baseTheme)).toBe(true);
+    if (Array.isArray(result?.baseTheme)) {
+      expect(result.baseTheme).toHaveLength(2);
+      // Check that cssLayerName was removed from all themes
+      result.baseTheme.forEach(theme => {
+        expect((theme as BaseTheme & { cssLayerName?: string }).cssLayerName).toBeUndefined();
+      });
+    }
+  });
+
+  it('returns single theme unchanged when it has no cssLayerName', () => {
+    const appearance: Appearance = {
+      baseTheme: {
+        __type: 'prebuilt_appearance' as const,
+        // No cssLayerName property
+      },
+    };
+
+    const result = processCssLayerNameExtraction(appearance);
+
+    expect(result?.cssLayerName).toBeUndefined();
+    expect(result?.baseTheme).toEqual({
+      __type: 'prebuilt_appearance',
+    });
+    expect(Array.isArray(result?.baseTheme)).toBe(false);
+  });
 });