Refactored test cases to use enzyme

This commit is contained in:
Taha Shahid
2020-10-25 21:40:05 +05:00
parent 7a612901e3
commit 40ccef24fd
2 changed files with 106 additions and 383 deletions
@@ -1,314 +1,69 @@
// 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 1`] = `ShallowWrapper {}`;
exports[`DisplaySocial Preview renders correctly with no username 1`] = `null`;
exports[`DisplaySocial Preview renders correctly with no username 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 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 link 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no prefix 1`] = `null`;
exports[`DisplayWork Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `null`;
exports[`DisplayWork Preview renders correctly with no prefix and link 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no prefix, link and project 1`] = `null`;
exports[`DisplayWork Preview renders correctly with no prefix, link and 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 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no project and link 1`] = `null`;
exports[`DisplayWork Preview renders correctly with no project and link 1`] = `ShallowWrapper {}`;
exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `null`;
exports[`DisplayWork Preview renders correctly with no project and prefix 1`] = `ShallowWrapper {}`;
exports[`GitHubStats Preview renders correctly 1`] = `null`;
exports[`GitHubStats Preview renders correctly 1`] = `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[`GitHubStats Preview renders correctly 2`] = `ShallowWrapper {}`;
exports[`GithubProfileTrophy Preview renders correctly 1`] = `null`;
exports[`GithubProfileTrophy Preview renders correctly 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[`GithubProfileTrophy Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`Markdown Preview renders correctly 1`] = `
<div
id="markdown-preview"
>
<h1
className="text-center text-xl font-bold"
>
Hi 👋, I'm dummy
</h1>
<h3
className="text-center font-medium"
>
A passionate frontend developer from India
</h3>
<div
className="my-2"
>
🔭 Im currently working on
<a
className="no-underline text-blue-700"
href="https://dummy.com"
target="blank"
>
readme-generator
</a>
</div>
<div
className="flex justify-start items-end flex-wrap"
>
<h3
className="w-full text-lg sm:text-xl"
>
Connect with me:
</h3>
<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>
</div>
<div
className="block sm:flex sm:justify-center sm:items-start"
>
<div
className="text-center mx-4 mb-4"
>
 
</div>
</div>
</div>
`;
exports[`Markdown 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 1`] = `ShallowWrapper {}`;
exports[`SectionTitle Preview renders correctly with no label 1`] = `null`;
exports[`SectionTitle Preview renders correctly with no label 1`] = `ShallowWrapper {}`;
exports[`SectionTitle Preview renders correctly with visible false 1`] = `null`;
exports[`SectionTitle Preview renders correctly with visible false 1`] = `ShallowWrapper {}`;
exports[`Skills Preview renders correctly 1`] = `
<div
className="flex flex-wrap justify-start items-center"
>
<h3
className="w-full text-lg sm:text-xl"
>
Languages and Tools:
</h3>
<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"
src="https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
/>
</a>
</div>
`;
exports[`Skills Preview renders correctly 1`] = `ShallowWrapper {}`;
exports[`Skills Preview renders correctly with no skills 1`] = `""`;
exports[`Skills Preview renders correctly with no skills 1`] = `ShallowWrapper {}`;
exports[`Social Preview renders correctly 1`] = `
<div
className="flex justify-start items-end flex-wrap"
>
<h3
className="w-full text-lg sm:text-xl"
>
Connect with me:
</h3>
<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>
</div>
`;
exports[`Social 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 1`] = `ShallowWrapper {}`;
exports[`SubTitle Preview renders correctly with no subtitle 1`] = `null`;
exports[`SubTitle Preview renders correctly with no subtitle 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 1`] = `ShallowWrapper {}`;
exports[`Title Preview renders correctly with no prefix 1`] = `null`;
exports[`Title Preview renders correctly with no prefix 1`] = `ShallowWrapper {}`;
exports[`Title Preview renders correctly with no title 1`] = `null`;
exports[`Title Preview renders correctly with no title 1`] = `ShallowWrapper {}`;
exports[`Title Preview renders correctly with no title and prefix 1`] = `null`;
exports[`Title Preview renders correctly with no title and prefix 1`] = `ShallowWrapper {}`;
exports[`TopLanguages Preview renders correctly 1`] = `
<div
className="text-center mx-4 mb-4"
>
 
</div>
`;
exports[`TopLanguages Preview renders correctly 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[`TopLanguages Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`TwitterBadgePreview Preview renders correctly 1`] = `null`;
exports[`TwitterBadgePreview Preview renders correctly 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[`TwitterBadgePreview Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`VisitorsBadge Preview renders correctly 1`] = `null`;
exports[`VisitorsBadge Preview renders correctly 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[`VisitorsBadge Preview renders correctly with show true 1`] = `ShallowWrapper {}`;
exports[`Work Preview renders correctly 1`] = `
<div
className="my-2"
>
🔭 Im currently working on
<a
className="no-underline text-blue-700"
href="https://dummy.com"
target="blank"
>
readme-generator
</a>
</div>
`;
exports[`Work Preview renders correctly 1`] = `ShallowWrapper {}`;
+72 -104
View File
@@ -1,8 +1,10 @@
import React from "react";
import renderer from "react-test-renderer";
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: "🔭 Im currently working on",
@@ -109,14 +111,13 @@ describe("Markdown Preview", () => {
let link = DEFAULT_LINK;
let social = DEFAULT_SOCIAL;
let skills = {}
const tree = renderer
.create(<MarkdownPreview
const tree = shallow(<MarkdownPreview
prefix={prefix}
data={data}
link={link}
social={social}
skills={skills} />)
.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -124,64 +125,55 @@ describe("Title Preview", () => {
it("renders correctly", () => {
let prefix = DEFAULT_PREFIX;
let data = DEFAULT_DATA;
const tree = renderer
.create(<TitlePreview prefix={prefix.title} title={data.title} />)
.toJSON()
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 = renderer
.create(<TitlePreview prefix={prefix.title} title={""} />)
.toJSON()
const tree = shallow(<TitlePreview prefix={prefix.title} title={""} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no title", () => {
let data = DEFAULT_DATA;
const tree = renderer
.create(<TitlePreview title={data.title} prefix={""} />)
.toJSON()
const tree = shallow(<TitlePreview title={data.title} prefix={""} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no title and prefix", () => {
const tree = renderer
.create(<TitlePreview />)
.toJSON()
const tree = shallow(<TitlePreview />)
expect(tree).toMatchSnapshot()
})
})
describe("SubTitle Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
const tree = renderer
.create(<SubTitlePreview subtitle={data.subtitle} />)
.toJSON()
const tree = shallow(<SubTitlePreview subtitle={data.subtitle} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no subtitle", () => {
const tree = renderer
.create(<SubTitlePreview subtitle={""} />)
.toJSON()
const tree = shallow(<SubTitlePreview subtitle={""} />)
expect(tree).toMatchSnapshot()
})
})
describe("SectionTitle Preview", () => {
it("renders correctly", () => {
const tree = renderer
.create(<SectionTitle visible={true} label={"dummy"} />)
.toJSON()
const tree = shallow(<SectionTitle visible={true} label={"dummy"} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no label", () => {
const tree = renderer
.create(<SectionTitle visible={true} label={""} />)
.toJSON()
const tree = shallow(<SectionTitle visible={true} label={""} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with visible false", () => {
const tree = renderer
.create(<SectionTitle visible={false} label={"dummy"} />)
.toJSON()
const tree = shallow(<SectionTitle visible={false} label={"dummy"} />)
expect(tree).toMatchSnapshot()
})
})
@@ -190,85 +182,75 @@ describe("DisplayWork Preview", () => {
let prefix = DEFAULT_PREFIX;
let data = DEFAULT_DATA;
let link = DEFAULT_LINK;
const tree = renderer
.create(<DisplayWork prefix={prefix} project={data.currentWork} link={link.currentWork} />)
.toJSON()
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 = renderer
.create(<DisplayWork prefix={undefined} project={undefined} link={undefined} />)
.toJSON()
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 = renderer
.create(<DisplayWork prefix={undefined} project={data.currentWork} link={link.currentWork} />)
.toJSON()
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 = renderer
.create(<DisplayWork prefix={prefix} project={undefined} link={link.currentWork} />)
.toJSON()
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 = renderer
.create(<DisplayWork prefix={prefix} project={data.currentWork} link={undefined}/>)
.toJSON()
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 = renderer
.create(<DisplayWork project={data.currentWork} />)
.toJSON()
const tree = shallow(<DisplayWork project={data.currentWork} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no project and link", () => {
let prefix = DEFAULT_PREFIX;
const tree = renderer
.create(<DisplayWork prefix={prefix} />)
.toJSON()
const tree = shallow(<DisplayWork prefix={prefix} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no project and prefix", () => {
let link = DEFAULT_LINK;
const tree = renderer
.create(<DisplayWork link={link.currentWork} />)
.toJSON()
const tree = shallow(<DisplayWork link={link.currentWork} />)
expect(tree).toMatchSnapshot()
})
})
describe("DisplaySocial Preview", () => {
it("renders correctly", () => {
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<DisplaySocial
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}
/>
)
.toJSON()
expect(tree).toMatchSnapshot()
})
it("renders correctly with no username", () => {
const tree = renderer
.create(<DisplaySocial
const tree = shallow(<DisplaySocial
base="https://codepen.io"
icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"
username={""}
/>
)
.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -276,8 +258,7 @@ describe("VisitorsBadge Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<VisitorsBadgePreview
const tree = shallow(<VisitorsBadgePreview
show={data.visitorsBadge}
github={social.github}
badgeOptions={{
@@ -287,14 +268,13 @@ describe("VisitorsBadge Preview", () => {
}}
/>
)
.toJSON()
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<VisitorsBadgePreview
const tree = shallow(<VisitorsBadgePreview
show={true}
github={social.github}
badgeOptions={{
@@ -304,7 +284,7 @@ describe("VisitorsBadge Preview", () => {
}}
/>
)
.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -312,23 +292,21 @@ describe("GithubProfileTrophy Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<GithubProfileTrophyPreview
const tree = shallow(<GithubProfileTrophyPreview
show={data.githubProfileTrophy}
github={social.github}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<GithubProfileTrophyPreview
const tree = shallow(<GithubProfileTrophyPreview
show={true}
github={social.github}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -336,23 +314,21 @@ describe("TwitterBadgePreview Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<TwitterBadgePreview
const tree = shallow(<TwitterBadgePreview
show={data.twitterBadge}
twitter={social.twitter}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<TwitterBadgePreview
const tree = shallow(<TwitterBadgePreview
show={true}
twitter={social.twitter}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -362,34 +338,30 @@ describe("Work Preview", () => {
let prefix = DEFAULT_PREFIX;
let link = DEFAULT_LINK;
let props = { data: data, prefix: prefix, link: link }
const tree = renderer
.create(<WorkPreview work={props} />)
.toJSON()
const tree = shallow(<WorkPreview work={props} />)
expect(tree).toMatchSnapshot()
})
})
describe("Social Preview", () => {
it("renders correctly", () => {
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<SocialPreview social={social} />)
.toJSON()
const tree = shallow(<SocialPreview social={social} />)
expect(tree).toMatchSnapshot()
})
})
describe("Skills Preview", () => {
it("renders correctly", () => {
let skills = DUMMY_SKILLS.skills
const tree = renderer
.create(<SkillsPreview skills={skills} />)
.toJSON()
const tree = shallow(<SkillsPreview skills={skills} />)
expect(tree).toMatchSnapshot()
})
it("renders correctly with no skills", () => {
let skills = {}
const tree = renderer
.create(<SkillsPreview skills={skills} />)
.toJSON()
const tree = shallow(<SkillsPreview skills={skills} />)
expect(tree).toMatchSnapshot()
})
})
@@ -397,25 +369,23 @@ describe("TopLanguages Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<TopLanguagesPreview
const tree = shallow(<TopLanguagesPreview
show={data.topLanguages}
github={social.github}
options={data.topLanguagesOptions}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
it("renders correctly with show true", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<TopLanguagesPreview
const tree = shallow(<TopLanguagesPreview
show={true}
github={social.github}
options={data.topLanguagesOptions}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -423,25 +393,23 @@ describe("GitHubStats Preview", () => {
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<GitHubStatsPreview
const tree = shallow(<GitHubStatsPreview
show={data.githubStats}
github={social.github}
options={data.githubStatsOptions}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
it("renders correctly", () => {
let data = DEFAULT_DATA;
let social = DEFAULT_SOCIAL;
const tree = renderer
.create(<GitHubStatsPreview
const tree = shallow(<GitHubStatsPreview
show={true}
github={social.github}
options={data.githubStatsOptions}
/>)
.toJSON()
expect(tree).toMatchSnapshot()
})
})