Make all of Command* injectable, with some others too

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/cluster-manager/active-hotbar-name.tsx

@@ -22,19 +22,31 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { Icon } from "../icon";
-import { HotbarStore } from "../../../common/hotbar-store";
-import { CommandOverlay } from "../command-palette";
+import hotbarManagerInjectable from "../../../common/hotbar-store.injectable";
 import { HotbarSwitchCommand } from "../hotbar/hotbar-switch-command";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import commandOverlayInjectable from "../command-palette/command-overlay.injectable";
 
-export const ActiveHotbarName = observer(() => {
-  return (
-    <div
-      className="flex items-center"
-      data-testid="current-hotbar-name"
-      onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
-    >
-      <Icon material="bookmarks" className="mr-2" size={14}/>
-      {HotbarStore.getInstance().getActive()?.name}
-    </div>
-  );
+interface Dependencies {
+  openCommandOverlay: (component: React.ReactElement) => void;
+  activeHotbarName: () => string | undefined;
+}
+
+const NonInjectedActiveHotbarName = observer(({ openCommandOverlay, activeHotbarName }: Dependencies) => (
+  <div
+    className="flex items-center"
+    data-testid="current-hotbar-name"
+    onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
+  >
+    <Icon material="bookmarks" className="mr-2" size={14} />
+    {activeHotbarName()}
+  </div>
+));
+
+export const ActiveHotbarName = withInjectables<Dependencies>(NonInjectedActiveHotbarName, {
+  getProps: (di, props) => ({
+    activeHotbarName: () => di.inject(hotbarManagerInjectable).getActive()?.name,
+    openCommandOverlay: di.inject(commandOverlayInjectable).open,
+    ...props,
+  }),
 });

src/renderer/components/cluster-manager/bottom-bar.test.tsx

@@ -21,21 +21,19 @@
 
 import React from "react";
 import mockFs from "mock-fs";
-import { render, fireEvent } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { BottomBar } from "./bottom-bar";
 import { StatusBarRegistry } from "../../../extensions/registries";
-import { HotbarStore } from "../../../common/hotbar-store";
+import hotbarManagerInjectable from "../../../common/hotbar-store.injectable";
 import { AppPaths } from "../../../common/app-paths";
-import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "../hotbar/hotbar-switch-command";
 import { ActiveHotbarName } from "./active-hotbar-name";
-
-jest.mock("../command-palette", () => ({
-  CommandOverlay: {
-    open: jest.fn(),
-  },
-}));
+import { getDiForUnitTesting } from "../../getDiForUnitTesting";
+import { DiRender, renderFor } from "../test-utils/renderFor";
+import type { ConfigurableDependencyInjectionContainer } from "@ogre-tools/injectable";
+import commandOverlayInjectable from "../command-palette/command-overlay.injectable";
+import { getEmptyHotbar } from "../../../common/hotbar-types";
 
 AppPaths.init();
 
@@ -55,7 +53,12 @@ jest.mock("electron", () => ({
   },
 }));
 
+const foobarHotbar = getEmptyHotbar("foobar");
+
 describe("<BottomBar />", () => {
+  let di: ConfigurableDependencyInjectionContainer;
+  let render: DiRender;
+
   beforeEach(() => {
     const mockOpts = {
       "tmp": {
@@ -63,14 +66,19 @@ describe("<BottomBar />", () => {
       },
     };
 
+    di = getDiForUnitTesting();
+    render = renderFor(di);
+
     mockFs(mockOpts);
     StatusBarRegistry.createInstance();
-    HotbarStore.createInstance();
+
+    di.override(hotbarManagerInjectable, () => ({
+      getActive: () => foobarHotbar,
+    } as any));
   });
 
   afterEach(() => {
     StatusBarRegistry.resetInstance();
-    HotbarStore.resetInstance();
     mockFs.restore();
   });
 
@@ -80,24 +88,20 @@ describe("<BottomBar />", () => {
     expect(container).toBeInstanceOf(HTMLElement);
   });
 
-  it("renders w/o errors when .getItems() returns unexpected (not type compliant) data", async () => {
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => undefined);
-    expect(() => render(<BottomBar />)).not.toThrow();
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => "hello");
-    expect(() => render(<BottomBar />)).not.toThrow();
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => 6);
-    expect(() => render(<BottomBar />)).not.toThrow();
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => null);
-    expect(() => render(<BottomBar />)).not.toThrow();
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => []);
-    expect(() => render(<BottomBar />)).not.toThrow();
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [{}]);
-    expect(() => render(<BottomBar />)).not.toThrow();
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => { return {};});
+  it.each([
+    undefined,
+    "hello",
+    6,
+    null,
+    [],
+    [{}],
+    {},
+  ])("renders w/o errors when .getItems() returns not type compliant (%p)", val => {
+    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => val);
     expect(() => render(<BottomBar />)).not.toThrow();
   });
 
-  it("renders items [{item: React.ReactNode}] (4.0.0-rc.1)", async () => {
+  it("renders items [{item: React.ReactNode}] (4.0.0-rc.1)", () => {
     const testId = "testId";
     const text = "heee";
 
@@ -106,10 +110,10 @@ describe("<BottomBar />", () => {
     ]);
     const { getByTestId } = render(<BottomBar />);
 
-    expect(await getByTestId(testId)).toHaveTextContent(text);
+    expect(getByTestId(testId)).toHaveTextContent(text);
   });
 
-  it("renders items [{item: () => React.ReactNode}] (4.0.0-rc.1+)", async () => {
+  it("renders items [{item: () => React.ReactNode}] (4.0.0-rc.1+)", () => {
     const testId = "testId";
     const text = "heee";
 
@@ -118,33 +122,25 @@ describe("<BottomBar />", () => {
     ]);
     const { getByTestId } = render(<BottomBar />);
 
-    expect(await getByTestId(testId)).toHaveTextContent(text);
+    expect(getByTestId(testId)).toHaveTextContent(text);
   });
 
-  it("show default hotbar name", () => {
+  it("shows active hotbar name", () => {
     StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
       { item: () => <ActiveHotbarName/> },
     ]);
     const { getByTestId } = render(<BottomBar />);
 
-    expect(getByTestId("current-hotbar-name")).toHaveTextContent("default");
-  });
-
-  it("show active hotbar name", () => {
-    StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
-      { item: () => <ActiveHotbarName/> },
-    ]);
-    const { getByTestId } = render(<BottomBar />);
-
-    HotbarStore.getInstance().add({
-      id: "new",
-      name: "new",
-    }, { setActive: true });
-
-    expect(getByTestId("current-hotbar-name")).toHaveTextContent("new");
+    expect(getByTestId("current-hotbar-name")).toHaveTextContent("foobar");
   });
 
   it("opens command palette on click", () => {
+    const mockOpen = jest.fn();
+
+    di.override(commandOverlayInjectable, () => ({
+      open: mockOpen,
+    }) as any);
+
     StatusBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
       { item: () => <ActiveHotbarName/> },
     ]);
@@ -153,7 +149,8 @@ describe("<BottomBar />", () => {
 
     fireEvent.click(activeHotbar);
 
-    expect(CommandOverlay.open).toHaveBeenCalledWith(<HotbarSwitchCommand />);
+
+    expect(mockOpen).toHaveBeenCalledWith(<HotbarSwitchCommand />);
   });
 
   it("sort positioned items properly", () => {