Full dependency inversion of <Dock> and all current tab kinds (#4757)

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/layout/top-bar/top-bar-win-linux.test.tsx

@@ -20,15 +20,14 @@ jest.mock("../../../../common/ipc");
 jest.mock("../../../ipc");
 
 jest.mock("../../../../common/vars", () => {
-  const SemVer = require("semver").SemVer;
-
-  const versionStub = new SemVer("1.0.0");
+  const { SemVer } = require("semver");
 
   return {
+    ...jest.requireActual<{}>("../../../../common/vars"),
     __esModule: true,
     isWindows: null,
     isLinux: null,
-    appSemVer: versionStub,
+    appSemVer: new SemVer("1.0.0"),
   };
 });
 

src/renderer/components/layout/top-bar/top-bar.test.tsx

@@ -14,15 +14,15 @@ import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
 import { computed } from "mobx";
 import directoryForUserDataInjectable from "../../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
 import mockFs from "mock-fs";
+import isLinuxInjectable from "../../../../common/vars/is-linux.injectable";
+import isWindowsInjectable from "../../../../common/vars/is-windows.injectable";
 
 jest.mock("../../../../common/vars", () => {
-  const SemVer = require("semver").SemVer;
-
-  const versionStub = new SemVer("1.0.0");
+  const { SemVer } = require("semver");
 
   return {
-    isMac: true,
-    appSemVer: versionStub,
+    ...jest.requireActual<{}>("../../../../common/vars"),
+    appSemVer: new SemVer("1.0.0"),
   };
 });
 
@@ -98,30 +98,30 @@ describe("<TopBar/>", () => {
   });
 
   it("renders home button", async () => {
-    const { getByTestId } = render(<TopBar/>);
+    const { findByTestId } = render(<TopBar/>);
 
-    expect(await getByTestId("home-button")).toBeInTheDocument();
+    expect(await findByTestId("home-button")).toBeInTheDocument();
   });
 
   it("renders history arrows", async () => {
-    const { getByTestId } = render(<TopBar/>);
+    const { findByTestId } = render(<TopBar/>);
 
-    expect(await getByTestId("history-back")).toBeInTheDocument();
-    expect(await getByTestId("history-forward")).toBeInTheDocument();
+    expect(await findByTestId("history-back")).toBeInTheDocument();
+    expect(await findByTestId("history-forward")).toBeInTheDocument();
   });
 
   it("enables arrow by ipc event", async () => {
-    const { getByTestId } = render(<TopBar/>);
+    const { findByTestId } = render(<TopBar/>);
 
-    expect(await getByTestId("history-back")).not.toHaveClass("disabled");
-    expect(await getByTestId("history-forward")).not.toHaveClass("disabled");
+    expect(await findByTestId("history-back")).not.toHaveClass("disabled");
+    expect(await findByTestId("history-forward")).not.toHaveClass("disabled");
   });
 
   it("triggers browser history back and forward", async () => {
-    const { getByTestId } = render(<TopBar/>);
+    const { findByTestId } = render(<TopBar/>);
 
-    const prevButton = await getByTestId("history-back");
-    const nextButton = await getByTestId("history-forward");
+    const prevButton = await findByTestId("history-back");
+    const nextButton = await findByTestId("history-forward");
 
     fireEvent.click(prevButton);
 
@@ -144,12 +144,15 @@ describe("<TopBar/>", () => {
       },
     ]));
 
-    const { getByTestId } = render(<TopBar/>);
+    const { findByTestId } = render(<TopBar/>);
 
-    expect(await getByTestId(testId)).toHaveTextContent(text);
+    expect(await findByTestId(testId)).toHaveTextContent(text);
   });
 
-  it("doesn't show windows title buttons", () => {
+  it("doesn't show windows title buttons on macos", () => {
+    di.override(isLinuxInjectable, () => false);
+    di.override(isWindowsInjectable, () => false);
+
     const { queryByTestId } = render(<TopBar/>);
 
     expect(queryByTestId("window-menu")).not.toBeInTheDocument();
@@ -157,4 +160,16 @@ describe("<TopBar/>", () => {
     expect(queryByTestId("window-maximize")).not.toBeInTheDocument();
     expect(queryByTestId("window-close")).not.toBeInTheDocument();
   });
+
+  it("does show windows title buttons on linux", () => {
+    di.override(isLinuxInjectable, () => true);
+    di.override(isWindowsInjectable, () => false);
+
+    const { queryByTestId } = render(<TopBar/>);
+
+    expect(queryByTestId("window-menu")).toBeInTheDocument();
+    expect(queryByTestId("window-minimize")).toBeInTheDocument();
+    expect(queryByTestId("window-maximize")).toBeInTheDocument();
+    expect(queryByTestId("window-close")).toBeInTheDocument();
+  });
 });

src/renderer/components/layout/top-bar/top-bar.tsx

@@ -13,18 +13,21 @@ import { ipcRendererOn } from "../../../../common/ipc";
 import { watchHistoryState } from "../../../remote-helpers/history-updater";
 import { isActiveRoute, navigate } from "../../../navigation";
 import { catalogRoute, catalogURL } from "../../../../common/routes";
-import { isLinux, isWindows } from "../../../../common/vars";
 import { cssNames } from "../../../utils";
 import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { TopBarRegistration } from "./top-bar-registration";
 import { emitOpenAppMenuAsContextMenu, requestWindowAction } from "../../../ipc";
 import { WindowAction } from "../../../../common/ipc/window";
+import isLinuxInjectable from "../../../../common/vars/is-linux.injectable";
+import isWindowsInjectable from "../../../../common/vars/is-windows.injectable";
 
-interface Props extends React.HTMLAttributes<any> {}
+export interface TopBarProps extends React.HTMLAttributes<any> {}
 
 interface Dependencies {
   items: IComputedValue<TopBarRegistration[]>;
+  isWindows: boolean;
+  isLinux: boolean;
 }
 
 const prevEnabled = observable.box(false);
@@ -38,7 +41,7 @@ ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
   nextEnabled.set(state);
 });
 
-const NonInjectedTopBar = (({ items, children, ...rest }: Props & Dependencies) => {
+const NonInjectedTopBar = observer(({ items, children, isWindows, isLinux, ...rest }: TopBarProps & Dependencies) => {
   const elem = useRef<HTMLDivElement>();
 
   const openAppContextMenu = () => {
@@ -161,9 +164,11 @@ const renderRegisteredItems = (items: TopBarRegistration[]) => (
 
 
 
-export const TopBar = withInjectables(observer(NonInjectedTopBar), {
+export const TopBar = withInjectables<Dependencies, TopBarProps>(NonInjectedTopBar, {
   getProps: (di, props) => ({
     items: di.inject(topBarItemsInjectable),
+    isLinux: di.inject(isLinuxInjectable),
+    isWindows: di.inject(isWindowsInjectable),
     ...props,
   }),
 });