chore(blade): fix rebranded ts checks & tests (#1983)

razorpay · Jan 19, 2024 · 36c708a · 36c708a
1 parent 1a1e72b
commit 36c708a
Show file tree

Hide file tree

Showing 54 changed files with 3,556 additions and 13,503 deletions.
diff --git a/packages/blade/jest.native.config.js b/packages/blade/jest.native.config.js
@@ -1,14 +1,9 @@
-const { rebrandedComponents } = require('./rebranded-components');
-
 const ignores = ['/node_modules/'];
 
 module.exports = {
   preset: 'react-native',
   testPathIgnorePatterns: [...ignores, 'web.test', 'ssr.test'],
-  collectCoverageFrom: [
-    ...rebrandedComponents.map((component) => `./src/**/${component}.native.{ts,tsx}`),
-    '**/Icons/*Icon/*.native.test.{ts,tsx}',
-  ],
+  collectCoverageFrom: ['./src/**/*.native.{ts,tsx}'],
   coverageThreshold: {
     global: {
       branches: 75,
@@ -18,11 +13,7 @@ module.exports = {
     },
   },
   moduleFileExtensions: ['native.ts', 'native.tsx', 'ts', 'tsx', 'js', 'json', 'node'],
-  testMatch: [
-    ...rebrandedComponents.map((component) => `**/${component}.native.test.{ts,tsx}`),
-    '**/Icons/*Icon/*.native.test.{ts,tsx}',
-    '**/utils/**/*.test.{ts,tsx}',
-  ],
+  testMatch: ['**/*.test.{ts,tsx}'],
   transform: {
     '\\.(js|ts|tsx)?$': './jest-preprocess.js',
   },

diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js
@@ -1,5 +1,3 @@
-const { rebrandedComponents } = require('./rebranded-components');
-
 const ignores = ['/node_modules/'];
 
 const baseConfig = {
@@ -14,12 +12,7 @@ const baseConfig = {
   },
   snapshotSerializers: ['<rootDir>/jestStyledComponentsSerializer.js'],
   moduleFileExtensions: ['web.ts', 'web.tsx', 'ts', 'tsx', 'js', 'json', 'node'],
-  testMatch: [
-    ...rebrandedComponents.map((component) => `**/${component}.web.test.{ts,tsx}`),
-    '**/Icons/*Icon/*.web.test.{ts,tsx}',
-    '**/codemods/**/*.test.{ts,tsx}',
-    '**/utils/**/*.test.{ts,tsx}',
-  ],
+  testMatch: ['**/*.test.{ts,tsx}'],
   transform: {
     '\\.(js|ts|tsx)?$': './jest-preprocess.js',
   },
@@ -45,19 +38,15 @@ module.exports = {
       ...baseConfig,
       testEnvironment: 'node',
       testPathIgnorePatterns: [...baseConfig.testPathIgnorePatterns, 'web.test'],
-      collectCoverageFrom: rebrandedComponents.map(
-        (component) => `./src/**/${component}.ssr.{ts,tsx}`,
-      ),
-      testMatch: rebrandedComponents.map((component) => `**/${component}.ssr.test.{ts,tsx}`),
+      collectCoverageFrom: ['./src/**/*.ssr.{ts,tsx}'],
+      testMatch: ['**/*.ssr.test.{ts,tsx}'],
     },
     {
       displayName: 'CSR Test',
       ...baseConfig,
       testEnvironment: 'jsdom',
       testPathIgnorePatterns: [...baseConfig.testPathIgnorePatterns, 'ssr.test'],
-      collectCoverageFrom: rebrandedComponents.map(
-        (component) => `./src/**/${component}.web.{ts,tsx}`,
-      ),
+      collectCoverageFrom: ['./src/**/*.web.{ts,tsx}'],
     },
   ],
 };
diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js
diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx
@@ -134,7 +134,7 @@ const AmountTemplate: StoryFn<typeof AmountComponent> = (args) => {
           flexDirection="column"
         >
           <Text marginBottom="spacing.1">{color}</Text>
-          <AmountComponent {...args} color={color} />
+          <AmountComponent {...args} color={`feedback.text.${color}.intense`} />
         </BaseBox>
       ))}
     </BaseBox>

diff --git a/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts b/packages/blade/src/components/Box/BaseBox/types/propsTypes.ts
@@ -177,8 +177,8 @@ type BaseBoxVisualProps = MakeObjectResponsive<
       | BackgroundColorString<'interactive'>
       | BackgroundColorString<'overlay'>
       | BackgroundColorString<'popup'>
-      | 'transparent';
-    // | (string & Record<never, never>);
+      | 'transparent'
+      | (string & Record<never, never>);
     lineHeight: SpacingValueType;
     touchAction: CSSObject['touchAction'];
     userSelect: CSSObject['userSelect'];

diff --git a/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts b/packages/blade/src/components/Box/__tests__/baseBoxStyles.test.ts
@@ -13,7 +13,7 @@ describe('getColorValue', () => {
   it('should return correct background color value', () => {
     expect(
       getColorValue('interactive.background.primary.default', bladeLightTheme, 'base'),
-    ).toMatchInlineSnapshot(`"hsla(230, 100%, 42%, 1)"`);
+    ).toMatchInlineSnapshot(`"hsla(227, 100%, 59%, 1)"`);
     expect(getColorValue('red', bladeLightTheme, 'base')).toBe('red');
     expect(getColorValue('red', bladeLightTheme, 'm')).toBe(undefined);
     expect(getColorValue({ base: 'red', s: '#f30' }, bladeLightTheme, 's')).toBe('#f30');

diff --git a/...es/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap b/...es/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.native.test.tsx.snap
@@ -69,12 +69,14 @@ exports[`<Card /> should render a clickable Card 1`] = `
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -94,15 +96,13 @@ exports[`<Card /> should render a clickable Card 1`] = `
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
               },
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View
@@ -182,20 +182,22 @@ exports[`<Card /> should render a interactive Card 1`] = `
             "display": "block",
           },
           {
-            "borderColor": "hsla(218, 89%, 51%, 1)",
+            "borderColor": "hsla(227, 100%, 59%, 1)",
             "borderStyle": "solid",
             "borderWidth": 2,
           },
         ]
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -215,15 +217,13 @@ exports[`<Card /> should render a interactive Card 1`] = `
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
               },
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View
@@ -312,12 +312,14 @@ exports[`<Card /> should render a linkable Card 1`] = `
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -337,15 +339,13 @@ exports[`<Card /> should render a linkable Card 1`] = `
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
               },
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View
@@ -434,12 +434,14 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
       }
     >
       <View
+        backgroundColor="surface.background.gray.intense"
         borderRadius="medium"
         data-blade-component="base-box"
         elevation="lowRaised"
         style={
           [
             {
+              "backgroundColor": "hsla(0, 0%, 100%, 1)",
               "borderRadius": 4,
               "paddingBottom": 24,
               "paddingLeft": 24,
@@ -459,15 +461,13 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
             },
             [
               {
-                "backgroundColor": "hsla(0, 0%, 100%, 1)",
                 "display": "flex",
                 "flexDirection": "column",
                 "width": "100%",
               },
             ],
           ]
         }
-        surfaceLevel={2}
         textAlign="left"
       >
         <View

diff --git a/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.web.test.tsx.snap b/packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.web.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`<Card /> should render a clickable Card 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
   box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
@@ -23,7 +24,6 @@ exports[`<Card /> should render a clickable Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -106,6 +106,7 @@ exports[`<Card /> should render a linkable Card 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
   box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
@@ -120,7 +121,6 @@ exports[`<Card /> should render a linkable Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -205,6 +205,7 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
   box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
@@ -219,7 +220,6 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -304,6 +304,7 @@ exports[`<Card /> should render an interactive Card 1`] = `
 .c2.c2.c2.c2.c2 {
   text-align: left;
   padding: 24px;
+  background-color: hsla(0,0%,100%,1);
   border-radius: 4px;
   box-shadow: 0px 2px 16px 0px hsla(217,56%,17%,0.10);
 }
@@ -318,7 +319,6 @@ exports[`<Card /> should render an interactive Card 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  background-color: hsla(0,0%,100%,1);
   box-sizing: border-box;
 }
 
@@ -346,7 +346,7 @@ exports[`<Card /> should render an interactive Card 1`] = `
 }
 
 .c1.c1.c1.c1.c1 {
-  box-shadow: 0px 0px 0px 2px hsla(218,89%,51%,1);
+  box-shadow: 0px 0px 0px 2px hsla(227,100%,59%,1);
   -webkit-transition-duration: 150ms;
   transition-duration: 150ms;
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);