Skip to content

PRMT-1753 [HZ/JN] Fix feature toggles in Dev environment #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nhshz merged 4 commits into from
Mar 23, 2021
Merged

PRMT-1753 [HZ/JN] Fix feature toggles in Dev environment #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
213dc45
PRMT-1753 [JN/HZ] Load feature toggles ones and provide them across t…
jnewman-nhs Mar 22, 2021
097eefb
PRMT-1753 [HZ/JN] - Add useFeatureToggles React hook that loads featu…
nhshz Mar 22, 2021
8255e8e
PRMT-1753 Add URL Param override for feature toggles in dev
nhshz Mar 23, 2021
088f953
PRMT-1753 Add FeatureToggle typing
nhshz Mar 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions featureToggles.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"dev": {
"showSomePage": true
},
"prod": {
"showSomePage": false
}
}
1 change: 0 additions & 1 deletion flags.json
View file
Open in desktop

This file was deleted.

78 changes: 44 additions & 34 deletions src/layouts/__tests__/general.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import React from "react";
import { render } from "@testing-library/react";
import { render, waitFor } from "@testing-library/react";
import Layout from "../";

describe("General layout", () => {
it("displays header and footer", () => {
it("displays header and footer", async () => {
const { getByRole } = render(
<Layout path="/cookies-policy/" pageContext={{ layout: "general" }}>
<p>This is a paragraph.</p>
</Layout>
);

const header = getByRole("banner");
const footer = getByRole("contentinfo");

expect(header).toBeInTheDocument();
expect(footer).toBeInTheDocument();
await waitFor(() => {
const header = getByRole("banner");
const footer = getByRole("contentinfo");
expect(header).toBeInTheDocument();
expect(footer).toBeInTheDocument();
});
});

it("displays children", () => {
it("displays children", async () => {
const { getByTestId, getByText } = render(
<Layout path="/cookies-policy/" pageContext={{ layout: "general" }}>
<div data-testid="test-div">
Expand All @@ -26,25 +27,28 @@ describe("General layout", () => {
</Layout>
);

const testDiv = getByTestId("test-div");
await waitFor(() => {
const testDiv = getByTestId("test-div");

expect(testDiv).toBeInTheDocument();
expect(getByText("This is title")).toBeInTheDocument();
expect(testDiv).toBeInTheDocument();
expect(getByText("This is title")).toBeInTheDocument();
});
});

it("does not display cookie banner on cookie policy page", () => {
it("does not display cookie banner on cookie policy page", async () => {
const { queryByLabelText } = render(
<Layout path="/cookies-policy/" pageContext={{ layout: "general" }}>
<p>This is a paragraph.</p>
</Layout>
);

const cookieBanner = queryByLabelText("Cookie banner");

expect(cookieBanner).not.toBeInTheDocument();
await waitFor(() => {
const cookieBanner = queryByLabelText("Cookie banner");
expect(cookieBanner).not.toBeInTheDocument();
});
});

it("displays cookie banner on accessibility page", () => {
it("displays cookie banner on accessibility page", async () => {
const { getByLabelText } = render(
<Layout
path="/accessibility-statement/"
Expand All @@ -54,51 +58,57 @@ describe("General layout", () => {
</Layout>
);

const cookieBanner = getByLabelText("Cookie banner");
await waitFor(() => {
const cookieBanner = getByLabelText("Cookie banner");

expect(cookieBanner).toBeInTheDocument();
expect(cookieBanner).toBeInTheDocument();
});
});

it("displays feedback banner", () => {
it("displays feedback banner", async () => {
const { getByRole } = render(
<Layout path="/cookies-policy/" pageContext={{ layout: "general" }}>
<p>This is a paragraph.</p>
</Layout>
);

const feedbackBannerHeading = getByRole("heading", {
name: "Tell us what you think",
await waitFor(() => {
const feedbackBannerHeading = getByRole("heading", {
name: "Tell us what you think",
});
expect(feedbackBannerHeading).toBeInTheDocument();
});

expect(feedbackBannerHeading).toBeInTheDocument();
});

it("does not display hero banner", () => {
it("does not display hero banner", async () => {
const { queryByRole } = render(
<Layout path="/cookies-policy/" pageContext={{ layout: "general" }}>
<p>This is a paragraph.</p>
</Layout>
);

const heroBannerHeading = queryByRole("heading", {
name: "GP2GP patient record transfers data",
await waitFor(() => {
const heroBannerHeading = queryByRole("heading", {
name: "GP2GP patient record transfers data",
});
expect(heroBannerHeading).not.toBeInTheDocument();
});

expect(heroBannerHeading).not.toBeInTheDocument();
});

it("displays back to search link", () => {
it("displays back to search link", async () => {
const { getAllByRole } = render(
<Layout path="/cookies-policy/" pageContext={{ layout: "general" }}>
<p>This is a paragraph.</p>
</Layout>
);

const backToSearchLink = getAllByRole("link", {
name: "Back to search",
})[0];
await waitFor(() => {
const backToSearchLink = getAllByRole("link", {
name: "Back to search",
})[0];

expect(backToSearchLink).toBeInTheDocument();
expect(backToSearchLink.getAttribute("href")).toBe("/");
expect(backToSearchLink).toBeInTheDocument();
expect(backToSearchLink.getAttribute("href")).toBe("/");
});
});
});
68 changes: 40 additions & 28 deletions src/layouts/__tests__/homepage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import React from "react";
import { render } from "@testing-library/react";
import { render, waitFor } from "@testing-library/react";
import Layout from "../";

describe("Homepage layout", () => {
it("displays header and footer", () => {
it("displays header and footer", async () => {
const { getByRole } = render(
<Layout path="/" pageContext={{ layout: "homepage" }}>
<p>This is a paragraph.</p>
</Layout>
);

const header = getByRole("banner");
const footer = getByRole("contentinfo");
await waitFor(() => {
const header = getByRole("banner");
const footer = getByRole("contentinfo");

expect(header).toBeInTheDocument();
expect(footer).toBeInTheDocument();
expect(header).toBeInTheDocument();
expect(footer).toBeInTheDocument();
});
});

it("displays children", () => {
it("displays children", async () => {
const { getByTestId, getByText } = render(
<Layout path="/" pageContext={{ layout: "homepage" }}>
<div data-testid="test-div">
Expand All @@ -26,63 +28,73 @@ describe("Homepage layout", () => {
</Layout>
);

const testDiv = getByTestId("test-div");
await waitFor(() => {
const testDiv = getByTestId("test-div");

expect(testDiv).toBeInTheDocument();
expect(getByText("This is title")).toBeInTheDocument();
expect(testDiv).toBeInTheDocument();
expect(getByText("This is title")).toBeInTheDocument();
});
});

it("displays cookie banner", () => {
it("displays cookie banner", async () => {
const { getByLabelText } = render(
<Layout path="/" pageContext={{ layout: "homepage" }}>
<p>This is a paragraph.</p>
</Layout>
);

const cookieBanner = getByLabelText("Cookie banner");
await waitFor(() => {
const cookieBanner = getByLabelText("Cookie banner");

expect(cookieBanner).toBeInTheDocument();
expect(cookieBanner).toBeInTheDocument();
});
});

it("displays feedback banner", () => {
it("displays feedback banner", async () => {
const { getByRole } = render(
<Layout path="/" pageContext={{ layout: "homepage" }}>
<p>This is a paragraph.</p>
</Layout>
);

const feedbackBannerHeading = getByRole("heading", {
name: "Tell us what you think",
});
await waitFor(() => {
const feedbackBannerHeading = getByRole("heading", {
name: "Tell us what you think",
});

expect(feedbackBannerHeading).toBeInTheDocument();
expect(feedbackBannerHeading).toBeInTheDocument();
});
});

it("displays hero banner", () => {
it("displays hero banner", async () => {
const { getByRole } = render(
<Layout path="/" pageContext={{ layout: "homepage" }}>
<p>This is a paragraph.</p>
</Layout>
);

const heroBannerHeading = getByRole("heading", {
name: "GP2GP patient record transfers data",
});
await waitFor(() => {
const heroBannerHeading = getByRole("heading", {
name: "GP2GP patient record transfers data",
});

expect(heroBannerHeading).toBeInTheDocument();
expect(heroBannerHeading).toBeInTheDocument();
});
});

it("does not display back to search link", () => {
it("does not display back to search link", async () => {
const { queryByRole } = render(
<Layout path="/" pageContext={{ layout: "homepage" }}>
<p>This is a paragraph.</p>
</Layout>
);

const backToSearchLink = queryByRole("link", {
name: "Back to search",
});
await waitFor(() => {
const backToSearchLink = queryByRole("link", {
name: "Back to search",
});

expect(backToSearchLink).not.toBeInTheDocument();
expect(backToSearchLink).not.toBeInTheDocument();
});
});
});
45 changes: 26 additions & 19 deletions src/layouts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState, FC, ReactNode } from "react";
import React, { useEffect, FC, ReactNode } from "react";
import { useCookies } from "react-cookie";
import { Helmet } from "react-helmet";
import { Link } from "gatsby";
Expand All @@ -10,10 +10,13 @@ import { FeedbackBanner } from "../components/FeedbackBanner";
import { ErrorBoundary } from "../components/ErrorBoundary";
import { HeroBanner } from "../components/common/HeroBanner";
import { setupAnalytics } from "../library/setupAnalytics";
import { useFeatureToggle } from "../library/hooks/useFeatureToggle";
import { getEnv } from "../library/utils/getEnv";
import analytics from "../../analytics-config.json";
import { NHS_COOKIE_NAME } from "../library/constants";
import {
FeatureTogglesContext,
useFetchFeatureToggles,
} from "../library/hooks/useFeatureToggle/";
import homepageContent from "../data/content/homepage.json";
import "./index.scss";

Expand Down Expand Up @@ -76,8 +79,8 @@ const BackToLink = ({ text, link }: { text: string; link: string }) => (
const GeneralContent: FC<ContentProps> = ({ children }) => {
return (
<div className="nhsuk-width-container">
<BackToLink link="/" text="Back to search" />
<main className={"nhsuk-main-wrapper nhsuk-u-padding-top-2"}>
<BackToLink link="/" text="Back to search" />
<main className={"nhsuk-main-wrapper nhsuk-u-padding-top-2"}>
<FeedbackBanner />
{children}
</main>
Expand All @@ -86,14 +89,11 @@ const GeneralContent: FC<ContentProps> = ({ children }) => {
};

const Layout: FC<LayoutProps> = ({ path, children, pageContext }) => {
const [hasMounted, setHasMounted] = useState(false);
const [cookies] = useCookies([NHS_COOKIE_NAME]);
const hasCookieConsent = cookies[NHS_COOKIE_NAME] === "true";
const isOnCookiePage = path === "/cookies-policy/";

useEffect(() => {
setHasMounted(true);
}, []);
const { toggles, isLoadingToggles } = useFetchFeatureToggles();

useEffect(() => {
setupAnalytics({
Expand All @@ -102,7 +102,7 @@ const Layout: FC<LayoutProps> = ({ path, children, pageContext }) => {
});
}, [hasCookieConsent]);

if (!hasMounted) {
if (isLoadingToggles) {
return null;
}

Expand All @@ -115,16 +115,23 @@ const Layout: FC<LayoutProps> = ({ path, children, pageContext }) => {
src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`}
></script>
</Helmet>
<ErrorBoundary>
{!isOnCookiePage && <CookieBanner path={path} />}
<Header />
{pageContext.layout === "homepage" ? (
<HomepageContent>{children}</HomepageContent>
) : (
<GeneralContent>{children}</GeneralContent>
)}
<Footer />
</ErrorBoundary>
<FeatureTogglesContext.Provider value={toggles}>
<ErrorBoundary>
{!isOnCookiePage && <CookieBanner path={path} />}
<Header />
<div className="nhsuk-width-container">
<main className="nhsuk-main-wrapper">
{pageContext.layout === "homepage" ? (
<HomepageContent>{children}</HomepageContent>
) : (
<GeneralContent>{children}</GeneralContent>
)}
</main>
</div>

<Footer />
</ErrorBoundary>
</FeatureTogglesContext.Provider>
</>
);
};
Expand Down
Loading