From 5c2f9a8be38ed68a08f18c5f175d79f1fff3a432 Mon Sep 17 00:00:00 2001
From: Serena Li <serena.li.usa@gmail.com>
Date: Sat, 24 Jun 2023 23:36:45 -0400
Subject: [PATCH] write tests

---
 frontend2/src/__test__/App.test.tsx           |  9 -------
 .../sidebar/__test__/Sidebar.test.tsx         | 27 +++++++++++++++++++
 frontend2/src/components/sidebar/index.tsx    |  9 +++----
 frontend2/src/contexts/EpisodeContext.ts      |  3 ++-
 4 files changed, 33 insertions(+), 15 deletions(-)
 delete mode 100644 frontend2/src/__test__/App.test.tsx
 create mode 100644 frontend2/src/components/sidebar/__test__/Sidebar.test.tsx

diff --git a/frontend2/src/__test__/App.test.tsx b/frontend2/src/__test__/App.test.tsx
deleted file mode 100644
index 23cb96605..000000000
--- a/frontend2/src/__test__/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import App from "../App";
-
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/frontend2/src/components/sidebar/__test__/Sidebar.test.tsx b/frontend2/src/components/sidebar/__test__/Sidebar.test.tsx
new file mode 100644
index 000000000..35423c69f
--- /dev/null
+++ b/frontend2/src/components/sidebar/__test__/Sidebar.test.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Sidebar from "../";
+import { DEFAULT_EPISODE } from "../../../utils/constants";
+import { EpisodeContext } from "../../../contexts/EpisodeContext";
+import { MemoryRouter } from "react-router-dom";
+
+test('should link to default episode', () => {
+  render(<MemoryRouter><Sidebar /></MemoryRouter>);
+  const linkElement = screen.getByText('Resources').closest('a')?.getAttribute('href');
+  expect(linkElement).toEqual(expect.stringContaining(`/${DEFAULT_EPISODE}/resources`));
+});
+
+test('should collapse sidebar', () => {
+  render(<MemoryRouter><Sidebar collapsed={true} /></MemoryRouter>);
+  expect(screen.queryByText('Home')).toBeNull();
+});
+
+test('should link to episode in surrounding context', () => {
+  render(<MemoryRouter>
+    <EpisodeContext.Provider value={{ episode: "something", setEpisode: (_) => undefined }}>
+      <Sidebar />
+    </EpisodeContext.Provider></MemoryRouter>
+  );
+  const linkElement = screen.getByText('Resources').closest('a')?.getAttribute('href');
+  expect(linkElement).toEqual(expect.stringContaining(`/something/resources`));
+});
diff --git a/frontend2/src/components/sidebar/index.tsx b/frontend2/src/components/sidebar/index.tsx
index b67b151e6..3cc885acc 100644
--- a/frontend2/src/components/sidebar/index.tsx
+++ b/frontend2/src/components/sidebar/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import SidebarSection from "./SidebarSection";
 import SidebarItem from "./SidebarItem";
 import {
@@ -6,8 +6,7 @@ import {
   TrophyIcon, ChartBarIcon, ClockIcon,
   UserGroupIcon, ArrowUpTrayIcon, PlayCircleIcon,
 } from "@heroicons/react/24/outline";
-import { useParams } from "react-router-dom";
-import { DEFAULT_EPISODE } from "../../utils/constants";
+import { EpisodeContext } from "../../contexts/EpisodeContext";
 
 interface SidebarProps {
   collapsed?: boolean;
@@ -17,8 +16,8 @@ const Sidebar: React.FC<SidebarProps> = ({
   collapsed
 }) => {
   collapsed = collapsed ?? false;
-  const { episode } = useParams();
-  const linkBase = `/${episode ?? DEFAULT_EPISODE}/`;
+  const { episode } = useContext(EpisodeContext);
+  const linkBase = `/${episode}/`;
 
   return (
     collapsed ? null : (
diff --git a/frontend2/src/contexts/EpisodeContext.ts b/frontend2/src/contexts/EpisodeContext.ts
index 58092bb3f..214c688ec 100644
--- a/frontend2/src/contexts/EpisodeContext.ts
+++ b/frontend2/src/contexts/EpisodeContext.ts
@@ -1,8 +1,9 @@
 import { createContext } from "react";
+import { DEFAULT_EPISODE } from "../utils/constants";
 
 export const EpisodeContext = createContext({
   // the default episode.
-  episode: "bc23",
+  episode: DEFAULT_EPISODE,
   setEpisode: (episode: string) => {
     console.log("default episode");
   },