Merge pull request #307 from VeenaDesai38/worktest

[add]: unit test cases for work component

jest.config.js

@@ -12,4 +12,13 @@ module.exports = {
     __PATH_PREFIX__: ``,
   },
   setupFiles: [`<rootDir>/loadershim.js`],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  "coverageThreshold": {
+    "global": {
+      "branches": 100,
+      "functions": 100,
+      "lines": 100,
+      "statements": 100
+    }
+  }
 }

package.json

@@ -6,6 +6,9 @@
   "author": "Rahul Jain <rahuldkjain@gmail.com>",
   "dependencies": {
     "@primer/octicons-react": "^10.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.6.1",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-google-analytics": "^2.3.11",
@@ -35,7 +38,6 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "26.4.2",
     "prettier": "2.0.5",
-    "react-test-renderer": "16.13.1",
     "tailwindcss": "^1.7.6"
   },
   "keywords": [
@@ -49,7 +51,7 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "jest",
+    "test": "jest -i -u --coverage",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public -b master"
   },
   "repository": {

src/components/__tests__/__snapshots__/title.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Title renders correctly 1`] = `
+exports[`Title renders title component correctly 1`] = `
 <div
   className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10"
 >
@@ -16,14 +16,14 @@ exports[`Title renders correctly 1`] = `
       className="outline-none w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
       id="title-prefix"
       onChange={[Function]}
-      value="Hi 👋, I'm"
+      value="test_title"
     />
     <input
       className="outline-none placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
       id="title-name"
       onChange={[Function]}
       placeholder="name"
-      value=""
+      value="test_data"
     />
   </div>
 </div>

src/components/__tests__/__snapshots__/work.test.js.snap

@@ -0,0 +1,184 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Work renders work component correctly 1`] = `
+<div
+  className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10"
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2"
+  >
+    Work
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentWork-prefix"
+      onChange={[Function]}
+      placeholder="Hi, I'm "
+      value="test_currentwork"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentWork"
+      onChange={[Function]}
+      placeholder="project name"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentWork-link"
+      onChange={[Function]}
+      placeholder="project link"
+      value="test_currentwork"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="collaborateOn-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="collaborateOn"
+      onChange={[Function]}
+      placeholder="project name"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="collaborateOn-link"
+      onChange={[Function]}
+      placeholder="project link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="helpWith-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="helpWith"
+      onChange={[Function]}
+      placeholder="project name"
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="helpWith-link"
+      onChange={[Function]}
+      placeholder="project link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentLearn-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="currentLearn"
+      onChange={[Function]}
+      placeholder="Frameworks, courses etc."
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="ama-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="ama"
+      onChange={[Function]}
+      placeholder="react, vue and gsap"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="contact-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="contact"
+      onChange={[Function]}
+      placeholder="example@gmail.com"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="portfolio-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="portfolio"
+      onChange={[Function]}
+      placeholder="portfolio link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="blog-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="blog"
+      onChange={[Function]}
+      placeholder="blog link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="resume-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="resume"
+      onChange={[Function]}
+      placeholder="resume link"
+    />
+  </div>
+  <div
+    className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0"
+  >
+    <input
+      className="outline-none mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="funFact-prefix"
+      onChange={[Function]}
+    />
+    <input
+      className="outline-none placeholder-gray-700 mr-8 sm:mr-0 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+      id="funFact"
+      onChange={[Function]}
+      placeholder="I think I am funny"
+    />
+  </div>
+</div>
+`;

src/components/__tests__/title.test.js

@@ -1,13 +1,30 @@
 import React from "react"
-import renderer from "react-test-renderer"
 
 import Title from "../title"
+import {configure, shallow} from "enzyme";
+import toJson from "enzyme-to-json";
+import Adapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new Adapter() });
 
 describe("Title", () => {
-  it("renders correctly", () => {
-    const tree = renderer
-      .create(<Title prefix={{ title: "Hi 👋, I'm" }} data={{ title: "" }} />)
-      .toJSON()
-    expect(tree).toMatchSnapshot()
-  })
+  const mockEvent = { target: { value: "This is a mock event" } },
+  props = {
+    prefix: {
+      title: "test_title",
+      currentWork: "test_currentwork"
+    },
+    data: {title: "test_data"},
+    link: {currentWork: "test_currentwork"},
+    handlePrefixChange: jest.fn().mockReturnValue({}),
+    handleLinkChange: jest.fn().mockReturnValue({}),
+    handleDataChange: jest.fn().mockReturnValue({}),
+  };
+
+  it("renders title component correctly", () => {
+    const component = shallow(<Title {...props}/>);
+    component.find('input').at(0).simulate('change', mockEvent);
+    component.find('input').at(1).simulate('change', mockEvent);
+    expect(toJson(component)).toMatchSnapshot();
+  });
 })

src/components/__tests__/work.test.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { shallow, configure } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+
+import Work from "../work"
+
+configure({ adapter: new Adapter() });
+
+describe("Work", () => {
+    const props = {
+            prefix: {
+                title: "test_title",
+                currentWork: "test_currentwork"
+            },
+            data: {title: "test_data"},
+            link: {currentWork: "test_currentwork"},
+            handlePrefixChange: jest.fn().mockReturnValue({}),
+            handleLinkChange: jest.fn().mockReturnValue({}),
+            handleDataChange: jest.fn().mockReturnValue({}),
+        },
+        mockEvent = { target: { value: "This is a mock event" } };
+
+    it("renders work component correctly", () => {
+        let i;
+        const component = shallow(<Work {...props}/>);
+        for (i = 0; i < component.find('input').length; i++) {
+            component.find('input').at(i).simulate('change', mockEvent);
+        }
+        expect(toJson(component)).toMatchSnapshot();
+    });
+});