tech: add more test cases for coverage

This commit is contained in:
Anusha S
2020-10-27 01:35:04 +05:30
parent 12315be78b
commit a93d958944
5 changed files with 3299 additions and 35 deletions
+1
View File
@@ -10,6 +10,7 @@ module.exports = {
transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
globals: {
__PATH_PREFIX__: ``,
__BASE_PATH__: ``,
},
setupFiles: [`<rootDir>/loadershim.js`],
setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
File diff suppressed because it is too large Load Diff
@@ -1,69 +1,578 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DisplaySocial Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`DisplaySocial Preview renders correctly 1`] = `
<a
className="no-underline text-blue-700 m-2"
href="https://codepen.io/dummy"
target="blank"
>
<img
alt="props.username"
className="w-6 h-6"
src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
/>
</a>
`;
exports[`DisplaySocial Preview renders correctly with no username 1`] = `ShallowWrapper {}`;
exports[`DisplaySocial Preview renders correctly with no username 1`] = `""`;
exports[`DisplayWork Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly 1`] = `
<div
className="my-2"
>
[object Object]
<a
className="no-underline text-blue-700"
href="https://dummy.com"
target="blank"
>
readme-generator
</a>
</div>
`;
exports[`DisplayWork Preview renders correctly with no link 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no link 1`] = `
<div
className="my-2"
>
[object Object]
<b>
readme-generator
</b>
</div>
`;
exports[`DisplayWork Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no prefix 1`] = `""`;
exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `""`;
exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `""`;
exports[`DisplayWork Preview renders correctly with no project 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no project 1`] = `
<div
className="my-2"
>
[object Object]
<a
className="no-underline text-blue-700"
href="https://dummy.com"
target="blank"
>
https://dummy.com
</a>
</div>
`;
exports[`DisplayWork Preview renders correctly with no project and link 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no project and link 1`] = `""`;
exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `""`;
exports[`GitHubStats Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`GitHubStats Preview renders correctly 1`] = `""`;
exports[`GitHubStats Preview renders correctly 2`] = `ShallowWrapper {}`;
exports[`GitHubStats Preview renders correctly 2`] = `
<div
className="text-center mx-4 mb-4"
>
<img
alt=""
src="https://github-readme-stats.vercel.app/api?username=&show_icons=true&locale=en"
/>
</div>
`;
exports[`GithubProfileTrophy Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`GithubProfileTrophy Preview renders correctly 1`] = `""`;
exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`GithubProfileTrophy Preview renders correctly with show true 1`] = `
<div
className="text-left my-2"
>
<a
href="https://github.com/ryo-ma/github-profile-trophy"
>
<img
alt=""
src="https://github-profile-trophy.vercel.app/?username="
/>
</a>
</div>
`;
exports[`Markdown Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`Markdown Preview renders correctly 1`] = `
<div
id="markdown-preview"
>
<TitlePreview
prefix="Hi 👋, I'm"
title="dummy"
/>
<SubTitlePreview
subtitle="A passionate frontend developer from India"
/>
<VisitorsBadgePreview
badgeOptions={
Object {
"badgeColor": "0e75b6",
"badgeLabel": "Profile%20views",
"badgeStyle": "flat",
}
}
github=""
show={false}
/>
<GithubProfileTrophyPreview
github=""
show={false}
/>
<TwitterBadgePreview
show={false}
twitter=""
/>
<WorkPreview
work={
Object {
"data": Object {
"ama": "",
"badgeColor": "0e75b6",
"badgeLabel": "Profile views",
"badgeStyle": "flat",
"collaborateOn": "",
"contact": "",
"currentLearn": "",
"currentWork": "readme-generator",
"devDynamicBlogs": false,
"funFact": "",
"githubProfileTrophy": false,
"githubStats": false,
"githubStatsOptions": Object {
"bgColor": "",
"cacheSeconds": null,
"hideBorder": false,
"locale": "en",
"textColor": "",
"theme": "",
"titleColor": "",
},
"helpWith": "",
"mediumDynamicBlogs": false,
"rssDynamicBlogs": false,
"subtitle": "A passionate frontend developer from India",
"title": "dummy",
"topLanguages": false,
"topLanguagesOptions": Object {
"bgColor": "",
"cacheSeconds": null,
"hideBorder": false,
"locale": "en",
"textColor": "",
"theme": "",
"titleColor": "",
},
"twitterBadge": false,
"visitorsBadge": false,
},
"link": Object {
"blog": "",
"collaborateOn": "",
"currentWork": "https://dummy.com",
"helpWith": "",
"portfolio": "",
"resume": "",
},
"prefix": Object {
"ama": "💬 Ask me about",
"blog": "📝 I regulary write articles on",
"collaborateOn": "👯 Im looking to collaborate on",
"contact": "📫 How to reach me",
"currentLearn": "🌱 Im currently learning",
"currentWork": "🔭 Im currently working on",
"funFact": "⚡ Fun fact",
"helpWith": "🤝 Im looking for help with",
"portfolio": "👨‍💻 All of my projects are available at",
"resume": "📄 Know about my experiences",
"title": "Hi 👋, I'm",
},
"skills": Object {},
"social": Object {
"behance": "",
"codechef": "",
"codeforces": "",
"codepen": "dummy",
"codesandbox": "",
"dev": "",
"discord": "",
"dribbble": "",
"fb": "",
"geeks_for_geeks": "",
"github": "",
"hackerearth": "",
"hackerrank": "",
"instagram": "",
"kaggle": "",
"leetcode": "",
"linkedin": "",
"medium": "",
"rssurl": "",
"stackoverflow": "",
"topcoder": "",
"twitter": "",
"youtube": "",
},
}
}
/>
<SocialPreview
social={
Object {
"behance": "",
"codechef": "",
"codeforces": "",
"codepen": "dummy",
"codesandbox": "",
"dev": "",
"discord": "",
"dribbble": "",
"fb": "",
"geeks_for_geeks": "",
"github": "",
"hackerearth": "",
"hackerrank": "",
"instagram": "",
"kaggle": "",
"leetcode": "",
"linkedin": "",
"medium": "",
"rssurl": "",
"stackoverflow": "",
"topcoder": "",
"twitter": "",
"youtube": "",
}
}
/>
<SkillsPreview
skills={Object {}}
/>
<div
className="block sm:flex sm:justify-center sm:items-start"
>
<TopLanguagesPreview
github=""
options={
Object {
"bgColor": "",
"cacheSeconds": null,
"hideBorder": false,
"locale": "en",
"textColor": "",
"theme": "",
"titleColor": "",
}
}
show={false}
/>
<GitHubStatsPreview
github=""
options={
Object {
"bgColor": "",
"cacheSeconds": null,
"hideBorder": false,
"locale": "en",
"textColor": "",
"theme": "",
"titleColor": "",
}
}
show={false}
/>
</div>
</div>
`;
exports[`SectionTitle Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`SectionTitle Preview renders correctly 1`] = `
<h3
className="w-full text-lg sm:text-xl"
>
dummy
</h3>
`;
exports[`SectionTitle Preview renders correctly with no label 1`] = `ShallowWrapper {}`;
exports[`SectionTitle Preview renders correctly with no label 1`] = `""`;
exports[`SectionTitle Preview renders correctly with visible false 1`] = `ShallowWrapper {}`;
exports[`SectionTitle Preview renders correctly with visible false 1`] = `""`;
exports[`Skills Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`Skills Preview renders correctly 1`] = `
<div
className="flex flex-wrap justify-start items-center"
>
<SectionTitle
label="Languages and Tools:"
visible={true}
/>
<a
href="https://unity.com/"
rel="noreferrer"
target="_blank"
>
<img
alt="unity"
className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
key="unity"
src="https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
/>
</a>
</div>
`;
exports[`Skills Preview renders correctly with no skills 1`] = `ShallowWrapper {}`;
exports[`Skills Preview renders correctly with no skills 1`] = `""`;
exports[`Social Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`Social Preview renders correctly 1`] = `
<div
className="flex justify-start items-end flex-wrap"
>
<SectionTitle
label="Connect with me:"
visible={true}
/>
<DisplaySocial
base="https://codepen.io"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
username="dummy"
/>
<DisplaySocial
base="https://dev.to"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
username=""
/>
<DisplaySocial
base="https://twitter.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
username=""
/>
<DisplaySocial
base="https://linkedin.com/in"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
username=""
/>
<DisplaySocial
base="https://stackoverflow.com/users"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
username=""
/>
<DisplaySocial
base="https://codesandbox.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
username=""
/>
<DisplaySocial
base="https://kaggle.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
username=""
/>
<DisplaySocial
base="https://fb.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
username=""
/>
<DisplaySocial
base="https://instagram.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
username=""
/>
<DisplaySocial
base="https://dribbble.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
username=""
/>
<DisplaySocial
base="https://www.behance.net"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
username=""
/>
<DisplaySocial
base="https://medium.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
username=""
/>
<DisplaySocial
base="https://www.youtube.com/c"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
username=""
/>
<DisplaySocial
base="https://www.codechef.com/users"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
username=""
/>
<DisplaySocial
base="https://codeforces.com/profile"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
username=""
/>
<DisplaySocial
base="https://www.hackerrank.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
username=""
/>
<DisplaySocial
base="https://auth.geeksforgeeks.org/user"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
username=""
/>
<DisplaySocial
base="https://www.hackerearth.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
username=""
/>
<DisplaySocial
base="https://www.topcoder.com/members"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
username=""
/>
<DisplaySocial
base="https://www.leetcode.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/leetcode.svg"
username=""
/>
<DisplaySocial
base="https://discord.gg"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/discord.svg"
username=""
/>
<DisplaySocial
base=""
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/rss.svg"
username=""
/>
</div>
`;
exports[`SubTitle Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`SubTitle Preview renders correctly 1`] = `
<h3
className="text-center font-medium"
>
A passionate frontend developer from India
</h3>
`;
exports[`SubTitle Preview renders correctly with no subtitle 1`] = `ShallowWrapper {}`;
exports[`SubTitle Preview renders correctly with no subtitle 1`] = `""`;
exports[`Title Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`Title Preview renders correctly 1`] = `
<h1
className="text-center text-xl font-bold"
>
Hi 👋, I'm dummy
</h1>
`;
exports[`Title Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
exports[`Title Preview renders correctly with no prefix 1`] = `""`;
exports[`Title Preview renders correctly with no title 1`] = `ShallowWrapper {}`;
exports[`Title Preview renders correctly with no title 1`] = `""`;
exports[`Title Preview renders correctly with no title and prefix 1`] = `ShallowWrapper {}`;
exports[`Title Preview renders correctly with no title and prefix 1`] = `""`;
exports[`TopLanguages Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`TopLanguages Preview renders correctly 1`] = `
<div
className="text-center mx-4 mb-4"
>
 
</div>
`;
exports[`TopLanguages Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`TopLanguages Preview renders correctly with show true 1`] = `
<div
className="text-center mx-4 mb-4"
>
<img
alt=""
src="https://github-readme-stats.vercel.app/api/top-langs?username=&show_icons=true&locale=en&layout=compact"
/>
</div>
`;
exports[`TwitterBadgePreview Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`TwitterBadgePreview Preview renders correctly 1`] = `""`;
exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`TwitterBadgePreview Preview renders correctly with show true 1`] = `
<div
className="text-left my-2"
>
<a
href="https://twitter.com/\${props.twitter}"
target="blank"
>
<img
alt=""
className="h-4 sm:h-6"
src="https://img.shields.io/twitter/follow/?logo=twitter&style=for-the-badge"
/>
</a>
</div>
`;
exports[`VisitorsBadge Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`VisitorsBadge Preview renders correctly 1`] = `""`;
exports[`VisitorsBadge Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`VisitorsBadge Preview renders correctly with show true 1`] = `
<div
className="text-left my-2"
>
<img
alt=""
className="h-4 sm:h-6"
src="https://komarev.com/ghpvc/?username=&label=Profile%20views&color=0e75b6&style=flat"
/>
</div>
`;
exports[`Work Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`Work Preview renders correctly 1`] = `
<Fragment>
<DisplayWork
link="https://dummy.com"
prefix="🔭 Im currently working on"
project="readme-generator"
/>
<DisplayWork
prefix="🌱 Im currently learning"
project=""
/>
<DisplayWork
link=""
prefix="🤝 Im looking for help with"
project=""
/>
<DisplayWork
link=""
prefix="👯 Im looking to collaborate on"
project=""
/>
<DisplayWork
prefix="💬 Ask me about"
project=""
/>
<DisplayWork
link=""
prefix="👨‍💻 All of my projects are available at"
/>
<DisplayWork
link=""
prefix="📝 I regulary write articles on"
/>
<DisplayWork
link=""
prefix="📄 Know about my experiences"
/>
<DisplayWork
prefix="📫 How to reach me"
project=""
/>
<DisplayWork
prefix="⚡ Fun fact"
project=""
/>
</Fragment>
`;
+672 -1
View File
@@ -1,9 +1,11 @@
import React from "react"
import toJson from "enzyme-to-json"
import { shallow } from "enzyme"
import { shallow, mount } from "enzyme"
import Addons from "../addons"
jest.useFakeTimers();
describe("Addons", () => {
const dataInput = {
title: "",
@@ -92,4 +94,673 @@ describe("Addons", () => {
expect(toJson(addOnComponent)).toMatchSnapshot();
});
it("should render Customize Badges", () => {
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value"
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
expect(addOnComponent).toMatchSnapshot();
});
it("should handle data change when badge style is changed", () => {
const mockEvent = { target: { value: "style-new" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
theme: "theme-1",
titleColor: "title-abcd",
textColor: "some-color",
bgColor: "abcd",
hideBorder: false,
cacheSeconds: null,
locale: "en",
},
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
addOnComponent.find("#badge-style").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('badgeStyle',{target: {value: "style-new" }});
});
it("should handle data change when badge color is changed", () => {
const mockEvent = { target: { value: "new-color-abcd" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value"
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
addOnComponent.find("#badge-color").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('badgeColor',{target: {value: "new-color-abcd" }});
});
it("should handle data change when badge-label-text is changed", () => {
const mockEvent = { target: { value: "label-abcd-random" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value"
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#visitors-count-open-btn").simulate("click",{});
addOnComponent.find("#badge-label-text").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('badgeLabel',{target: {value: "label-abcd-random" }});
});
it("should render Customize Github stats card", () => {
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value"
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click",{});
expect(addOnComponent).toMatchSnapshot();
});
it("should handle data change when stats theme is changed", () => {
const mockEvent = { target: { value: "new-theme-for-stats" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
titleColor: "title-abcd",
textColor: "some-color",
bgColor: "abcd",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click",{});
addOnComponent.find("#stats-theme").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
target: {
value: {
theme: "theme-1",
titleColor: "title-abcd",
textColor: "some-color",
bgColor: "abcd",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
}
});
});
it("should handle data change when stats title color is changed", () => {
const mockEvent = { target: { value: "red-color" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
theme: "theme-1",
textColor: "some-color",
bgColor: "abcd",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click",{});
addOnComponent.find("#stats-title-color").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
target: {
value: {
theme: "theme-1",
titleColor: "red-color",
textColor: "some-color",
bgColor: "abcd",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
}
});
});
it("should handle data change when stats bg color is changed", () => {
const mockEvent = { target: { value: "random-color" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click",{});
addOnComponent.find("#stats-bg-color").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
target: {
value: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
bgColor: "random-color",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
}
});
});
it("should handle data change when stats cache seconds is changed", () => {
const mockEvent = { target: { value: 1900 } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
bgColor: "random-color",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click",{});
addOnComponent.find("#stats-cache-seconds").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
target: {
value: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
bgColor: "random-color",
hideBorder: false,
cacheSeconds: 1900,
theme: "new-theme-for-stats",
locale: "en",
}
}
});
});
it("should handle data change when stats text color is changed", () => {
const mockEvent = { target: { value: "black-color" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
theme: "theme-1",
titleColor: "some-color",
bgColor: "abcd",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click",{});
addOnComponent.find("#stats-text-color").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
target: {
value: {
theme: "theme-1",
titleColor: "some-color",
textColor: "black-color",
bgColor: "abcd",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
}
});
});
it("should handle data change when stats local is changed", () => {
const mockEvent = { target: { value: 'uk' } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
bgColor: "random-color",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click", {});
addOnComponent.find("#stats-locale").simulate("change", mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
target: {
value: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
bgColor: "random-color",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "uk",
}
}
});
});
it("should handle data change when stats local is changed", () => {
const mockEvent = { target: { checked: true } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
githubStatsOptions: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
bgColor: "random-color",
hideBorder: false,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#github-stats-open-btn").simulate("click",{});
addOnComponent.find("#stats-hide-border").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('githubStatsOptions', {
target: {
value: {
theme: "theme-1",
titleColor: "some-color",
textColor: "abcd",
bgColor: "random-color",
hideBorder: true,
cacheSeconds: null,
theme: "new-theme-for-stats",
locale: "en",
}
}
});
})
it("should render Customize Top Skills Card", () => {
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value"
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#top-languages-open-btn").simulate("click",{});
expect(addOnComponent).toMatchSnapshot();
});
it("should handle data change when top skills theme is changed", () => {
const mockEvent = { target: { value: "theme-xyz" } }
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value",
topLanguagesOptions : {
theme: "theme-2",
titleColor: "title-abcd-new",
textColor: "random-some-color",
bgColor: "1234",
hideBorder: false,
cacheSeconds: null,
theme: "theme-xyz",
locale: "us",
}
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = mount(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#top-languages-open-btn").simulate("click",{});
addOnComponent.find("#top-lang-theme").simulate("change",mockEvent);
jest.runAllTimers();
expect(mockHandleDataChange).toHaveBeenCalledTimes(1);
expect(mockHandleDataChange).toHaveBeenCalledWith('topLanguagesOptions', {
target: {
value: {
theme: "theme-2",
titleColor: "title-abcd-new",
textColor: "random-some-color",
bgColor: "1234",
hideBorder: false,
cacheSeconds: null,
theme: "theme-xyz",
locale: "us",
}
}
});
});
it("should handle check change when add on item inputs are changed", () => {
const mockEvent = { target: { value: "This is a mock event" } }
const addOnComponent = mount(<Addons
data={dataInput}
social={socialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#visitors-count").simulate("change", mockEvent);
addOnComponent.find("#github-profile-trophy").simulate("change", mockEvent);
addOnComponent.find("#github-stats").simulate("change", mockEvent);
addOnComponent.find("#top-languages").simulate("change", mockEvent);
addOnComponent.find("#twitter-badge").simulate("change", mockEvent);
addOnComponent.find("#dev-dynamic-blogs").simulate("change", mockEvent);
addOnComponent.find("#rss-dynamic-blogs").simulate("change", mockEvent);
addOnComponent.find("#medium-dynamic-blogs").simulate("change", mockEvent);
expect(mockHandleCheckChange).toHaveBeenCalledTimes(8);
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(1,"visitorsBadge");
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(2,"githubProfileTrophy");
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(3,"githubStats");
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(4,"topLanguages");
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(5,"twitterBadge");
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(6,"devDynamicBlogs");
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(7,"rssDynamicBlogs");
expect(mockHandleCheckChange).toHaveBeenNthCalledWith(8,"mediumDynamicBlogs");
});
it("should display workflow details if devDynamicBlogs and dev social data are available", () => {
const newDataInput = {
...dataInput,
devDynamicBlogs: "some-value"
};
const newSocialInput = {
dev: "some-value-123",
};
const addOnComponent = shallow(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
const workflowElement = addOnComponent.find(".workflow");
expect(workflowElement).toMatchSnapshot();
});
it("should display workflow details if rssDynamicBlogs and rss url data are available", () => {
const newDataInput = {
...dataInput,
rssDynamicBlogs: "some-rss-value"
};
const newSocialInput = {
rssurl: "url-random",
};
const addOnComponent = shallow(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
const workflowElement = addOnComponent.find(".workflow");
expect(workflowElement).toMatchSnapshot();
});
it("should display workflow details if mediumDynamicBlogs, medium social data are available", () => {
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value"
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = shallow(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
const workflowElement = addOnComponent.find(".workflow");
expect(workflowElement).toMatchSnapshot();
});
it("should call document create element when blog post workflow is clicked", () => {
let someElement = document.createElement("abcd");
document.createElement = jest.fn().mockReturnValueOnce(someElement);
const newDataInput = {
...dataInput,
mediumDynamicBlogs: "some-medium-blogs-value"
};
const newSocialInput = {
medium: "@abcd",
};
const addOnComponent = shallow(<Addons
data={newDataInput}
social={newSocialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
addOnComponent.find("#blog-post-worklow-span").simulate("click", {});
expect(document.createElement).toHaveBeenCalledTimes(1);
});
});
+2
View File
@@ -23,6 +23,7 @@ const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick
</label>
{Options && (
<button
id={`${inputId}-open-btn`}
onClick={() => setOpen(!open)}
className="flex ml-3 focus:bg-gray-400"
style={{ outline: "none" }}
@@ -370,6 +371,7 @@ const Addons = props => {
<div>
download
<span
id="blog-post-worklow-span"
onClick={blogPostPorkflow}
onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
role="button"