Merge pull request #830 from gympass/DS-856

🚀 tests(system): change test files with js extension to ts
gympass · Jul 23, 2024 · d0b327f · d0b327f
2 parents 632ead6 + c26e4e9
commit d0b327f
Show file tree

Hide file tree

Showing 24 changed files with 270 additions and 239 deletions.
diff --git a/packages/system/src/border/border.test.js → packages/system/src/border/border.test.ts b/packages/system/src/border/border.test.js → packages/system/src/border/border.test.ts
@@ -21,26 +21,30 @@ import {
   borderBottomLeftRadius,
   borderBottomRightRadius,
 } from './border';
-
-const borders = [0, 1, 2];
-
-[borders.zero, borders.small, borders.medium] = borders;
-
-const radii = [0, 4, 8, 9999];
-
-[radii.sharp, radii.semiRounded, radii.rounded, radii.circle] = radii;
+import { Theme } from '@gympass/yoga/Theme';
 
 const colors = {
   vibin: '#D8385E',
   hope: '#1D856C',
 };
 
+const borders = {
+  zero: 0,
+  small: 1,
+  medium: 2,
+};
+
+const radii = {
+  sharp: 0,
+  small: 8,
+};
+
 const theme = {
   yoga: {
     borders,
     colors,
     radii,
-  },
+  } as Theme,
 };
 
 describe('borders', () => {
@@ -570,15 +574,15 @@ describe('radius', () => {
   describe('borderRadius', () => {
     it('Should return values for border prop', () => {
       const expectedSharpStyle = css({ borderRadius: radii.sharp });
-      const expectedRoundedStyle = css({ borderRadius: radii.rounded });
+      const expectedRoundedStyle = css({ borderRadius: radii.small });
 
       const sharp1 = borderRadius({ theme, bRadius: 'sharp' });
       const sharp2 = borderRadius({ theme, borderRadius: 'sharp' });
 
       expect(sharp1).toStrictEqual(sharp2);
 
-      const rounded1 = borderRadius({ theme, bRadius: 'rounded' });
-      const rounded2 = borderRadius({ theme, borderRadius: 'rounded' });
+      const rounded1 = borderRadius({ theme, bRadius: 'small' });
+      const rounded2 = borderRadius({ theme, borderRadius: 'small' });
 
       expect(rounded1).toStrictEqual(rounded2);
 
@@ -603,7 +607,7 @@ describe('radius', () => {
   describe('borderTopLeftRadius', () => {
     it('Should return values for border prop', () => {
       const expectedSharpStyle = css({ borderTopLeftRadius: radii.sharp });
-      const expectedRoundedStyle = css({ borderTopLeftRadius: radii.rounded });
+      const expectedRoundedStyle = css({ borderTopLeftRadius: radii.small });
 
       const sharp1 = borderTopLeftRadius({ theme, btlr: 'sharp' });
       const sharp2 = borderTopLeftRadius({
@@ -613,10 +617,10 @@ describe('radius', () => {
 
       expect(sharp1).toStrictEqual(sharp2);
 
-      const rounded1 = borderTopLeftRadius({ theme, btlr: 'rounded' });
+      const rounded1 = borderTopLeftRadius({ theme, btlr: 'small' });
       const rounded2 = borderTopLeftRadius({
         theme,
-        borderTopLeftRadius: 'rounded',
+        borderTopLeftRadius: 'small',
       });
 
       expect(rounded1).toStrictEqual(rounded2);
@@ -642,7 +646,7 @@ describe('radius', () => {
   describe('borderTopRightRadius', () => {
     it('Should return values for border prop', () => {
       const expectedSharpStyle = css({ borderTopRightRadius: radii.sharp });
-      const expectedRoundedStyle = css({ borderTopRightRadius: radii.rounded });
+      const expectedRoundedStyle = css({ borderTopRightRadius: radii.small });
 
       const sharp1 = borderTopRightRadius({ theme, btrr: 'sharp' });
       const sharp2 = borderTopRightRadius({
@@ -652,10 +656,10 @@ describe('radius', () => {
 
       expect(sharp1).toStrictEqual(sharp2);
 
-      const rounded1 = borderTopRightRadius({ theme, btrr: 'rounded' });
+      const rounded1 = borderTopRightRadius({ theme, btrr: 'small' });
       const rounded2 = borderTopRightRadius({
         theme,
-        borderTopRightRadius: 'rounded',
+        borderTopRightRadius: 'small',
       });
 
       expect(rounded1).toStrictEqual(rounded2);
@@ -682,7 +686,7 @@ describe('radius', () => {
     it('Should return values for border prop', () => {
       const expectedSharpStyle = css({ borderBottomLeftRadius: radii.sharp });
       const expectedRoundedStyle = css({
-        borderBottomLeftRadius: radii.rounded,
+        borderBottomLeftRadius: radii.small,
       });
 
       const sharp1 = borderBottomLeftRadius({ theme, bblr: 'sharp' });
@@ -693,10 +697,10 @@ describe('radius', () => {
 
       expect(sharp1).toStrictEqual(sharp2);
 
-      const rounded1 = borderBottomLeftRadius({ theme, bblr: 'rounded' });
+      const rounded1 = borderBottomLeftRadius({ theme, bblr: 'small' });
       const rounded2 = borderBottomLeftRadius({
         theme,
-        borderBottomLeftRadius: 'rounded',
+        borderBottomLeftRadius: 'small',
       });
 
       expect(rounded1).toStrictEqual(rounded2);
@@ -726,7 +730,7 @@ describe('radius', () => {
     it('Should return values for border prop', () => {
       const expectedSharpStyle = css({ borderBottomRightRadius: radii.sharp });
       const expectedRoundedStyle = css({
-        borderBottomRightRadius: radii.rounded,
+        borderBottomRightRadius: radii.small,
       });
 
       const sharp1 = borderBottomRightRadius({ theme, bbrr: 'sharp' });
@@ -737,10 +741,10 @@ describe('radius', () => {
 
       expect(sharp1).toStrictEqual(sharp2);
 
-      const rounded1 = borderBottomRightRadius({ theme, bbrr: 'rounded' });
+      const rounded1 = borderBottomRightRadius({ theme, bbrr: 'small' });
       const rounded2 = borderBottomRightRadius({
         theme,
-        borderBottomRightRadius: 'rounded',
+        borderBottomRightRadius: 'small',
       });
 
       expect(rounded1).toStrictEqual(rounded2);

diff --git a/packages/system/src/border/border.ts b/packages/system/src/border/border.ts
@@ -1,5 +1,5 @@
 import { toPx } from '../unit';
-import { SystemValues } from '../types';
+import { GeneratorProps } from '../types';
 import {
   getBorder,
   getColor,
@@ -20,7 +20,7 @@ const transform = (value: string | number) => {
   return value;
 };
 
-const border = (props: SystemValues) =>
+const border = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['border', 'b'],
@@ -29,7 +29,7 @@ const border = (props: SystemValues) =>
     transform,
   });
 
-const borderTop = (props: SystemValues) =>
+const borderTop = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderTop', 'bt'],
@@ -38,7 +38,7 @@ const borderTop = (props: SystemValues) =>
     transform,
   });
 
-const borderRight = (props: SystemValues) =>
+const borderRight = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderRight', 'br'],
@@ -47,7 +47,7 @@ const borderRight = (props: SystemValues) =>
     transform,
   });
 
-const borderBottom = (props: SystemValues) =>
+const borderBottom = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderBottom', 'bb'],
@@ -56,7 +56,7 @@ const borderBottom = (props: SystemValues) =>
     transform,
   });
 
-const borderLeft = (props: SystemValues) =>
+const borderLeft = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderLeft', 'bl'],
@@ -65,47 +65,47 @@ const borderLeft = (props: SystemValues) =>
     transform,
   });
 
-const borderColor = (props: SystemValues) =>
+const borderColor = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderColor', 'bc'],
     cssProperty: 'borderColor',
     getter: getColor,
   });
 
-const borderTopColor = (props: SystemValues) =>
+const borderTopColor = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderTopColor', 'btc'],
     cssProperty: 'borderTopColor',
     getter: getColor,
   });
 
-const borderRightColor = (props: SystemValues) =>
+const borderRightColor = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderRightColor', 'brc'],
     cssProperty: 'borderRightColor',
     getter: getColor,
   });
 
-const borderBottomColor = (props: SystemValues) =>
+const borderBottomColor = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderBottomColor', 'bbc'],
     cssProperty: 'borderBottomColor',
     getter: getColor,
   });
 
-const borderLeftColor = (props: SystemValues) =>
+const borderLeftColor = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderLeftColor', 'blc'],
     cssProperty: 'borderLeftColor',
     getter: getColor,
   });
 
-const borderWidth = (props: SystemValues) =>
+const borderWidth = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderWidth', 'bw'],
@@ -114,7 +114,7 @@ const borderWidth = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderTopWidth = (props: SystemValues) =>
+const borderTopWidth = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderTopWidth', 'btw'],
@@ -123,7 +123,7 @@ const borderTopWidth = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderRightWidth = (props: SystemValues) =>
+const borderRightWidth = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderRightWidth', 'brw'],
@@ -132,7 +132,7 @@ const borderRightWidth = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderBottomWidth = (props: SystemValues) =>
+const borderBottomWidth = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderBottomWidth', 'bbw'],
@@ -141,7 +141,7 @@ const borderBottomWidth = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderLeftWidth = (props: SystemValues) =>
+const borderLeftWidth = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderLeftWidth', 'blw'],
@@ -150,7 +150,7 @@ const borderLeftWidth = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderRadius = (props: SystemValues) =>
+const borderRadius = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderRadius', 'bRadius'],
@@ -159,7 +159,7 @@ const borderRadius = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderTopLeftRadius = (props: SystemValues) =>
+const borderTopLeftRadius = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderTopLeftRadius', 'btlr'],
@@ -168,7 +168,7 @@ const borderTopLeftRadius = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderTopRightRadius = (props: SystemValues) =>
+const borderTopRightRadius = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderTopRightRadius', 'btrr'],
@@ -177,7 +177,7 @@ const borderTopRightRadius = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderBottomLeftRadius = (props: SystemValues) =>
+const borderBottomLeftRadius = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderBottomLeftRadius', 'bblr'],
@@ -186,7 +186,7 @@ const borderBottomLeftRadius = (props: SystemValues) =>
     transform: toPx,
   });
 
-const borderBottomRightRadius = (props: SystemValues) =>
+const borderBottomRightRadius = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['borderBottomRightRadius', 'bbrr'],

diff --git a/packages/system/src/color/color.test.js → packages/system/src/color/color.test.ts b/packages/system/src/color/color.test.js → packages/system/src/color/color.test.ts
@@ -1,23 +1,23 @@
 import { css } from 'styled-components';
 import { backgroundColor } from './color';
+import { Theme } from '@gympass/yoga/Theme';
 
-const colors = {
+const colorsTheme = {
   vibin: '#D8385E',
-  hope: '#1D856C',
   feedback: {
     info: '#7068D4',
   },
 };
 
 const theme = {
   yoga: {
-    colors,
-  },
+    colors: colorsTheme,
+  } as unknown as Theme,
 };
 
 describe('backgroundColor', () => {
   it('Should return values for color prop', () => {
-    const expectedColor = css({ backgroundColor: colors.vibin });
+    const expectedColor = css({ backgroundColor: colorsTheme.vibin });
 
     const bg = backgroundColor({ theme, bg: 'vibin' });
     const bgColor = backgroundColor({ theme, bgColor: 'vibin' });
@@ -35,7 +35,7 @@ describe('backgroundColor', () => {
   });
 
   it('Should return the value based on its path', () => {
-    const expectedNoTheme = css({ backgroundColor: colors.feedback.info });
+    const expectedNoTheme = css({ backgroundColor: colorsTheme.feedback.info });
 
     const bg = backgroundColor({
       theme,

diff --git a/packages/system/src/color/color.ts b/packages/system/src/color/color.ts
@@ -1,7 +1,7 @@
 import { getColor, generator } from '../theme';
-import { SystemValues } from '../types';
+import { GeneratorProps } from '../types';
 
-const backgroundColor = (props: SystemValues) =>
+const backgroundColor = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['backgroundColor', 'bg', 'bgColor'],

diff --git a/packages/system/src/elevation/elevation.android.ts b/packages/system/src/elevation/elevation.android.ts
@@ -1,6 +1,7 @@
 import { getElevation, generator } from '../theme';
+import { GeneratorProps } from '../types';
 
-const elevation = props =>
+const elevation = (props: GeneratorProps['props']) =>
   generator({
     props,
     prop: ['boxShadow', 'bs', 'elevation'],