tech: add snapshot test for add ons component
This commit is contained in:
Anusha S
@@ -0,0 +1,267 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Addons 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"
|
||||
>
|
||||
Add-ons
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="visitors-count"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="visitors-count"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display visitors count badge
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
className="flex ml-3 focus:bg-gray-400"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="transform scale-100 md:scale-125"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
|
||||
}
|
||||
}
|
||||
fill="currentColor"
|
||||
height={16}
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
"userSelect": "none",
|
||||
"verticalAlign": "text-bottom",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="github-profile-trophy"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="github-profile-trophy"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display github trophy
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="github-stats"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="github-stats"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display github profile stats card
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
className="flex ml-3 focus:bg-gray-400"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="transform scale-100 md:scale-125"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
|
||||
}
|
||||
}
|
||||
fill="currentColor"
|
||||
height={16}
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
"userSelect": "none",
|
||||
"verticalAlign": "text-bottom",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="top-languages"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="top-languages"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display top skills
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
className="flex ml-3 focus:bg-gray-400"
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="transform scale-100 md:scale-125"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
|
||||
}
|
||||
}
|
||||
fill="currentColor"
|
||||
height={16}
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"display": "inline-block",
|
||||
"userSelect": "none",
|
||||
"verticalAlign": "text-bottom",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width={16}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="twitter-badge"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="twitter-badge"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display twitter badge
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="dev-dynamic-blogs"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="dev-dynamic-blogs"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display latest dev.to blogs dynamically (GitHub Action)
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="medium-dynamic-blogs"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="medium-dynamic-blogs"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display latest medium blogs dynamically (GitHub Action)
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="py-2 flex justify-start items-center text-sm sm:text-lg"
|
||||
>
|
||||
<label
|
||||
className="cursor-pointer flex items-center"
|
||||
htmlFor="rss-dynamic-blogs"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="rss-dynamic-blogs"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pl-4"
|
||||
>
|
||||
display latest blogs from your personal blog dynamically (GitHub Action)
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,95 @@
|
||||
import React from "react"
|
||||
import renderer from "react-test-renderer"
|
||||
|
||||
import Addons from "../addons"
|
||||
|
||||
describe("Addons", () => {
|
||||
const dataInput = {
|
||||
title: "",
|
||||
subtitle: "A passionate frontend developer from India",
|
||||
currentWork: "",
|
||||
currentLearn: "",
|
||||
collaborateOn: "",
|
||||
helpWith: "",
|
||||
ama: "",
|
||||
contact: "",
|
||||
funFact: "",
|
||||
twitterBadge: false,
|
||||
visitorsBadge: false,
|
||||
badgeStyle: "flat",
|
||||
badgeColor: "0e75b6",
|
||||
badgeLabel: "Profile views",
|
||||
githubProfileTrophy: false,
|
||||
githubStats: false,
|
||||
githubStatsOptions: {
|
||||
theme: "",
|
||||
titleColor: "",
|
||||
textColor: "",
|
||||
bgColor: "",
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: "en",
|
||||
},
|
||||
topLanguages: false,
|
||||
topLanguagesOptions: {
|
||||
theme: "",
|
||||
titleColor: "",
|
||||
textColor: "",
|
||||
bgColor: "",
|
||||
hideBorder: false,
|
||||
cacheSeconds: null,
|
||||
locale: "en",
|
||||
},
|
||||
devDynamicBlogs: false,
|
||||
mediumDynamicBlogs: false,
|
||||
rssDynamicBlogs: false,
|
||||
};
|
||||
const socialInput = {
|
||||
github: "",
|
||||
dev: "",
|
||||
linkedin: "",
|
||||
codepen: "",
|
||||
stackoverflow: "",
|
||||
kaggle: "",
|
||||
codesandbox: "",
|
||||
fb: "",
|
||||
instagram: "",
|
||||
twitter: "",
|
||||
dribbble: "",
|
||||
behance: "",
|
||||
medium: "",
|
||||
youtube: "",
|
||||
codechef: "",
|
||||
hackerrank: "",
|
||||
codeforces: "",
|
||||
leetcode: "",
|
||||
topcoder: "",
|
||||
hackerearth: "",
|
||||
geeks_for_geeks: "",
|
||||
discord: "",
|
||||
rssurl: "",
|
||||
};
|
||||
|
||||
let mockHandleCheckChange;
|
||||
let mockHandleDataChange;
|
||||
beforeEach(() => {
|
||||
mockHandleCheckChange = jest.fn();
|
||||
mockHandleDataChange = jest.fn();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer
|
||||
.create(<Addons
|
||||
data={dataInput}
|
||||
social={socialInput}
|
||||
handleCheckChange={mockHandleCheckChange}
|
||||
handleDataChange={mockHandleDataChange}
|
||||
/>)
|
||||
.toJSON()
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user