[Query Copilot V2] Unit tests for V2 Copilot (#1580)

* Add tests for V2 of copilot and fix query parameter feature flag

* Fix merge changes

src/Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar.test.tsx

@@ -1,10 +1,54 @@
+import { Stack } from "@fluentui/react";
+import { SampleBubble } from "Explorer/QueryCopilot/V2/Bubbles/Sample/SampleBubble";
 import { shallow } from "enzyme";
+import { useQueryCopilot } from "hooks/useQueryCopilot";
+import { withHooks } from "jest-react-hooks-shallow";
 import React from "react";
 import { QueryCopilotSidebar } from "./QueryCopilotSidebar";
 
-describe("QueryCopilotSidebar snapshot test", () => {
-  it("should render ", () => {
+describe("Query Copilot Sidebar snapshot test", () => {
+  const initialState = useQueryCopilot.getState();
+
+  beforeEach(() => {
+    useQueryCopilot.setState(initialState, true);
+  });
+
+  it("should render and set copilot used flag ", () => {
+    withHooks(() => {
+      useQueryCopilot.getState().setShowCopilotSidebar(true);
+      const wrapper = shallow(<QueryCopilotSidebar />);
+
+      expect(useQueryCopilot.getState().wasCopilotUsed).toBeTruthy();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it("should render and not set copilot used flag ", () => {
+    withHooks(() => {
+      const wrapper = shallow(<QueryCopilotSidebar />);
+
+      expect(useQueryCopilot.getState().wasCopilotUsed).toBeFalsy();
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it("should render with chat messages", () => {
+    const message = "some test message";
+    useQueryCopilot.getState().setChatMessages([message]);
     const wrapper = shallow(<QueryCopilotSidebar />);
+
+    const messageContainer = wrapper.find(Stack).findWhere((x) => x.text() === message);
+
+    expect(messageContainer).toBeDefined();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("should render samples without messages", () => {
+    const wrapper = shallow(<QueryCopilotSidebar />);
+
+    const sampleBubble = wrapper.find(SampleBubble);
+
+    expect(sampleBubble).toBeDefined();
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { WelcomeSidebarModal } from "../Modal/WelcomeSidebarModal";
 
 export const QueryCopilotSidebar: React.FC = (): JSX.Element => {
-  const { setWasCopilotUsed, showCopilotSidebar, chatMessages, showWelcomeSidebar } = useQueryCopilot();
+  const { setWasCopilotUsed, showCopilotSidebar, chatMessages } = useQueryCopilot();
 
   React.useEffect(() => {
     if (showCopilotSidebar) {
@@ -18,44 +18,39 @@ export const QueryCopilotSidebar: React.FC = (): JSX.Element => {
   }, []);
 
   return (
-    <Stack style={{ width: "100%", height: "100%", backgroundColor: "#FAFAFA", overflow: "auto" }}>
+    <Stack style={{ width: "100%", height: "100%", backgroundColor: "#FAFAFA" }}>
       <Header />
-      {showWelcomeSidebar ? (
-        <WelcomeSidebarModal />
-      ) : (
-        <>
+      <WelcomeSidebarModal />
+      <Stack
+        style={{
+          flexGrow: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "auto",
+        }}
+      >
+        <WelcomeBubble />
+        {chatMessages.map((message, index) => (
           <Stack
+            key={index}
+            horizontalAlign="center"
+            tokens={{ padding: 8, childrenGap: 8 }}
             style={{
-              flexGrow: 1,
-              display: "flex",
-              flexDirection: "column",
-              overflowY: "auto",
+              backgroundColor: "#E0E7FF",
+              borderRadius: "8px",
+              margin: "5px 10px",
+              textAlign: "start",
             }}
           >
-            <WelcomeBubble />
-            {chatMessages.map((message, index) => (
-              <Stack
-                key={index}
-                horizontalAlign="center"
-                tokens={{ padding: 8, childrenGap: 8 }}
-                style={{
-                  backgroundColor: "#E0E7FF",
-                  borderRadius: "8px",
-                  margin: "5px 10px",
-                  textAlign: "start",
-                }}
-              >
-                {message}
-              </Stack>
-            ))}
-
-            <RetrievingBubble />
-
-            {chatMessages.length === 0 && <SampleBubble />}
+            {message}
           </Stack>
-          <Footer />
-        </>
-      )}
+        ))}
+
+        <RetrievingBubble />
+
+        {chatMessages.length === 0 && <SampleBubble />}
+      </Stack>
+      <Footer />
     </Stack>
   );
 };

src/Explorer/QueryCopilot/V2/Sidebar/__snapshots__/QueryCopilotSidebar.test.tsx.snap

@@ -1,17 +1,140 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`QueryCopilotSidebar snapshot test should render  1`] = `
+exports[`Query Copilot Sidebar snapshot test should render and not set copilot used flag  1`] = `
 <Stack
   style={
     Object {
       "backgroundColor": "#FAFAFA",
       "height": "100%",
-      "overflow": "auto",
       "width": "100%",
     }
   }
 >
   <Header />
   <WelcomeSidebarModal />
+  <Stack
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+        "flexGrow": 1,
+        "overflowY": "auto",
+      }
+    }
+  >
+    <WelcomeBubble />
+    <RetrievingBubble />
+    <SampleBubble />
+  </Stack>
+  <Footer />
+</Stack>
+`;
+
+exports[`Query Copilot Sidebar snapshot test should render and set copilot used flag  1`] = `
+<Stack
+  style={
+    Object {
+      "backgroundColor": "#FAFAFA",
+      "height": "100%",
+      "width": "100%",
+    }
+  }
+>
+  <Header />
+  <WelcomeSidebarModal />
+  <Stack
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+        "flexGrow": 1,
+        "overflowY": "auto",
+      }
+    }
+  >
+    <WelcomeBubble />
+    <RetrievingBubble />
+    <SampleBubble />
+  </Stack>
+  <Footer />
+</Stack>
+`;
+
+exports[`Query Copilot Sidebar snapshot test should render samples without messages 1`] = `
+<Stack
+  style={
+    Object {
+      "backgroundColor": "#FAFAFA",
+      "height": "100%",
+      "width": "100%",
+    }
+  }
+>
+  <Header />
+  <WelcomeSidebarModal />
+  <Stack
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+        "flexGrow": 1,
+        "overflowY": "auto",
+      }
+    }
+  >
+    <WelcomeBubble />
+    <RetrievingBubble />
+    <SampleBubble />
+  </Stack>
+  <Footer />
+</Stack>
+`;
+
+exports[`Query Copilot Sidebar snapshot test should render with chat messages 1`] = `
+<Stack
+  style={
+    Object {
+      "backgroundColor": "#FAFAFA",
+      "height": "100%",
+      "width": "100%",
+    }
+  }
+>
+  <Header />
+  <WelcomeSidebarModal />
+  <Stack
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+        "flexGrow": 1,
+        "overflowY": "auto",
+      }
+    }
+  >
+    <WelcomeBubble />
+    <Stack
+      horizontalAlign="center"
+      key="0"
+      style={
+        Object {
+          "backgroundColor": "#E0E7FF",
+          "borderRadius": "8px",
+          "margin": "5px 10px",
+          "textAlign": "start",
+        }
+      }
+      tokens={
+        Object {
+          "childrenGap": 8,
+          "padding": 8,
+        }
+      }
+    >
+      some test message
+    </Stack>
+    <RetrievingBubble />
+  </Stack>
+  <Footer />
 </Stack>
 `;