Add unit test for Social component

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

@@ -8,7 +8,7 @@ exports[`Footer component Matches the snapshot 1`] = `
     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"
+      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"
@@ -110,7 +110,9 @@ exports[`Footer component Matches the snapshot 1`] = `
           Releases
         </a>
       </div>
-      <div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
         <a
           aria-label="Issues in rahuldkjain/github-profile-readme-generator"
           href="https://github.com/rahuldkjain/github-profile-readme-generator/issues"
@@ -119,7 +121,9 @@ exports[`Footer component Matches the snapshot 1`] = `
           Issues
         </a>
       </div>
-      <div>
+      <div
+        className="ml-2 sm:ml-0"
+      >
         <a
           aria-label="Pull Requests in rahuldkjain/github-profile-readme-generator"
           href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls"
@@ -137,7 +141,9 @@ exports[`Footer component Matches the snapshot 1`] = `
           Join Community
         </strong>
       </div>
-      <div>
+      <div
+        class="ml-2 sm:ml-0"
+      >
         <a
           aria-label="Discord of the community"
           href="https://discord.gg/HHMs7Eg"

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

@@ -0,0 +1,363 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social renders correctly 1`] = `
+<div
+  className="px-2 sm:px-6 mb-4"
+>
+  <div
+    className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2"
+  >
+    Social
+  </div>
+  <div
+    className="flex flex-wrap justify-center items-center"
+  >
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="github"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
+      />
+      <input
+        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-1 sm:px-2 focus:border-blue-700"
+        id="github"
+        onChange={[Function]}
+        placeholder="github username"
+        value="github"
+      />
+    </div>
+    <div
+      className="w-1/2  flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="twitter"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
+      />
+      <input
+        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"
+        id="twitter"
+        onChange={[Function]}
+        placeholder="twitter username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="dev.to"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
+      />
+      <input
+        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"
+        id="dev"
+        onChange={[Function]}
+        placeholder="dev.to username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codepen"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
+      />
+      <input
+        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"
+        id="codepen"
+        onChange={[Function]}
+        placeholder="codepen username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codesandbox"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
+      />
+      <input
+        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"
+        id="codesandbox"
+        onChange={[Function]}
+        placeholder="codesandbox username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="stackoverflow"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
+      />
+      <input
+        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"
+        id="stackoverflow"
+        onChange={[Function]}
+        placeholder="stackoverflow user ID"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="linkedin"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
+      />
+      <input
+        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"
+        id="linkedin"
+        onChange={[Function]}
+        placeholder="linkedin username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="kaggle"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
+      />
+      <input
+        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"
+        id="kaggle"
+        onChange={[Function]}
+        placeholder="kaggle username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="facebook"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
+      />
+      <input
+        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"
+        id="fb"
+        onChange={[Function]}
+        placeholder="facebook username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="instagram"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
+      />
+      <input
+        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"
+        id="instagram"
+        onChange={[Function]}
+        placeholder="instagram username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="dribbble"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/dribbble.svg"
+      />
+      <input
+        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"
+        id="dribbble"
+        onChange={[Function]}
+        placeholder="dribbble username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="behance"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/behance.svg"
+      />
+      <input
+        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"
+        id="behance"
+        onChange={[Function]}
+        placeholder="behance username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="medium"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/medium.svg"
+      />
+      <input
+        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"
+        id="medium"
+        onChange={[Function]}
+        placeholder="medium username (with @)"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="youtube"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/youtube.svg"
+      />
+      <input
+        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"
+        id="youtube"
+        onChange={[Function]}
+        placeholder="youtube channel name"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codechef"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codechef.svg"
+      />
+      <input
+        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"
+        id="codechef"
+        onChange={[Function]}
+        placeholder="codechef username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="hackerrank"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerrank.svg"
+      />
+      <input
+        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"
+        id="hackerrank"
+        onChange={[Function]}
+        placeholder="hackerrank username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="codeforces"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/codeforces.svg"
+      />
+      <input
+        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"
+        id="codeforces"
+        onChange={[Function]}
+        placeholder="codeforces username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="leetcode"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/leetcode.svg"
+      />
+      <input
+        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"
+        id="leetcode"
+        onChange={[Function]}
+        placeholder="leetcode username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="topcoder"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/topcoder.svg"
+      />
+      <input
+        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"
+        id="topcoder"
+        onChange={[Function]}
+        placeholder="topcoder username"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="hackerearth"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/hackerearth.svg"
+      />
+      <input
+        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"
+        id="hackerearth"
+        onChange={[Function]}
+        placeholder="hackerearth user (with @)"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="geeksforgeeks"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/geeksforgeeks.svg"
+      />
+      <input
+        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"
+        id="geeksforgeeks"
+        onChange={[Function]}
+        placeholder="GFG (<username>/profile)"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="discord"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/discord.svg"
+      />
+      <input
+        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"
+        id="discord"
+        onChange={[Function]}
+        placeholder="discord invite (only code)"
+      />
+    </div>
+    <div
+      className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0"
+    >
+      <img
+        alt="rssfeed"
+        className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4"
+        src="https://cdn.jsdelivr.net/npm/simple-icons@3.1.0/icons/rss.svg"
+      />
+      <input
+        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"
+        id="rssurl"
+        onChange={[Function]}
+        placeholder="RSS feed URL"
+      />
+    </div>
+  </div>
+</div>
+`;

src/components/__tests__/social.test.js

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