Merge branch 'master' of https://github.com/rahuldkjain/github-profile-readme-generator

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-lock.json

@@ -28673,4 +28673,4 @@
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
     }
   }
-}
+}

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__/donate.test.js.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Donate renders correctly 1`] = `
+Array [
+  <div
+    className="text-center text-4xl my-2"
+  >
+    Support 
+    <span
+      aria-label="praying hand emoji"
+      role="img"
+    >
+      🙏
+    </span>
+  </div>,
+  <div
+    className="flex flex-col sm:flex-row items-start justify-between"
+  >
+    <div
+      className="w-full sm:w-2/3"
+    >
+      <div
+        className="text-2xl mb-2"
+      >
+        Are you using the tool and happy with it to create your GitHub Profile?
+      </div>
+      <div
+        className="text-lg"
+      >
+        Your kind support keeps open-source tools like this free for others.
+      </div>
+      <div
+        className="mt-4"
+      >
+        <a
+          className="flex items-center justify-start w-20"
+          href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+        >
+          <img
+            alt="tweet github profile readme generator"
+            className="w-20"
+            src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator"
+          />
+        </a>
+        Let the world know how you feel using this tool. Share with others on twitter.
+      </div>
+    </div>
+    <div
+      className="w-full sm:w-1/3 flex flex-col justify-center items-center"
+    >
+      <span>
+        Tip
+        <span
+          aria-label="Dollar medal"
+          role="img"
+        >
+          💰
+        </span>
+      </span>
+      <a
+        className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
+        href="https://ko-fi.com/A0A81XXSX"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Buy ko-fi for rahuldkjain"
+          className="w-6 h-6 mr-2"
+          src="https://www.vectorlogo.zone/logos/ko-fi/ko-fi-icon.svg"
+        />
+        Buy me a ko-fi
+      </a>
+      <a
+        className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
+        href="https://www.paypal.me/rahuldkjain/10"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Donate rahuldkjain via paypal"
+          className="w-6 h-6 mr-2"
+          src="https://cdn.worldvectorlogo.com/logos/paypal-icon.svg"
+        />
+        Paypal
+      </a>
+      <a
+        className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
+        href="https://www.buymeacoffee.com/rahuldkjain"
+        rel="noreferrer"
+        target="_blank"
+      >
+        <img
+          alt="Buy rahuldkjain A Coffee"
+          className="w-6 h-6 mr-2"
+          src="https://www.vectorlogo.zone/logos/buymeacoffee/buymeacoffee-icon.svg"
+        />
+        Buy me a coffee
+      </a>
+    </div>
+  </div>,
+]
+`;

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

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer component Matches the snapshot 1`] = `
+<div
+  className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2"
+>
+  <div
+    className="w-full flex flex-col sm:flex-row justify-evenly py-2"
+  >
+    <div
+      className="ml-2 sm:ml-0 sm:mr-6 order-last sm:order-none flex"
+    >
+      <h1
+        className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0"
+      >
+        <div
+          className="flex sm:flex-col items-start mb-3 sm:mb-0"
+        >
+          <img
+            alt="github profile markdown generator logo"
+            className="hidden sm:block h-24"
+            src="test-file-stub"
+          />
+          <div
+            className="mr-2 sm:mr-0"
+          >
+            GitHub Profile
+             
+            <img
+              alt="github profile markdown generator logo"
+              className="inline sm:hidden h-12"
+              src="test-file-stub"
+            />
+            <span
+              className="block sm:inline"
+            >
+              README Generator
+            </span>
+          </div>
+        </div>
+      </h1>
+    </div>
+    <div
+      className="text-xl sm:text-base font-light sm:font-normal"
+    >
+      <div
+        className="font-title font-bold mb-4 sm:mb-2"
+      >
+        <strong>
+          Pages
+        </strong>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          href="/addons"
+        >
+          Addons
+        </a>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          href="/support"
+        >
+          Support
+        </a>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          href="/about"
+        >
+          About
+        </a>
+      </div>
+    </div>
+    <div
+      className="text-xl sm:text-base font-light sm:font-normal"
+    >
+      <div
+        className="font-title font-bold my-4 sm:my-0 sm:mb-2"
+      >
+        <strong>
+          More
+        </strong>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          aria-label="Github rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator"
+          target="blank"
+        >
+          Github
+        </a>
+      </div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
+        <a
+          aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
+          target="blank"
+        >
+          Releases
+        </a>
+      </div>
+      <div>
+        <a
+          aria-label="Issues in rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
+          target="blank"
+        >
+          Issues
+        </a>
+      </div>
+      <div>
+        <a
+          aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
+          href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
+          target="blank"
+        >
+          Pull Requests
+        </a>
+      </div>
+    </div>
+    <div>
+      <div
+        className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2"
+      >
+        <strong>
+          Join Community
+        </strong>
+      </div>
+      <div>
+        <a
+          aria-label="Discord of the community"
+          href="https://discord.gg/HHMs7Eg"
+          target="blank"
+        >
+          <img
+            alt="Discord of the community"
+            className="h-12"
+            src="test-file-stub"
+          />
+        </a>
+      </div>
+    </div>
+  </div>
+  <div
+    className="py-2 mt-2"
+  >
+    Developed in India
+     
+    <span
+      aria-label="india"
+      role="img"
+    >
+       
+      🇮🇳
+    </span>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader renders correctly 1`] = `
+<div
+  className="loader"
+>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+  <span>
+    ↓
+  </span>
+</div>
+`;

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Subtitle renders 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"
+  >
+    Subtitle
+  </div>
+  <input
+    className="outline-none w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+    id="subtitle"
+    onChange={[Function]}
+    value="A passionate frontend developer from India"
+  />
+</div>
+`;

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__/donate.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Donate from "../donate"
+
+describe("Donate", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Donate />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

src/components/__tests__/footer.test.js

@@ -0,0 +1,11 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Footer from "../footer"
+
+describe("Footer component", () => {
+  test("Matches the snapshot", () => {
+    const footer = renderer.create(<Footer />).toJSON();
+    expect(footer).toMatchSnapshot();
+  });
+});

src/components/__tests__/loader.test.js

@@ -0,0 +1,11 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Loader from "../loader"
+
+describe("Loader", () => {
+  it("renders correctly", () => {
+    const tree = renderer.create(<Loader />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

src/components/__tests__/subtitle.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Subtitle from "../subtitle"
+
+describe("Subtitle", () => {
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Subtitle data={{ subtitle: "A passionate frontend developer from India" }} />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

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 mockEvent = { target: { value: "This is a mock event" } },
-    const tree = renderer
+  props = {
-      .create(<Title prefix={{ title: "Hi 👋, I'm" }} data={{ title: "" }} />)
+    prefix: {
-      .toJSON()
+      title: "test_title",
-    expect(tree).toMatchSnapshot()
+      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();
+    });
+});

src/components/footer.js

@@ -7,7 +7,7 @@ const Footer = () => {
   return (
     <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
       <div className="w-full flex flex-col sm:flex-row justify-evenly py-2">
-        <div className="ml-2 sm:ml-0 sm:mr-6 order-last sm:order-none flex">
+        <div className="sm:ml-0 sm:mr-6 order-last sm:order-none flex">
           <h1 className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0">
             <div className="flex sm:flex-col items-start mb-3 sm:mb-0">
               <img
@@ -69,7 +69,7 @@ const Footer = () => {
               Releases
             </a>
           </div>
-          <div>
+          <div className="ml-2 sm:ml-0">
             <a
               href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
               aria-label="Issues in rahuldkjain/github-profile-readme-generator"
@@ -78,7 +78,7 @@ const Footer = () => {
               Issues
             </a>
           </div>
-          <div>
+          <div className="ml-2 sm:ml-0">
             <a
               href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
               aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
@@ -92,7 +92,7 @@ const Footer = () => {
           <div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
             <strong>Join Community</strong>
           </div>
-          <div>
+          <div class="ml-2 sm:ml-0">
             <a
               href="https://discord.gg/HHMs7Eg"
               aria-label="Discord of the community"

src/components/markdown.js

@@ -1,7 +1,10 @@
 import React from "react"
 import { isMediumUsernameValid } from "../utils/validation"
 import { icons, skills, skillWebsites } from "../constants/skills"
-import { githubStatsLinkGenerator, topLanguagesLinkGenerator } from "../utils/link-generators"
+import {
+  githubStatsLinkGenerator,
+  topLanguagesLinkGenerator,
+} from "../utils/link-generators"
 
 const Markdown = props => {
   const Title = props => {
@@ -81,11 +84,12 @@ const Markdown = props => {
     return ""
   }
   const VisitorsBadge = props => {
-    let link = "https://komarev.com/ghpvc/?username=" 
+    let link =
-                + props.github
+      "https://komarev.com/ghpvc/?username=" +
-                + `&label=${props.badgeOptions.badgeLabel}`
+      props.github +
-                + `&color=${props.badgeOptions.badgeColor}`
+      `&label=${props.badgeOptions.badgeLabel}` +
-                + `&style=${props.badgeOptions.badgeStyle}`
+      `&color=${props.badgeOptions.badgeColor}` +
+      `&style=${props.badgeOptions.badgeStyle}`
     if (props.show) {
       return (
         <>
@@ -98,7 +102,10 @@ const Markdown = props => {
     return ""
   }
   const TwitterBadge = props => {
-    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    let link =
+      "https://img.shields.io/twitter/follow/" +
+      props.twitter +
+      "?logo=twitter&style=for-the-badge"
     if (props.show) {
       return (
         <>
@@ -128,7 +135,10 @@ const Markdown = props => {
     if (show) {
       return (
         <>
-          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({github: github, options})}" alt="${github}" /></p>`}
+          {`<p>&nbsp;<img align="center" src="${githubStatsLinkGenerator({
+            github: github,
+            options,
+          })}" alt="${github}" /></p>`}
           <br />
           <br />
         </>
@@ -158,6 +168,7 @@ const Markdown = props => {
       social.topcoder ||
       social.hackerearth ||
       social.geeks_for_geeks ||
+      social.discord ||
       social.rssurl
     )
   }
@@ -205,7 +216,10 @@ const Markdown = props => {
       if (!props.showStats) {
         return (
           <>
-            {`<p><img align="center" src="${topLanguagesLinkGenerator({github: props.github, options: props.options})}" alt="${props.github}" /></p>`}
+            {`<p><img align="center" src="${topLanguagesLinkGenerator({
+              github: props.github,
+              options: props.options,
+            })}" alt="${props.github}" /></p>`}
             <br />
             <br />
           </>
@@ -213,7 +227,10 @@ const Markdown = props => {
       }
       return (
         <>
-          {`<p><img align="left" src="${topLanguagesLinkGenerator({github: props.github, options: props.options })}" alt="${props.github}" /></p>`}
+          {`<p><img align="left" src="${topLanguagesLinkGenerator({
+            github: props.github,
+            options: props.options,
+          })}" alt="${props.github}" /></p>`}
           <br />
           <br />
         </>
@@ -236,7 +253,7 @@ const Markdown = props => {
           badgeOptions={{
             badgeLabel: encodeURI(props.data.badgeLabel),
             badgeColor: props.data.badgeColor,
-            badgeStyle: props.data.badgeStyle
+            badgeStyle: props.data.badgeStyle,
           }}
         />
       </>
@@ -320,7 +337,10 @@ const Markdown = props => {
         <>
           <SectionTitle label="Connect with me:" />
           {`<p align="left">`}
-        </>) : ""}
+        </>
+      ) : (
+        ""
+      )}
       <br />
       <>
         <DisplaySocial
@@ -462,6 +482,13 @@ const Markdown = props => {
           username={props.social.topcoder}
         />
       </>
+      <>
+        <DisplaySocial
+          base="https://discord.gg"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
+          username={props.social.discord}
+        />
+      </>
       <>
         <DisplaySocial
           base=""

src/components/markdownPreview.js

@@ -1,6 +1,9 @@
 import React from "react"
 import { icons, skills, skillWebsites } from "../constants/skills"
-import { githubStatsLinkGenerator, topLanguagesLinkGenerator } from "../utils/link-generators"
+import {
+  githubStatsLinkGenerator,
+  topLanguagesLinkGenerator,
+} from "../utils/link-generators"
 
 const MarkdownPreview = props => {
   const TitlePreview = props => {
@@ -20,8 +23,7 @@ const MarkdownPreview = props => {
     return null
   }
   const SectionTitle = props => {
-    if (!props.visible)
+    if (!props.visible) return null
-      return null
     else if (props.label) {
       return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
     }
@@ -113,14 +115,13 @@ const MarkdownPreview = props => {
     return null
   }
   const SocialPreview = props => {
-    let viewSocial = false;
+    let viewSocial = false
     Object.keys(props.social).forEach(key => {
-      if (props.social[key] && key != 'github')
+      if (props.social[key] && key != "github") viewSocial = true
-        viewSocial = true;
     })
     return (
       <div className="flex justify-start items-end flex-wrap">
-        <SectionTitle label="Connect with me:" visible={viewSocial}/>
+        <SectionTitle label="Connect with me:" visible={viewSocial} />
         <DisplaySocial
           base="https://codepen.io"
           icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
@@ -222,6 +223,11 @@ const MarkdownPreview = props => {
           icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
           username={props.social.leetcode}
         />
+        <DisplaySocial
+          base="https://discord.gg"
+          icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
+          username={props.social.discord}
+        />
         <DisplaySocial
           base=""
           icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
@@ -231,11 +237,12 @@ const MarkdownPreview = props => {
     )
   }
   const VisitorsBadgePreview = props => {
-    let link = "https://komarev.com/ghpvc/?username=" 
+    let link =
-                + props.github
+      "https://komarev.com/ghpvc/?username=" +
-                + `&label=${props.badgeOptions.badgeLabel}`
+      props.github +
-                + `&color=${props.badgeOptions.badgeColor}`
+      `&label=${props.badgeOptions.badgeLabel}` +
-                + `&style=${props.badgeOptions.badgeStyle}`
+      `&color=${props.badgeOptions.badgeColor}` +
+      `&style=${props.badgeOptions.badgeStyle}`
     if (props.show) {
       return (
         <div className="text-left my-2">
@@ -247,7 +254,10 @@ const MarkdownPreview = props => {
     return null
   }
   const TwitterBadgePreview = props => {
-    let link = "https://img.shields.io/twitter/follow/" + props.twitter + "?logo=twitter&style=for-the-badge"
+    let link =
+      "https://img.shields.io/twitter/follow/" +
+      props.twitter +
+      "?logo=twitter&style=for-the-badge"
     if (props.show) {
       return (
         <div className="text-left my-2">
@@ -276,21 +286,27 @@ const MarkdownPreview = props => {
     return null
   }
 
-  const GitHubStatsPreview = ({github, options, show })=> {
+  const GitHubStatsPreview = ({ github, options, show }) => {
     if (show) {
       return (
         <div className="text-center mx-4 mb-4">
-          <img src={githubStatsLinkGenerator({github, options})} alt={github} />
+          <img
+            src={githubStatsLinkGenerator({ github, options })}
+            alt={github}
+          />
         </div>
       )
     }
     return null
   }
-  const TopLanguagesPreview = ({github, options, show})=> {
+  const TopLanguagesPreview = ({ github, options, show }) => {
     if (show) {
       return (
         <div className="text-center mx-4 mb-4">
-          <img src={topLanguagesLinkGenerator({github, options})} alt={props.github} />
+          <img
+            src={topLanguagesLinkGenerator({ github, options })}
+            alt={props.github}
+          />
         </div>
       )
     }
@@ -314,7 +330,7 @@ const MarkdownPreview = props => {
     })
     return listSkills.length > 0 ? (
       <div className="flex flex-wrap justify-start items-center">
-        <SectionTitle label="Languages and Tools:" visible={true}/>
+        <SectionTitle label="Languages and Tools:" visible={true} />
         {listSkills}
       </div>
     ) : (
@@ -331,7 +347,7 @@ const MarkdownPreview = props => {
         badgeOptions={{
           badgeLabel: encodeURI(props.data.badgeLabel),
           badgeColor: props.data.badgeColor,
-          badgeStyle: props.data.badgeStyle
+          badgeStyle: props.data.badgeStyle,
         }}
       />
       <GithubProfileTrophyPreview

src/components/social.js

@@ -303,6 +303,20 @@ const Social = props => {
             }
           />
         </div>
+        <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
+          <img
+            src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/discord.svg"
+            className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+            alt="discord"
+          />
+          <input
+            id="discord"
+            placeholder="discord invite (only code)"
+            className="outline-none placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+            value={props.social.discord}
+            onChange={event => props.handleSocialChange("discord", event)}
+          />
+        </div>
         <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
           <img
             src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/rss.svg"

src/constants/skills.js

@@ -105,6 +105,7 @@ const categorizedSkills = {
       "cockroachdb",
       "elasticsearch",
       "sqlite",
+      "mssql",
     ],
   },
 
@@ -432,6 +433,7 @@ const icons = {
   postman: "https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg",
   erlang: "https://www.vectorlogo.zone/logos/erlang/erlang-official.svg",
   sqlite: "https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg",
+  mssql: "https://cdn.worldvectorlogo.com/logos/microsoft-sql-server.svg",
   middleman:
     "https://raw.githubusercontent.com/leungwensen/svg-icon/b84b3f3a3da329b7c1d02346865f8e98beb05413/dist/svg/logos/middleman.svg",
   matlab: "https://raw.githubusercontent.com/simple-icons/simple-icons/master/icons/mathworks.svg",
@@ -579,6 +581,7 @@ const skillWebsites = {
   travisci: "https://travis-ci.org",
   apachecordova: "https://cordova.apache.org/",
   sqlite: "https://www.sqlite.org/",
+  mssql: "https://www.microsoft.com/en-us/sql-server",
   postman: "https://postman.com",
   erlang: "https://www.erlang.org/",
   middleman: "https://middlemanapp.com/",

src/pages/index.js

@@ -27,7 +27,7 @@ import SEO from "../components/seo"
 import {
   isGitHubUsernameValid,
   isMediumUsernameValid,
-  isTwitterUsernameValid
+  isTwitterUsernameValid,
 } from "../utils/validation"
 import Layout from "../components/layout"
 
@@ -117,6 +117,7 @@ const DEFAULT_SOCIAL = {
   topcoder: "",
   hackerearth: "",
   geeks_for_geeks: "",
+  discord: "",
   rssurl: "",
 }
 
@@ -184,7 +185,8 @@ const IndexPage = () => {
 
   const handleSocialChange = (field, e) => {
     let change = { ...social }
-    change[field] = e.target.value.toLowerCase()
+    change[field] =
+      field === "discord" ? e.target.value : e.target.value.toLowerCase()
     setSocial(change)
   }
 
@@ -472,7 +474,7 @@ const IndexPage = () => {
       )
       setSkills(restoreDataSkills || DEFAULT_SKILLS)
     } catch (error) {
-    } finally { 
+    } finally {
       setRestore("")
     }
   }
@@ -485,7 +487,7 @@ const IndexPage = () => {
       setRestore(reader.result)
     }
   }
-  
+
   return (
     <Layout>
       <div className="m-4 sm:p-4">
@@ -721,14 +723,14 @@ const IndexPage = () => {
               onChange={e => setRestore(e.target.value)}
             />
 
-            <div class="overflow-hidden relative w-64 mt-4 mb-4">
+            <div className="overflow-hidden relative w-64 mt-4 mb-4">
               <input
-                class="cursor-pointer absolute block opacity-0 pin-r pin-t before:cursor-pointer"
+                className="cursor-pointer absolute block opacity-0 pin-r pin-t before:cursor-pointer"
                 type="file"
                 name="vacancyImageFiles"
                 onChange={handleFileInput}
               />
-              <button class="text-xxs sm:text-sm border-2 w-40 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1">
+              <button className="text-xxs sm:text-sm border-2 w-40 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1">
                 Upload json file
               </button>
             </div>