Skip to content

Commit 5413719

Browse files
andreishketandreishket
committed
feat: tests for the ModalButtons
1 parent 7068a3c commit 5413719

File tree

3 files changed

+183
-6
lines changed

3 files changed

+183
-6
lines changed

‎vis/js/templates/buttons/EmailButton.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import useMatomo from "../../utils/useMatomo";
77
const EmailButton = () => {
88
const title = encodeURIComponent(document.title);
99
const pageUrl = encodeURIComponent(window.location.href);
10-
const description = encodeURIComponent(
11-
$("meta[name='description']").attr("content")
12-
);
10+
const descriptionMetaTag = document.querySelector("meta[name='description']");
11+
const description = descriptionMetaTag
12+
? encodeURIComponent(descriptionMetaTag.content)
13+
: "";
1314

1415
const url = `mailto:?subject=${title}&body=${description} ${pageUrl}`;
1516

‎vis/js/templates/buttons/ShareButton.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,10 @@ const ShareButton = ({ twitterHashtags, isStreamgraph }) => {
4040

4141
const title = encodeURIComponent(document.title);
4242
const url = encodeURIComponent(window.location.href);
43-
const description = encodeURIComponent(
44-
$("meta[name='description']").attr("content")
45-
);
43+
const descriptionMetaTag = document.querySelector("meta[name='description']");
44+
const description = descriptionMetaTag
45+
? encodeURIComponent(descriptionMetaTag.content)
46+
: "";
4647
twitterHashtags = encodeURIComponent(twitterHashtags);
4748

4849
const twitterUrl = `https://twitter.com/intent/tweet?url=${url}&hashtags=${twitterHashtags}&text=${title}`;

‎vis/test/component/modalbuttons.test.tsx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import React from "react";
2+
import { Provider } from "react-redux";
3+
import configureStore from "redux-mock-store";
4+
import { render } from "@testing-library/react";
5+
import ModalButtons from "../../js/components/ModalButtons";
6+
7+
// Configuring the mock Redux store
8+
const mockStore = configureStore([]);
9+
10+
// Preparing mocked Redux store data
11+
const getMockStoreData = (
12+
isWithShareButton: boolean,
13+
isWithShareViaEmail: boolean,
14+
isWithShareViaTwitter: boolean,
15+
isWithEmbedButton: boolean,
16+
isWithFAQButton: boolean,
17+
isWithCitationButton: boolean,
18+
isWithReloadButton: boolean
19+
) => {
20+
return {
21+
modals: {
22+
showShareButton: isWithShareButton,
23+
showEmailButton: isWithShareViaEmail,
24+
showTwitterButton: isWithShareViaTwitter,
25+
showEmbedButton: isWithEmbedButton,
26+
showFAQsButton: isWithFAQButton,
27+
showCitationButton: isWithCitationButton,
28+
showReloadButton: isWithReloadButton,
29+
apiProperties: {
30+
lastUpdate: "",
31+
headstartPath: "//localhost:8085/headstart/server/",
32+
sheetID: null,
33+
persistenceBackend: "",
34+
},
35+
},
36+
misc: {
37+
isEmbedded: false,
38+
},
39+
};
40+
};
41+
42+
// Setup function for the ModalButtons component tests
43+
const setup = (
44+
isWithShareButton: boolean,
45+
isWithShareViaEmail: boolean,
46+
isWithShareViaTwitter: boolean,
47+
isWithEmbedButton: boolean,
48+
isWithFAQButton: boolean,
49+
isWithCitationButton: boolean,
50+
isWithReloadButton: boolean
51+
) => {
52+
const mockStoreData = getMockStoreData(
53+
isWithShareButton,
54+
isWithShareViaEmail,
55+
isWithShareViaTwitter,
56+
isWithEmbedButton,
57+
isWithFAQButton,
58+
isWithCitationButton,
59+
isWithReloadButton
60+
);
61+
const store = mockStore(mockStoreData);
62+
63+
const { container } = render(
64+
<Provider store={store}>
65+
<ModalButtons />
66+
</Provider>
67+
);
68+
69+
return container;
70+
};
71+
72+
// Test cases
73+
describe("ModalButtons component", () => {
74+
describe("Renders with correct button", () => {
75+
it("Renders with the share button", () => {
76+
const container = setup(true, false, false, false, false, false, false);
77+
78+
const shareButton = container.querySelector("#sharebutton");
79+
expect(shareButton).toBeInTheDocument();
80+
});
81+
82+
it("Renders with the share via email button", () => {
83+
const container = setup(false, true, false, false, false, false, false);
84+
85+
const shareWithEmailButton = container.querySelector(".sharebutton_mail");
86+
expect(shareWithEmailButton).toBeInTheDocument();
87+
});
88+
89+
it("Renders with the share via email button", () => {
90+
const container = setup(true, true, false, false, false, false, false);
91+
92+
const shareWithEmailButton = container.querySelector(".sharebutton_mail");
93+
expect(shareWithEmailButton).toBeInTheDocument();
94+
});
95+
96+
it("Renders with the share via twitter button", () => {
97+
const container = setup(false, false, true, false, false, false, false);
98+
99+
const shareViaTwitterButton = container.querySelector(
100+
".sharebutton_twitter"
101+
);
102+
expect(shareViaTwitterButton).toBeInTheDocument();
103+
});
104+
105+
it("Renders with the embed button", () => {
106+
const container = setup(false, false, false, true, false, false, false);
107+
108+
const embedButton = container.querySelector("#embedlink");
109+
expect(embedButton).toBeInTheDocument();
110+
});
111+
112+
it("Renders with the embed button", () => {
113+
const container = setup(false, false, false, true, false, false, false);
114+
115+
const embedButton = container.querySelector("#embedlink");
116+
expect(embedButton).toBeInTheDocument();
117+
});
118+
119+
it("Renders with the FAQ button", () => {
120+
const container = setup(false, false, false, false, true, false, false);
121+
122+
const faqButton = container.querySelector("#faqs_button");
123+
expect(faqButton).toBeInTheDocument();
124+
});
125+
126+
it("Renders with the citation button", () => {
127+
const container = setup(false, false, false, false, false, true, false);
128+
129+
const citationButton = container.querySelector("#citationlink");
130+
expect(citationButton).toBeInTheDocument();
131+
});
132+
133+
it("Renders without the reload button if data for it was not provided", () => {
134+
const container = setup(false, false, false, false, false, false, true);
135+
136+
const reloadButton = container.querySelector("#reload");
137+
expect(reloadButton).not.toBeInTheDocument();
138+
});
139+
});
140+
141+
describe("Renders with correct buttons combinations", () => {
142+
it("Renders with citation and email buttons", () => {
143+
const container = setup(false, true, false, false, false, true, false);
144+
145+
const shareWithEmailButton = container.querySelector(".sharebutton_mail");
146+
expect(shareWithEmailButton).toBeInTheDocument();
147+
148+
const citationButton = container.querySelector("#citationlink");
149+
expect(citationButton).toBeInTheDocument();
150+
});
151+
152+
it("Renders with citation and share buttons", () => {
153+
const container = setup(true, false, false, false, false, true, false);
154+
155+
const shareButton = container.querySelector("#sharebutton");
156+
expect(shareButton).toBeInTheDocument();
157+
158+
const citationButton = container.querySelector("#citationlink");
159+
expect(citationButton).toBeInTheDocument();
160+
});
161+
162+
it("Renders with citation, faq and embed buttons", () => {
163+
const container = setup(false, false, false, true, true, true, false);
164+
165+
const citationButton = container.querySelector("#citationlink");
166+
expect(citationButton).toBeInTheDocument();
167+
168+
const faqButton = container.querySelector("#faqs_button");
169+
expect(faqButton).toBeInTheDocument();
170+
171+
const embedButton = container.querySelector("#embedlink");
172+
expect(embedButton).toBeInTheDocument();
173+
});
174+
});
175+
});

0 commit comments

Comments
 (0)