add first test (#98)

* added enzyme

* added all the revelant libs

* added a sample test for common-banner component

* removed redundant presets

* removed babel/jest

Author: Zubair Ahmed

.babelrc

@@ -7,10 +7,7 @@
       "presets": "next/babel"
     },
     "test": {
-      "presets": [
-        ["env", { "modules": "commonjs" }],
-        "next/babel"
-      ]
+      "presets": [["env", { "modules": "commonjs" }], "next/babel"]
     }
   },
   "plugins": [

__tests__/__snapshots__/common-banner.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing CommonBanner of \`components/common-banner\` Check the snapshot 1`] = `
+<div
+  className="jsx-1924801089"
+>
+  <div
+    className="jsx-1924801089 root"
+  >
+    <h1
+      className="jsx-1924801089 headline"
+    />
+    <h2
+      className="jsx-1924801089"
+    />
+  </div>
+  <JSXStyle
+    css=".root.jsx-1924801089{background-color:#f4f7fb;min-height:150px;text-align:center;padding-top:30px;padding-bottom:30px;}.headline.jsx-1924801089{font-size:4em;color:#df1cb5;font-weight:900;}h2.jsx-1924801089{max-width:1024px;margin-left:auto;margin-right:auto;-webkit-letter-spacing:2px;-moz-letter-spacing:2px;-ms-letter-spacing:2px;letter-spacing:2px;line-height:2;}@media (max-width:720px){h2.jsx-1924801089{font-size:14px;padding:0 10px;}}"
+    styleId="1924801089"
+  />
+</div>
+`;

__tests__/common-banner.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import CommonBanner from '../components/common-banner';
+
+describe('Testing CommonBanner of `components/common-banner`', () => {
+  const shallowWrapper = shallow(<CommonBanner />);
+
+  it('Check the snapshot', () => {
+    expect(shallowWrapper).toMatchSnapshot();
+  });
+
+  it('should have title tag rendered', () => {
+    expect(shallowWrapper.find('h1').length).toBe(1);
+  });
+
+  it('should have subtitle tag rendered', () => {
+    expect(shallowWrapper.find('h2').length).toBe(1);
+  });
+
+  describe('should render the props', () => {
+    const pageTitle = 'title of the page';
+    const pageSubTitle = 'Subtitle of the page';
+    const rootWrapper = shallow(
+      <CommonBanner pageTitle={pageTitle} pageSubTitle={pageSubTitle} />,
+    );
+
+    it('should display title', () => {
+      const headerElement = rootWrapper.find('.headline');
+      expect(headerElement.props().children).toEqual(pageTitle);
+    });
+
+    it('should display subtitle', () => {
+      const subHeaderElement = rootWrapper.find('h2');
+      expect(subHeaderElement.props().children).toEqual(pageSubTitle);
+    });
+  });
+});

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  verbose: true,
+  setupFiles: ['./jest.setup.js'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+};

jest.setup.js

@@ -0,0 +1,7 @@
+/* eslint import/no-unassigned-import:0 */
+import 'raf/polyfill';
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

package.json

@@ -58,13 +58,18 @@
     "babel-eslint": "^8.0.1",
     "babel-plugin-lodash": "^3.2.11",
     "cross-env": "^5.0.2",
+    "enzyme": "^3.1.1",
+    "enzyme-adapter-react-16": "^1.0.4",
+    "enzyme-to-json": "^3.2.2",
     "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-react": "^7.1.0",
     "husky": "^0.14.3",
     "jest": "^21.2.1",
     "lint-staged": "^4.0.2",
     "opn": "^5.1.0",
     "prettier": "^1.7.0",
+    "raf": "^3.4.0",
+    "react-test-renderer": "^16.0.0",
     "webpack-bundle-analyzer": "^2.8.3",
     "xo": "^0.18.2"
   },
@@ -81,5 +86,5 @@
   "bugs": {
     "url": "https://github.com/coderplex/coderplex/issues"
   },
-  "homepage": "https://github.com/coderplex/coderplex#readme"
+  "homepage": "https://coderplex.org"
 }