From de3e56bb994a4435259cc75fa1a9eee18071cd07 Mon Sep 17 00:00:00 2001 From: v-darkora <134300273+v-darkora@users.noreply.github.com> Date: Sat, 15 Jul 2023 00:18:38 +0200 Subject: [PATCH] [Query Copilot] Add unit tests for Welcome Modal (#1535) --- package-lock.json | 20 ++ package.json | 3 +- .../QueryCopilot/Modal/WelcomeModal.test.tsx | 32 +++ .../__snapshots__/WelcomeModal.test.tsx.snap | 196 ++++++++++++++++++ src/setupTests.ts | 27 ++- 5 files changed, 276 insertions(+), 2 deletions(-) create mode 100644 src/Explorer/QueryCopilot/Modal/WelcomeModal.test.tsx create mode 100644 src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap diff --git a/package-lock.json b/package-lock.json index 0a05d1161..be9e9f2e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -164,6 +164,7 @@ "jest": "26.6.3", "jest-canvas-mock": "2.3.1", "jest-playwright-preset": "1.5.1", + "jest-react-hooks-shallow": "1.5.1", "jest-trx-results-processor": "0.0.7", "less": "3.8.1", "less-loader": "4.1.0", @@ -19578,6 +19579,16 @@ "node": ">=8.9.0" } }, + "node_modules/jest-react-hooks-shallow": { + "version": "1.5.1", + "resolved": "https://msazure.pkgs.visualstudio.com/_packaging/AzurePortal/npm/registry/jest-react-hooks-shallow/-/jest-react-hooks-shallow-1.5.1.tgz", + "integrity": "sha1-1SI4EGG7nf9WcfhLBT0LPxy+N/k=", + "dev": true, + "license": "ISC", + "dependencies": { + "react": "^16.8.0" + } + }, "node_modules/jest-regex-util": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-24.9.0.tgz", @@ -48608,6 +48619,15 @@ } } }, + "jest-react-hooks-shallow": { + "version": "1.5.1", + "resolved": "https://msazure.pkgs.visualstudio.com/_packaging/AzurePortal/npm/registry/jest-react-hooks-shallow/-/jest-react-hooks-shallow-1.5.1.tgz", + "integrity": "sha1-1SI4EGG7nf9WcfhLBT0LPxy+N/k=", + "dev": true, + "requires": { + "react": "^16.8.0" + } + }, "jest-regex-util": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-24.9.0.tgz", diff --git a/package.json b/package.json index fd01978f6..db137bd57 100644 --- a/package.json +++ b/package.json @@ -160,6 +160,7 @@ "jest": "26.6.3", "jest-canvas-mock": "2.3.1", "jest-playwright-preset": "1.5.1", + "jest-react-hooks-shallow": "1.5.1", "jest-trx-results-processor": "0.0.7", "less": "3.8.1", "less-loader": "4.1.0", @@ -232,4 +233,4 @@ "prettier": { "printWidth": 120 } -} \ No newline at end of file +} diff --git a/src/Explorer/QueryCopilot/Modal/WelcomeModal.test.tsx b/src/Explorer/QueryCopilot/Modal/WelcomeModal.test.tsx new file mode 100644 index 000000000..63dc8af04 --- /dev/null +++ b/src/Explorer/QueryCopilot/Modal/WelcomeModal.test.tsx @@ -0,0 +1,32 @@ +import { shallow } from "enzyme"; +import { withHooks } from "jest-react-hooks-shallow"; +import React from "react"; +import { WelcomeModal } from "./WelcomeModal"; + +describe("Query Copilot Carousel snapshot test", () => { + it("should render when isOpen is true", () => { + withHooks(() => { + const spy = jest.spyOn(localStorage, "setItem"); + spy.mockClear(); + const wrapper = shallow(); + + expect(wrapper.props().children.props.isOpen).toBeTruthy(); + expect(wrapper).toMatchSnapshot(); + + expect(spy).toHaveBeenCalledTimes(1); + expect(spy).toHaveBeenLastCalledWith("hideWelcomeModal", "true"); + }); + }); + it("should not render when isOpen is false", () => { + withHooks(() => { + const spy = jest.spyOn(localStorage, "setItem"); + spy.mockClear(); + const wrapper = shallow(); + + expect(wrapper.props().children.props.isOpen).toBeFalsy(); + + expect(spy).not.toHaveBeenCalled(); + expect(spy.mock.instances.length).toBe(0); + }); + }); +}); diff --git a/src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap b/src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap new file mode 100644 index 000000000..f0b77ac4d --- /dev/null +++ b/src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap @@ -0,0 +1,196 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Query Copilot Carousel snapshot test should render when isOpen is true 1`] = ` + + + + + + + + + + + + + Preview + + + + + + + + + + + Welcome to Copilot in CosmosDB + + + + + + + + + + Let copilot do the work for you +
+ + + + + Ask Copilot to generate a query by describing the query in your words. +
+ + Learn more + + + + + + + + + + + Use your judgement +
+ + + + + AI-generated content can have mistakes. Make sure it’s accurate and appropriate before using it. +
+ + Read preview terms + + + + + + + + + + + Copilot currently works only a sample database +
+ + + + + Copilot is setup on a sample database we have configured for you at no cost +
+ + Learn more + + + + + + + + Try Copilot + + + + + + +`; diff --git a/src/setupTests.ts b/src/setupTests.ts index fa8564a3a..35af8a5a9 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -1,7 +1,8 @@ +import { initializeIcons } from "@fluentui/react"; import { configure } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; import "jest-canvas-mock"; -import { initializeIcons } from "@fluentui/react"; +import enableHooks from "jest-react-hooks-shallow"; import { TextDecoder, TextEncoder } from "util"; configure({ adapter: new Adapter() }); initializeIcons(); @@ -10,6 +11,30 @@ if (typeof window.URL.createObjectURL === "undefined") { Object.defineProperty(window.URL, "createObjectURL", { value: () => {} }); } +enableHooks(jest, { dontMockByDefault: true }); + +const localStorageMock = (function () { + let store: { [key: string]: string } = {}; + return { + getItem: function (key: string) { + return store[key] || null; + }, + setItem: function (key: string, value: string) { + store[key] = value.toString(); + }, + removeItem: function (key: string) { + delete store[key]; + }, + clear: function () { + store = {}; + }, + }; +})(); + +Object.defineProperty(window, "localStorage", { + value: localStorageMock, +}); + // TODO Remove when jquery and documentdbclient SDK are removed (window).$ = (window).jQuery = require("jquery"); (global).$ = (global).$.jQuery = require("jquery");