Add test for SideBar

tnoodle-ui/src/api/wca.api.js

@@ -83,16 +83,16 @@ export function gotoPreLoginPath() {
 
 export function fetchMe() {
     return wcaApiFetch("/me")
-        .then(response => response.json())
-        .then(json => json.me);
+        .then((response) => response.json())
+        .then((json) => json.me);
 }
 
 export function fetchVersionInfo() {
-    return wcaApiFetch("/scramble-program").then(response => response.json());
+    return wcaApiFetch("/scramble-program").then((response) => response.json());
 }
 
 export function getCompetitionJson(competitionId) {
-    return wcaApiFetch(`/competitions/${competitionId}/wcif`).then(response =>
+    return wcaApiFetch(`/competitions/${competitionId}/wcif`).then((response) =>
         response.json()
     );
 }
@@ -101,7 +101,7 @@ export function getUpcomingManageableCompetitions() {
     let oneWeekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
     return wcaApiFetch(
         `/competitions?managed_by_me=true&start=${oneWeekAgo.toISOString()}`
-    ).then(response => response.json());
+    ).then((response) => response.json());
 }
 
 function getHashParameter(name) {
@@ -141,11 +141,11 @@ function wcaApiFetch(path, fetchOptions) {
     fetchOptions = Object.assign({}, fetchOptions, {
         headers: new Headers({
             Authorization: `Bearer ${wcaAccessToken}`,
-            "Content-Type": "application/json"
-        })
+            "Content-Type": "application/json",
+        }),
     });
 
-    return fetch(`${baseApiUrl}${path}`, fetchOptions).then(response => {
+    return fetch(`${baseApiUrl}${path}`, fetchOptions).then((response) => {
         if (!response.ok) {
             throw new Error(`${response.status}: ${response.statusText}`);
         }

tnoodle-ui/src/components/SideBar.test.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+
+import { render, unmountComponentAtNode } from "react-dom";
+
+import { Provider } from "react-redux";
+import store from "../redux/Store";
+
+import SideBar from "./SideBar";
+
+const wcaApi = require("../api/wca.api");
+
+let container = null;
+beforeEach(() => {
+    // setup a DOM element as a render target
+    container = document.createElement("div");
+    document.body.appendChild(container);
+});
+
+afterEach(() => {
+    // cleanup on exiting
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+});
+
+it("Each competition fetched from the website must become a button", async () => {
+    // Define mock objects
+    const competitions = [
+        {
+            id: "WCAWorldChampionship2021",
+            name: "WCA World Championship 2021",
+        },
+        {
+            id: "AustralianNationals2020",
+            name: "Australian Nationals 2020",
+        },
+    ];
+
+    // Turn on mocking behavior
+    jest.spyOn(wcaApi, "isLogged").mockImplementation(() => true);
+
+    jest.spyOn(
+        wcaApi,
+        "getUpcomingManageableCompetitions"
+    ).mockImplementation(() => Promise.resolve(competitions));
+
+    // Render component
+    await act(async () => {
+        render(
+            <Provider store={store}>
+                <SideBar />
+            </Provider>,
+            container
+        );
+    });
+
+    const buttons = Array.from(container.querySelectorAll("button"));
+
+    // First button should be manual selection
+    expect(buttons[0].innerHTML).toBe("Manual Selection");
+
+    // Last button should be Log Out
+    expect(buttons[buttons.length - 1].innerHTML).toBe("Log Out");
+
+    // Each competition must have a button
+    for (let i = 0; i < competitions.length; i++) {
+        expect(competitions[i].name).toBe(buttons[i + 1].innerHTML);
+    }
+
+    // Clear mock
+    wcaApi.isLogged.mockRestore();
+    wcaApi.getUpcomingManageableCompetitions.mockRestore();
+});