Add unit test on command bar

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -1,9 +1,13 @@
+import { FeedResponse, ItemDefinition, Resource } from "@azure/cosmos";
 import { TableRowId } from "@fluentui/react-components";
 import { Platform, updateConfigContext } from "ConfigContext";
+import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
+import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import {
   ButtonsDependencies,
   DocumentsTabComponent,
   IDocumentsTabComponentProps,
+  NEW_DOCUMENT_BUTTON_ID,
   buildQuery,
   getDeleteExistingDocumentButtonState,
   getDiscardExistingDocumentChangesButtonState,
@@ -13,14 +17,59 @@ import {
   getTabsButtons,
   showPartitionKey,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
-import { ShallowWrapper, shallow } from "enzyme";
+import { ReactWrapper, ShallowWrapper, mount, shallow } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
+import { act } from "react-dom/test-utils";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 
+jest.requireActual("Explorer/Controls/Editor/EditorReact");
+
+jest.mock("Common/dataAccess/queryDocuments", () => ({
+  queryDocuments: jest.fn(() => ({
+    // Omit headers, because we can't mock a private field and we don't need to test it
+    fetchNext: (): Promise<Omit<FeedResponse<ItemDefinition & Resource>, "headers">> =>
+      Promise.resolve({
+        resources: [{ id: "id", _rid: "rid", _self: "self", _etag: "etag", _ts: 123 }],
+        hasMoreResults: false,
+        diagnostics: undefined,
+
+        continuation: undefined,
+        continuationToken: undefined,
+        queryMetrics: "queryMetrics",
+        requestCharge: 1,
+        activityId: "activityId",
+        indexMetrics: "indexMetrics",
+      }),
+  })),
+}));
+
+jest.mock("Common/dataAccess/readDocument", () => ({
+  readDocument: jest.fn(() =>
+    Promise.resolve({
+      container: undefined,
+      id: "id",
+      url: "url",
+    }),
+  ),
+}));
+
+jest.mock("Explorer/Controls/Editor/EditorReact", () => ({
+  EditorReact: (props: EditorReactProps) => <>{props.content}</>,
+}));
+
+async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P>, amount = 0) {
+  let newWrapper;
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, amount));
+    newWrapper = wrapper.update();
+  });
+  return newWrapper;
+}
+
 describe("Documents tab", () => {
   describe("buildQuery", () => {
     it("should generate the right select query for SQL API", () => {
@@ -300,14 +349,17 @@ describe("Documents tab", () => {
       onIsExecutingChange: (isExecuting: boolean): void => {
         isExecuting;
       },
-      isTabActive: false,
+      isTabActive: true,
     });
 
     let wrapper: ShallowWrapper;
 
     beforeEach(() => {
       const props: IDocumentsTabComponentProps = createMockProps();
-      wrapper = shallow(<DocumentsTabComponent {...props} />);
+
+      // Enzyme doesn't seem to support hooks, so we need to cast the component to any
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      wrapper = shallow((<DocumentsTabComponent {...props} />) as any);
     });
 
     afterEach(() => {
@@ -334,4 +386,58 @@ describe("Documents tab", () => {
       expect(wrapper.find("#filterInput").exists()).toBeTruthy();
     });
   });
+
+  describe("Command bar buttons", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: false,
+      documentIds: [],
+      collection: {
+        id: ko.observable<string>("foo"),
+        container: new Explorer(),
+        partitionKey: {
+          kind: "MultiHash",
+          paths: ["/pkey1", "/pkey2", "/pkey3"],
+          version: 2,
+        },
+        partitionKeyProperties: ["pkey1", "pkey2", "pkey3"],
+        partitionKeyPropertyHeaders: ["/pkey1", "/pkey2", "/pkey3"],
+      } as ViewModels.CollectionBase,
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: true,
+    });
+
+    let wrapper: ReactWrapper;
+
+    beforeEach(async () => {
+      updateConfigContext({ platform: Platform.Hosted });
+
+      const props: IDocumentsTabComponentProps = createMockProps();
+
+      // Enzyme doesn't seem to support hooks, so we need to cast the component to any
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      wrapper = mount((<DocumentsTabComponent {...props} />) as any);
+      wrapper = await waitForComponentToPaint(wrapper);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("clicking on New Document should show editor with new document", async () => {
+      useCommandBar
+        .getState()
+        .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
+        .onCommandClick(undefined);
+      wrapper = await waitForComponentToPaint(wrapper);
+      expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy();
+    });
+  });
 });

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -252,6 +252,9 @@ const createUploadButton = (container: Explorer): CommandButtonComponentProps =>
   };
 };
 
+// Export to expose to unit tests
+export const NEW_DOCUMENT_BUTTON_ID = "mongoNewDocumentBtn";
+
 // Export to expose in unit tests
 export const getTabsButtons = ({
   _collection,
@@ -284,7 +287,7 @@ export const getTabsButtons = ({
       disabled:
         !getNewDocumentButtonState(editorState).enabled ||
         useSelectedNode.getState().isQueryCopilotCollectionSelected(),
-      id: "mongoNewDocumentBtn",
+      id: NEW_DOCUMENT_BUTTON_ID,
     });
   }
 
@@ -457,7 +460,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   onExecutionErrorChange,
   onIsExecutingChange,
   isTabActive,
-}) => {
+}): JSX.Element => {
   const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true);
   const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false);
   const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
@@ -1645,9 +1648,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         // collapse filter
         setAppliedFilter(filterContent);
         setIsFilterExpanded(false);
-        document.getElementById("errorStatusIcon")?.focus();
       } catch (error) {
-        console.error();
+        console.error(error);
         useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
       }
     },

src/setupTests.ts

@@ -41,3 +41,9 @@ Object.defineProperty(window, "localStorage", {
 require("jquery-ui-dist/jquery-ui");
 (<any>global).TextEncoder = TextEncoder;
 (<any>global).TextDecoder = TextDecoder;
+
+(<any>global).ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));