aheh/github-profile-readme-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/master' into master

Browse Source
This commit is contained in:
Tekena Solomon
2020-10-27 19:23:44 +01:00
parent 07b18b4c8a e29ddc1637
commit 55951c9ef5
13 changed files with 6667 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.travis.yml
+6
View File
@@ -0,0 +1,6 @@
language: node_js
node_js:
- "stable"
cache:
directories:
- "node_modules"
README.md
+3
View File
@@ -138,6 +138,9 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
- [Scott C Wilson](https://github.com/scottcwilson) donated the first-ever grant to this tool. A big thanks to him.
- [Max Schmitt](https://github.com/mxschmitt) loved the tool and showed support with his donation. Thanks a lot.
- [Aadit Kamat](https://github.com/aaditkamat) find the tool useful and showed support with his donation. A big thanks to him.
- [Jean-Michel Fayard](https://github.com/jmfayard) used the generator to create his GitHub Profile README and he loved it. Thanks to him for showing support to the tool with the donation.
## 🙏 Support
jest.config.js
+5 -4
View File
@@ -10,16 +10,17 @@ module.exports = {
transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
globals: {
__PATH_PREFIX__: ``,
__BASE_PATH__: ``,
},
setupFiles: [`<rootDir>/loadershim.js`],
setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
snapshotSerializers: ["enzyme-to-json/serializer"],
coverageThreshold: {
global: {
branches: 100,
functions: 100,
lines: 100,
statements: 100,
branches: 0,
functions: 76,
lines: 68,
statements: 68,
},
},
}
src/components/__tests__/__snapshots__/addons.test.js.snap
+2212
View File
File diff suppressed because it is too large Load Diff
src/components/__tests__/__snapshots__/markdown.test.js.snap
+2128
View File
File diff suppressed because it is too large Load Diff
src/components/__tests__/__snapshots__/markdownPreview.test.js.snap
+578
View File
@@ -0,0 +1,578 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
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`] = `""`;
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`] = `
<div
className="my-2"
>
[object Object]
<b>
readme-generator
</b>
</div>
`;
exports[`DisplayWork Preview renders correctly with no prefix 1`] = `""`;
exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `""`;
exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `""`;
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`] = `""`;
exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `""`;
exports[`GitHubStats Preview renders correctly 1`] = `""`;
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`] = `""`;
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`] = `
<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": "👯 I’m looking to collaborate on",
"contact": "📫 How to reach me",
"currentLearn": "🌱 I’m currently learning",
"currentWork": "🔭 I’m currently working on",
"funFact": "⚡ Fun fact",
"helpWith": "🤝 I’m 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`] = `
<h3
className="w-full text-lg sm:text-xl"
>
dummy
</h3>
`;
exports[`SectionTitle Preview renders correctly with no label 1`] = `""`;
exports[`SectionTitle Preview renders correctly with visible false 1`] = `""`;
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`] = `""`;
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`] = `
<h3
className="text-center font-medium"
>
A passionate frontend developer from India
</h3>
`;
exports[`SubTitle Preview renders correctly with no subtitle 1`] = `""`;
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`] = `""`;
exports[`Title Preview renders correctly with no title 1`] = `""`;
exports[`Title Preview renders correctly with no title and prefix 1`] = `""`;
exports[`TopLanguages Preview renders correctly 1`] = `
<div
className="text-center mx-4 mb-4"
>
 
</div>
`;
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`] = `""`;
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`] = `""`;
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`] = `
<Fragment>
<DisplayWork
link="https://dummy.com"
prefix="🔭 I’m currently working on"
project="readme-generator"
/>
<DisplayWork
prefix="🌱 I’m currently learning"
project=""
/>
<DisplayWork
link=""
prefix="🤝 I’m looking for help with"
project=""
/>
<DisplayWork
link=""
prefix="👯 I’m 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>
`;
src/components/__tests__/addons.test.js
+766
View File
@@ -0,0 +1,766 @@
import React from "react"
import toJson from "enzyme-to-json"
import { shallow, mount } from "enzyme"
import Addons from "../addons"
jest.useFakeTimers();
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 addOnComponent = shallow(<Addons
data={dataInput}
social={socialInput}
handleCheckChange={mockHandleCheckChange}
handleDataChange={mockHandleDataChange}
/>);
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);
});
});
src/components/__tests__/markdown.test.js
+215
View File
@@ -0,0 +1,215 @@
import React from "react"
import { shallow } from "enzyme"
import toJson from "enzyme-to-json"
import Markdown from "../markdown"
describe("Markdown", () => {
const props = {
data: {
ama: '',
badgeColor: '0e75b6',
badgeLabel: 'Profile views',
badgeStyle: 'flat',
collaborateOn: '',
contact: '',
currentLearn: '',
currentWork: 'currentWork',
devDynamicBlogs: false,
funFact: '',
githubProfileTrophy: false,
githubStats: false,
githubStatsOptions: {
bgColor: '',
cacheSeconds: null,
hideBorder: false,
locale: 'en',
textColor: '',
theme: '',
titleColor: '',
},
helpWith: '',
mediumDynamicBlogs: false,
rssDynamicBlogs: false,
subtitle: 'A passionate frontend developer from India',
title: 'title',
topLanguages: false,
topLanguagesOptions: {
bgColor: '',
cacheSeconds: null,
hideBorder: false,
locale: 'en',
textColor: '',
theme: '',
titleColor: '',
},
twitterBadge: false,
visitorsBadge: false,
},
link: {
blog: 'blog',
collaborateOn: 'collaborateOn',
currentWork: 'currentWork',
helpWith: 'helpWith',
portfolio: 'portfolio',
resume: 'resume',
},
prefix: {
ama: '💬 Ask me about',
blog: '📝 I regulary write articles on',
collaborateOn: '👯 I’m looking to collaborate on',
contact: '📫 How to reach me',
currentLearn: '🌱 I’m currently learning',
currentWork: '🔭 I’m currently working on',
funFact: '⚡ Fun fact',
helpWith: '🤝 I’m looking for help with',
portfolio: '👨‍💻 All of my projects are available at',
resume: '📄 Know about my experiences',
title: "Hi 👋, I'm",
},
skills: {
javascript: true,
express: false,
},
social: {
dev: 'dev',
codechef: '',
},
};
it("renders without subtitle", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
subtitle: '',
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders without prefix.title and data.title", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
title: '',
}}
prefix={{
...props.prefix,
title: '',
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders topLanguages is true", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
topLanguages: true,
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders topLanguages is true and githubStats is true", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
topLanguages: true,
githubStats: true,
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders devDynamicBlogs is true", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
devDynamicBlogs: true,
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders without link.currentWork", () => {
const component = shallow(
<Markdown
{...props}
link={{
...props.data,
currentWork: '',
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders visitorsBadge is true", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
visitorsBadge: true,
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders twitterBadge is true", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
twitterBadge: true,
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders githubProfileTrophy is true", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
githubProfileTrophy: true,
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
it("renders githubProfileTrophy is true", () => {
const component = shallow(
<Markdown
{...props}
data={{
...props.data,
githubProfileTrophy: true,
}}
/>
)
expect(toJson(component)).toMatchSnapshot()
})
})
src/components/__tests__/markdownPreview.test.js
+415
View File
@@ -0,0 +1,415 @@
import React from "react";
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MarkdownPreview, { GithubProfileTrophyPreview, GitHubStatsPreview, SkillsPreview, SocialPreview, SubTitlePreview, TitlePreview, TopLanguagesPreview, TwitterBadgePreview, VisitorsBadgePreview, WorkPreview, SectionTitle, DisplayWork, DisplaySocial } from "../markdownPreview"
configure({ adapter: new Adapter() });
const DEFAULT_PREFIX = {
title: "Hi 👋, I'm",
currentWork: "🔭 I’m currently working on",
currentLearn: "🌱 I’m currently learning",
collaborateOn: "👯 I’m looking to collaborate on",
helpWith: "🤝 I’m looking for help with",
ama: "💬 Ask me about",
contact: "📫 How to reach me",
resume: "📄 Know about my experiences",
funFact: "⚡ Fun fact",
portfolio: "👨‍💻 All of my projects are available at",
blog: "📝 I regulary write articles on",
}
const DEFAULT_DATA = {
title: "dummy",
subtitle: "A passionate frontend developer from India",
currentWork: "readme-generator",
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 DEFAULT_LINK = {
currentWork: "https://dummy.com",
collaborateOn: "",
helpWith: "",
portfolio: "",
blog: "",
resume: "",
}
const DEFAULT_SOCIAL = {
github: "",
dev: "",
linkedin: "",
codepen: "dummy",
stackoverflow: "",
kaggle: "",
codesandbox: "",
fb: "",
instagram: "",
twitter: "",
dribbble: "",
behance: "",
medium: "",
youtube: "",
codechef: "",
hackerrank: "",
codeforces: "",
leetcode: "",
topcoder: "",
hackerearth: "",
geeks_for_geeks: "",
discord: "",
rssurl: "",
}
const DUMMY_SKILLS = {
skills: {
unity: true,
android: false,
angularjs: false,
apachecordova: false,
}
}
describe("Markdown Preview", () => {
it("renders correctly", () => {
let prefix = DEFAULT_PREFIX;
let data = DEFAULT_DATA;
let link = DEFAULT_LINK;
let social = DEFAULT_SOCIAL;
let skills = {}
const tree = shallow(<MarkdownPreview
prefix={prefix}
data={data}
link={link}
social={social}
skills={skills} />)
expect(tree).toMatchSnapshot()
})
})
describe("Title Preview", () => {
it("renders correctly", () => {
let prefix = DEFAULT_PREFIX;
let data = DEFAULT_DATA;
const tree = shallow(<TitlePreview prefix={prefix.title} title={data.title} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no prefix", () => {
let prefix = DEFAULT_PREFIX;
const tree = shallow(<TitlePreview prefix={prefix.title} title={""} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no title", () => {
let data = DEFAULT_DATA;
const tree = shallow(<TitlePreview title={data.title} prefix={""} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no title and prefix", () => {
const tree = shallow(<TitlePreview />)
expect(tree).toMatchSnapshot()
})
})
describe("SubTitle Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
const tree = shallow(<SubTitlePreview subtitle={data.subtitle} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no subtitle", () => {
const tree = shallow(<SubTitlePreview subtitle={""} />)
expect(tree).toMatchSnapshot()
})
})
describe("SectionTitle Preview", () => {
it("renders correctly", () => {
const tree = shallow(<SectionTitle visible={true} label={"dummy"} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no label", () => {
const tree = shallow(<SectionTitle visible={true} label={""} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with visible false", () => {
const tree = shallow(<SectionTitle visible={false} label={"dummy"} />)
expect(tree).toMatchSnapshot()
})
})
describe("DisplayWork Preview", () => {
it("renders correctly", () => {
let prefix = DEFAULT_PREFIX;
let data = DEFAULT_DATA;
let link = DEFAULT_LINK;
const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={link.currentWork} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no prefix, link and project", () => {
const tree = shallow(<DisplayWork prefix={undefined} project={undefined} link={undefined} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no prefix", () => {
let data = DEFAULT_DATA;
let link = DEFAULT_LINK;
const tree = shallow(<DisplayWork prefix={undefined} project={data.currentWork} link={link.currentWork} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no project", () => {
let prefix = DEFAULT_PREFIX;
let link = DEFAULT_LINK;
const tree = shallow(<DisplayWork prefix={prefix} project={undefined} link={link.currentWork} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no link", () => {
let prefix = DEFAULT_PREFIX;
let data = DEFAULT_DATA;
const tree = shallow(<DisplayWork prefix={prefix} project={data.currentWork} link={undefined}/>)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no prefix and link", () => {
let data = DEFAULT_DATA;
const tree = shallow(<DisplayWork project={data.currentWork} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no project and link", () => {
let prefix = DEFAULT_PREFIX;
const tree = shallow(<DisplayWork prefix={prefix} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no project and prefix", () => {
let link = DEFAULT_LINK;
const tree = shallow(<DisplayWork link={link.currentWork} />)
expect(tree).toMatchSnapshot()
})
})
describe("DisplaySocial Preview", () => {
it("renders correctly", () => {
let social = DEFAULT_SOCIAL;
const tree = shallow(<DisplaySocial
base="https://codepen.io"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
username={social.codepen}
/>
)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no username", () => {
const tree = shallow(<DisplaySocial
base="https://codepen.io"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
username={""}
/>
)
expect(tree).toMatchSnapshot()
})
})
describe("VisitorsBadge Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<VisitorsBadgePreview
show={data.visitorsBadge}
github={social.github}
badgeOptions={{
badgeLabel: encodeURI(data.badgeLabel),
badgeColor: data.badgeColor,
badgeStyle: data.badgeStyle,
}}
/>
)
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<VisitorsBadgePreview
show={true}
github={social.github}
badgeOptions={{
badgeLabel: encodeURI(data.badgeLabel),
badgeColor: data.badgeColor,
badgeStyle: data.badgeStyle,
}}
/>
)
expect(tree).toMatchSnapshot()
})
})
describe("GithubProfileTrophy Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<GithubProfileTrophyPreview
show={data.githubProfileTrophy}
github={social.github}
/>)
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<GithubProfileTrophyPreview
show={true}
github={social.github}
/>)
expect(tree).toMatchSnapshot()
})
})
describe("TwitterBadgePreview Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<TwitterBadgePreview
show={data.twitterBadge}
twitter={social.twitter}
/>)
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<TwitterBadgePreview
show={true}
twitter={social.twitter}
/>)
expect(tree).toMatchSnapshot()
})
})
describe("Work Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let prefix = DEFAULT_PREFIX;
let link = DEFAULT_LINK;
let props = { data: data, prefix: prefix, link: link }
const tree = shallow(<WorkPreview work={props} />)
expect(tree).toMatchSnapshot()
})
})
describe("Social Preview", () => {
it("renders correctly", () => {
let social = DEFAULT_SOCIAL;
const tree = shallow(<SocialPreview social={social} />)
expect(tree).toMatchSnapshot()
})
})
describe("Skills Preview", () => {
it("renders correctly", () => {
let skills = DUMMY_SKILLS.skills
const tree = shallow(<SkillsPreview skills={skills} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no skills", () => {
let skills = {}
const tree = shallow(<SkillsPreview skills={skills} />)
expect(tree).toMatchSnapshot()
})
})
describe("TopLanguages Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<TopLanguagesPreview
show={data.topLanguages}
github={social.github}
options={data.topLanguagesOptions}
/>)
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<TopLanguagesPreview
show={true}
github={social.github}
options={data.topLanguagesOptions}
/>)
expect(tree).toMatchSnapshot()
})
})
describe("GitHubStats Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<GitHubStatsPreview
show={data.githubStats}
github={social.github}
options={data.githubStatsOptions}
/>)
expect(tree).toMatchSnapshot()
})
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = shallow(<GitHubStatsPreview
show={true}
github={social.github}
options={data.githubStatsOptions}
/>)
expect(tree).toMatchSnapshot()
})
})
src/components/__tests__/subtitle.test.js
+14 -3
View File
@@ -5,11 +5,22 @@ import toJson from "enzyme-to-json"
import Subtitle from "../subtitle"
describe("Subtitle", () => {
const component = shallow(
<Subtitle data={{ subtitle: "A frontend developer" }} />
)
const mockEvent = { target: { value: "This is a mock event" } }
const props = {
data: {
subtitle: "A frontend developer",
},
handleDataChange: jest.fn().mockReturnValue({}),
}
const component = shallow(<Subtitle {...props} />)
it("renders correctly", () => {
expect(toJson(component)).toMatchSnapshot()
})
it("calls onChange", () => {
component.find("input").at(0).simulate("change", mockEvent)
expect(props.handleDataChange).toBeCalledWith("subtitle", mockEvent)
})
})
src/components/addons.js
+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"
src/components/markdown.js
+1
View File
@@ -238,6 +238,7 @@ const Markdown = props => {
}
return ""
}
return (
<div id="markdown-content" className="break-words">
<>
src/components/markdownPreview.js
+322 -309
View File
@@ -5,55 +5,35 @@ import {
topLanguagesLinkGenerator,
} from "../utils/link-generators"
const MarkdownPreview = props => {
const TitlePreview = props => {
if (props.prefix && props.title) {
return (
<h1 className="text-center text-xl font-bold">
{props.prefix + " " + props.title}
</h1>
)
}
return null
export const TitlePreview = props => {
if (props.prefix && props.title) {
return (
<h1 className="text-center text-xl font-bold">
{props.prefix + " " + props.title}
</h1>
)
}
const SubTitlePreview = props => {
if (props.subtitle) {
return <h3 className="text-center font-medium">{props.subtitle}</h3>
}
return null
return null
}
export const SubTitlePreview = props => {
if (props.subtitle) {
return <h3 className="text-center font-medium">{props.subtitle}</h3>
}
const SectionTitle = props => {
if (!props.visible) return null
else if (props.label) {
return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
}
return null
return null
}
export const SectionTitle = props => {
if (!props.visible) return null
else if (props.label) {
return <h3 className="w-full text-lg sm:text-xl">{props.label}</h3>
}
const DisplayWork = props => {
if (props.prefix && props.project) {
if (props.link) {
return (
<div className="my-2">
{props.prefix + " "}
<a
href={props.link}
className="no-underline text-blue-700"
target="blank"
>
{props.project}
</a>
</div>
)
} else {
return (
<div className="my-2">
{props.prefix + " "}
<b>{props.project}</b>
</div>
)
}
}
if (props.prefix && props.link) {
return null
}
export const DisplayWork = props => {
if (props.prefix && props.project) {
if (props.link) {
return (
<div className="my-2">
{props.prefix + " "}
@@ -62,281 +42,314 @@ const MarkdownPreview = props => {
className="no-underline text-blue-700"
target="blank"
>
{props.link}
{props.project}
</a>
</div>
)
}
return null
}
const WorkPreview = props => {
const prefix = props.work.prefix
const data = props.work.data
const link = props.work.link
return (
<>
<DisplayWork
prefix={prefix.currentWork}
project={data.currentWork}
link={link.currentWork}
/>
<DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
<DisplayWork
prefix={prefix.helpWith}
project={data.helpWith}
link={link.helpWith}
/>
<DisplayWork
prefix={prefix.collaborateOn}
project={data.collaborateOn}
link={link.collaborateOn}
/>
<DisplayWork prefix={prefix.ama} project={data.ama} />
<DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
<DisplayWork prefix={prefix.blog} link={link.blog} />
<DisplayWork prefix={prefix.resume} link={link.resume} />
<DisplayWork prefix={prefix.contact} project={data.contact} />
<DisplayWork prefix={prefix.funFact} project={data.funFact} />
</>
)
}
const DisplaySocial = props => {
if (props.username) {
} else {
return (
<div className="my-2">
{props.prefix + " "}
<b>{props.project}</b>
</div>
)
}
}
if (props.prefix && props.link) {
return (
<div className="my-2">
{props.prefix + " "}
<a
className="no-underline text-blue-700 m-2"
href={props.base + "/" + props.username}
href={props.link}
className="no-underline text-blue-700"
target="blank"
>
<img className="w-6 h-6" src={props.icon} alt="props.username" />
{props.link}
</a>
</div>
)
}
return null
}
export const WorkPreview = props => {
const prefix = props.work.prefix
const data = props.work.data
const link = props.work.link
return (
<>
<DisplayWork
prefix={prefix.currentWork}
project={data.currentWork}
link={link.currentWork}
/>
<DisplayWork prefix={prefix.currentLearn} project={data.currentLearn} />
<DisplayWork
prefix={prefix.helpWith}
project={data.helpWith}
link={link.helpWith}
/>
<DisplayWork
prefix={prefix.collaborateOn}
project={data.collaborateOn}
link={link.collaborateOn}
/>
<DisplayWork prefix={prefix.ama} project={data.ama} />
<DisplayWork prefix={prefix.portfolio} link={link.portfolio} />
<DisplayWork prefix={prefix.blog} link={link.blog} />
<DisplayWork prefix={prefix.resume} link={link.resume} />
<DisplayWork prefix={prefix.contact} project={data.contact} />
<DisplayWork prefix={prefix.funFact} project={data.funFact} />
</>
)
}
export const DisplaySocial = props => {
if (props.username) {
return (
<a
className="no-underline text-blue-700 m-2"
href={props.base + "/" + props.username}
target="blank"
>
<img className="w-6 h-6" src={props.icon} alt="props.username" />
</a>
)
}
return null
}
export const SocialPreview = props => {
let viewSocial = false
Object.keys(props.social).forEach(key => {
if (props.social[key] && key != "github") viewSocial = true
})
return (
<div className="flex justify-start items-end flex-wrap">
<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"
username={props.social.codepen}
/>
<DisplaySocial
base="https://dev.to"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
username={props.social.dev}
/>
<DisplaySocial
base="https://twitter.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
username={props.social.twitter}
/>
<DisplaySocial
base="https://linkedin.com/in"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
username={props.social.linkedin}
/>
<DisplaySocial
base="https://stackoverflow.com/users"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
username={props.social.stackoverflow}
/>
<DisplaySocial
base="https://codesandbox.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
username={props.social.codesandbox}
/>
<DisplaySocial
base="https://kaggle.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
username={props.social.kaggle}
/>
<DisplaySocial
base="https://fb.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
username={props.social.fb}
/>
<DisplaySocial
base="https://instagram.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
username={props.social.instagram}
/>
<DisplaySocial
base="https://dribbble.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
username={props.social.dribbble}
/>
<DisplaySocial
base="https://www.behance.net"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
username={props.social.behance}
/>
<DisplaySocial
base="https://medium.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
username={props.social.medium}
/>
<DisplaySocial
base="https://www.youtube.com/c"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
username={props.social.youtube}
/>
<DisplaySocial
base="https://www.codechef.com/users"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
username={props.social.codechef}
/>
<DisplaySocial
base="https://codeforces.com/profile"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
username={props.social.codeforces}
/>
<DisplaySocial
base="https://www.hackerrank.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
username={props.social.hackerrank}
/>
<DisplaySocial
base="https://auth.geeksforgeeks.org/user"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
username={props.social.geeks_for_geeks}
/>
<DisplaySocial
base="https://www.hackerearth.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
username={props.social.hackerearth}
/>
<DisplaySocial
base="https://www.topcoder.com/members"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
username={props.social.topcoder}
/>
<DisplaySocial
base="https://www.leetcode.com"
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"
username={props.social.rssurl}
/>
</div>
)
}
export const VisitorsBadgePreview = props => {
let link =
"https://komarev.com/ghpvc/?username=" +
props.github +
`&label=${props.badgeOptions.badgeLabel}` +
`&color=${props.badgeOptions.badgeColor}` +
`&style=${props.badgeOptions.badgeStyle}`
if (props.show) {
return (
<div className="text-left my-2">
{" "}
<img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
</div>
)
}
return null
}
export const TwitterBadgePreview = props => {
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">
{" "}
<a href="https://twitter.com/${props.twitter}" target="blank">
<img className="h-4 sm:h-6" src={link} alt={props.twitter} />
</a>{" "}
</div>
)
}
return null
}
export const GithubProfileTrophyPreview = props => {
let link =
"https://github-profile-trophy.vercel.app/?username=" + props.github
if (props.show) {
return (
<div className="text-left my-2">
{" "}
<a href="https://github.com/ryo-ma/github-profile-trophy">
<img src={link} alt={props.github} />
</a>{" "}
</div>
)
}
return null
}
export const GitHubStatsPreview = ({ github, options, show }) => {
if (show) {
return (
<div className="text-center mx-4 mb-4">
<img
src={githubStatsLinkGenerator({ github, options })}
alt={github}
/>
</div>
)
}
return null
}
export const TopLanguagesPreview = ({ github, options, show }) => {
if (show) {
return (
<div className="text-center mx-4 mb-4">
<img
src={topLanguagesLinkGenerator({ github, options })}
alt={github}
/>
</div>
)
}
return <div className="text-center mx-4 mb-4"> &nbsp;</div>
}
export const SkillsPreview = props => {
var listSkills = []
skills.forEach(skill => {
if (props.skills[skill]) {
listSkills.push(
<a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
<img
className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
key={skill}
src={icons[skill]}
alt={skill}
/>
</a>
)
}
return null
}
const SocialPreview = props => {
let viewSocial = false
Object.keys(props.social).forEach(key => {
if (props.social[key] && key != "github") viewSocial = true
})
return (
<div className="flex justify-start items-end flex-wrap">
<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"
username={props.social.codepen}
/>
<DisplaySocial
base="https://dev.to"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
username={props.social.dev}
/>
<DisplaySocial
base="https://twitter.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg"
username={props.social.twitter}
/>
<DisplaySocial
base="https://linkedin.com/in"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg"
username={props.social.linkedin}
/>
<DisplaySocial
base="https://stackoverflow.com/users"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/stackoverflow.svg"
username={props.social.stackoverflow}
/>
<DisplaySocial
base="https://codesandbox.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codesandbox.svg"
username={props.social.codesandbox}
/>
<DisplaySocial
base="https://kaggle.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/kaggle.svg"
username={props.social.kaggle}
/>
<DisplaySocial
base="https://fb.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg"
username={props.social.fb}
/>
<DisplaySocial
base="https://instagram.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg"
username={props.social.instagram}
/>
<DisplaySocial
base="https://dribbble.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dribbble.svg"
username={props.social.dribbble}
/>
<DisplaySocial
base="https://www.behance.net"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/behance.svg"
username={props.social.behance}
/>
<DisplaySocial
base="https://medium.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/medium.svg"
username={props.social.medium}
/>
<DisplaySocial
base="https://www.youtube.com/c"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/youtube.svg"
username={props.social.youtube}
/>
<DisplaySocial
base="https://www.codechef.com/users"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codechef.svg"
username={props.social.codechef}
/>
<DisplaySocial
base="https://codeforces.com/profile"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codeforces.svg"
username={props.social.codeforces}
/>
<DisplaySocial
base="https://www.hackerrank.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerrank.svg"
username={props.social.hackerrank}
/>
<DisplaySocial
base="https://auth.geeksforgeeks.org/user"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/geeksforgeeks.svg"
username={props.social.geeks_for_geeks}
/>
<DisplaySocial
base="https://www.hackerearth.com"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/hackerearth.svg"
username={props.social.hackerearth}
/>
<DisplaySocial
base="https://www.topcoder.com/members"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/topcoder.svg"
username={props.social.topcoder}
/>
<DisplaySocial
base="https://www.leetcode.com"
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"
username={props.social.rssurl}
/>
</div>
)
}
const VisitorsBadgePreview = props => {
let link =
"https://komarev.com/ghpvc/?username=" +
props.github +
`&label=${props.badgeOptions.badgeLabel}` +
`&color=${props.badgeOptions.badgeColor}` +
`&style=${props.badgeOptions.badgeStyle}`
if (props.show) {
return (
<div className="text-left my-2">
{" "}
<img className="h-4 sm:h-6" src={link} alt={props.github} />{" "}
</div>
)
}
return null
}
const TwitterBadgePreview = props => {
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">
{" "}
<a href="https://twitter.com/${props.twitter}" target="blank">
<img className="h-4 sm:h-6" src={link} alt={props.twitter} />
</a>{" "}
</div>
)
}
return null
}
const GithubProfileTrophyPreview = props => {
let link =
"https://github-profile-trophy.vercel.app/?username=" + props.github
if (props.show) {
return (
<div className="text-left my-2">
{" "}
<a href="https://github.com/ryo-ma/github-profile-trophy">
<img src={link} alt={props.github} />
</a>{" "}
</div>
)
}
return null
}
const GitHubStatsPreview = ({ github, options, show }) => {
if (show) {
return (
<div className="text-center mx-4 mb-4">
<img
src={githubStatsLinkGenerator({ github, options })}
alt={github}
/>
</div>
)
}
return null
}
const TopLanguagesPreview = ({ github, options, show }) => {
if (show) {
return (
<div className="text-center mx-4 mb-4">
<img
src={topLanguagesLinkGenerator({ github, options })}
alt={props.github}
/>
</div>
)
}
return <div className="text-center mx-4 mb-4"> &nbsp;</div>
}
const SkillsPreview = props => {
var listSkills = []
skills.forEach(skill => {
if (props.skills[skill]) {
listSkills.push(
<a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
<img
className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
key={skill}
src={icons[skill]}
alt={skill}
/>
</a>
)
}
})
return listSkills.length > 0 ? (
<div className="flex flex-wrap justify-start items-center">
<SectionTitle label="Languages and Tools:" visible={true} />
{listSkills}
</div>
) : (
})
return listSkills.length > 0 ? (
<div className="flex flex-wrap justify-start items-center">
<SectionTitle label="Languages and Tools:" visible={true} />
{listSkills}
</div>
) : (
""
)
}
}
const MarkdownPreview = props => {
return (
<div id="markdown-preview">
<TitlePreview prefix={props.prefix.title} title={props.data.title} />