Update cs.spec.tsx

Workday · Oct 4, 2024 · c63f7f5 · c63f7f5
1 parent bffb167
commit c63f7f5
Showing 1 changed file with 86 additions and 1 deletion.
diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx
@@ -857,10 +857,14 @@ describe('cs', () => {
           },
           grow: {
             true: {},
+            false: {},
           },
         },
         // make sure boolean modifiers are valid in compound config
-        compound: [{modifiers: {size: 'large', grow: true}, styles: {}}],
+        compound: [
+          {modifiers: {size: 'large', grow: true}, styles: {}},
+          {modifiers: {size: 'large', grow: false}, styles: {}},
+        ],
       });
 
       type Args = Exclude<Parameters<typeof myStencil>[0], undefined>;
@@ -876,6 +880,36 @@ describe('cs', () => {
       });
     });
 
+    it('should apply true styles', () => {
+      const myStencil = createStencil({
+        base: {},
+        modifiers: {
+          grow: {
+            true: {width: '100%'},
+            false: {width: '100px'},
+          },
+        },
+      });
+
+      const {className} = myStencil({grow: true});
+      expect(className).toContain(myStencil.modifiers.grow.true);
+    });
+
+    it('should apply false styles', () => {
+      const myStencil = createStencil({
+        base: {},
+        modifiers: {
+          grow: {
+            true: {width: '100%'},
+            false: {width: '100px'},
+          },
+        },
+      });
+
+      const {className} = myStencil({grow: false});
+      expect(className).toContain(myStencil.modifiers.grow.false);
+    });
+
     describe('when extending', () => {
       it('should have both stencil class names', () => {
         const baseStencil = createStencil({
@@ -909,6 +943,7 @@ describe('cs', () => {
           modifiers: {
             extra: {
               true: {},
+              false: {},
             },
           },
         });
@@ -933,6 +968,8 @@ describe('cs', () => {
         expectTypeOf(extendedStencil.modifiers).toHaveProperty('extra');
         expectTypeOf(extendedStencil.modifiers.extra).toHaveProperty('true');
         expectTypeOf(extendedStencil.modifiers.extra.true).toEqualTypeOf<string>();
+        expectTypeOf(extendedStencil.modifiers.extra).toHaveProperty('false');
+        expectTypeOf(extendedStencil.modifiers.extra.false).toEqualTypeOf<string>();
 
         // calling the stencil
         type Args = Exclude<Parameters<typeof extendedStencil>[0], undefined>;
@@ -946,6 +983,9 @@ describe('cs', () => {
         extendedStencil({
           extra: true,
         });
+        extendedStencil({
+          extra: false,
+        });
       });
 
       it('should extend compound modifiers and return all compound modifiers', () => {
@@ -971,11 +1011,13 @@ describe('cs', () => {
           modifiers: {
             extra: {
               true: {},
+              false: {},
             },
           },
           compound: [
             {modifiers: {size: 'large'}, styles: {}},
             {modifiers: {size: 'large', extra: true}, styles: {}},
+            {modifiers: {size: 'large', extra: false}, styles: {}},
           ],
         });
 
@@ -1004,6 +1046,49 @@ describe('cs', () => {
         extendedStencil({
           extra: true,
         });
+        extendedStencil({
+          extra: false,
+        });
+      });
+
+      it('should apply true modifier styles', () => {
+        const baseStencil = createStencil({
+          base: {},
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          base: {},
+          modifiers: {
+            grow: {
+              true: {width: '100%'},
+              false: {width: '100px'},
+            },
+          },
+        });
+
+        const {className} = extendedStencil({grow: true});
+        expect(className).toContain(extendedStencil.modifiers.grow.true);
+      });
+
+      it('should apply false modifier styles', () => {
+        const baseStencil = createStencil({
+          base: {},
+        });
+
+        const extendedStencil = createStencil({
+          extends: baseStencil,
+          base: {},
+          modifiers: {
+            grow: {
+              true: {width: '100%'},
+              false: {width: '100px'},
+            },
+          },
+        });
+
+        const {className} = extendedStencil({grow: false});
+        expect(className).toContain(extendedStencil.modifiers.grow.false);
       });
 
       it('should set default modifiers using base modifiers', () => {