From e498c5b6e2ce956db9484c90359d17b6b08878d4 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Fri, 29 Sep 2023 15:24:08 -0300
Subject: [PATCH] Add `App.test.tsx`

---
 src/js/components/ErrorRenderer.tsx    |  2 +-
 src/js/components/ResponseRenderer.tsx |  2 +-
 test/App.test.tsx                      | 47 ++++++++++++++++++++++++++
 test/mocks/fetch.ts                    | 29 ++++++++++++++++
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 test/App.test.tsx
 create mode 100644 test/mocks/fetch.ts

diff --git a/src/js/components/ErrorRenderer.tsx b/src/js/components/ErrorRenderer.tsx
index 7d974e3..001061d 100644
--- a/src/js/components/ErrorRenderer.tsx
+++ b/src/js/components/ErrorRenderer.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export function ErrorRenderer({ error }: {error: Error}) {
   const t = chrome.i18n.getMessage;
   return (
-    <div className="error">
+    <div data-testid="error" className="error">
       <span>{t("error")}</span>:
       <span>&nbsp;{error.message}</span>
     </div>
diff --git a/src/js/components/ResponseRenderer.tsx b/src/js/components/ResponseRenderer.tsx
index ee8dea5..2b1db66 100644
--- a/src/js/components/ResponseRenderer.tsx
+++ b/src/js/components/ResponseRenderer.tsx
@@ -13,7 +13,7 @@ export function ResponseRenderer({ response }: {response: TResponse}) {
   }
 
   return (
-    <div className="response">
+    <div data-testid="response" className="response">
       <div className="row">
         <div>{t("ip_address")}</div>
         <div>{response.IPAddress}</div>
diff --git a/test/App.test.tsx b/test/App.test.tsx
new file mode 100644
index 0000000..036dd16
--- /dev/null
+++ b/test/App.test.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import '@testing-library/jest-dom'
+import { render, screen, act, waitFor } from "@testing-library/react";
+import { App } from "~/components/App";
+import { getMessage } from "./mocks/chrome.i18n";
+import { success, error, loading } from "./mocks/fetch";
+
+describe("App.tsx", () => {
+  beforeEach(() => {
+    const chrome: any = {i18n: {getMessage}};
+    global.chrome = chrome;
+  });
+
+  afterEach(() => {
+    global.chrome = undefined;
+  });
+
+  describe("when the request is loading", () => {
+    beforeEach(() => { global.fetch = loading });
+    afterEach(() => { global.fetch = undefined });
+
+    test("loading text is rendered", () => {
+      render(<App/>);
+      expect(screen.getByText("Loading...")).toBeInTheDocument();
+    })
+  });
+
+  describe("when the request is a success", () => {
+    beforeEach(() => { global.fetch = success });
+    afterEach(() => { global.fetch = undefined });
+
+    test("response is rendered", async () => {
+      await act(() => render(<App/>));
+      expect(screen.getByTestId("response")).toBeInTheDocument();
+    });
+  });
+
+  describe("when the request throws an error", () => {
+    beforeEach(() => { global.fetch = error });
+    afterEach(() => { global.fetch = undefined });
+
+    test("error is rendered", async () => {
+      await act(() => render(<App/>));
+      expect(screen.getByTestId("error")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/test/mocks/fetch.ts b/test/mocks/fetch.ts
new file mode 100644
index 0000000..8504e1f
--- /dev/null
+++ b/test/mocks/fetch.ts
@@ -0,0 +1,29 @@
+import {TServerResponse} from "~/lib/response";
+
+export function success(_path: RequestInfo | URL, _options?: RequestInit) {
+  const json = () => (
+    new Promise<TServerResponse>((resolve) => (
+      resolve({
+        YourFuckingIPAddress: "127.0.0.1",
+        YourFuckingISP: "FooBar Ltd",
+        YourFuckingCity: "Foo City",
+        YourFuckingCountry: "United States of FooBar",
+        YourFuckingTorExit: false
+      })
+    )
+  ))
+
+  return new Promise<any>((resolve) => {
+    resolve({status: 200, json});
+  });
+}
+
+export function error(_path: RequestInfo | URL, _options?: RequestInit) {
+  return new Promise<any>(() => {
+    throw new Error("Request error");
+  })
+};
+
+export function loading(_path: RequestInfo | URL, _options?: RequestInit) {
+  return new Promise<any>(() => null);
+}