Add more DocumentsTab unit react tests

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

@@ -1,5 +1,12 @@
-import { buildQuery, showPartitionKey } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
+import {
+  DocumentsTabComponent,
+  IDocumentsTabComponentProps,
+  buildQuery,
+  showPartitionKey,
+} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
+import { ShallowWrapper, shallow } from "enzyme";
 import * as ko from "knockout";
+import React from "react";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { updateUserContext } from "../../../UserContext";
@@ -23,19 +30,15 @@ describe("Documents tab", () => {
       } as DatabaseAccount,
     });
 
-    const collectionWithoutPartitionKey = <ViewModels.Collection>(<unknown>{
+    const collectionWithoutPartitionKey: ViewModels.Collection = {
       id: ko.observable<string>("foo"),
-      database: {
+      databaseId: "foo",
-        id: ko.observable<string>("foo"),
-      },
       container: explorer,
-    });
+    } as ViewModels.Collection;
 
-    const collectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
+    const collectionWithSystemPartitionKey: ViewModels.Collection = {
       id: ko.observable<string>("foo"),
-      database: {
+      databaseId: "foo",
-        id: ko.observable<string>("foo"),
-      },
       partitionKey: {
         paths: ["/foo"],
         kind: "Hash",
@@ -43,13 +46,11 @@ describe("Documents tab", () => {
         systemKey: true,
       },
       container: explorer,
-    });
+    } as ViewModels.Collection;
 
-    const collectionWithNonSystemPartitionKey = <ViewModels.Collection>(<unknown>{
+    const collectionWithNonSystemPartitionKey: ViewModels.Collection = {
       id: ko.observable<string>("foo"),
-      database: {
+      databaseId: "foo",
-        id: ko.observable<string>("foo"),
-      },
       partitionKey: {
         paths: ["/foo"],
         kind: "Hash",
@@ -57,13 +58,11 @@ describe("Documents tab", () => {
         systemKey: false,
       },
       container: explorer,
-    });
+    } as ViewModels.Collection;
 
-    const mongoCollectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
+    const mongoCollectionWithSystemPartitionKey: ViewModels.Collection = {
       id: ko.observable<string>("foo"),
-      database: {
+      databaseId: "foo",
-        id: ko.observable<string>("foo"),
-      },
       partitionKey: {
         paths: ["/foo"],
         kind: "Hash",
@@ -71,7 +70,7 @@ describe("Documents tab", () => {
         systemKey: true,
       },
       container: mongoExplorer,
-    });
+    } as ViewModels.Collection;
 
     it("should be false for null or undefined collection", () => {
       expect(showPartitionKey(undefined, false)).toBe(false);
@@ -96,4 +95,53 @@ describe("Documents tab", () => {
       expect(showPartitionKey(collectionWithNonSystemPartitionKey, false)).toBe(true);
     });
   });
+
+  describe("when rendered", () => {
+    const createMockProps = (): IDocumentsTabComponentProps => ({
+      isPreferredApiMongoDB: false,
+      documentIds: [],
+      collection: undefined,
+      partitionKey: undefined,
+      onLoadStartKey: 0,
+      tabTitle: "",
+      onExecutionErrorChange: (isExecutionError: boolean): void => {
+        isExecutionError;
+      },
+      onIsExecutingChange: (isExecuting: boolean): void => {
+        isExecuting;
+      },
+      isTabActive: false,
+    });
+
+    let wrapper: ShallowWrapper;
+
+    beforeEach(() => {
+      const props: IDocumentsTabComponentProps = createMockProps();
+      wrapper = shallow(<DocumentsTabComponent {...props} />);
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it("should render the Edit Filter button", () => {
+      expect(wrapper.findWhere((node) => node.text() === "Edit Filter").exists()).toBeTruthy();
+    });
+
+    it("clicking on Edit filter should render the Apply Filter button", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.findWhere((node) => node.text() === "Apply Filter").exists()).toBeTruthy();
+    });
+
+    it("clicking on Edit filter should render input for filter", () => {
+      wrapper
+        .findWhere((node) => node.text() === "Edit Filter")
+        .at(0)
+        .simulate("click");
+      expect(wrapper.find("#filterInput").exists()).toBeTruthy();
+    });
+  });
 });

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -423,7 +423,8 @@ export const buildQuery = (
   return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
 };
 
-const DocumentsTabComponent: React.FunctionComponent<{
+// Export to expose to unit tests
+export interface IDocumentsTabComponentProps {
   isPreferredApiMongoDB: boolean;
   documentIds: DocumentId[]; // TODO: this contains ko observables. We need to convert them to React state.
   collection: ViewModels.CollectionBase;
@@ -434,7 +435,10 @@ const DocumentsTabComponent: React.FunctionComponent<{
   onExecutionErrorChange: (isExecutionError: boolean) => void;
   onIsExecutingChange: (isExecuting: boolean) => void;
   isTabActive: boolean;
-}> = ({
+}
+
+// Export to expose to unit tests
+export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
   isPreferredApiMongoDB,
   documentIds: _documentIds,
   collection: _collection,
@@ -1672,6 +1676,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
                   <div className="editFilterContainer">
                     {!isPreferredApiMongoDB && <span className="filterspan"> SELECT * FROM c </span>}
                     <Input
+                      id="filterInput"
                       ref={filterInput}
                       type="text"
                       list="filtersList"