Merge pull request #37 from DiogoMalfatti/jest-config

feat: jest ok

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.test.js

@@ -0,0 +1,8 @@
+import redirects from './redirects';
+
+// Test Driven Development
+describe('config/redirects', () => {
+  test('renders all current redirects', () => {
+    expect(redirects).toMatchSnapshot(); // Fotografia/Insta/Polaroid
+  });
+});

jest.config.js

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

package.json

@@ -8,16 +8,21 @@
     "start": "next start",
     "lint": "eslint --ignore-path .gitignore .",
     "commit": "cz",
+		"test": "jest",
+    "test:watch": "jest --watch",
     "test:integration:open": "cypress open",
-		"test:integration": "cypress run --headless"
+    "test:integration": "cypress run --headless"
   },
   "dependencies": {
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
     "@crello/react-lottie": "^0.0.11",
+    "@types/jest": "^26.0.22",
     "cypress": "^6.8.0",
     "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-jest": "^24.3.2",
     "framer-motion": "^3.7.0",
+    "jest": "^26.6.3",
     "lodash": "^4.17.20",
     "next": "latest",
     "nookies": "^2.5.2",

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

@@ -0,0 +1,38 @@
+// 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;",
+    "}",
+  ],
+  Array [
+    "@media screen and (min-width:",
+    "768",
+    "px){",
+    "}",
+  ],
+]
+`;
+
+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:",
+    "768",
+    "px){",
+    "text-align: right;",
+    "}",
+  ],
+]
+`;

src/theme/utils/propToStyle/index.js

@@ -0,0 +1,43 @@
+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.md = { [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();
+    });
+  });
+});