mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-08 20:17:03 +00:00
Added more Self Serve functionalities (#401)
* added recursion and inition decorators * working version * added todo comment and removed console.log * Added Recursive add * removed type requirement * proper resolution of promises * added custom element and base class * Made selfServe standalone page * Added custom renderer as async type * Added overall defaults * added inital open from data explorer * removed landingpage * added feature for self serve type * renamed sqlx->example and added invalid type * Added comments for Example * removed unnecessary changes * Resolved PR comments Added tests Moved onSubmt and initialize inside base class Moved testExplorer to separate folder made fields of SelfServe Class non static * fixed lint errors * fixed compilation errors * Removed reactbinding changes * renamed dropdown -> choice * Added SelfServeComponent * Addressed PR comments * added toggle, visibility, text display,commandbar * added sqlx example * added onRefrssh * formatting changes * rmoved radioswitch display * updated smartui tests * Added more tests * onSubmit -> onSave * Resolved PR comments
This commit is contained in:
Srinath Narayanan
committed by
GitHub
GitHub
parent
b0b973b21a
commit
49bf8c60db
@@ -1,23 +1,36 @@
|
||||
import React from "react";
|
||||
import { shallow } from "enzyme";
|
||||
import { SelfServeDescriptor, SelfServeComponent, SelfServeComponentState } from "./SelfServeComponent";
|
||||
import { InputType, UiType } from "../Explorer/Controls/SmartUi/SmartUiComponent";
|
||||
import { SelfServeComponent, SelfServeComponentState } from "./SelfServeComponent";
|
||||
import { NumberUiType, SelfServeDescriptor, SelfServeNotificationType, SmartUiInput } from "./SelfServeTypes";
|
||||
|
||||
describe("SelfServeComponent", () => {
|
||||
const defaultValues = new Map<string, InputType>([
|
||||
["throughput", "450"],
|
||||
["analyticalStore", "false"],
|
||||
["database", "db2"],
|
||||
const defaultValues = new Map<string, SmartUiInput>([
|
||||
["throughput", { value: 450 }],
|
||||
["analyticalStore", { value: false }],
|
||||
["database", { value: "db2" }],
|
||||
]);
|
||||
const initializeMock = jest.fn(async () => defaultValues);
|
||||
const onSubmitMock = jest.fn(async () => {
|
||||
return;
|
||||
const updatedValues = new Map<string, SmartUiInput>([
|
||||
["throughput", { value: 460 }],
|
||||
["analyticalStore", { value: true }],
|
||||
["database", { value: "db2" }],
|
||||
]);
|
||||
|
||||
const initializeMock = jest.fn(async () => new Map(defaultValues));
|
||||
const onSaveMock = jest.fn(async () => {
|
||||
return { message: "submitted successfully", type: SelfServeNotificationType.info };
|
||||
});
|
||||
const onRefreshMock = jest.fn(async () => {
|
||||
return { isUpdateInProgress: false, notificationMessage: "refresh performed successfully" };
|
||||
});
|
||||
const onRefreshIsUpdatingMock = jest.fn(async () => {
|
||||
return { isUpdateInProgress: true, notificationMessage: "refresh performed successfully" };
|
||||
});
|
||||
|
||||
const exampleData: SelfServeDescriptor = {
|
||||
initialize: initializeMock,
|
||||
onSubmit: onSubmitMock,
|
||||
inputNames: ["throughput", "containerId", "analyticalStore", "database"],
|
||||
onSave: onSaveMock,
|
||||
onRefresh: onRefreshMock,
|
||||
inputNames: ["throughput", "analyticalStore", "database"],
|
||||
root: {
|
||||
id: "root",
|
||||
info: {
|
||||
@@ -38,7 +51,7 @@ describe("SelfServeComponent", () => {
|
||||
max: 500,
|
||||
step: 10,
|
||||
defaultValue: 400,
|
||||
uiType: UiType.Spinner,
|
||||
uiType: NumberUiType.Spinner,
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -78,27 +91,109 @@ describe("SelfServeComponent", () => {
|
||||
},
|
||||
};
|
||||
|
||||
const verifyDefaultsSet = (currentValues: Map<string, InputType>): void => {
|
||||
for (const key of currentValues.keys()) {
|
||||
if (defaultValues.has(key)) {
|
||||
expect(defaultValues.get(key)).toEqual(currentValues.get(key));
|
||||
}
|
||||
const isEqual = (source: Map<string, SmartUiInput>, target: Map<string, SmartUiInput>): void => {
|
||||
expect(target.size).toEqual(source.size);
|
||||
for (const key of source.keys()) {
|
||||
expect(target.get(key)).toEqual(source.get(key));
|
||||
}
|
||||
};
|
||||
|
||||
it("should render", async () => {
|
||||
it("should render and honor save, discard, refresh actions", async () => {
|
||||
const wrapper = shallow(<SelfServeComponent descriptor={exampleData} />);
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
// initialize() should be called and defaults should be set when component is mounted
|
||||
expect(initializeMock).toHaveBeenCalled();
|
||||
const state = wrapper.state() as SelfServeComponentState;
|
||||
verifyDefaultsSet(state.currentValues);
|
||||
// initialize() and onRefresh() should be called and defaults should be set when component is mounted
|
||||
expect(initializeMock).toHaveBeenCalledTimes(1);
|
||||
expect(onRefreshMock).toHaveBeenCalledTimes(1);
|
||||
let state = wrapper.state() as SelfServeComponentState;
|
||||
isEqual(state.currentValues, defaultValues);
|
||||
|
||||
// onSubmit() must be called when submit button is clicked
|
||||
const submitButton = wrapper.find("#submitButton");
|
||||
submitButton.simulate("click");
|
||||
expect(onSubmitMock).toHaveBeenCalled();
|
||||
// when currentValues and baselineValues differ, save and discard should not be disabled
|
||||
wrapper.setState({ currentValues: updatedValues });
|
||||
wrapper.update();
|
||||
state = wrapper.state() as SelfServeComponentState;
|
||||
isEqual(state.currentValues, updatedValues);
|
||||
const selfServeComponent = wrapper.instance() as SelfServeComponent;
|
||||
expect(selfServeComponent.isSaveButtonDisabled()).toBeFalsy();
|
||||
expect(selfServeComponent.isDiscardButtonDisabled()).toBeFalsy();
|
||||
|
||||
// when errors exist, save is disabled but discard is enabled
|
||||
wrapper.setState({ hasErrors: true });
|
||||
wrapper.update();
|
||||
state = wrapper.state() as SelfServeComponentState;
|
||||
expect(selfServeComponent.isSaveButtonDisabled()).toBeTruthy();
|
||||
expect(selfServeComponent.isDiscardButtonDisabled()).toBeFalsy();
|
||||
|
||||
// discard resets currentValues to baselineValues
|
||||
selfServeComponent.discard();
|
||||
state = wrapper.state() as SelfServeComponentState;
|
||||
isEqual(state.currentValues, defaultValues);
|
||||
isEqual(state.currentValues, state.baselineValues);
|
||||
|
||||
// resetBaselineValues sets baselineValues to currentValues
|
||||
wrapper.setState({ baselineValues: updatedValues });
|
||||
wrapper.update();
|
||||
state = wrapper.state() as SelfServeComponentState;
|
||||
isEqual(state.baselineValues, updatedValues);
|
||||
selfServeComponent.resetBaselineValues();
|
||||
state = wrapper.state() as SelfServeComponentState;
|
||||
isEqual(state.baselineValues, defaultValues);
|
||||
isEqual(state.currentValues, state.baselineValues);
|
||||
|
||||
// clicking refresh calls onRefresh. If component is not updating, it calls initialize() as well
|
||||
selfServeComponent.onRefreshClicked();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
expect(onRefreshMock).toHaveBeenCalledTimes(2);
|
||||
expect(initializeMock).toHaveBeenCalledTimes(2);
|
||||
|
||||
selfServeComponent.onSaveButtonClick();
|
||||
expect(onSaveMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("getResolvedValue", async () => {
|
||||
const wrapper = shallow(<SelfServeComponent descriptor={exampleData} />);
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
const selfServeComponent = wrapper.instance() as SelfServeComponent;
|
||||
|
||||
const numberResult = 1;
|
||||
const numberPromise = async (): Promise<number> => {
|
||||
return numberResult;
|
||||
};
|
||||
expect(await selfServeComponent.getResolvedValue(numberResult)).toEqual(numberResult);
|
||||
expect(await selfServeComponent.getResolvedValue(numberPromise)).toEqual(numberResult);
|
||||
|
||||
const stringResult = "result";
|
||||
const stringPromise = async (): Promise<string> => {
|
||||
return stringResult;
|
||||
};
|
||||
expect(await selfServeComponent.getResolvedValue(stringResult)).toEqual(stringResult);
|
||||
expect(await selfServeComponent.getResolvedValue(stringPromise)).toEqual(stringResult);
|
||||
});
|
||||
|
||||
it("message bar and spinner snapshots", async () => {
|
||||
const newDescriptor = { ...exampleData, onRefresh: onRefreshIsUpdatingMock };
|
||||
let wrapper = shallow(<SelfServeComponent descriptor={newDescriptor} />);
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
let selfServeComponent = wrapper.instance() as SelfServeComponent;
|
||||
selfServeComponent.onSaveButtonClick();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
newDescriptor.onRefresh = onRefreshMock;
|
||||
wrapper = shallow(<SelfServeComponent descriptor={newDescriptor} />);
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
selfServeComponent = wrapper.instance() as SelfServeComponent;
|
||||
selfServeComponent.onSaveButtonClick();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setState({ isInitializing: true });
|
||||
wrapper.update();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
wrapper.setState({ compileErrorMessage: "sample error message" });
|
||||
wrapper.update();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user