chore: wirte tests

src/components/organisms/pupil/browse/OakPupilJourneyLayout/OakPupilJourneyLayout.test.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+
+import {
+  OakPupilJourneyLayout,
+  getBackgroundUrlForSection,
+  PupilJourneySectionName,
+  Phase,
+} from "./OakPupilJourneyLayout";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+import { OakThemeProvider } from "@/components/atoms";
+import { oakDefaultTheme } from "@/styles";
+
+describe("OakPupilJourneyLayout", () => {
+  it("should render successfully", () => {
+    const { getByText } = renderWithTheme(
+      <OakPupilJourneyLayout sectionName={"tier-listing"}>
+        <p>Hello World</p>
+      </OakPupilJourneyLayout>,
+    );
+    expect(getByText("Hello World")).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const tree = create(
+      <OakThemeProvider theme={oakDefaultTheme}>
+        <OakPupilJourneyLayout sectionName={"tier-listing"}>
+          <p>Hello World</p>
+        </OakPupilJourneyLayout>
+      </OakThemeProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe("getBackgroundUrlForSection", () => {
+  it("should return the correct background image for lesson-listing primary", () => {
+    expect(getBackgroundUrlForSection("lesson-listing", "primary")).toBe(
+      "svgs/pupil-journey/confetti-pink.svg",
+    );
+  });
+
+  it("should return the correct background image for lesson-listing secondary", () => {
+    expect(getBackgroundUrlForSection("lesson-listing", "secondary")).toBe(
+      "svgs/pupil-journey/confetti-lavender.svg",
+    );
+  });
+
+  it("should return the correct background image for unit-listing primary", () => {
+    expect(getBackgroundUrlForSection("unit-listing", "primary")).toBe(
+      "svgs/pupil-journey/line-pink.svg",
+    );
+  });
+
+  it("should return the correct background image for unit-listing secondary", () => {
+    expect(getBackgroundUrlForSection("unit-listing", "secondary")).toBe(
+      "svgs/pupil-journey/line-lavender.svg",
+    );
+  });
+
+  it("should return the correct background image for subject-listing", () => {
+    expect(getBackgroundUrlForSection("subject-listing")).toBe(
+      "svgs/pupil-journey/line-mint.svg",
+    );
+  });
+
+  it("should return the correct background image for year-listing", () => {
+    expect(getBackgroundUrlForSection("year-listing")).toBe(
+      "svgs/pupil-journey/confetti-mint.svg",
+    );
+  });
+});
+
+describe("OakPupilJourneyLayout backgroundColor", () => {
+  const renderComponent = (
+    sectionName: PupilJourneySectionName,
+    phase?: Phase,
+  ) =>
+    renderWithTheme(
+      <OakPupilJourneyLayout sectionName={sectionName} phase={phase}>
+        <p>Test Content</p>
+      </OakPupilJourneyLayout>,
+    );
+
+  it("should return bg-decorative4-very-subdued for lesson-listing primary", () => {
+    const { container } = renderComponent("lesson-listing", "primary");
+    expect(container.firstChild).toHaveStyle("background: rgb(245, 233, 242)");
+  });
+
+  it("should return bg-decorative3-very-subdued for lesson-listing secondary", () => {
+    const { container } = renderComponent("lesson-listing", "secondary");
+    expect(container.firstChild).toHaveStyle("background: rgb(227, 233, 251)");
+  });
+
+  it("should return bg-decorative4-very-subdued for unit-listing primary", () => {
+    const { container } = renderComponent("unit-listing", "primary");
+    expect(container.firstChild).toHaveStyle("background: rgb(245, 233, 242)");
+  });
+
+  it("should return bg-decorative3-very-subdued for unit-listing secondary", () => {
+    const { container } = renderComponent("unit-listing", "secondary");
+    expect(container.firstChild).toHaveStyle("background: rgb(227, 233, 251)");
+  });
+
+  it("should return bg-decorative4-very-subdued for tier-listing primary", () => {
+    const { container } = renderComponent("tier-listing", "primary");
+    expect(container.firstChild).toHaveStyle("background: rgb(245, 233, 242)");
+  });
+
+  it("should return bg-decorative3-very-subdued for tier-listing secondary", () => {
+    const { container } = renderComponent("tier-listing", "secondary");
+    expect(container.firstChild).toHaveStyle("background: rgb(227, 233, 251)");
+  });
+
+  it("should return bg-decorative1-main for subject-listing", () => {
+    const { container } = renderComponent("subject-listing");
+    expect(container.firstChild).toHaveStyle("background: rgb(190, 242, 189)");
+  });
+
+  it("should return bg-decorative1-main for year-listing", () => {
+    const { container } = renderComponent("year-listing");
+    expect(container.firstChild).toHaveStyle("background: rgb(190, 242, 189)");
+  });
+});

src/components/organisms/pupil/browse/OakPupilJourneyLayout/OakPupilJourneyLayout.tsx

@@ -5,15 +5,15 @@ import { OakFlex } from "@/components/atoms";
 import { getBreakpoint } from "@/styles/utils/responsiveStyle";
 import { backgrounds } from "@/image-map";
 
-type PupilJourneySectionName =
+export type PupilJourneySectionName =
   | "tier-listing"
   | "examboard-listing"
   | "unit-listing"
   | "lesson-listing"
   | "subject-listing"
   | "year-listing";
 
-type Phase = "primary" | "secondary";
+export type Phase = "primary" | "secondary";
 
 export type OakPupilJourneyLayoutProps = {
   sectionName: PupilJourneySectionName;
@@ -96,7 +96,7 @@ export const OakPupilJourneyLayout = ({
   );
 };
 
-function getBackgroundUrlForSection(
+export function getBackgroundUrlForSection(
   sectionName: PupilJourneySectionName,
   phase?: Phase,
 ) {

src/components/organisms/pupil/browse/OakPupilJourneyLayout/__snapshots__/OakPupilJourneyLayout.test.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OakPupilJourneyLayout matches snapshot 1`] = `
+.c0 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+@media (min-width:750px) {
+  .c0 {
+    padding-left: 1.5rem;
+  }
+}
+
+@media (min-width:750px) {
+  .c0 {
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width:1280px) {
+  .c2 {
+    background-image: url();
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-size: 100%;
+  }
+}
+
+<div
+  className="c0 c1 c2"
+>
+  <p>
+    Hello World
+  </p>
+</div>
+`;

src/components/organisms/pupil/lesson/OakLessonLayout/OakLessonLayout.test.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+
+import { OakLessonLayout, OakLessonLayoutProps } from "./OakLessonLayout";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+import { OakThemeProvider } from "@/components/atoms";
+import { oakDefaultTheme } from "@/styles";
+
+describe("OakLessonLayout", () => {
+  it("should render successfully", () => {
+    const { getByText } = renderWithTheme(
+      <OakLessonLayout
+        lessonSectionName={"tier-listing"}
+        topNavSlot={<div>top nav slot</div>}
+        bottomNavSlot={<div>bottom nav slot</div>}
+      >
+        <p>Hello World</p>
+      </OakLessonLayout>,
+    );
+    expect(getByText("Hello World")).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const tree = create(
+      <OakThemeProvider theme={oakDefaultTheme}>
+        <OakLessonLayout
+          lessonSectionName={"tier-listing"}
+          topNavSlot={<div>top nav slot</div>}
+          bottomNavSlot={<div>bottom nav slot</div>}
+        >
+          <p>Hello World</p>
+        </OakLessonLayout>
+        ,
+      </OakThemeProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe("OakLessonLayoutProps", () => {
+  const renderComponent = (props: OakLessonLayoutProps) =>
+    renderWithTheme(
+      <OakLessonLayout
+        lessonSectionName={props.lessonSectionName}
+        phase={props.phase}
+        celebrate={props.celebrate}
+        topNavSlot={props.topNavSlot}
+        bottomNavSlot={props.bottomNavSlot}
+      >
+        {props.children}
+      </OakLessonLayout>,
+    );
+
+  it("should render with correct background color for overview section in primary phase", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "overview",
+      phase: "primary",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(229, 209, 224)");
+  });
+
+  it("should render with correct background color for overview section in secondary phase", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "overview",
+      phase: "secondary",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(198, 209, 239)");
+  });
+
+  it("should render with correct background color for intro section", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "intro",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(206, 231, 229)");
+  });
+
+  it("should render with correct background color for starter-quiz section", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "starter-quiz",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(190, 242, 189)");
+  });
+
+  it("should render with correct background color for video section", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "video",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(229, 209, 224)");
+  });
+
+  it("should render with correct background color for exit-quiz section", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "exit-quiz",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(255, 229, 85)");
+  });
+
+  it("should render with correct background color for review section in primary phase", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "review",
+      phase: "primary",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(229, 209, 224)");
+  });
+
+  it("should render with correct background color for review section in secondary phase", () => {
+    const { container } = renderComponent({
+      lessonSectionName: "review",
+      phase: "secondary",
+      topNavSlot: <div>top nav slot</div>,
+      bottomNavSlot: <div>bottom nav slot</div>,
+      children: <p>Hello World</p>,
+    });
+    expect(container.firstChild).toHaveStyle("background: rgb(198, 209, 239)");
+  });
+});