cosmos-explorer/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2Mongo.test.tsx

import { deleteDocument } from "Common/MongoProxyClient";
import { Platform, updateConfigContext } from "ConfigContext";
import { EditorReactProps } from "Explorer/Controls/Editor/EditorReact";
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
import {
  DELETE_BUTTON_ID,
  DISCARD_BUTTON_ID,
  DocumentsTabComponent,
  IDocumentsTabComponentProps,
  NEW_DOCUMENT_BUTTON_ID,
  SAVE_BUTTON_ID,
  UPDATE_BUTTON_ID,
  buildQuery,
} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
import { ReactWrapper, ShallowWrapper, mount } from "enzyme";
import * as ko from "knockout";
import React from "react";
import { act } from "react-dom/test-utils";
import * as ViewModels from "../../../Contracts/ViewModels";
import Explorer from "../../Explorer";

jest.requireActual("Explorer/Controls/Editor/EditorReact");

const PROPERTY_VALUE = "__SOME_PROPERTY_VALUE__";

jest.mock("Common/MongoProxyClient", () => ({
  queryDocuments: jest.fn(() =>
    Promise.resolve({
      continuationToken: "",
      documents: [
        {
          _rid: "_rid",
          _self: "_self",
          _etag: "etag",
          _ts: 1234,
          id: "id",
        },
      ],
      headers: {},
    }),
  ),
  readDocument: jest.fn(() =>
    Promise.resolve({
      _rid: "_rid1",
      _self: "_self1",
      _etag: "etag1",
      property: PROPERTY_VALUE,
      _ts: 5678,
      id: "id1",
    }),
  ),
  deleteDocument: jest.fn(() => Promise.resolve()),
}));

jest.mock("Explorer/Controls/Editor/EditorReact", () => ({
  EditorReact: (props: EditorReactProps) => <>{props.content}</>,
}));

jest.mock("Explorer/Controls/Dialog", () => ({
  useDialog: {
    getState: jest.fn(() => ({
      showOkCancelModalDialog: (title: string, subText: string, okLabel: string, onOk: () => void) => onOk(),
      showOkModalDialog: () => {},
    })),
  },
}));

async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | ShallowWrapper<P>, amount = 0) {
  let newWrapper;
  await act(async () => {
    await new Promise((resolve) => setTimeout(resolve, amount));
    newWrapper = wrapper.update();
  });
  return newWrapper;
}

describe("Documents tab (Mongo API)", () => {
  describe("buildQuery", () => {
    it("should generate the right select query for SQL API", () => {
      expect(buildQuery(true, "")).toContain("{}");
    });
  });

  describe("Command bar buttons", () => {
    const createMockProps = (): IDocumentsTabComponentProps => ({
      isPreferredApiMongoDB: true,
      documentIds: [],
      collection: {
        id: ko.observable<string>("foo"),
        container: new Explorer(),
        partitionKey: {
          kind: "Hash",
          paths: ["/pkey"],
          version: 2,
        },
        partitionKeyProperties: ["pkey"],
        partitionKeyPropertyHeaders: ["/pkey"],
        databaseId: "databaseId",
        self: "self",
        rawDataModel: undefined,
        selectedSubnodeKind: undefined,
        children: undefined,
        isCollectionExpanded: undefined,
        onDocumentDBDocumentsClick: (): void => {
          throw new Error("Function not implemented.");
        },
        onNewQueryClick: (): void => {
          throw new Error("Function not implemented.");
        },
        expandCollection: (): void => {
          throw new Error("Function not implemented.");
        },
        collapseCollection: (): void => {
          throw new Error("Function not implemented.");
        },
        getDatabase: (): ViewModels.Database => {
          throw new Error("Function not implemented.");
        },
        nodeKind: "nodeKind",
        rid: "rid",
      },
      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();

      wrapper = mount(<DocumentsTabComponent {...props} />);
      wrapper = await waitForComponentToPaint(wrapper);
    });

    afterEach(() => {
      wrapper.unmount();
    });

    it("renders by default the first document", async () => {
      expect(wrapper.findWhere((node) => node.text().includes(PROPERTY_VALUE)).exists()).toBeTruthy();
    });

    it("default buttons", async () => {
      expect(useCommandBar.getState().contextButtons.find((button) => button.id === UPDATE_BUTTON_ID)).toBeDefined();
      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DELETE_BUTTON_ID)).toBeDefined();
    });

    it("clicking on New Document should show editor with new document", () => {
      act(() => {
        useCommandBar
          .getState()
          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
          .onCommandClick(undefined);
      });
      expect(wrapper.findWhere((node) => node.text().includes("replace_with_new_document_id")).exists()).toBeTruthy();
    });

    it("clicking on New Document should show Save and Discard buttons", () => {
      act(() => {
        useCommandBar
          .getState()
          .contextButtons.find((button) => button.id === NEW_DOCUMENT_BUTTON_ID)
          .onCommandClick(undefined);
      });

      expect(useCommandBar.getState().contextButtons.find((button) => button.id === SAVE_BUTTON_ID)).toBeDefined();
      expect(useCommandBar.getState().contextButtons.find((button) => button.id === DISCARD_BUTTON_ID)).toBeDefined();
    });

    it("clicking Delete Document asks for confirmation", () => {
      const mockDeleteDocument = deleteDocument as jest.Mock;
      mockDeleteDocument.mockClear();

      act(() => {
        useCommandBar
          .getState()
          .contextButtons.find((button) => button.id === DELETE_BUTTON_ID)
          .onCommandClick(undefined);
      });

      expect(mockDeleteDocument).toHaveBeenCalled();
    });
  });
});