Merge pull request #50 from danielvanc/dev

Dev

.gitignore

@@ -8,3 +8,4 @@ node_modules
 /**/.DS_Store
 
 .react-router/
+coverage/**

app/__tests__/gameDate.test.tsx

@@ -0,0 +1,49 @@
+import {
+  render,
+  screen,
+  gamesTodayNotStarted,
+  gamesYesterdayNotStarted,
+} from "~/__tests__/utils";
+import GameDateInfo from "~/components/gameDateInfo";
+import type { GamesType } from "~/utils/games";
+
+beforeAll(() => {
+  vi.useFakeTimers();
+});
+
+afterAll(() => {
+  vi.useRealTimers();
+});
+
+function setUp(game: GamesType, gamesDate: string) {
+  render(<GameDateInfo game={game} gamesDate={gamesDate} />);
+}
+
+test("Renders GameDateInfo for Today", () => {
+  vi.setSystemTime("2025-01-30T00:00:00Z");
+  const { games } = gamesTodayNotStarted;
+  setUp(games[0], "2025-01-30T03:00:00Z");
+
+  expect(screen.getByText(/3:00 am \(et\)/i)).toBeInTheDocument();
+  expect(screen.queryByText(/29 \/ 01/i)).not.toBeInTheDocument();
+});
+
+test("Renders GameDateInfo for Yesterday", () => {
+  vi.setSystemTime("2025-01-30T00:00:00Z");
+  const { games } = gamesYesterdayNotStarted;
+  setUp(games[0], "2025-01-29T00:00:00Z");
+
+  expect(screen.getByText(/112 - 110/i)).toBeInTheDocument();
+  expect(screen.queryByText(/3:00 am \(et\)/i)).not.toBeInTheDocument();
+  expect(screen.queryByText(/29 \/ 01/i)).not.toBeInTheDocument();
+});
+
+test("Renders GameDateInfo for previous days ago", () => {
+  vi.setSystemTime("2025-01-30T00:00:00Z");
+  const { games } = gamesYesterdayNotStarted;
+  setUp(games[0], "2025-01-27T00:00:00Z");
+
+  expect(screen.queryByText(/3:00 am \(et\)/i)).not.toBeInTheDocument();
+  expect(screen.getByText(/29 \/ 01/i)).toBeInTheDocument();
+  expect(screen.getByText(/112 - 110/i)).toBeInTheDocument();
+});

app/__tests__/header.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, createRoutesStub, userEvent } from "~/__tests__/utils";
+import Header from "~/components/header";
+
+beforeAll(() => {
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
+afterAll(() => {
+  vi.clearAllMocks();
+});
+
+beforeEach(() => {
+  const spanRef = { current: document.createElement("span") };
+
+  const HeaderStub = createRoutesStub([
+    {
+      path: "/",
+      Component: () => {
+        return <Header defaultTheme="all" newTheme={"all"} spanRef={spanRef} />;
+      },
+      HydrateFallback: () => null,
+    },
+  ]);
+
+  render(<HeaderStub />);
+});
+
+test("Renders Header component successfully", () => {
+  expect(screen.getByRole("banner")).toBeInTheDocument();
+  expect(screen.getAllByRole("navigation")[0]).toBeInTheDocument();
+  expect(screen.getAllByRole("navigation")[1]).toBeInTheDocument();
+
+  const logoLink = screen.getByRole("link", { name: /base line/i });
+  expect(logoLink).toBeInTheDocument();
+  expect(logoLink).toHaveAttribute("href", "/");
+});
+
+test("Renders dropdown successfully when clicked on", async () => {
+  const dropdown = screen.getByRole("button", { name: /all all teams/i });
+  expect(dropdown).toBeInTheDocument();
+
+  await userEvent.click(dropdown);
+
+  expect(screen.getByText("Phoenix Suns")).toBeInTheDocument();
+});

app/__tests__/latestNews.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "~/__tests__/utils";
+import LatestNews from "~/components/latestNews";
+import { getLatestNews } from "~/utils/news";
+
+async function setUp() {
+  const latestNews = await getLatestNews();
+  render(<LatestNews data={latestNews} />);
+}
+
+test("Renders LatestNews component successfully", async () => {
+  await setUp();
+
+  expect(
+    screen.getByRole("heading", {
+      name: /latest news/i,
+    })
+  ).toBeInTheDocument();
+});
+
+test("Renders LatestNews with correct amount of news items and content", async () => {
+  await setUp();
+
+  const newsItemsList = screen.getByRole("list");
+  expect(newsItemsList).toBeInTheDocument();
+  expect(newsItemsList.children).toHaveLength(10);
+
+  Array.from(newsItemsList.children).forEach((item) => {
+    expect(item.querySelector("a")).toBeInTheDocument();
+  });
+
+  expect(
+    screen.getByRole("link", {
+      name: /all latest news »/i,
+    })
+  ).toBeInTheDocument();
+});
+
+test("Renders LatestNews news items links to have new tab opener attribute", async () => {
+  await setUp();
+
+  const newsItemsList = screen.getByRole("list");
+
+  Array.from(newsItemsList.children).forEach((item) => {
+    expect(item.querySelector("a")).toHaveAttribute("target", "_blank");
+  });
+});

app/__tests__/latestStandings.test.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from "~/__tests__/utils";
+import StandingsList from "~/components/standings-list";
+import { getLatestStandings, type TeamTableRow } from "~/utils/games";
+
+function setUp(heading: "Eastern" | "Western", data: TeamTableRow[]) {
+  render(<StandingsList heading={heading} theme="all" data={data} />);
+}
+
+test("Renders East standings successfully", async () => {
+  const { east } = await getLatestStandings();
+
+  setUp("Eastern", east);
+
+  expect(screen.getByText("Eastern")).toBeInTheDocument();
+  expect(screen.queryByText("Western")).not.toBeInTheDocument();
+});
+
+test("Renders East standings with correct amount of teams", async () => {
+  const { east } = await getLatestStandings();
+
+  setUp("Eastern", east);
+
+  const teamList = screen.getByTestId("team-list");
+  expect(teamList).toBeInTheDocument();
+
+  expect(teamList.children).toHaveLength(15);
+});
+
+test("Renders East standings with correct amount of headings", async () => {
+  const { east } = await getLatestStandings();
+
+  setUp("Eastern", east);
+
+  const headings = screen.getByTestId("headings");
+  expect(headings).toBeInTheDocument();
+
+  const headingItems = headings.children;
+
+  expect(headingItems).toHaveLength(3);
+  expect(headingItems[0]).toHaveTextContent("W");
+  expect(headingItems[1]).toHaveTextContent("L");
+  expect(headingItems[2]).toHaveTextContent("W%");
+});
+
+test("Renders West standings successfully", async () => {
+  const { west } = await getLatestStandings();
+
+  setUp("Western", west);
+  expect(screen.getByText("Western")).toBeInTheDocument();
+  expect(screen.queryByText("Eastern")).not.toBeInTheDocument();
+});
+
+test("Renders West standings with correct amount of teams", async () => {
+  const { west } = await getLatestStandings();
+
+  setUp("Western", west);
+
+  const teamList = screen.getByTestId("team-list");
+  expect(teamList).toBeInTheDocument();
+
+  expect(teamList.children).toHaveLength(15);
+});
+
+test("Renders West standings with correct amount of headings", async () => {
+  const { west } = await getLatestStandings();
+
+  setUp("Western", west);
+
+  const headings = screen.getByTestId("headings");
+  expect(headings).toBeInTheDocument();
+
+  const headingItems = headings.children;
+
+  expect(headingItems).toHaveLength(3);
+  expect(headingItems[0]).toHaveTextContent("W");
+  expect(headingItems[1]).toHaveTextContent("L");
+  expect(headingItems[2]).toHaveTextContent("W%");
+});

app/__tests__/scoresToday.test.tsx

@@ -0,0 +1,99 @@
+import {
+  render,
+  screen,
+  createRoutesStub,
+  gamesYesterday,
+  gamesYesterdayNotStarted,
+} from "~/__tests__/utils";
+import LatestGames from "~/components/latestGames";
+
+function setUp(mockData = gamesYesterday) {
+  const LatestGamesRouteStub = createRoutesStub([
+    {
+      path: "/",
+      Component: () => {
+        return <LatestGames data={mockData} theme={"all"} />;
+      },
+      HydrateFallback: () => null,
+    },
+  ]);
+
+  render(<LatestGamesRouteStub />);
+}
+
+test("Renders latest games component successfully", async () => {
+  setUp();
+  expect(
+    screen.getByRole("heading", { name: /yesterday's games/i })
+  ).toBeInTheDocument();
+
+  expect(
+    screen.queryByRole("heading", { name: /today's games/i })
+  ).not.toBeInTheDocument();
+
+  expect(
+    screen.queryByRole("heading", { name: /previous games/i })
+  ).not.toBeInTheDocument();
+
+  const gameList = screen.getByRole("list");
+
+  expect(gameList).toBeInTheDocument();
+  expect(gameList.children).toHaveLength(1);
+});
+
+test("Renders correct teams", () => {
+  setUp();
+  const gameList = screen.getByRole("list");
+
+  expect(gameList).toBeInTheDocument();
+  expect(gameList.children).toHaveLength(1);
+
+  expect(screen.getByText(/112 - 110/i)).toBeInTheDocument();
+
+  expect(screen.getByText(/chicago bulls/i)).toBeInTheDocument();
+
+  expect(screen.getByText(/charlotte hornets/i)).toBeInTheDocument();
+});
+
+test("Renders correct scores", () => {
+  setUp();
+  expect(screen.getByText(/112 - 110/i)).toBeInTheDocument();
+});
+
+test("Renders link with correct url if game is in Final state", () => {
+  setUp();
+  const gameLink = screen.getByRole("link");
+
+  expect(gameLink).toBeInTheDocument();
+  expect(gameLink).toHaveAttribute("href", "/game/234234234242/2025-01-29");
+  expect(gameLink).toHaveAttribute("data-discover", "true");
+});
+
+test("Renders no link with correct url if game is NOT in Final state", () => {
+  setUp(gamesYesterdayNotStarted);
+  const gameLink = screen.queryByRole("link");
+
+  expect(gameLink).not.toBeInTheDocument();
+});
+
+test("Renders correct images", () => {
+  setUp();
+  expect(screen.getByText(/112 - 110/i)).toBeInTheDocument();
+
+  const homeTeamImage = screen.getByTestId("home-team-logo");
+  expect(homeTeamImage).toBeInTheDocument();
+  expect(homeTeamImage).toHaveAttribute(
+    "src",
+    "https://cdn.nba.com/logos/nba/1610612741/global/L/logo.svg"
+  );
+  expect(homeTeamImage).toHaveAttribute("class", "w-10 h-10 inline-block mr-2");
+
+  const awayTeamImage = screen.getByTestId("away-team-logo");
+  expect(awayTeamImage).toBeInTheDocument();
+
+  expect(awayTeamImage).toHaveAttribute(
+    "src",
+    "https://cdn.nba.com/logos/nba/1610612766/global/L/logo.svg"
+  );
+  expect(awayTeamImage).toHaveAttribute("class", "w-10 h-10 inline-block mr-2");
+});

app/__tests__/upcomingGames.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "~/__tests__/utils";
+import UpcomingGames from "~/components/upcomingGames";
+import { getUpcomingGames } from "~/utils/games";
+
+async function setUp() {
+  const upcomingGames = await getUpcomingGames();
+
+  render(<UpcomingGames data={upcomingGames} theme="all" />);
+}
+
+test("Renders Upcoming games component successfully", async () => {
+  await setUp();
+
+  expect(
+    screen.getByRole("heading", {
+      name: /upcoming games/i,
+    })
+  ).toBeInTheDocument();
+});
+
+test("Renders correct amount of games", async () => {
+  await setUp();
+
+  const gamesList = screen.getByRole("list");
+  expect(gamesList).toBeInTheDocument();
+  expect(gamesList.children).toHaveLength(3);
+});