test: supporter level test

Author: anyulled

src/2023/Talks/components/TrackInformation.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useMemo } from "react";
-import { TalkCard } from "./TalkCard";
-import { IGroup } from "../Talk.types";
-import { StyledSessionSection, StyledTrackInfo } from "../Talks.style";
+import React, {FC, useMemo} from "react";
+import {TalkCard} from "./TalkCard";
+import {StyledSessionSection, StyledTrackInfo} from "../Talks.style";
+import {IGroup} from "../../../types/sessions";
 
 interface TrackInfoProps {
   track: IGroup;

src/2024/TalkDetail/MeetingDetailContainer.tsx

@@ -5,13 +5,14 @@ import SectionWrapper from "../../components/SectionWrapper/SectionWrapper";
 import styled from "styled-components";
 import {useParams} from "react-router";
 import conferenceData from "../../data/2024.json";
-import {sessionAdapter, useFetchTalksById} from "../Talks/UseFetchTalks";
+import {useFetchTalksById} from "../Talks/UseFetchTalks";
 import * as Sentry from "@sentry/react";
 import {useFetchSpeakers} from "../Speakers/UseFetchSpeakers";
 import MeetingDetail from "./MeetingDetail";
 
 import {ISpeaker} from "../../types/speakers";
 import {Session} from "../../types/sessions";
+import {sessionAdapter} from "../../services/sessionsAdapter";
 
 const StyledContainer = styled.div`
     background-color: ${Color.WHITE};

src/views/Home/components/Sponsors/Supporters.test.tsx

@@ -1,72 +1,82 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { Supporters } from "./Supporters";
+import {fireEvent, render, screen} from "@testing-library/react";
+import {Supporters} from "./Supporters";
 import React from "react";
-import { useWindowSize } from "react-use";
-import { BrowserRouter, Route, Routes } from "react-router";
+import {useWindowSize} from "react-use";
+import {BrowserRouter, Route, Routes} from "react-router";
+import {Sponsor} from "./SponsorsData";
 
 jest.mock("react-use", () => ({
-  useWindowSize: jest.fn(),
+    useWindowSize: jest.fn(),
 }));
 
 describe("Supporters", () => {
-  beforeEach(() => {
-    (useWindowSize as jest.Mock).mockReturnValue({ width: 1024 }); // Mock window width for testing
-  });
+    beforeEach(() => {
+        (useWindowSize as jest.Mock).mockReturnValue({width: 1024}); // Mock window width for testing
+    });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
 
-  // disabled until supporters included
-  it.skip("renders component with supporters", () => {
-    render(
-      <React.Suspense fallback={<span>Loading...</span>}>
-        <Routes>
-          <Route path={""} element={<Supporters />} />
-        </Routes>
-      </React.Suspense>,
-      { wrapper: BrowserRouter }
-    );
+    const supporters: Sponsor[] = [{
+        name: "test",
+        website: "https://www.acme.com",
+        image: "https://www.acme.com/logo.png",
+    }];
 
-    expect(screen.getByTestId("supporters")).toBeInTheDocument();
-    expect(screen.getByText("SUPPORTERS")).toBeInTheDocument();
-    expect(screen.getAllByRole("link")).toHaveLength(5);
-  });
+    // disabled until supporters included
+    it("renders component with supporters", () => {
+        render(
+            <React.Suspense fallback={<span>Loading...</span>}>
+                <Routes>
+                    <Route path={""}
+                           element={<Supporters sponsors={supporters}/>}/>
+                </Routes>
+            </React.Suspense>,
+            {wrapper: BrowserRouter}
+        );
 
-  it.skip("applies hover styles on mouse enter", () => {
-    render(
-      <React.Suspense fallback={<span>Loading...</span>}>
-        <Routes>
-          <Route path={"*"} element={<Supporters />} />
-        </Routes>
-      </React.Suspense>,
-      { wrapper: BrowserRouter }
-    );
-    const supportersElement = screen.getByTestId("supporters");
+        expect(screen.getByTestId("supporters")).toBeInTheDocument();
+        expect(screen.getByText("SUPPORTERS")).toBeInTheDocument();
+        expect(screen.getAllByRole("link")).toHaveLength(1);
+    });
 
-    fireEvent.mouseEnter(supportersElement);
+    it("applies hover styles on mouse enter", () => {
+        render(
+            <React.Suspense fallback={<span>Loading...</span>}>
+                <Routes>
+                    <Route path={"*"}
+                           element={<Supporters sponsors={supporters}/>}/>
+                </Routes>
+            </React.Suspense>,
+            {wrapper: BrowserRouter}
+        );
+        const supportersElement = screen.getByTestId("supporters");
 
-    expect(supportersElement).toHaveClass("SponsorItem");
-    expect(screen.getByText("SUPPORTERS")).toHaveStyle(
-      "color: rgb(255, 252, 249)"
-    );
-  });
+        fireEvent.mouseEnter(supportersElement);
 
-  it.skip("removes hover styles on mouse leave", () => {
-    render(
-      <React.Suspense fallback={<span>Loading...</span>}>
-        <Routes>
-          <Route path={"*"} element={<Supporters />} />
-        </Routes>
-      </React.Suspense>,
-      { wrapper: BrowserRouter }
-    );
-    const supporterElement = screen.getByTestId("supporters");
+        expect(supportersElement).toHaveClass("SponsorItem");
+        expect(screen.getByText("SUPPORTERS")).toHaveStyle(
+            "color: rgb(255, 252, 249)"
+        );
+    });
 
-    fireEvent.mouseEnter(supporterElement);
-    fireEvent.mouseLeave(supporterElement);
+    it("removes hover styles on mouse leave", () => {
+        render(
+            <React.Suspense fallback={<span>Loading...</span>}>
+                <Routes>
+                    <Route path={"*"}
+                           element={<Supporters sponsors={supporters}/>}/>
+                </Routes>
+            </React.Suspense>,
+            {wrapper: BrowserRouter}
+        );
+        const supporterElement = screen.getByTestId("supporters");
 
-    expect(supporterElement).not.toHaveClass("hovered");
-    expect(screen.getByText("SUPPORTERS")).toHaveStyle("color: rgb(0, 36, 84)");
-  });
+        fireEvent.mouseEnter(supporterElement);
+        fireEvent.mouseLeave(supporterElement);
+
+        expect(supporterElement).not.toHaveClass("hovered");
+        expect(screen.getByText("SUPPORTERS")).toHaveStyle("color: rgb(0, 36, 84)");
+    });
 });