test(theme): add more generateComponentsThemeCSS tests

Author: thetaPC

core/src/utils/test/theme.spec.ts

@@ -558,7 +558,7 @@ describe('generateGlobalThemeCSS', () => {
 });
 
 describe('generateComponentsThemeCSS', () => {
-  it('should generate component theme CSS for a given theme', () => {
+  it('should generate component theme CSS for a given theme with a single component', () => {
     const components = {
       IonChip: {
         hue: {
@@ -579,7 +579,7 @@ describe('generateComponentsThemeCSS', () => {
     const css = generateComponentsThemeCSS(components).replace(/\s/g, '');
 
     const expectedCSS = `
-      :root ion-chip {
+      ion-chip {
         --ion-chip-hue-subtle-bg: red;
         --ion-chip-hue-subtle-color: white;
         --ion-chip-hue-subtle-border-color: black;
@@ -591,6 +591,71 @@ describe('generateComponentsThemeCSS', () => {
 
     expect(css).toBe(expectedCSS);
   });
+
+  it('should generate component theme CSS for a given theme with multiple components', () => {
+    const components = {
+      IonChip: {
+        hue: {
+          subtle: {
+            bg: 'red',
+            color: 'white',
+            borderColor: 'black',
+          },
+          bold: {
+            bg: 'blue',
+            color: 'white',
+            borderColor: 'black',
+          },
+        },
+      },
+      IonBadge: {
+        hue: {
+          subtle: {
+            bg: 'green',
+            color: 'white',
+            borderColor: 'black',
+          },
+          bold: {
+            bg: 'blue',
+            color: 'white',
+            borderColor: 'black',
+          },
+        },
+      },
+    };
+
+    const css = generateComponentsThemeCSS(components).replace(/\s/g, '');
+
+    const expectedCSS = `
+      ion-chip {
+        --ion-chip-hue-subtle-bg: red;
+        --ion-chip-hue-subtle-color: white;
+        --ion-chip-hue-subtle-border-color: black;
+        --ion-chip-hue-bold-bg: blue;
+        --ion-chip-hue-bold-color: white;
+        --ion-chip-hue-bold-border-color: black;
+      }
+
+      ion-badge {
+        --ion-badge-hue-subtle-bg: green;
+        --ion-badge-hue-subtle-color: white;
+        --ion-badge-hue-subtle-border-color: black;
+        --ion-badge-hue-bold-bg: blue;
+        --ion-badge-hue-bold-color: white;
+        --ion-badge-hue-bold-border-color: black;
+      }
+    `.replace(/\s/g, '');
+
+    expect(css).toBe(expectedCSS);
+  });
+
+  it('should not generate CSS variables for an empty components object', () => {
+    const components = {};
+
+    const css = generateComponentsThemeCSS(components);
+
+    expect(css).toBe('');
+  });
 });
 
 describe('generateColorClasses', () => {