mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-23 03:34:16 +00:00
[Query Copilot V2] Unit tests for V2 Copilot (#1580)
* Add tests for V2 of copilot and fix query parameter feature flag * Fix merge changes
This commit is contained in:
v-darkora
GitHub
@@ -1,10 +1,32 @@
|
||||
import { PrimaryButton } from "@fluentui/react";
|
||||
import { shallow } from "enzyme";
|
||||
import { useQueryCopilot } from "hooks/useQueryCopilot";
|
||||
import { withHooks } from "jest-react-hooks-shallow";
|
||||
import React from "react";
|
||||
import { WelcomeSidebarModal } from "./WelcomeSidebarModal";
|
||||
|
||||
describe("WelcomeSidebarModal snapshot test", () => {
|
||||
it("should render ", () => {
|
||||
const wrapper = shallow(<WelcomeSidebarModal />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
describe("Welcome Sidebar Modal snapshot test", () => {
|
||||
it("should close on button click ", () => {
|
||||
withHooks(() => {
|
||||
const wrapper = shallow(<WelcomeSidebarModal />);
|
||||
const spy = jest.spyOn(localStorage, "setItem");
|
||||
spy.mockClear();
|
||||
|
||||
const button = wrapper.find(PrimaryButton).first();
|
||||
button.simulate("click", {});
|
||||
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
expect(spy).toHaveBeenLastCalledWith("showWelcomeSidebar", "false");
|
||||
expect(useQueryCopilot.getState().showWelcomeSidebar).toBeFalsy();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
it("should not reneder with local storage key", () => {
|
||||
withHooks(() => {
|
||||
window.localStorage.setItem("showWelcomeSidebar", "false");
|
||||
const wrapper = shallow(<WelcomeSidebarModal />);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -7,9 +7,9 @@ import CopilotSidebarWelcomeIllustration from "../../../../../images/CopilotSide
|
||||
import Thumb from "../../../../../images/CopilotThumb.svg";
|
||||
|
||||
export const WelcomeSidebarModal: React.FC = (): JSX.Element => {
|
||||
const { setShowWelcomeSidebar } = useQueryCopilot();
|
||||
const { showWelcomeSidebar, setShowWelcomeSidebar } = useQueryCopilot();
|
||||
|
||||
const hideModal = () => {
|
||||
const hideModal = (): void => {
|
||||
setShowWelcomeSidebar(false);
|
||||
window.localStorage.setItem("showWelcomeSidebar", "false");
|
||||
};
|
||||
@@ -20,108 +20,111 @@ export const WelcomeSidebarModal: React.FC = (): JSX.Element => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
backgroundColor: "#FAFAFA",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
showWelcomeSidebar && (
|
||||
<Stack
|
||||
style={{
|
||||
margin: "20px 10px",
|
||||
padding: "20px",
|
||||
maxHeight: "100%",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
backgroundColor: "#FAFAFA",
|
||||
flex: "1 0 100%",
|
||||
}}
|
||||
>
|
||||
<Stack horizontalAlign="center" verticalAlign="center">
|
||||
<Image src={CopilotSidebarWelcomeIllustration} />
|
||||
</Stack>
|
||||
<div
|
||||
style={{
|
||||
margin: "20px 10px",
|
||||
padding: "20px",
|
||||
maxHeight: "100%",
|
||||
boxSizing: "border-box",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<Stack horizontalAlign="center" verticalAlign="center">
|
||||
<Image src={CopilotSidebarWelcomeIllustration} />
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<Stack.Item align="center" style={{ marginBottom: "10px" }}>
|
||||
<Text className="title bold">Welcome to Copilot in CosmosDB</Text>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Flash} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Let copilot do the work for you
|
||||
<Stack>
|
||||
<Stack.Item align="center" style={{ marginBottom: "10px" }}>
|
||||
<Text className="title bold">Welcome to Copilot in CosmosDB</Text>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Flash} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Let copilot do the work for you
|
||||
<br />
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Ask Copilot to generate a query by describing the query in your words.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Ask Copilot to generate a query by describing the query in your words.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Thumb} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Use your judgement
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Thumb} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Use your judgement
|
||||
<br />
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-preview-terms">Read preview terms</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-preview-terms">Read preview terms</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Database} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Copilot currently works only a sample database
|
||||
</Stack.Item>
|
||||
<Stack.Item style={{ marginBottom: "15px" }}>
|
||||
<Stack>
|
||||
<Stack horizontal>
|
||||
<Stack.Item align="start">
|
||||
<Image src={Database} />
|
||||
</Stack.Item>
|
||||
<Stack.Item align="center" style={{ marginLeft: "10px" }}>
|
||||
<Text style={{ fontWeight: 600 }}>
|
||||
Copilot currently works only a sample database
|
||||
<br />
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Copilot is setup on a sample database we have configured for you at no cost
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
<Stack.Item style={{ textAlign: "start", marginLeft: "25px" }}>
|
||||
<Text>
|
||||
Copilot is setup on a sample database we have configured for you at no cost
|
||||
<br />
|
||||
<Link href="http://aka.ms/cdb-copilot-learn-more">Learn more</Link>
|
||||
</Text>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
<Stack.Item align="center">
|
||||
<PrimaryButton style={{ width: "224px", height: "32px" }} onClick={hideModal}>
|
||||
Get Started
|
||||
</PrimaryButton>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Stack.Item align="center">
|
||||
<PrimaryButton style={{ width: "224px", height: "32px" }} onClick={hideModal}>
|
||||
Get Started
|
||||
</PrimaryButton>
|
||||
</Stack.Item>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,243 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`WelcomeSidebarModal snapshot test should render 1`] = `
|
||||
<Stack
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#FAFAFA",
|
||||
"height": "100%",
|
||||
"overflow": "auto",
|
||||
"width": "100%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "white",
|
||||
"borderRadius": "20px",
|
||||
"boxSizing": "border-box",
|
||||
"margin": "20px 10px",
|
||||
"maxHeight": "100%",
|
||||
"padding": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
horizontalAlign="center"
|
||||
verticalAlign="center"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
className="title bold"
|
||||
>
|
||||
Welcome to Copilot in CosmosDB
|
||||
</Text>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
>
|
||||
<StackItem
|
||||
align="start"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Let copilot do the work for you
|
||||
<br />
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "25px",
|
||||
"textAlign": "start",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Ask Copilot to generate a query by describing the query in your words.
|
||||
<br />
|
||||
<StyledLinkBase
|
||||
href="http://aka.ms/cdb-copilot-learn-more"
|
||||
>
|
||||
Learn more
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
>
|
||||
<StackItem
|
||||
align="start"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Use your judgement
|
||||
<br />
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "25px",
|
||||
"textAlign": "start",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it.
|
||||
<br />
|
||||
<StyledLinkBase
|
||||
href="http://aka.ms/cdb-copilot-preview-terms"
|
||||
>
|
||||
Read preview terms
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "15px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack>
|
||||
<Stack
|
||||
horizontal={true}
|
||||
>
|
||||
<StackItem
|
||||
align="start"
|
||||
>
|
||||
<Image
|
||||
src=""
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem
|
||||
align="center"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "10px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
Copilot currently works only a sample database
|
||||
<br />
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<StackItem
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "25px",
|
||||
"textAlign": "start",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text>
|
||||
Copilot is setup on a sample database we have configured for you at no cost
|
||||
<br />
|
||||
<StyledLinkBase
|
||||
href="http://aka.ms/cdb-copilot-learn-more"
|
||||
>
|
||||
Learn more
|
||||
</StyledLinkBase>
|
||||
</Text>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<StackItem
|
||||
align="center"
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"height": "32px",
|
||||
"width": "224px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Get Started
|
||||
</CustomizedPrimaryButton>
|
||||
</StackItem>
|
||||
</Stack>
|
||||
</div>
|
||||
</Stack>
|
||||
`;
|
||||
exports[`Welcome Sidebar Modal snapshot test should close on button click 1`] = `""`;
|
||||
|
||||
exports[`Welcome Sidebar Modal snapshot test should not reneder with local storage key 1`] = `""`;
|
||||
|
||||
Reference in New Issue
Block a user