[Query Copilot] Adding tests for the welcome modal (#1538)

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx

@@ -0,0 +1,122 @@
+import { Checkbox, ChoiceGroup, DefaultButton, IconButton, PrimaryButton, TextField } from "@fluentui/react";
+import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
+import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
+import { getUserEmail } from "Utils/UserUtils";
+import { shallow } from "enzyme";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import React from "react";
+
+jest.mock("Utils/UserUtils");
+(getUserEmail as jest.Mock).mockResolvedValue("test@email.com");
+
+jest.mock("Explorer/QueryCopilot/QueryCopilotUtilities");
+submitFeedback as jest.Mock;
+
+describe("Query Copilot Feedback Modal snapshot test", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it("shoud render and match snapshot", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", false, "test prompt");
+
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    expect(wrapper.props().isOpen).toBeTruthy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should close on cancel click", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const cancelButton = wrapper.find(IconButton);
+    cancelButton.simulate("click");
+    wrapper.setProps({});
+
+    expect(wrapper.props().isOpen).toBeFalsy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should get user unput", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+    const testUserInput = "test user input";
+
+    const userInput = wrapper.find(TextField).first();
+    userInput.simulate("change", {}, testUserInput);
+
+    expect(wrapper.find(TextField).first().props().value).toEqual(testUserInput);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should record user contact choice no", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+    const contactAllowed = wrapper.find(ChoiceGroup);
+
+    contactAllowed.simulate("change", {}, { key: "no" });
+
+    expect(getUserEmail).toHaveBeenCalledTimes(3);
+    expect(wrapper.find(ChoiceGroup).props().selectedKey).toEqual("no");
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should record user contact choice yes", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+    const contactAllowed = wrapper.find(ChoiceGroup);
+
+    contactAllowed.simulate("change", {}, { key: "yes" });
+
+    expect(getUserEmail).toHaveBeenCalledTimes(4);
+    expect(wrapper.find(ChoiceGroup).props().selectedKey).toEqual("yes");
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should not render dont show again button", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const dontShowAgain = wrapper.find(Checkbox);
+
+    expect(dontShowAgain).toHaveLength(0);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should render dont show again button and check it ", () => {
+    useQueryCopilot.getState().openFeedbackModal("test query", true, "test prompt");
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const dontShowAgain = wrapper.find(Checkbox);
+    dontShowAgain.simulate("change", {}, true);
+
+    expect(wrapper.find(Checkbox)).toHaveLength(1);
+    expect(wrapper.find(Checkbox).first().props().checked).toBeTruthy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should cancel submission", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const cancelButton = wrapper.find(DefaultButton);
+    cancelButton.simulate("click");
+    wrapper.setProps({});
+
+    expect(wrapper.props().isOpen).toBeFalsy();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should submit submission", () => {
+    const wrapper = shallow(<QueryCopilotFeedbackModal />);
+
+    const submitButton = wrapper.find(PrimaryButton);
+    submitButton.simulate("click");
+    wrapper.setProps({});
+
+    expect(submitFeedback).toHaveBeenCalledTimes(1);
+    expect(submitFeedback).toHaveBeenCalledWith({
+      likeQuery: false,
+      generatedQuery: "",
+      userPrompt: "",
+      description: "",
+      contact: getUserEmail(),
+    });
+    expect(wrapper.props().isOpen).toBeFalsy();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.tsx

@@ -13,7 +13,7 @@ import {
 import { submitFeedback } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import React from "react";
-import { getUserEmail } from "../../Utils/UserUtils";
+import { getUserEmail } from "../../../Utils/UserUtils";
 
 export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
   const {
@@ -28,6 +28,7 @@ export const QueryCopilotFeedbackModal: React.FC = (): JSX.Element => {
   const [description, setDescription] = React.useState<string>("");
   const [doNotShowAgainChecked, setDoNotShowAgainChecked] = React.useState<boolean>(false);
   const [contact, setContact] = React.useState<string>(getUserEmail());
+
   return (
     <Modal isOpen={showFeedbackModal}>
       <Stack style={{ padding: 24 }}>

src/Explorer/QueryCopilot/Modal/WelcomeModal.test.tsx

@@ -3,7 +3,7 @@ import { withHooks } from "jest-react-hooks-shallow";
 import React from "react";
 import { WelcomeModal } from "./WelcomeModal";
 
-describe("Query Copilot Carousel snapshot test", () => {
+describe("Query Copilot Welcome Modal snapshot test", () => {
   it("should render when isOpen is true", () => {
     withHooks(() => {
       const spy = jest.spyOn(localStorage, "setItem");

src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Query Copilot Carousel snapshot test should render when isOpen is true 1`] = `
+exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is true 1`] = `
 <Fragment>
   <Modal
     isBlocking={false}

src/Main.tsx

@@ -17,7 +17,7 @@ import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
 import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
-import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/QueryCopilotFeedbackModal";
+import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";