From f6a88b386f49a464f731a723d079767017a49385 Mon Sep 17 00:00:00 2001
From: chh <1474479+chenhunghan@users.noreply.github.com>
Date: Wed, 2 Dec 2020 17:49:12 +0800
Subject: [PATCH] Add <BottomBar /> support rendering if item is a function
 (#1606)

* Support rendering if item is a function

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>
---
 .../cluster-manager/bottom-bar.test.tsx       | 52 +++++++++++++++++++
 .../components/cluster-manager/bottom-bar.tsx | 13 ++++-
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/cluster-manager/bottom-bar.test.tsx

diff --git a/src/renderer/components/cluster-manager/bottom-bar.test.tsx b/src/renderer/components/cluster-manager/bottom-bar.test.tsx
new file mode 100644
index 0000000000..6578f4ac20
--- /dev/null
+++ b/src/renderer/components/cluster-manager/bottom-bar.test.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+
+import { BottomBar } from "./bottom-bar";
+jest.mock("../../../extensions/registries");
+import { statusBarRegistry } from "../../../extensions/registries";
+
+describe("<BottomBar />", () => {
+
+  it("renders w/o errors", () => {
+    const { container } = render(<BottomBar />);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  // some defensive testing
+  it("renders w/o errors when .getItems() returns edge cases", async () => {
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => undefined);
+    expect(() => render(<BottomBar />)).not.toThrow();
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => null);
+    expect(() => render(<BottomBar />)).not.toThrow();
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => []);
+    expect(() => render(<BottomBar />)).not.toThrow();
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => { return {};});
+    expect(() => render(<BottomBar />)).not.toThrow();
+  });
+
+  it("renders items [{item: React.ReactNode}] (4.0.0-rc.1)", async () => {
+    const testId = "testId";
+    const text = "heee";
+
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => [
+      { item: <span data-testid={testId} >{text}</span> }
+    ]);
+    const { getByTestId } = render(<BottomBar />);
+
+    expect(await getByTestId(testId)).toHaveTextContent(text);
+  });
+
+  it("renders items [{item: () => React.ReactNode}] (4.0.0-rc.1+)", async () => {
+    const testId = "testId";
+    const text = "heee";
+
+    statusBarRegistry.getItems = jest.fn().mockImplementationOnce(() => [
+      { item: () => <span data-testid={testId} >{text}</span> }
+    ]);
+    const { getByTestId } = render(<BottomBar />);
+
+    expect(await getByTestId(testId)).toHaveTextContent(text);
+  });
+});
diff --git a/src/renderer/components/cluster-manager/bottom-bar.tsx b/src/renderer/components/cluster-manager/bottom-bar.tsx
index c70c25aeb9..489d90769f 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.tsx
+++ b/src/renderer/components/cluster-manager/bottom-bar.tsx
@@ -11,6 +11,8 @@ import { statusBarRegistry } from "../../../extensions/registries";
 export class BottomBar extends React.Component {
   render() {
     const { currentWorkspace } = workspaceStore;
+    // in case .getItems() returns undefined
+    const items = statusBarRegistry.getItems() ?? [];
 
     return (
       <div className="BottomBar flex gaps">
@@ -22,10 +24,17 @@ export class BottomBar extends React.Component {
           htmlFor="current-workspace"
         />
         <div className="extensions box grow flex gaps justify-flex-end">
-          {statusBarRegistry.getItems().map(({ item }, index) => {
+          {Array.isArray(items) && items.map(({ item }, index) => {
             if (!item) return;
 
-            return <div className="flex align-center gaps item" key={index}>{item}</div>;
+            return (
+              <div
+                className="flex align-center gaps item"
+                key={index}
+              >
+                {typeof item === "function" ? item() : item}
+              </div>
+            );
           })}
         </div>
       </div>