Skip to content

Commit 96e8b1c

Browse files
ankur-jain-nhsankur-jain-nhs
committed
VIA-629 AJ/EO Refactor MoreInformation component to be a client component as before
1 parent 2f8b4f9 commit 96e8b1c

File tree

2 files changed

+38
-70
lines changed

2 files changed

+38
-70
lines changed

‎src/app/_components/content/MoreInformation.test.tsx‎

Lines changed: 32 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,104 @@
11
import { MoreInformation } from "@src/app/_components/content/MoreInformation";
22
import { VaccineType } from "@src/models/vaccine";
3-
import { Campaigns } from "@src/utils/campaigns/types";
4-
import config from "@src/utils/config";
5-
import { ConfigMock, configBuilder } from "@test-data/config/builders";
63
import { mockStyledContent, mockStyledContentWithoutWhatSection } from "@test-data/content-api/data";
74
import { render, screen } from "@testing-library/react";
85

9-
jest.mock("sanitize-data", () => ({ sanitize: jest.fn() }));
10-
jest.mock("@src/utils/config");
11-
126
describe("MoreInformation component for COVID", () => {
13-
const mockedConfig = config as ConfigMock;
147
const covid19VaccineType: VaccineType = VaccineType.COVID_19;
15-
const campaigns = new Campaigns({});
16-
17-
beforeEach(() => {
18-
const defaultConfig = configBuilder().withCampaigns(campaigns).build();
19-
Object.assign(mockedConfig, defaultConfig);
20-
});
218

22-
it("should not show how-to-get expander section for COVID-19 vaccine when campaign is active", async () => {
23-
const activeCampaignSpy = jest.spyOn(campaigns, "isActive").mockReturnValue(true);
24-
25-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: covid19VaccineType }));
9+
it("should not show how-to-get expander section when campaign is active", async () => {
10+
render(
11+
<MoreInformation
12+
styledVaccineContent={mockStyledContent}
13+
vaccineType={covid19VaccineType}
14+
isCampaignActive={true}
15+
/>,
16+
);
2617

2718
// COVID-19 vaccine content (active campaign)
2819
expectExpanderBlockToNotBePresent("How to get the vaccine", "How Section styled component");
29-
expect(activeCampaignSpy).toHaveBeenCalledWith(covid19VaccineType, expect.any(Date));
3020
});
3121

32-
it("should show how-to-get expander section for COVID-19 vaccine when campaign is inactive", async () => {
33-
const inactiveCampaignSpy = jest.spyOn(campaigns, "isActive").mockReturnValue(false);
34-
35-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: covid19VaccineType }));
22+
it("should show how-to-get expander section when campaign is inactive", async () => {
23+
render(
24+
<MoreInformation
25+
styledVaccineContent={mockStyledContent}
26+
vaccineType={covid19VaccineType}
27+
isCampaignActive={false}
28+
/>,
29+
);
3630

3731
// COVID-19 vaccine content (closed campaign)
3832
expectExpanderBlockToBePresent("How to get the vaccine", "How Section styled component");
39-
expect(inactiveCampaignSpy).toHaveBeenCalledWith(covid19VaccineType, expect.any(Date));
4033
});
4134
});
4235

4336
describe("MoreInformation component ", () => {
44-
const mockedConfig = config as ConfigMock;
45-
46-
beforeEach(() => {
47-
const defaultConfig = configBuilder()
48-
.withCampaigns(
49-
Campaigns.fromJson(
50-
JSON.stringify({
51-
COVID_19: [
52-
{ start: "2025-11-01T09:00:00Z", end: "2026-01-31T09:00:00Z" },
53-
{ start: "2026-11-01T09:00:00Z", end: "2027-01-31T09:00:00Z" },
54-
],
55-
}),
56-
)!,
57-
)
58-
.build();
59-
Object.assign(mockedConfig, defaultConfig);
60-
});
6137

62-
describe("moreInformationHeadersFromContentApi false", () => {
38+
describe("When vaccineInfo.moreInformationHeadersFromContentApi=false", () => {
6339
it("should display whatItIsFor expander block", async () => {
6440
const vaccineType = VaccineType.RSV;
65-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
41+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
6642

6743
expectExpanderBlockToBePresent("What the vaccine is for", "What Section styled component");
6844
});
6945

7046
it("should display whoVaccineIsFor expander block", async () => {
7147
const vaccineType = VaccineType.RSV;
72-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
48+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
7349

7450
expectExpanderBlockToBePresent("Who should have the vaccine", "Who Section styled component");
7551
});
7652

7753
it("should display howToGet expander block", async () => {
7854
const vaccineType = VaccineType.TD_IPV_3_IN_1;
79-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
55+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
8056

8157
expectExpanderBlockToBePresent("How to get the vaccine", "How Section styled component");
8258
});
8359

8460
it("should display vaccineSideEffects expander block", async () => {
8561
const vaccineType = VaccineType.RSV;
86-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
62+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
8763

8864
expectExpanderBlockToBePresent("Side effects of the vaccine", "Side effects section styled component");
8965
});
9066
});
9167

92-
describe("moreInformationHeadersFromContentApi true", () => {
68+
describe("When vaccineInfo.moreInformationHeadersFromContentApi=true", () => {
9369
it("should display whatItIsFor expander block", async () => {
9470
const vaccineType = VaccineType.FLU_IN_PREGNANCY;
95-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
71+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
9672

9773
expectExpanderBlockToBePresent("what-heading", "What Section styled component");
9874
});
9975

10076
it("should display whoVaccineIsFor expander block", async () => {
10177
const vaccineType = VaccineType.FLU_IN_PREGNANCY;
102-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
78+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
10379

10480
expectExpanderBlockToBePresent("who-heading", "Who Section styled component");
10581
});
10682

10783
it("should display howToGet expander block", async () => {
10884
const vaccineType = VaccineType.FLU_IN_PREGNANCY;
109-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
85+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
11086

11187
expectExpanderBlockToBePresent("how-heading", "How Section styled component");
11288
});
11389

11490
it("should display vaccineSideEffects expander block", async () => {
11591
const vaccineType = VaccineType.FLU_IN_PREGNANCY;
116-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
92+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
11793

11894
expectExpanderBlockToBePresent("side-effects-heading", "Side effects section styled component");
11995
});
12096
});
12197

122-
describe("MoreInformation", () => {
98+
describe("For RSV and RSV in pregnancy", () => {
12399
it("should not include 'how to get' section for RSV_PREGNANCY ", async () => {
124100
const vaccineType = VaccineType.RSV_PREGNANCY;
125-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
101+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
126102

127103
const heading: HTMLElement | null = screen.queryByText("How to get the vaccine");
128104

@@ -131,7 +107,7 @@ describe("MoreInformation component ", () => {
131107

132108
it("should not include 'how to get' section for RSV ", async () => {
133109
const vaccineType = VaccineType.RSV;
134-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
110+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
135111

136112
const heading: HTMLElement | null = screen.queryByText("How to get the vaccine");
137113

@@ -140,7 +116,7 @@ describe("MoreInformation component ", () => {
140116

141117
it("should display webpage link to more information about vaccine", async () => {
142118
const vaccineType = VaccineType.RSV;
143-
render(await MoreInformation({ styledVaccineContent: mockStyledContent, vaccineType: vaccineType }));
119+
render(<MoreInformation styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
144120

145121
const webpageLink: HTMLElement = screen.getByRole("link", {
146122
name: "Find out more about the RSV vaccine",
@@ -153,9 +129,7 @@ describe("MoreInformation component ", () => {
153129

154130
it("should not display whatItIsFor section if undefined in content", async () => {
155131
const vaccineType = VaccineType.RSV;
156-
render(
157-
await MoreInformation({ styledVaccineContent: mockStyledContentWithoutWhatSection, vaccineType: vaccineType }),
158-
);
132+
render(<MoreInformation styledVaccineContent={mockStyledContentWithoutWhatSection} vaccineType={vaccineType} />);
159133

160134
const whatItIsForHeading: HTMLElement | null = screen.queryByText("What the vaccine is for");
161135
const whatItIsForContent: HTMLElement | null = screen.queryByText("What Section styled component");
@@ -166,9 +140,7 @@ describe("MoreInformation component ", () => {
166140

167141
it("should display whoVaccineIsFor section even if whatItIsFor is undefined in content", async () => {
168142
const vaccineType = VaccineType.RSV;
169-
render(
170-
await MoreInformation({ styledVaccineContent: mockStyledContentWithoutWhatSection, vaccineType: vaccineType }),
171-
);
143+
render(<MoreInformation styledVaccineContent={mockStyledContentWithoutWhatSection} vaccineType={vaccineType} />);
172144

173145
expectExpanderBlockToBePresent("Who should have the vaccine", "Who Section styled component");
174146
});

‎src/app/_components/content/MoreInformation.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
1-
"use server";
2-
31
import { FindOutMoreLink } from "@src/app/_components/content/FindOutMore";
42
import { HEADINGS } from "@src/app/constants";
53
import { VaccineInfo, VaccineType } from "@src/models/vaccine";
64
import { StyledVaccineContent } from "@src/services/content-api/types";
7-
import config from "@src/utils/config";
8-
import { getNow } from "@src/utils/date";
95
import { Details } from "nhsuk-react-components";
106
import React, { JSX } from "react";
117

128
// Ref: https://main--65aa76b29d00a047fe683b95.chromatic.com/?path=/docs/content-presentation-details--docs#expander-group-2
13-
const MoreInformation = async (props: {
9+
const MoreInformation = (props: {
1410
styledVaccineContent: StyledVaccineContent;
1511
vaccineType: VaccineType;
16-
}): Promise<JSX.Element> => {
17-
const campaigns = await config.CAMPAIGNS;
18-
const isCampaignActive: boolean = campaigns.isActive(props.vaccineType, await getNow());
19-
12+
isCampaignActive?: boolean;
13+
}): JSX.Element => {
2014
const vaccineInfo = VaccineInfo[props.vaccineType];
21-
const showHowToGetExpander = vaccineInfo.removeHowToGetExpanderFromMoreInformationSection ? false : !isCampaignActive;
15+
const showHowToGetExpander = vaccineInfo.removeHowToGetExpanderFromMoreInformationSection
16+
? false
17+
: !props.isCampaignActive;
2218

2319
return (
2420
<>

0 commit comments

Comments
 (0)