start tests (codesandbox#2322)

* start-tesrts

* add svg mock

* more themes

* fix jest

* fix ling

* delete obsolete

* revert eslint

* remove dep

* fix import

Author: SaraVieira

packages/app/src/app/pages/Patron/PricingModal/PricingChoice/Range/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Slider from 'rc-slider/lib/Slider';
-import 'rc-slider/assets/index.css';
+import 'rc-slider/dist/rc-slider.css';
 
 function Range(props) {
   return (

packages/app/src/app/pages/Sandbox/Editor/Navigation/Navigation.tsx

@@ -3,16 +3,22 @@ import { inject, hooksObserver } from 'app/componentConnectors';
 import PlusIcon from 'react-icons/lib/go/plus';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
 import InfoIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/sandbox.svg';
 // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
 import GitHubIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/github.svg';
 // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
 import LiveIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/live.svg';
 // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
 import FilesIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/file.svg';
 // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
 import RocketIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/rocket.svg';
 // @ts-ignore
+// eslint-disable-next-line import/no-unresolved
 import ConfigurationIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/cog.svg';
 import getWorkspaceItems, {
   getDisabledItems,

packages/common/package.json

@@ -11,7 +11,7 @@
     "lib"
   ],
   "scripts": {
-    "test": "jest",
+    "test": "NODE_ENV=test jest",
     "clean": "rimraf lib && yarn rimraf node_modules/@types/react-native",
     "start": "(yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib --watch)",
     "start:storybook": "start-storybook",
@@ -30,6 +30,7 @@
     "@sentry/browser": "^5.6.2",
     "@tippy.js/react": "^2.1.1",
     "babel-plugin-preval": "^3.0.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "codesandbox-api": "^0.0.22",
     "color": "0.11.4",
     "date-fns": "^2.0.0",
@@ -60,6 +61,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-async-to-generator": "^7.5.0",
     "@babel/plugin-transform-runtime": "^7.5.5",
+    "@codesandbox/template-icons": "^0.7.0",
     "@storybook/addon-a11y": "^5.1.11",
     "@storybook/addon-actions": "^5.1.9",
     "@storybook/addon-knobs": "^5.1.9",
@@ -81,16 +83,29 @@
     "babel-plugin-macros": "^2.6.1",
     "babel-plugin-system-import-transformer": "^4.0.0",
     "cpx": "^1.5.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.4.0",
     "jest": "^24.8.0",
+    "jest-environment-enzyme": "^7.1.0",
+    "jest-enzyme": "^7.1.0",
+    "jest-styled-components": "^6.3.3",
+    "jest-svg-transformer": "^1.0.0",
     "rimraf": "^2.6.3",
-    "typescript": "3.5.2"
+    "typescript": "3.5.2",
+    "yarn": "^1.17.3"
   },
   "jest": {
+    "testEnvironment": "enzyme",
+    "setupFilesAfterEnv": [
+      "<rootDir>src/test/setupTests.ts"
+    ],
     "moduleDirectories": [
       "node_modules"
     ],
     "transform": {
-      "^.+\\.(t|j)s$": "babel-jest"
+      "^.+\\.[t|j]sx?$": "babel-jest",
+      "^.+\\.svg$": "jest-svg-transformer"
     },
     "modulePathIgnorePatterns": [
       "lib"

…mon/src/__snapshots__/theme.test.js.snap …mon/src/__snapshots__/theme.test.ts.snappackages/common/src/__snapshots__/theme.test.js.snap renamed to packages/common/src/__snapshots__/theme.test.ts.snap packages/common/src/__snapshots__/theme.test.js.snap renamed to packages/common/src/__snapshots__/theme.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AutosizeInput /> rendering renders correctly 1`] = `ReactWrapper {}`;

packages/common/src/components/AutosizeInput/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,10 @@
+import 'jest-styled-components';
+import React from 'react';
+import mountWithTheme from '../../test/themeMount';
+import AutosizeInput from '.';
+
+describe('<AutosizeInput /> rendering', () => {
+  it('renders correctly', () => {
+    expect(mountWithTheme(<AutosizeInput />)).toMatchSnapshot();
+  });
+});

packages/common/src/components/AutosizeInput/index.test.tsx

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AutosizeTextArea /> rendering renders correctly 1`] = `ReactWrapper {}`;

packages/common/src/components/AutosizeTextArea/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,10 @@
+import 'jest-styled-components';
+import React from 'react';
+import mountWithTheme from '../../test/themeMount';
+import AutosizeTextArea from './';
+
+describe('<AutosizeTextArea /> rendering', () => {
+  it('renders correctly', () => {
+    expect(mountWithTheme(<AutosizeTextArea />)).toMatchSnapshot();
+  });
+});

packages/common/src/components/AutosizeTextArea/index.test.tsx

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> rendering Danger Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering Href Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering Secondary Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering Small Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering block Button 1`] = `ReactWrapper {}`;
+
+exports[`<Button /> rendering no props 1`] = `ReactWrapper {}`;

packages/common/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,30 @@
+import 'jest-styled-components';
+import React from 'react';
+import mountWithTheme from '../../test/themeMount';
+import { Button } from '.';
+
+describe('<Button /> rendering', () => {
+  it('no props', () => {
+    expect(mountWithTheme(<Button>Le button</Button>)).toMatchSnapshot();
+  });
+  it('Danger Button', () => {
+    expect(mountWithTheme(<Button danger>Le button</Button>)).toMatchSnapshot();
+  });
+  it('Secondary Button', () => {
+    expect(
+      mountWithTheme(<Button secondary>Le button</Button>)
+    ).toMatchSnapshot();
+  });
+  it('Small Button', () => {
+    expect(mountWithTheme(<Button small>Le button</Button>)).toMatchSnapshot();
+  });
+  it('block Button', () => {
+    expect(mountWithTheme(<Button block>Le button</Button>)).toMatchSnapshot();
+  });
+
+  it('Href Button', () => {
+    expect(
+      mountWithTheme(<Button href="#">Le button</Button>)
+    ).toMatchSnapshot();
+  });
+});