[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 2023-08-21 16:29:00 +02:00 committed by GitHub
parent ebd40cb9b0
commit 19100ec437
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 886 additions and 377 deletions

View File

@ -1,10 +1,26 @@
import { Text } from "@fluentui/react";
import { shallow } from "enzyme";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import React from "react";
import { SampleBubble } from "./SampleBubble";
describe("Sample Bubble snapshot test", () => {
it("should render ", () => {
it("should render", () => {
const wrapper = shallow(<SampleBubble />);
const sampleInputs = wrapper.find(Text);
expect(sampleInputs.length).toEqual(2);
expect(useQueryCopilot.getState().userPrompt).toEqual("");
expect(wrapper).toMatchSnapshot();
});
it("should render and be clicked", () => {
const wrapper = shallow(<SampleBubble />);
const firstSampleInput = wrapper.find(Text).first();
firstSampleInput.simulate("click", {}, "");
expect(useQueryCopilot.getState().userPrompt).toEqual(expect.any(String));
expect(wrapper).toMatchSnapshot();
});
});

View File

@ -1,6 +1,54 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sample Bubble snapshot test should render 1`] = `
exports[`Sample Bubble snapshot test should render 1`] = `
<Stack
horizontalAlign="end"
style={
Object {
"alignItems": "center",
"display": "flex",
"margin": "10px",
"padding": "10px",
}
}
verticalAlign="end"
>
<Text
key="0"
onClick={[Function]}
style={
Object {
"border": "1.5px solid #B0BEFF",
"borderRadius": "4px",
"cursor": "pointer",
"marginBottom": "5px",
"padding": "2px",
"width": "100%",
}
}
>
Write a query to return last 10 records in the database
</Text>
<Text
key="1"
onClick={[Function]}
style={
Object {
"border": "1.5px solid #B0BEFF",
"borderRadius": "4px",
"cursor": "pointer",
"marginBottom": "5px",
"padding": "2px",
"width": "100%",
}
}
>
Write a query to return all records in this table created in the last thirty days which also have the record owner as "Contoso"
</Text>
</Stack>
`;
exports[`Sample Bubble snapshot test should render and be clicked 1`] = `
<Stack
horizontalAlign="end"
style={

View File

@ -1,10 +1,84 @@
import { IconButton, Image, TextField } from "@fluentui/react";
import { shallow } from "enzyme";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import React from "react";
import { Footer } from "./Footer";
describe("Footer snapshot test", () => {
it("should render ", () => {
const initialStoreState = useQueryCopilot.getState();
beforeEach(() => {
useQueryCopilot.setState(initialStoreState, true);
});
it("should open sample prompts on button click", () => {
const wrapper = shallow(<Footer />);
const samplePromptsImage = wrapper.find(Image).first();
samplePromptsImage.simulate("click", {});
expect(useQueryCopilot.getState().isSamplePromptsOpen).toBeTruthy();
expect(wrapper).toMatchSnapshot();
});
it("should update user input", () => {
const wrapper = shallow(<Footer />);
const newInput = "some new input";
const textInput = wrapper.find(TextField).first();
textInput.simulate("change", {}, newInput);
expect(useQueryCopilot.getState().userPrompt).toEqual(newInput);
expect(wrapper).toMatchSnapshot();
});
it("should pass text with enter key", () => {
const testMessage = "test message";
useQueryCopilot.getState().setUserPrompt(testMessage);
const wrapper = shallow(<Footer />);
const textInput = wrapper.find(TextField).first();
// eslint-disable-next-line @typescript-eslint/no-empty-function
textInput.simulate("keydown", { key: "Enter", shiftKey: false, preventDefault: () => {} });
expect(useQueryCopilot.getState().chatMessages).toEqual([testMessage]);
expect(useQueryCopilot.getState().userPrompt).toEqual("");
expect(wrapper).toMatchSnapshot();
});
it("should not pass text with non enter key", () => {
const wrapper = shallow(<Footer />);
const textInput = wrapper.find(TextField).first();
// eslint-disable-next-line @typescript-eslint/no-empty-function
textInput.simulate("keydown", { key: "K", shiftKey: false, preventDefault: () => {} });
expect(useQueryCopilot.getState().chatMessages).toEqual([]);
expect(useQueryCopilot.getState().userPrompt).toEqual("");
expect(wrapper).toMatchSnapshot();
});
it("should not pass if no text", () => {
const wrapper = shallow(<Footer />);
const textInput = wrapper.find(TextField).first();
// eslint-disable-next-line @typescript-eslint/no-empty-function
textInput.simulate("keydown", { key: "Enter", shiftKey: false, preventDefault: () => {} });
expect(useQueryCopilot.getState().chatMessages).toEqual([]);
expect(useQueryCopilot.getState().userPrompt).toEqual("");
expect(wrapper).toMatchSnapshot();
});
it("should pass text with icon button", () => {
const testMessage = "test message";
useQueryCopilot.getState().setUserPrompt(testMessage);
const wrapper = shallow(<Footer />);
const iconButton = wrapper.find(IconButton).first();
iconButton.simulate("click", {});
expect(useQueryCopilot.getState().chatMessages).toEqual([testMessage]);
expect(useQueryCopilot.getState().userPrompt).toEqual("");
expect(wrapper).toMatchSnapshot();
});
});

View File

@ -1,6 +1,421 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Footer snapshot test should render 1`] = `
exports[`Footer snapshot test should not pass if no text 1`] = `
<Stack
horizontal={true}
horizontalAlign="end"
style={
Object {
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
"display": "flex",
"margin": "5px",
"padding": "5px",
}
}
verticalAlign="end"
>
<Stack>
<Image
onClick={[Function]}
src=""
styles={
Object {
"label": Object {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"border": "5px",
"selectors": Object {
":hover": Object {
"outline": "1px dashed #605e5c",
},
},
},
}
}
/>
<SamplePrompts
sampleProps={
Object {
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
}
}
/>
</Stack>
<StyledTextFieldBase
multiline={true}
onChange={[Function]}
onKeyDown={[Function]}
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
"border": "none",
},
"root": Object {
"border": "none",
"borderRadius": "20px",
"height": "80px",
"marginLeft": "10px",
"outline": "none",
"padding": "8px",
"width": "100%",
},
}
}
value=""
/>
<CustomizedIconButton
iconProps={
Object {
"iconName": "Send",
}
}
onClick={[Function]}
/>
</Stack>
`;
exports[`Footer snapshot test should not pass text with non enter key 1`] = `
<Stack
horizontal={true}
horizontalAlign="end"
style={
Object {
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
"display": "flex",
"margin": "5px",
"padding": "5px",
}
}
verticalAlign="end"
>
<Stack>
<Image
onClick={[Function]}
src=""
styles={
Object {
"label": Object {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"border": "5px",
"selectors": Object {
":hover": Object {
"outline": "1px dashed #605e5c",
},
},
},
}
}
/>
<SamplePrompts
sampleProps={
Object {
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
}
}
/>
</Stack>
<StyledTextFieldBase
multiline={true}
onChange={[Function]}
onKeyDown={[Function]}
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
"border": "none",
},
"root": Object {
"border": "none",
"borderRadius": "20px",
"height": "80px",
"marginLeft": "10px",
"outline": "none",
"padding": "8px",
"width": "100%",
},
}
}
value=""
/>
<CustomizedIconButton
iconProps={
Object {
"iconName": "Send",
}
}
onClick={[Function]}
/>
</Stack>
`;
exports[`Footer snapshot test should open sample prompts on button click 1`] = `
<Stack
horizontal={true}
horizontalAlign="end"
style={
Object {
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
"display": "flex",
"margin": "5px",
"padding": "5px",
}
}
verticalAlign="end"
>
<Stack>
<Image
onClick={[Function]}
src=""
styles={
Object {
"label": Object {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"border": "5px",
"selectors": Object {
":hover": Object {
"outline": "1px dashed #605e5c",
},
},
},
}
}
/>
<SamplePrompts
sampleProps={
Object {
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
}
}
/>
</Stack>
<StyledTextFieldBase
multiline={true}
onChange={[Function]}
onKeyDown={[Function]}
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
"border": "none",
},
"root": Object {
"border": "none",
"borderRadius": "20px",
"height": "80px",
"marginLeft": "10px",
"outline": "none",
"padding": "8px",
"width": "100%",
},
}
}
value=""
/>
<CustomizedIconButton
iconProps={
Object {
"iconName": "Send",
}
}
onClick={[Function]}
/>
</Stack>
`;
exports[`Footer snapshot test should pass text with enter key 1`] = `
<Stack
horizontal={true}
horizontalAlign="end"
style={
Object {
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
"display": "flex",
"margin": "5px",
"padding": "5px",
}
}
verticalAlign="end"
>
<Stack>
<Image
onClick={[Function]}
src=""
styles={
Object {
"label": Object {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"border": "5px",
"selectors": Object {
":hover": Object {
"outline": "1px dashed #605e5c",
},
},
},
}
}
/>
<SamplePrompts
sampleProps={
Object {
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
}
}
/>
</Stack>
<StyledTextFieldBase
multiline={true}
onChange={[Function]}
onKeyDown={[Function]}
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
"border": "none",
},
"root": Object {
"border": "none",
"borderRadius": "20px",
"height": "80px",
"marginLeft": "10px",
"outline": "none",
"padding": "8px",
"width": "100%",
},
}
}
value="test message"
/>
<CustomizedIconButton
iconProps={
Object {
"iconName": "Send",
}
}
onClick={[Function]}
/>
</Stack>
`;
exports[`Footer snapshot test should pass text with icon button 1`] = `
<Stack
horizontal={true}
horizontalAlign="end"
style={
Object {
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
"display": "flex",
"margin": "5px",
"padding": "5px",
}
}
verticalAlign="end"
>
<Stack>
<Image
onClick={[Function]}
src=""
styles={
Object {
"label": Object {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"border": "5px",
"selectors": Object {
":hover": Object {
"outline": "1px dashed #605e5c",
},
},
},
}
}
/>
<SamplePrompts
sampleProps={
Object {
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
}
}
/>
</Stack>
<StyledTextFieldBase
multiline={true}
onChange={[Function]}
onKeyDown={[Function]}
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
"border": "none",
},
"root": Object {
"border": "none",
"borderRadius": "20px",
"height": "80px",
"marginLeft": "10px",
"outline": "none",
"padding": "8px",
"width": "100%",
},
}
}
value="test message"
/>
<CustomizedIconButton
iconProps={
Object {
"iconName": "Send",
}
}
onClick={[Function]}
/>
</Stack>
`;
exports[`Footer snapshot test should update user input 1`] = `
<Stack
horizontal={true}
horizontalAlign="end"

View File

@ -1,10 +1,17 @@
import { IconButton } from "@fluentui/react";
import { shallow } from "enzyme";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import React from "react";
import { Header } from "./Header";
describe("Header snapshot test", () => {
it("should render ", () => {
it("should close on button click ", () => {
const wrapper = shallow(<Header />);
const iconButton = wrapper.find(IconButton).first();
iconButton.simulate("click", {});
expect(useQueryCopilot.getState().showCopilotSidebar).toBeFalsy();
expect(wrapper).toMatchSnapshot();
});
});

View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header snapshot test should render 1`] = `
exports[`Header snapshot test should close on button click 1`] = `
<Stack
horizontal={true}
style={

View File

@ -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();
});
});
});

View File

@ -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 its 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 its 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>
)
);
};

View File

@ -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 its 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`] = `""`;

View File

@ -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();
});
});

View File

@ -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>
);
};

View File

@ -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>
`;

View File

@ -111,7 +111,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
enablePriorityBasedThrottling: "true" === get("enableprioritybasedthrottling"),
enableNPSSurvey: "true" === get("enablenpssurvey"),
enableCopilot: "true" === get("enablecopilot"),
copilotVersion: get("copilotVersion") ? get("copilotVersion") : "v1.0",
copilotVersion: get("copilotversion") ?? "v1.0",
enableCopilotPhoenixGateaway: "true" === get("enablecopilotphoenixgateaway"),
enableCopilotFullSchema: "true" === get("enablecopilotfullschema"),
};