Refactored component edit policy tests into separate folders and usin…

…g client integration testing setup (#91657)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/constants.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import moment from 'moment-timezone';
+
 import { PolicyFromES } from '../../../common/types';
 
 export const POLICY_NAME = 'my_policy';
@@ -234,3 +236,32 @@ export const POLICY_WITH_KNOWN_AND_UNKNOWN_FIELDS = ({
  },
  name: POLICY_NAME,
 } as any) as PolicyFromES;
+
+export const getGeneratedPolicies = (): PolicyFromES[] => {
+ const policy = {
+ phases: {
+ hot: {
+ min_age: '0s',
+ actions: {
+ rollover: {
+ max_size: '1gb',
+ },
+ },
+ },
+ },
+ };
+ const policies: PolicyFromES[] = [];
+ for (let i = 0; i < 105; i++) {
+ policies.push({
+ version: i,
+ modified_date: moment().subtract(i, 'days').toISOString(),
+ linkedIndices: i % 2 === 0 ? [`index${i}`] : undefined,
+ name: `testy${i}`,
+ policy: {
+ ...policy,
+ name: `testy${i}`,
+ },
+ });
+ }
+ return policies;
+};

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx

@@ -21,10 +21,12 @@ import { KibanaContextProvider } from '../../../public/shared_imports';
 import { AppServicesContext } from '../../../public/types';
 import { createBreadcrumbsMock } from '../../../public/application/services/breadcrumbs.mock';
 
+import { TestSubjects } from '../helpers';
+import { POLICY_NAME } from './constants';
+
 type Phases = keyof PolicyPhases;
 
-import { POLICY_NAME } from './constants';
-import { TestSubjects } from '../helpers';
+window.scrollTo = jest.fn();
 
 jest.mock('@elastic/eui', () => {
  const original = jest.requireActual('@elastic/eui');
@@ -46,14 +48,17 @@ jest.mock('@elastic/eui', () => {
  };
 });
 
-const testBedConfig: TestBedConfig = {
- memoryRouter: {
- initialEntries: [`/policies/edit/${POLICY_NAME}`],
- componentRoutePath: `/policies/edit/:policyName`,
- },
- defaultProps: {
- getUrlForApp: () => {},
- },
+const getTestBedConfig = (testBedConfigArgs?: Partial<TestBedConfig>): TestBedConfig => {
+ return {
+ memoryRouter: {
+ initialEntries: [`/policies/edit/${POLICY_NAME}`],
+ componentRoutePath: `/policies/edit/:policyName`,
+ },
+ defaultProps: {
+ getUrlForApp: () => {},
+ },
+ ...testBedConfigArgs,
+ };
 };
 
 const breadcrumbService = createBreadcrumbsMock();
@@ -72,13 +77,22 @@ const MyComponent = ({ appServicesContext, ...rest }: any) => {
  );
 };
 
-const initTestBed = registerTestBed<TestSubjects>(MyComponent, testBedConfig);
+const initTestBed = (arg?: {
+ appServicesContext?: Partial<AppServicesContext>;
+ testBedConfig?: Partial<TestBedConfig>;
+}) => {
+ const { testBedConfig: testBedConfigArgs, ...rest } = arg || {};
+ return registerTestBed<TestSubjects>(MyComponent, getTestBedConfig(testBedConfigArgs))(rest);
+};
 
 type SetupReturn = ReturnType<typeof setup>;
 
 export type EditPolicyTestBed = SetupReturn extends Promise<infer U> ? U : SetupReturn;
 
-export const setup = async (arg?: { appServicesContext: Partial<AppServicesContext> }) => {
+export const setup = async (arg?: {
+ appServicesContext?: Partial<AppServicesContext>;
+ testBedConfig?: Partial<TestBedConfig>;
+}) => {
  const testBed = await initTestBed(arg);
 
  const { find, component, form, exists } = testBed;
@@ -169,34 +183,15 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
 
  const enable = (phase: Phases) => createFormToggleAction(`enablePhaseSwitch-${phase}`);
 
- const setMinAgeValue = (phase: Phases) => createFormSetValueAction(`${phase}-selectedMinimumAge`);
-
- const setMinAgeUnits = (phase: Phases) =>
- createFormSetValueAction(`${phase}-selectedMinimumAgeUnits`);
-
- const setDataAllocation = (phase: Phases) => async (value: DataTierAllocationType) => {
- act(() => {
- find(`${phase}-dataTierAllocationControls.dataTierSelect`).simulate('click');
- });
- component.update();
- await act(async () => {
- switch (value) {
- case 'node_roles':
- find(`${phase}-dataTierAllocationControls.defaultDataAllocationOption`).simulate('click');
- break;
- case 'node_attrs':
- find(`${phase}-dataTierAllocationControls.customDataAllocationOption`).simulate('click');
- break;
- default:
- find(`${phase}-dataTierAllocationControls.noneDataAllocationOption`).simulate('click');
- }
- });
- component.update();
+ const createMinAgeActions = (phase: Phases) => {
+ return {
+ hasMinAgeInput: () => exists(`${phase}-selectedMinimumAge`),
+ setMinAgeValue: createFormSetValueAction(`${phase}-selectedMinimumAge`),
+ setMinAgeUnits: createFormSetValueAction(`${phase}-selectedMinimumAgeUnits`),
+ hasRolloverTipOnMinAge: () => exists(`${phase}-rolloverMinAgeInputIconTip`),
+ };
  };
 
- const setSelectedNodeAttribute = (phase: Phases) =>
- createFormSetValueAction(`${phase}-selectedNodeAttrs`);
-
  const setReplicas = (phase: Phases) => async (value: string) => {
  if (!exists(`${phase}-selectedReplicaCount`)) {
  await createFormToggleAction(`${phase}-setReplicasSwitch`)(true);
@@ -216,8 +211,12 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
  const setFreeze = createFormToggleAction('freezeSwitch');
  const freezeExists = () => exists('freezeSwitch');
 
- const setReadonly = (phase: Phases) => async (value: boolean) => {
- await createFormToggleAction(`${phase}-readonlySwitch`)(value);
+ const createReadonlyActions = (phase: Phases) => {
+ const toggleSelector = `${phase}-readonlySwitch`;
+ return {
+ readonlyExists: () => exists(toggleSelector),
+ toggleReadonly: createFormToggleAction(toggleSelector),
+ };
  };
 
  const createSearchableSnapshotActions = (phase: Phases) => {
@@ -271,17 +270,93 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
  };
  };
 
- const hasRolloverTipOnMinAge = (phase: Phases) => (): boolean =>
- exists(`${phase}-rolloverMinAgeInputIconTip`);
+ const hasRolloverSettingRequiredCallout = (): boolean => exists('rolloverSettingsRequired');
+
+ const createNodeAllocationActions = (phase: Phases) => {
+ const controlsSelector = `${phase}-dataTierAllocationControls`;
+ const dataTierSelector = `${controlsSelector}.dataTierSelect`;
+ const nodeAttrsSelector = `${phase}-selectedNodeAttrs`;
+
+ return {
+ hasDataTierAllocationControls: () => exists(controlsSelector),
+ openNodeAttributesSection: async () => {
+ await act(async () => {
+ find(dataTierSelector).simulate('click');
+ });
+ component.update();
+ },
+ hasNodeAttributesSelect: (): boolean => exists(nodeAttrsSelector),
+ getNodeAttributesSelectOptions: () => find(nodeAttrsSelector).find('option'),
+ setDataAllocation: async (value: DataTierAllocationType) => {
+ act(() => {
+ find(dataTierSelector).simulate('click');
+ });
+ component.update();
+ await act(async () => {
+ switch (value) {
+ case 'node_roles':
+ find(`${controlsSelector}.defaultDataAllocationOption`).simulate('click');
+ break;
+ case 'node_attrs':
+ find(`${controlsSelector}.customDataAllocationOption`).simulate('click');
+ break;
+ default:
+ find(`${controlsSelector}.noneDataAllocationOption`).simulate('click');
+ }
+ });
+ component.update();
+ },
+ setSelectedNodeAttribute: createFormSetValueAction(nodeAttrsSelector),
+ hasNoNodeAttrsWarning: () => exists('noNodeAttributesWarning'),
+ hasDefaultAllocationWarning: () => exists('defaultAllocationWarning'),
+ hasDefaultAllocationNotice: () => exists('defaultAllocationNotice'),
+ hasNodeDetailsFlyout: () => exists(`${phase}-viewNodeDetailsFlyoutButton`),
+ openNodeDetailsFlyout: async () => {
+ await act(async () => {
+ find(`${phase}-viewNodeDetailsFlyoutButton`).simulate('click');
+ });
+ component.update();
+ },
+ };
+ };
+
+ const expectErrorMessages = (expectedMessages: string[]) => {
+ const errorMessages = component.find('.euiFormErrorText');
+ expect(errorMessages.length).toBe(expectedMessages.length);
+ expectedMessages.forEach((expectedErrorMessage) => {
+ let foundErrorMessage;
+ for (let i = 0; i < errorMessages.length; i++) {
+ if (errorMessages.at(i).text() === expectedErrorMessage) {
+ foundErrorMessage = true;
+ }
+ }
+ expect(foundErrorMessage).toBe(true);
+ });
+ };
+
+ /*
+ * For new we rely on a setTimeout to ensure that error messages have time to populate
+ * the form object before we look at the form object. See:
+ * x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/form_errors_context.tsx
+ * for where this logic lives.
+ */
+ const runTimers = () => {
+ act(() => {
+ jest.runAllTimers();
+ });
+ component.update();
+ };
 
  return {
  ...testBed,
+ runTimers,
  actions: {
  saveAsNewPolicy: createFormToggleAction('saveAsNewSwitch'),
  setPolicyName: createFormSetValueAction('policyNameField'),
  setWaitForSnapshotPolicy,
  savePolicy,
  hasGlobalErrorCallout: () => exists('policyFormErrorsCallout'),
+ expectErrorMessages,
  timeline: {
  hasHotPhase: () => exists('ilmTimelineHotPhase'),
  hasWarmPhase: () => exists('ilmTimelineWarmPhase'),
@@ -294,46 +369,40 @@ export const setup = async (arg?: { appServicesContext: Partial<AppServicesConte
  setMaxAge,
  toggleRollover,
  toggleDefaultRollover,
+ hasRolloverSettingRequiredCallout,
  hasErrorIndicator: () => exists('phaseErrorIndicator-hot'),
  ...createForceMergeActions('hot'),
  ...createIndexPriorityActions('hot'),
  ...createShrinkActions('hot'),
- setReadonly: setReadonly('hot'),
+ ...createReadonlyActions('hot'),
  ...createSearchableSnapshotActions('hot'),
  },
  warm: {
  enable: enable('warm'),
- setMinAgeValue: setMinAgeValue('warm'),
- setMinAgeUnits: setMinAgeUnits('warm'),
- setDataAllocation: setDataAllocation('warm'),
- setSelectedNodeAttribute: setSelectedNodeAttribute('warm'),
+ ...createMinAgeActions('warm'),
  setReplicas: setReplicas('warm'),
  hasErrorIndicator: () => exists('phaseErrorIndicator-warm'),
- hasRolloverTipOnMinAge: hasRolloverTipOnMinAge('warm'),
  ...createShrinkActions('warm'),
  ...createForceMergeActions('warm'),
- setReadonly: setReadonly('warm'),
+ ...createReadonlyActions('warm'),
  ...createIndexPriorityActions('warm'),
+ ...createNodeAllocationActions('warm'),
  },
  cold: {
  enable: enable('cold'),
- setMinAgeValue: setMinAgeValue('cold'),
- setMinAgeUnits: setMinAgeUnits('cold'),
- setDataAllocation: setDataAllocation('cold'),
- setSelectedNodeAttribute: setSelectedNodeAttribute('cold'),
+ ...createMinAgeActions('cold'),
  setReplicas: setReplicas('cold'),
  setFreeze,
  freezeExists,
  hasErrorIndicator: () => exists('phaseErrorIndicator-cold'),
- hasRolloverTipOnMinAge: hasRolloverTipOnMinAge('cold'),
  ...createIndexPriorityActions('cold'),
  ...createSearchableSnapshotActions('cold'),
+ ...createNodeAllocationActions('cold'),
  },
  delete: {
+ isShown: () => exists('delete-phaseContent'),
  ...createToggleDeletePhaseActions(),
- hasRolloverTipOnMinAge: hasRolloverTipOnMinAge('delete'),
- setMinAgeValue: setMinAgeValue('delete'),
- setMinAgeUnits: setMinAgeUnits('delete'),
+ ...createMinAgeActions('delete'),
  },
  },
  };

x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.test.ts

@@ -25,8 +25,6 @@ import {
  getDefaultHotPhasePolicy,
 } from './constants';
 
-window.scrollTo = jest.fn();
-
 describe('<EditPolicy />', () => {
  let testBed: EditPolicyTestBed;
  const { server, httpRequestsMockHelpers } = setupEnvironment();
@@ -127,7 +125,7 @@ describe('<EditPolicy />', () => {
  await actions.hot.setBestCompression(true);
  await actions.hot.toggleShrink(true);
  await actions.hot.setShrink('2');
- await actions.hot.setReadonly(true);
+ await actions.hot.toggleReadonly(true);
  await actions.hot.toggleIndexPriority(true);
  await actions.hot.setIndexPriority('123');
 
@@ -271,7 +269,7 @@ describe('<EditPolicy />', () => {
  await actions.warm.toggleForceMerge(true);
  await actions.warm.setForcemergeSegmentsCount('123');
  await actions.warm.setBestCompression(true);
- await actions.warm.setReadonly(true);
+ await actions.warm.toggleReadonly(true);
  await actions.warm.setIndexPriority('123');
  await actions.savePolicy();
  const latestRequest = server.requests[server.requests.length - 1];
@@ -918,13 +916,15 @@ describe('<EditPolicy />', () => {
  });
 
  describe('policy error notifications', () => {
+ let runTimers: () => void;
  beforeAll(() => {
  jest.useFakeTimers();
  });
 
  afterAll(() => {
  jest.useRealTimers();
  });
+
  beforeEach(async () => {
  httpRequestsMockHelpers.setLoadPolicies([getDefaultHotPhasePolicy('my_policy')]);
  httpRequestsMockHelpers.setListNodes({
@@ -940,19 +940,9 @@ describe('<EditPolicy />', () => {
 
  const { component } = testBed;
  component.update();
- });
 
- // For new we rely on a setTimeout to ensure that error messages have time to populate
- // the form object before we look at the form object. See:
- // x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/form/form_errors_context.tsx
- // for where this logic lives.
- const runTimers = () => {
- const { component } = testBed;
- act(() => {
- jest.runAllTimers();
- });
- component.update();
- };
+ ({ runTimers } = testBed);
+ });
 
  test('shows phase error indicators correctly', async () => {
  // This test simulates a user configuring a policy phase by phase. The flow is the following: