Skip to content

Commit 3d29681

Browse files
author
Anusha S
committed
tech: use enzyme to json instead of react test renderer
1 parent d82a367 commit 3d29681

File tree

2 files changed

+115
-251
lines changed

2 files changed

+115
-251
lines changed

‎src/components/__tests__/__snapshots__/addons.test.js.snap‎

Lines changed: 105 additions & 241 deletions
Original file line numberDiff line numberDiff line change
@@ -9,259 +9,123 @@ exports[`Addons renders correctly 1`] = `
99
>
1010
Add-ons
1111
</div>
12-
<div
13-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
14-
>
15-
<label
16-
className="cursor-pointer flex items-center"
17-
htmlFor="visitors-count"
18-
>
19-
<input
20-
checked={false}
21-
id="visitors-count"
22-
onChange={[Function]}
23-
type="checkbox"
24-
/>
25-
<span
26-
className="pl-4"
27-
>
28-
display visitors count badge
29-
</span>
30-
</label>
31-
<button
32-
className="flex ml-3 focus:bg-gray-400"
33-
onClick={[Function]}
34-
style={
35-
Object {
36-
"outline": "none",
37-
}
38-
}
39-
>
40-
<svg
41-
aria-hidden="true"
42-
className="transform scale-100 md:scale-125"
43-
dangerouslySetInnerHTML={
44-
Object {
45-
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
46-
}
12+
<AddonsItem
13+
Options={
14+
<CustomizeOptions
15+
CustomizationOptions={
16+
<CustomizeBadge
17+
badgeOptions={
18+
Object {
19+
"badgeColor": "0e75b6",
20+
"badgeLabel": "Profile views",
21+
"badgeStyle": "flat",
22+
}
23+
}
24+
githubName=""
25+
onBadgeUpdate={[Function]}
26+
/>
4727
}
48-
fill="currentColor"
49-
height={16}
50-
role="img"
51-
style={
52-
Object {
53-
"display": "inline-block",
54-
"userSelect": "none",
55-
"verticalAlign": "text-bottom",
56-
}
57-
}
58-
viewBox="0 0 16 16"
59-
width={16}
28+
title="Customize Badge"
6029
/>
61-
</button>
62-
</div>
63-
<div
64-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
30+
}
31+
inputChecked={false}
32+
inputId="visitors-count"
33+
onInputChange={[Function]}
6534
>
66-
<label
67-
className="cursor-pointer flex items-center"
68-
htmlFor="github-profile-trophy"
69-
>
70-
<input
71-
checked={false}
72-
id="github-profile-trophy"
73-
onChange={[Function]}
74-
type="checkbox"
75-
/>
76-
<span
77-
className="pl-4"
78-
>
79-
display github trophy
80-
</span>
81-
</label>
82-
</div>
83-
<div
84-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
35+
display visitors count badge
36+
</AddonsItem>
37+
<AddonsItem
38+
inputChecked={false}
39+
inputId="github-profile-trophy"
40+
onInputChange={[Function]}
8541
>
86-
<label
87-
className="cursor-pointer flex items-center"
88-
htmlFor="github-stats"
89-
>
90-
<input
91-
checked={false}
92-
id="github-stats"
93-
onChange={[Function]}
94-
type="checkbox"
95-
/>
96-
<span
97-
className="pl-4"
98-
>
99-
display github profile stats card
100-
</span>
101-
</label>
102-
<button
103-
className="flex ml-3 focus:bg-gray-400"
104-
onClick={[Function]}
105-
style={
106-
Object {
107-
"outline": "none",
108-
}
109-
}
110-
>
111-
<svg
112-
aria-hidden="true"
113-
className="transform scale-100 md:scale-125"
114-
dangerouslySetInnerHTML={
115-
Object {
116-
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
117-
}
42+
display github trophy
43+
</AddonsItem>
44+
<AddonsItem
45+
Options={
46+
<CustomizeOptions
47+
CustomizationOptions={
48+
<CustomizeGithubStatsBase
49+
onUpdate={[Function]}
50+
options={
51+
Object {
52+
"bgColor": "",
53+
"cacheSeconds": null,
54+
"hideBorder": false,
55+
"locale": "en",
56+
"textColor": "",
57+
"theme": "",
58+
"titleColor": "",
59+
}
60+
}
61+
prefix="stats"
62+
/>
11863
}
119-
fill="currentColor"
120-
height={16}
121-
role="img"
122-
style={
123-
Object {
124-
"display": "inline-block",
125-
"userSelect": "none",
126-
"verticalAlign": "text-bottom",
127-
}
128-
}
129-
viewBox="0 0 16 16"
130-
width={16}
64+
title="Customize Github Stats Card"
13165
/>
132-
</button>
133-
</div>
134-
<div
135-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
66+
}
67+
inputChecked={false}
68+
inputId="github-stats"
69+
onInputChange={[Function]}
13670
>
137-
<label
138-
className="cursor-pointer flex items-center"
139-
htmlFor="top-languages"
140-
>
141-
<input
142-
checked={false}
143-
id="top-languages"
144-
onChange={[Function]}
145-
type="checkbox"
146-
/>
147-
<span
148-
className="pl-4"
149-
>
150-
display top skills
151-
</span>
152-
</label>
153-
<button
154-
className="flex ml-3 focus:bg-gray-400"
155-
onClick={[Function]}
156-
style={
157-
Object {
158-
"outline": "none",
71+
display github profile stats card
72+
</AddonsItem>
73+
<AddonsItem
74+
Options={
75+
<CustomizeOptions
76+
CustomizationOptions={
77+
<CustomizeGithubStatsBase
78+
onUpdate={[Function]}
79+
options={
80+
Object {
81+
"bgColor": "",
82+
"cacheSeconds": null,
83+
"hideBorder": false,
84+
"locale": "en",
85+
"textColor": "",
86+
"theme": "",
87+
"titleColor": "",
88+
}
89+
}
90+
prefix="top-lang"
91+
/>
15992
}
160-
}
161-
>
162-
<svg
163-
aria-hidden="true"
164-
className="transform scale-100 md:scale-125"
165-
dangerouslySetInnerHTML={
166-
Object {
167-
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M5.433 2.304A4.494 4.494 0 003.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 11-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 012 6a5.994 5.994 0 012.567-4.92 1.482 1.482 0 011.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 00.28 0l.75-.51A.25.25 0 009 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 011.673.04A5.994 5.994 0 0114 6a5.996 5.996 0 01-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.75.75 0 11-1.498.074l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.496 4.496 0 0012.5 6a4.494 4.494 0 00-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 01-.767 1.448l-.75.51a1.75 1.75 0 01-1.966 0l-.75-.51A1.75 1.75 0 015.5 5.282V2.463c0-.092-.043-.142-.067-.159zm.01-.005z\\"></path>",
168-
}
169-
}
170-
fill="currentColor"
171-
height={16}
172-
role="img"
173-
style={
174-
Object {
175-
"display": "inline-block",
176-
"userSelect": "none",
177-
"verticalAlign": "text-bottom",
178-
}
179-
}
180-
viewBox="0 0 16 16"
181-
width={16}
93+
title="Customize Top Skills Card"
18294
/>
183-
</button>
184-
</div>
185-
<div
186-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
95+
}
96+
inputChecked={false}
97+
inputId="top-languages"
98+
onInputChange={[Function]}
18799
>
188-
<label
189-
className="cursor-pointer flex items-center"
190-
htmlFor="twitter-badge"
191-
>
192-
<input
193-
checked={false}
194-
id="twitter-badge"
195-
onChange={[Function]}
196-
type="checkbox"
197-
/>
198-
<span
199-
className="pl-4"
200-
>
201-
display twitter badge
202-
</span>
203-
</label>
204-
</div>
205-
<div
206-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
100+
display top skills
101+
</AddonsItem>
102+
<AddonsItem
103+
inputChecked={false}
104+
inputId="twitter-badge"
105+
onInputChange={[Function]}
207106
>
208-
<label
209-
className="cursor-pointer flex items-center"
210-
htmlFor="dev-dynamic-blogs"
211-
>
212-
<input
213-
checked={false}
214-
id="dev-dynamic-blogs"
215-
onChange={[Function]}
216-
type="checkbox"
217-
/>
218-
<span
219-
className="pl-4"
220-
>
221-
display latest dev.to blogs dynamically (GitHub Action)
222-
</span>
223-
</label>
224-
</div>
225-
<div
226-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
107+
display twitter badge
108+
</AddonsItem>
109+
<AddonsItem
110+
inputChecked={false}
111+
inputId="dev-dynamic-blogs"
112+
onInputChange={[Function]}
227113
>
228-
<label
229-
className="cursor-pointer flex items-center"
230-
htmlFor="medium-dynamic-blogs"
231-
>
232-
<input
233-
checked={false}
234-
id="medium-dynamic-blogs"
235-
onChange={[Function]}
236-
type="checkbox"
237-
/>
238-
<span
239-
className="pl-4"
240-
>
241-
display latest medium blogs dynamically (GitHub Action)
242-
</span>
243-
</label>
244-
</div>
245-
<div
246-
className="py-2 flex justify-start items-center text-sm sm:text-lg"
114+
display latest dev.to blogs dynamically (GitHub Action)
115+
</AddonsItem>
116+
<AddonsItem
117+
inputChecked={false}
118+
inputId="medium-dynamic-blogs"
119+
onInputChange={[Function]}
247120
>
248-
<label
249-
className="cursor-pointer flex items-center"
250-
htmlFor="rss-dynamic-blogs"
251-
>
252-
<input
253-
checked={false}
254-
id="rss-dynamic-blogs"
255-
onChange={[Function]}
256-
type="checkbox"
257-
/>
258-
<span
259-
className="pl-4"
260-
>
261-
display latest blogs from your personal blog dynamically (GitHub Action)
262-
</span>
263-
</label>
264-
</div>
265-
121+
display latest medium blogs dynamically (GitHub Action)
122+
</AddonsItem>
123+
<AddonsItem
124+
inputChecked={false}
125+
inputId="rss-dynamic-blogs"
126+
onInputChange={[Function]}
127+
>
128+
display latest blogs from your personal blog dynamically (GitHub Action)
129+
</AddonsItem>
266130
</div>
267131
`;

‎src/components/__tests__/addons.test.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react"
2-
import renderer from "react-test-renderer"
2+
import toJson from "enzyme-to-json"
3+
import { shallow } from "enzyme"
34

45
import Addons from "../addons"
56

@@ -82,14 +83,13 @@ describe("Addons", () => {
8283
});
8384

8485
it("renders correctly", () => {
85-
const tree = renderer
86-
.create(<Addons
87-
data={dataInput}
88-
social={socialInput}
89-
handleCheckChange={mockHandleCheckChange}
90-
handleDataChange={mockHandleDataChange}
91-
/>)
92-
.toJSON()
93-
expect(tree).toMatchSnapshot();
86+
const addOnComponent = shallow(<Addons
87+
data={dataInput}
88+
social={socialInput}
89+
handleCheckChange={mockHandleCheckChange}
90+
handleDataChange={mockHandleDataChange}
91+
/>);
92+
93+
expect(toJson(addOnComponent)).toMatchSnapshot();
9494
});
9595
});

0 commit comments

Comments
 (0)