From 1bcadafac924ba2d1d7f979498d6995a7fb306cd Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 30 Aug 2021 09:52:42 +0300
Subject: [PATCH] Updating topbar tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../layout/__tests__/topbar.test.tsx          | 70 +++++++++++++++++--
 src/renderer/components/layout/topbar.tsx     | 16 ++++-
 2 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/layout/__tests__/topbar.test.tsx b/src/renderer/components/layout/__tests__/topbar.test.tsx
index a8e69ed302..499a52bc66 100644
--- a/src/renderer/components/layout/__tests__/topbar.test.tsx
+++ b/src/renderer/components/layout/__tests__/topbar.test.tsx
@@ -20,11 +20,46 @@
  */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { TopBar } from "../topbar";
 import { TopBarRegistry } from "../../../../extensions/registries";
 
+jest.mock(
+  "electron",
+  () => ({
+    ipcRenderer: {
+      on: jest.fn(
+        (channel: string, listener: (event: any, ...args: any[]) => void) => {
+          if (channel === "history:can-go-back") {
+            listener({}, true);
+          }
+
+          if (channel === "history:can-go-forward") {
+            listener({}, true);
+          }
+        }
+      ),
+    },
+  })
+);
+
+const goBack = jest.fn();
+const goForward = jest.fn();
+
+jest.mock("@electron/remote", () => {
+  return {
+    webContents: {
+      getFocusedWebContents: () => {
+        return {
+          goBack,
+          goForward
+        };
+      }
+    }
+  };
+});
+
 describe("<TopBar/>", () => {
   beforeEach(() => {
     TopBarRegistry.createInstance();
@@ -35,15 +70,38 @@ describe("<TopBar/>", () => {
   });
 
   it("renders w/o errors", () => {
-    const { container } = render(<TopBar label="test bar" />);
+    const { container } = render(<TopBar/>);
 
     expect(container).toBeInstanceOf(HTMLElement);
   });
 
-  it("renders title", async () => {
-    const { getByTestId } = render(<TopBar label="topbar" />);
+  it("renders history arrows", async () => {
+    const { getByTestId } = render(<TopBar/>);
 
-    expect(await getByTestId("topbarLabel")).toHaveTextContent("topbar");
+    expect(await getByTestId("history-back")).toBeInTheDocument();
+    expect(await getByTestId("history-forward")).toBeInTheDocument();
+  });
+
+  it("enables arrow by ipc event", async () => {
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(await getByTestId("history-back")).not.toHaveClass("disabled");
+    expect(await getByTestId("history-forward")).not.toHaveClass("disabled");
+  });
+
+  it("triggers browser history back and forward", async () => {
+    const { getByTestId } = render(<TopBar/>);
+
+    const prevButton = await getByTestId("history-back");
+    const nextButton = await getByTestId("history-forward");
+
+    fireEvent.click(prevButton);
+
+    expect(goBack).toBeCalled();
+
+    fireEvent.click(nextButton);
+
+    expect(goForward).toBeCalled();
   });
 
   it("renders items", async () => {
@@ -58,7 +116,7 @@ describe("<TopBar/>", () => {
       }
     ]);
 
-    const { getByTestId } = render(<TopBar label="topbar" />);
+    const { getByTestId } = render(<TopBar/>);
 
     expect(await getByTestId(testId)).toHaveTextContent(text);
   });
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index 8fb5aba39c..0456951532 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@@ -85,8 +85,20 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
   return (
     <div className={styles.topBar} {...rest}>
       <div className={styles.history}>
-        <Icon svg="flat_arrow" className={styles.prevArrow} onClick={goBack} disabled={!prevEnabled.get()}/>
-        <Icon svg="flat_arrow" className="ml-5" onClick={goForward} disabled={!nextEnabled.get()}/>
+        <Icon
+          data-testid="history-back"
+          svg="flat_arrow"
+          className={styles.prevArrow}
+          onClick={goBack}
+          disabled={!prevEnabled.get()}
+        />
+        <Icon
+          data-testid="history-forward"
+          svg="flat_arrow"
+          className="ml-5"
+          onClick={goForward}
+          disabled={!nextEnabled.get()}
+        />
       </div>
       <div className={styles.controls}>
         {renderRegisteredItems()}