From 92b928e76f2400278631b63a76f7f30dc52c5aaf Mon Sep 17 00:00:00 2001
From: "Hung-Han (Henry) Chen" <1474479+chenhunghan@users.noreply.github.com>
Date: Wed, 2 Dec 2020 12:30:17 +0800
Subject: [PATCH] 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       | 47 +++++++++++++++++++
 .../components/cluster-manager/bottom-bar.tsx | 13 ++++-
 2 files changed, 58 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..46d4619a18
--- /dev/null
+++ b/src/renderer/components/cluster-manager/bottom-bar.test.tsx
@@ -0,0 +1,47 @@
+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>