test(jest): create tests

.eslintrc.js

@@ -26,4 +26,12 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'jsx-quotes': ['error', 'prefer-single'],
   },
+  settings: {
+    'import/resolver': {
+      node: {
+        paths: 'src',
+        extensions: ['.js', '.jsx'],
+      },
+    },
+  },
 };

config/__snapshots__/redirects.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`config/redirects renders all current redirects 1`] = `
+Array [
+  Object {
+    "destination": "/app/login/",
+    "permanent": true,
+    "source": "/login/",
+  },
+]
+`;

config/redirects.js

@@ -2,6 +2,6 @@ module.exports = [
   {
     source: '/login/',
     destination: '/app/login/',
-    permanent: true, // 301 == 308 || 302 == 307
+    permanent: true,
   },
 ];

config/redirects.test.js

@@ -0,0 +1,7 @@
+import redirects from './redirects';
+
+describe('config/redirects', () => {
+  test('renders all current redirects', () => {
+    expect(redirects).toMatchSnapshot();
+  });
+});

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleDirectories: ['<rootDir>/node_modules', 'node_modules'],
+  testPathIgnorePatterns: [
+    '<rootDir>/.next/',
+    '<rootDir>/cypress/',
+    '<rootDir>/dist/',
+  ],
+};

jest.setup.js

@@ -0,0 +1 @@
+// jest extensions

package.json

@@ -9,6 +9,8 @@
     "custom-script": "node ./script-test.js",
     "prepare": "husky install",
     "commit": "cz",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "test:integration:open": "cypress open",
     "test:integration": "cypress run --headless"
   },
@@ -29,6 +31,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
+    "@types/jest": "^27.0.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-styled-components": "^1.12.0",
     "cypress": "^8.4.0",
@@ -39,11 +42,13 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jest": "^24.5.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^7.0.1",
+    "jest": "^27.2.4",
     "prettier": "^2.3.2"
   },
   "license": "MIT",

src/theme/utils/propToStyle/__snapshots__/propToStyle.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`propToStyle() when receives an argument with breakpoints renders only one breakpoint resolution 1`] = `
+Array [
+  Array [
+    "@media screen and (min-width:",
+    "0",
+    "px){",
+    "text-align: center;",
+    ";}",
+  ],
+]
+`;
+
+exports[`propToStyle() when receives an argument with breakpoints renders two or more breakpoint resolutions 1`] = `
+Array [
+  Array [
+    "@media screen and (min-width:",
+    "0",
+    "px){",
+    "text-align: center;",
+    ";}",
+  ],
+  Array [
+    "@media screen and (min-width:",
+    "480",
+    "px){",
+    "text-align: right;",
+    ";}",
+  ],
+  Array [
+    "@media screen and (min-width:",
+    "768",
+    "px){",
+    "text-align: right;",
+    ";}",
+  ],
+  Array [
+    "@media screen and (min-width:",
+    "992",
+    "px){",
+    "text-align: right;",
+    ";}",
+  ],
+  Array [
+    "@media screen and (min-width:",
+    "1200",
+    "px){",
+    "text-align: right;",
+    ";}",
+  ],
+]
+`;

src/theme/utils/propToStyle/index.js

@@ -0,0 +1,46 @@
+import { breakpointsMedia } from '../breakpointsMedia';
+
+export function propToStyle(propName) {
+  return (props) => {
+    const propValue = props[propName];
+
+    if (typeof propValue === 'string' || typeof propValue === 'number') {
+      return {
+        // textAlign: props.textAlign
+        [propName]: propValue,
+      };
+    }
+
+    if (typeof propValue === 'object') {
+      const breakpoints = {};
+
+      if (propValue.xs) breakpoints.xs = { [propName]: propValue.xs };
+      if (propValue.md) breakpoints.sm = { [propName]: propValue.md };
+      if (propValue.md) breakpoints.md = { [propName]: propValue.md };
+      if (propValue.md) breakpoints.lg = { [propName]: propValue.md };
+      if (propValue.md) breakpoints.xl = { [propName]: propValue.md };
+
+      return breakpointsMedia(breakpoints);
+
+      // return breakpointsMedia({
+      //   xs: {
+      //     [propName]: propValue.xs,
+      //   },
+      //   sm: {
+      //     [propName]: propValue.sm,
+      //   },
+      //   md: {
+      //     [propName]: propValue.md,
+      //   },
+      //   lg: {
+      //     [propName]: propValue.lg,
+      //   },
+      //   xl: {
+      //     [propName]: propValue.xl,
+      //   },
+      // });
+    }
+
+    return {};
+  };
+}

src/theme/utils/propToStyle/propToStyle.test.js

@@ -0,0 +1,39 @@
+import { propToStyle } from './index';
+
+describe('propToStyle()', () => {
+  describe('when receives an simple argument', () => {
+    test('and it is a string', () => {
+      const propToStyleResult = propToStyle('textAlign');
+      // <Text textAlign="center" />
+      const componentProps = { textAlign: 'center' }; // string
+      const styleResult = propToStyleResult(componentProps);
+      expect(styleResult).toEqual({ textAlign: 'center' });
+    });
+    test('and it is a number', () => {
+      const propToStyleResult = propToStyle('flex');
+      // <Text flex={1} />
+      const componentProps = { flex: 1 }; // number
+      const styleResult = propToStyleResult(componentProps);
+      expect(styleResult).toEqual({ flex: 1 });
+    });
+  });
+
+  describe('when receives an argument with breakpoints', () => {
+    test('renders only one breakpoint resolution', () => {
+      const propToStyleResult = propToStyle('textAlign');
+      // <Text textAlign="center" />
+      const componentProps = { textAlign: { xs: 'center' } }; // string
+      const styleResult = propToStyleResult(componentProps);
+
+      expect(styleResult).toMatchSnapshot();
+    });
+    test('renders two or more breakpoint resolutions', () => {
+      const propToStyleResult = propToStyle('textAlign');
+      // <Text textAlign="center" />
+      const componentProps = { textAlign: { xs: 'center', md: 'right' } }; // string
+      const styleResult = propToStyleResult(componentProps);
+
+      expect(styleResult).toMatchSnapshot();
+    });
+  });
+});