mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-20 01:11:25 +00:00
Refactored Settings Tab (#161)
* added SettingsV2 Tab * lint changes * foxed failing test * Addressed PR comments - removed dangerouslySetInnerHtml - removed underscore dependency - added AccessibleElement - removed unnecesary exceptions to linting * split render into separate functions - removed sinon in test - Added some enums to replace constant strings - removed dangerously set inner html - made autopilot input as StatefulValue * add settingscomponent snapshot * fixed linting errors * fixed errors * addressed PR comments - Moved StatefulValue to new class - Split render to more functions for throughputInputComponents * Added sub components - Added tests for SettingsRenderUtls - Added empty test files for adding tests later * Moved all inputs to fluent UI - removed rupm - added reusable styles * Added Tabs - Added ToolTipLabel component - Removed toggleables for individual components - Removed accessible elements - Added IndexingPolicyComponent * Added more tests * Addressed PR comments * Moved Label radio buttons to choicegroup * fixed lint errors * Removed StatefulValue - Moved conflict res tab to the end - Added styling for autpilot radiobuttons * fixed linting errors * fix bugs from merge to master * fixed formatting issue * Addressed PR comments - Added unit tests for smaller methods within each component * fixed linting errors * removed redundant snapshots * removed empty line * made separate props objects for subcomponents * Moved dirty checks to sub components * Made indesing policy component height = 80% of view port - modified auto pilot v3 messages - Added Fluent UI tolltip - * Moved warning messages inline * moved conflict res helpers out * fixed bugs * added stack style for message * fixed tests * Added tests * fixed linting and format errors * undid changes * more edits * fixed compile errors * fixed compile errors * fixed errors * fixed bug with save and discard buttons * fixed compile errors * addressed PR comments
This commit is contained in:
Srinath Narayanan
committed by
GitHub
GitHub
parent
4ecdfe60eb
commit
fc722e87be
269
src/Explorer/Controls/Settings/SettingsComponent.test.tsx
Normal file
269
src/Explorer/Controls/Settings/SettingsComponent.test.tsx
Normal file
@@ -0,0 +1,269 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import SettingsTabV2 from "../../Tabs/SettingsTabV2";
|
||||
import { collection } from "./TestUtils";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import ko from "knockout";
|
||||
import { TtlType, isDirty, TtlOnNoDefault, TtlOn, TtlOff } from "./SettingsUtils";
|
||||
import Explorer from "../../Explorer";
|
||||
import { updateCollection } from "../../../Common/dataAccess/updateCollection";
|
||||
jest.mock("../../../Common/dataAccess/updateCollection", () => ({
|
||||
updateCollection: jest.fn().mockReturnValue({
|
||||
id: undefined,
|
||||
defaultTtl: undefined,
|
||||
indexingPolicy: undefined,
|
||||
conflictResolutionPolicy: undefined,
|
||||
changeFeedPolicy: undefined,
|
||||
analyticalStorageTtl: undefined,
|
||||
geospatialConfig: undefined
|
||||
} as DataModels.Collection)
|
||||
}));
|
||||
import { updateOffer } from "../../../Common/DocumentClientUtilityBase";
|
||||
jest.mock("../../../Common/DocumentClientUtilityBase", () => ({
|
||||
updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer)
|
||||
}));
|
||||
|
||||
describe("SettingsComponent", () => {
|
||||
const baseProps: SettingsComponentProps = {
|
||||
settingsTab: new SettingsTabV2({
|
||||
collection: collection,
|
||||
tabKind: ViewModels.CollectionTabKind.SettingsV2,
|
||||
title: "Scale & Settings",
|
||||
tabPath: "",
|
||||
node: undefined,
|
||||
selfLink: undefined,
|
||||
hashLocation: "settings",
|
||||
isActive: ko.observable(false),
|
||||
onUpdateTabsButtons: undefined
|
||||
})
|
||||
};
|
||||
|
||||
it("renders", () => {
|
||||
const wrapper = shallow(<SettingsComponent {...baseProps} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("dirty value enables save button and discard button", () => {
|
||||
const wrapper = shallow(<SettingsComponent {...baseProps} />);
|
||||
const settingsComponentInstance = wrapper.instance() as SettingsComponent;
|
||||
expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(false);
|
||||
expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(false);
|
||||
wrapper.setState({ isScaleSaveable: true, isScaleDiscardable: true });
|
||||
wrapper.update();
|
||||
expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
|
||||
expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
|
||||
wrapper.setState({
|
||||
isScaleSaveable: false,
|
||||
isScaleDiscardable: false,
|
||||
isSubSettingsSaveable: true,
|
||||
isSubSettingsDiscardable: true
|
||||
});
|
||||
wrapper.update();
|
||||
expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
|
||||
expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
|
||||
wrapper.setState({ isSubSettingsSaveable: false, isSubSettingsDiscardable: false, isIndexingPolicyDirty: true });
|
||||
wrapper.update();
|
||||
expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
|
||||
expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
|
||||
wrapper.setState({ isIndexingPolicyDirty: false, isConflictResolutionDirty: true });
|
||||
wrapper.update();
|
||||
expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
|
||||
expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
|
||||
});
|
||||
|
||||
it("auto pilot helper functions pass on correct value", () => {
|
||||
const newCollection = { ...collection };
|
||||
newCollection.offer = ko.observable<DataModels.Offer>({
|
||||
content: {
|
||||
offerAutopilotSettings: {
|
||||
maxThroughput: 10000
|
||||
}
|
||||
}
|
||||
} as DataModels.Offer);
|
||||
|
||||
const props = { ...baseProps };
|
||||
props.settingsTab.collection = newCollection;
|
||||
|
||||
const wrapper = shallow(<SettingsComponent {...props} />);
|
||||
const settingsComponentInstance = wrapper.instance() as SettingsComponent;
|
||||
expect(settingsComponentInstance.hasProvisioningTypeChanged()).toEqual(false);
|
||||
wrapper.setState({
|
||||
userCanChangeProvisioningTypes: true,
|
||||
isAutoPilotSelected: true,
|
||||
wasAutopilotOriginallySet: false,
|
||||
autoPilotThroughput: 1000
|
||||
});
|
||||
wrapper.update();
|
||||
expect(settingsComponentInstance.hasProvisioningTypeChanged()).toEqual(true);
|
||||
});
|
||||
|
||||
it("shouldShowKeyspaceSharedThroughputMessage", () => {
|
||||
let settingsComponentInstance = new SettingsComponent(baseProps);
|
||||
expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(false);
|
||||
|
||||
const newContainer = new Explorer({
|
||||
notificationsClient: undefined,
|
||||
isEmulator: false
|
||||
});
|
||||
newContainer.isPreferredApiCassandra = ko.computed(() => true);
|
||||
|
||||
const newCollection = { ...collection };
|
||||
newCollection.container = newContainer;
|
||||
const newDatabase = {
|
||||
nodeKind: undefined,
|
||||
rid: undefined,
|
||||
container: newContainer,
|
||||
self: undefined,
|
||||
id: undefined,
|
||||
collections: undefined,
|
||||
offer: undefined,
|
||||
isDatabaseExpanded: undefined,
|
||||
isDatabaseShared: ko.computed(() => true),
|
||||
selectedSubnodeKind: undefined,
|
||||
selectDatabase: undefined,
|
||||
expandDatabase: undefined,
|
||||
collapseDatabase: undefined,
|
||||
loadCollections: undefined,
|
||||
findCollectionWithId: undefined,
|
||||
openAddCollection: undefined,
|
||||
onDeleteDatabaseContextMenuClick: undefined,
|
||||
readSettings: undefined,
|
||||
onSettingsClick: undefined,
|
||||
loadOffer: undefined
|
||||
} as ViewModels.Database;
|
||||
newCollection.getDatabase = () => newDatabase;
|
||||
newCollection.offer = ko.observable(undefined);
|
||||
|
||||
const props = { ...baseProps };
|
||||
props.settingsTab.collection = newCollection;
|
||||
|
||||
settingsComponentInstance = new SettingsComponent(props);
|
||||
expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(true);
|
||||
});
|
||||
|
||||
it("hasConflictResolution", () => {
|
||||
let settingsComponentInstance = new SettingsComponent(baseProps);
|
||||
expect(settingsComponentInstance.hasConflictResolution()).toEqual(undefined);
|
||||
|
||||
const newContainer = new Explorer({
|
||||
notificationsClient: undefined,
|
||||
isEmulator: false
|
||||
});
|
||||
newContainer.databaseAccount = ko.observable({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
location: undefined,
|
||||
type: undefined,
|
||||
kind: undefined,
|
||||
tags: undefined,
|
||||
properties: {
|
||||
documentEndpoint: undefined,
|
||||
tableEndpoint: undefined,
|
||||
gremlinEndpoint: undefined,
|
||||
cassandraEndpoint: undefined,
|
||||
enableMultipleWriteLocations: true
|
||||
}
|
||||
});
|
||||
const newCollection = { ...collection };
|
||||
newCollection.container = newContainer;
|
||||
newCollection.conflictResolutionPolicy = ko.observable({
|
||||
mode: DataModels.ConflictResolutionMode.Custom,
|
||||
conflictResolutionProcedure: undefined
|
||||
} as DataModels.ConflictResolutionPolicy);
|
||||
|
||||
const props = { ...baseProps };
|
||||
props.settingsTab.collection = newCollection;
|
||||
|
||||
settingsComponentInstance = new SettingsComponent(props);
|
||||
expect(settingsComponentInstance.hasConflictResolution()).toEqual(true);
|
||||
});
|
||||
|
||||
it("isOfferReplacePending", () => {
|
||||
let settingsComponentInstance = new SettingsComponent(baseProps);
|
||||
expect(settingsComponentInstance.isOfferReplacePending()).toEqual(undefined);
|
||||
|
||||
const newCollection = { ...collection };
|
||||
newCollection.offer = ko.observable({
|
||||
headers: { "x-ms-offer-replace-pending": true }
|
||||
} as DataModels.OfferWithHeaders);
|
||||
const props = { ...baseProps };
|
||||
props.settingsTab.collection = newCollection;
|
||||
|
||||
settingsComponentInstance = new SettingsComponent(props);
|
||||
expect(settingsComponentInstance.isOfferReplacePending()).toEqual(true);
|
||||
});
|
||||
|
||||
it("save calls updateCollection and updateOffer", async () => {
|
||||
const wrapper = shallow(<SettingsComponent {...baseProps} />);
|
||||
wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true });
|
||||
wrapper.update();
|
||||
const settingsComponentInstance = wrapper.instance() as SettingsComponent;
|
||||
await settingsComponentInstance.onSaveClick();
|
||||
expect(updateCollection).toBeCalled();
|
||||
expect(updateOffer).toBeCalled();
|
||||
});
|
||||
|
||||
it("revert resets state values", async () => {
|
||||
const wrapper = shallow(<SettingsComponent {...baseProps} />);
|
||||
wrapper.setState({ timeToLive: TtlType.OnNoDefault, throughput: 10 });
|
||||
wrapper.update();
|
||||
let state = wrapper.state() as SettingsComponentState;
|
||||
expect(isDirty(state.timeToLive, state.timeToLiveBaseline)).toEqual(true);
|
||||
expect(isDirty(state.throughput, state.throughputBaseline)).toEqual(true);
|
||||
|
||||
const settingsComponentInstance = wrapper.instance() as SettingsComponent;
|
||||
settingsComponentInstance.onRevertClick();
|
||||
state = wrapper.state() as SettingsComponentState;
|
||||
expect(isDirty(state.timeToLive, state.timeToLiveBaseline)).toEqual(false);
|
||||
expect(isDirty(state.throughput, state.throughputBaseline)).toEqual(false);
|
||||
});
|
||||
|
||||
it("getTtlValue", async () => {
|
||||
const settingsComponentInstance = new SettingsComponent(baseProps);
|
||||
expect(settingsComponentInstance.getTtlValue(TtlType.OnNoDefault)).toEqual(TtlOnNoDefault);
|
||||
expect(settingsComponentInstance.getTtlValue(TtlType.On)).toEqual(TtlOn);
|
||||
expect(settingsComponentInstance.getTtlValue(TtlType.Off)).toEqual(TtlOff);
|
||||
});
|
||||
|
||||
it("getAnalyticalStorageTtl", () => {
|
||||
const newCollection = { ...collection };
|
||||
newCollection.analyticalStorageTtl = ko.observable(10);
|
||||
const props = { ...baseProps };
|
||||
props.settingsTab.collection = newCollection;
|
||||
const wrapper = shallow(<SettingsComponent {...props} />);
|
||||
const settingsComponentInstance = wrapper.instance() as SettingsComponent;
|
||||
expect(settingsComponentInstance.getAnalyticalStorageTtl()).toEqual(10);
|
||||
wrapper.setState({ analyticalStorageTtlSelection: TtlType.Off });
|
||||
wrapper.update();
|
||||
expect(settingsComponentInstance.getAnalyticalStorageTtl()).toEqual(-1);
|
||||
});
|
||||
|
||||
it("getUpdatedConflictResolutionPolicy", () => {
|
||||
const wrapper = shallow(<SettingsComponent {...baseProps} />);
|
||||
const conflictResolutionPolicyPath = "_ts";
|
||||
const conflictResolutionPolicyProcedure = "sample_sproc";
|
||||
const expectSprocPath =
|
||||
"/dbs/" + collection.databaseId + "/colls/" + collection.id() + "/sprocs/" + conflictResolutionPolicyProcedure;
|
||||
|
||||
wrapper.setState({
|
||||
conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.LastWriterWins,
|
||||
conflictResolutionPolicyPath: conflictResolutionPolicyPath
|
||||
});
|
||||
wrapper.update();
|
||||
const settingsComponentInstance = wrapper.instance() as SettingsComponent;
|
||||
let conflictResolutionPolicy = settingsComponentInstance.getUpdatedConflictResolutionPolicy();
|
||||
expect(conflictResolutionPolicy.mode).toEqual(DataModels.ConflictResolutionMode.LastWriterWins);
|
||||
expect(conflictResolutionPolicy.conflictResolutionPath).toEqual(conflictResolutionPolicyPath);
|
||||
|
||||
wrapper.setState({
|
||||
conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.Custom,
|
||||
conflictResolutionPolicyProcedure: conflictResolutionPolicyProcedure
|
||||
});
|
||||
wrapper.update();
|
||||
conflictResolutionPolicy = settingsComponentInstance.getUpdatedConflictResolutionPolicy();
|
||||
expect(conflictResolutionPolicy.mode).toEqual(DataModels.ConflictResolutionMode.Custom);
|
||||
expect(conflictResolutionPolicy.conflictResolutionProcedure).toEqual(expectSprocPath);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user