Merge pull request #454 from python-discord/bump-dependencies

Bump Dependencies

4 files changed, 25 insertions, 28 deletions

diff --git a/src/tests/__mocks__/svg.ts b/src/tests/__mocks__/svg.ts
new file mode 100644
index 0000000..2e3f8e3
--- /dev/null
+++ b/src/tests/__mocks__/svg.ts
@@ -0,0 +1,4 @@
+// Mock SVG type to power transformations in jest
+// See: https://react-svgr.com/docs/jest/
+export default "svg";
+export const ReactComponent = "div";
diff --git a/src/tests/pages/CallbackPage.test.tsx b/src/tests/pages/CallbackPage.test.tsx
index 70f2fed..37fb932 100644
--- a/src/tests/pages/CallbackPage.test.tsx
+++ b/src/tests/pages/CallbackPage.test.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 
 import CallbackPage from "../../pages/CallbackPage";
 
-test("callback page sends provided code", () => {
+test("callback page sends provided code", async () => {
     global.opener = {
         postMessage: jest.fn()
     };
@@ -14,9 +14,11 @@ test("callback page sends provided code", () => {
 
     render(<CallbackPage/>);
 
-    expect(global.opener.postMessage).toBeCalledTimes(1);
-    expect(global.opener.postMessage).toBeCalledWith({
-        code: "abcde_code",
-        state: "abcde_state"
+    await waitFor(() => {
+        expect(global.opener.postMessage).toBeCalledTimes(1);
+        expect(global.opener.postMessage).toBeCalledWith({
+            code: "abcde_code",
+            state: "abcde_state"
+        });
     });
 });
diff --git a/src/tests/pages/FormPage.test.tsx b/src/tests/pages/FormPage.test.tsx
index 947c075..3a906f3 100644
--- a/src/tests/pages/FormPage.test.tsx
+++ b/src/tests/pages/FormPage.test.tsx
@@ -1,18 +1,13 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import { createMemoryHistory } from "history";
-
-import { Route, BrowserRouter as Router } from "react-router-dom";
+import { MemoryRouter } from "react-router-dom";
 import FormPage from "../../pages/FormPage";
 
 import * as forms from "../../api/forms";
 
 test("renders specific form page with loading bar", () => {
-    const history = createMemoryHistory();
-    history.push("/form/route");
-
-    const { getByText } = render(<Router><Route history={history} ><FormPage /></Route></Router>);
+    const { getByText } = render(<FormPage/>, {wrapper: MemoryRouter});
     // If we rendered the headerbar we rendered the forms page.
     const headerBar = getByText(/Loading.../);
     expect(headerBar).toBeInTheDocument();
@@ -20,14 +15,11 @@ test("renders specific form page with loading bar", () => {
 
 /* TODO: Find why this test spits out promise errors that fail CI */
 test.skip("calls api method to load form", () => {
-    const history = createMemoryHistory();
-    history.push("/form/ban-appeals");
-
     const oldImpl = forms.getForm;
 
     Object.defineProperty(forms, "getForm", {value: jest.fn(oldImpl)});
 
-    render(<Router><Route history={history}><FormPage /></Route></Router>);
+    render(<FormPage/>, {wrapper: MemoryRouter});
 
     expect(forms.getForm).toBeCalled();
 });
diff --git a/src/tests/pages/LandingPage.test.tsx b/src/tests/pages/LandingPage.test.tsx
index 6f8a530..727b922 100644
--- a/src/tests/pages/LandingPage.test.tsx
+++ b/src/tests/pages/LandingPage.test.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 
 import LandingPage from "../../pages/LandingPage";
 import * as forms from "../../api/forms";
 
-import { BrowserRouter as Router } from "react-router-dom";
+import { MemoryRouter } from "react-router-dom";
 import { QuestionType } from "../../api/question";
 
 const testingForm: forms.Form = {
@@ -25,13 +25,12 @@ const testingForm: forms.Form = {
     submitted_text: null
 };
 
-test("renders landing page", () => {
-    const setForms = jest.fn(() => [testingForm]);
-    Object.defineProperty(forms, "getForms", setForms);
-    const handleForms = jest.spyOn(React, "useState");
-    handleForms.mockImplementation(() => [[testingForm], setForms]);
-    const { getByText } = render(<Router><LandingPage /></Router>);
-    // If we rendered the headerbar we rendered the landing page.
-    const headerBar = getByText(/Python Discord Forms/);
-    expect(headerBar).toBeInTheDocument();
+test("renders landing page", async () => {
+    jest.spyOn(forms, "getForms").mockImplementation(() => Promise.resolve([testingForm]));
+
+    const { getByText } = render(<LandingPage/>, {wrapper: MemoryRouter});
+    await waitFor(() => {
+        const headerBar = getByText(/Python Discord Forms/);
+        expect(headerBar).toBeInTheDocument();
+    });
 });