Skip to content

Commit

Permalink
[Ingest pipelines] Clean up component integration tests (#78838)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonelizabeth
alisonelizabeth committed Oct 5, 2020
1 parent 59e4e06 commit 18a67b6
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 210 deletions.
32 changes: 18 additions & 14 deletions x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,42 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { act } from 'react-dom/test-utils';

import { TestBed } from '../../../../../test_utils';

export const getFormActions = (testBed: TestBed) => {
const { find, form } = testBed;
const { find, form, component } = testBed;

// User actions
const clickSubmitButton = () => {
find('submitButton').simulate('click');
};
const clickSubmitButton = async () => {
await act(async () => {
find('submitButton').simulate('click');
});

const clickAddDocumentsButton = () => {
find('addDocumentsButton').simulate('click');
component.update();
};

const clickShowRequestLink = () => {
find('showRequestLink').simulate('click');
const clickShowRequestLink = async () => {
await act(async () => {
find('showRequestLink').simulate('click');
});

component.update();
};

const toggleVersionSwitch = () => {
form.toggleEuiSwitch('versionToggle');
};
act(() => {
form.toggleEuiSwitch('versionToggle');
});

const toggleOnFailureSwitch = () => {
form.toggleEuiSwitch('onFailureToggle');
component.update();
};

return {
clickSubmitButton,
clickShowRequestLink,
toggleVersionSwitch,
toggleOnFailureSwitch,
clickAddDocumentsButton,
};
};

Expand Down
30 changes: 20 additions & 10 deletions ...ck/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipelines_list.helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
TestBed,
TestBedConfig,
findTestSubject,
nextTick,
} from '../../../../../test_utils';
import { PipelinesList } from '../../../public/application/sections/pipelines_list';
import { WithAppDependencies } from './setup_environment';
Expand All @@ -32,13 +31,17 @@ export type PipelineListTestBed = TestBed<PipelineListTestSubjects> & {
};

const createActions = (testBed: TestBed) => {
const { find } = testBed;

/**
* User Actions
*/
const clickReloadButton = () => {
find('reloadButton').simulate('click');
const clickReloadButton = async () => {
const { component, find } = testBed;

await act(async () => {
find('reloadButton').simulate('click');
});

component.update();
};

const clickPipelineAt = async (index: number) => {
Expand All @@ -49,16 +52,19 @@ const createActions = (testBed: TestBed) => {
await act(async () => {
const { href } = pipelineLink.props();
router.navigateTo(href!);
await nextTick();
component.update();
});
component.update();
};

const clickActionMenu = (pipelineName: string) => {
const { component } = testBed;

// When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
act(() => {
// When a table has > 2 actions, EUI displays an overflow menu with an id "<pipeline_name>-actions"
component.find(`div[id="${pipelineName}-actions"] button`).simulate('click');
});

component.update();
};

const clickPipelineAction = (pipelineName: string, action: 'edit' | 'clone' | 'delete') => {
Expand All @@ -67,7 +73,11 @@ const createActions = (testBed: TestBed) => {

clickActionMenu(pipelineName);

component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
act(() => {
component.find('.euiContextMenuItem').at(actions.indexOf(action)).simulate('click');
});

component.update();
};

return {
Expand Down
15 changes: 6 additions & 9 deletions x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/setup_environment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import axios from 'axios';
import axiosXhrAdapter from 'axios/lib/adapters/xhr';
import { LocationDescriptorObject } from 'history';
import { HttpSetup } from 'kibana/public';

import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
import {
notificationServiceMock,
fatalErrorsServiceMock,
docLinksServiceMock,
injectedMetadataServiceMock,
scopedHistoryMock,
} from '../../../../../../src/core/public/mocks';

import { usageCollectionPluginMock } from '../../../../../../src/plugins/usage_collection/public/mocks';

import { HttpService } from '../../../../../../src/core/public/http';

import {
breadcrumbService,
documentationService,
Expand All @@ -27,10 +27,7 @@ import {

import { init as initHttpRequests } from './http_requests';

const httpServiceSetupMock = new HttpService().setup({
injectedMetadata: injectedMetadataServiceMock.createSetupContract(),
fatalErrors: fatalErrorsServiceMock.createSetupContract(),
});
const mockHttpClient = axios.create({ adapter: axiosXhrAdapter });

const history = scopedHistoryMock.create();
history.createHref.mockImplementation((location: LocationDescriptorObject) => {
Expand All @@ -53,7 +50,7 @@ const appServices = {

export const setupEnvironment = () => {
uiMetricService.setup(usageCollectionPluginMock.createSetupContract());
apiService.setup(httpServiceSetupMock, uiMetricService);
apiService.setup((mockHttpClient as unknown) as HttpSetup, uiMetricService);
documentationService.setup(docLinksServiceMock.createStartContract());
breadcrumbService.setup(() => {});

Expand Down
19 changes: 8 additions & 11 deletions x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ jest.mock('@elastic/eui', () => {
};
});

// FLAKY: https://github.com/elastic/kibana/issues/66856
describe.skip('<PipelinesClone />', () => {
describe('<PipelinesClone />', () => {
let testBed: PipelinesCloneTestBed;

const { server, httpRequestsMockHelpers } = setupEnvironment();
Expand All @@ -38,13 +37,14 @@ describe.skip('<PipelinesClone />', () => {
server.restore();
});

beforeEach(async () => {
httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);
httpRequestsMockHelpers.setLoadPipelineResponse(PIPELINE_TO_CLONE);

beforeEach(async () => {
await act(async () => {
testBed = await setup();
await testBed.waitFor('pipelineForm');
});

testBed.component.update();
});

test('should render the correct page header', () => {
Expand All @@ -61,12 +61,9 @@ describe.skip('<PipelinesClone />', () => {

describe('form submission', () => {
it('should send the correct payload', async () => {
const { actions, waitFor } = testBed;
const { actions } = testBed;

await act(async () => {
actions.clickSubmitButton();
await waitFor('pipelineForm', 0);
});
await actions.clickSubmitButton();

const latestRequest = server.requests[server.requests.length - 1];

Expand All @@ -75,7 +72,7 @@ describe.skip('<PipelinesClone />', () => {
name: `${PIPELINE_TO_CLONE.name}-copy`,
};

expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
});
});
});
82 changes: 37 additions & 45 deletions x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import React from 'react';
import { act } from 'react-dom/test-utils';

import { setupEnvironment, pageHelpers, nextTick } from './helpers';
import { setupEnvironment, pageHelpers } from './helpers';
import { PipelinesCreateTestBed } from './helpers/pipelines_create.helpers';

import { nestedProcessorsErrorFixture } from './fixtures';
Expand Down Expand Up @@ -43,8 +43,9 @@ describe('<PipelinesCreate />', () => {
beforeEach(async () => {
await act(async () => {
testBed = await setup();
await testBed.waitFor('pipelineForm');
});

testBed.component.update();
});

test('should render the correct page header', () => {
Expand All @@ -60,28 +61,20 @@ describe('<PipelinesCreate />', () => {
});

test('should toggle the version field', async () => {
const { actions, component, exists } = testBed;
const { actions, exists } = testBed;

// Version field should be hidden by default
expect(exists('versionField')).toBe(false);

await act(async () => {
actions.toggleVersionSwitch();
await nextTick();
component.update();
});
actions.toggleVersionSwitch();

expect(exists('versionField')).toBe(true);
});

test('should show the request flyout', async () => {
const { actions, component, find, exists } = testBed;
const { actions, find, exists } = testBed;

await act(async () => {
actions.clickShowRequestLink();
await nextTick();
component.update();
});
await actions.clickShowRequestLink();

// Verify request flyout opens
expect(exists('requestFlyout')).toBe(true);
Expand All @@ -92,23 +85,18 @@ describe('<PipelinesCreate />', () => {
test('should prevent form submission if required fields are missing', async () => {
const { form, actions, component, find } = testBed;

await act(async () => {
actions.clickSubmitButton();
await nextTick();
component.update();
});
await actions.clickSubmitButton();

expect(form.getErrorsMessages()).toEqual(['Name is required.']);
expect(find('submitButton').props().disabled).toEqual(true);

// Add required fields and verify button is enabled again
form.setInputValue('nameField.input', 'my_pipeline');

await act(async () => {
await nextTick();
component.update();
// Add required fields and verify button is enabled again
form.setInputValue('nameField.input', 'my_pipeline');
});

component.update();

expect(find('submitButton').props().disabled).toEqual(false);
});
});
Expand All @@ -117,23 +105,27 @@ describe('<PipelinesCreate />', () => {
beforeEach(async () => {
await act(async () => {
testBed = await setup();
});

const { waitFor, form } = testBed;
testBed.component.update();

await act(async () => {
testBed.form.setInputValue('nameField.input', 'my_pipeline');
});

await waitFor('pipelineForm');
testBed.component.update();

form.setInputValue('nameField.input', 'my_pipeline');
form.setInputValue('descriptionField.input', 'pipeline description');
await act(async () => {
testBed.form.setInputValue('descriptionField.input', 'pipeline description');
});

testBed.component.update();
});

test('should send the correct payload', async () => {
const { actions, waitFor } = testBed;
const { actions } = testBed;

await act(async () => {
actions.clickSubmitButton();
await waitFor('pipelineForm', 0);
});
await actions.clickSubmitButton();

const latestRequest = server.requests[server.requests.length - 1];

Expand All @@ -143,11 +135,11 @@ describe('<PipelinesCreate />', () => {
processors: [],
};

expect(JSON.parse(latestRequest.requestBody)).toEqual(expected);
expect(JSON.parse(JSON.parse(latestRequest.requestBody).body)).toEqual(expected);
});

test('should surface API errors from the request', async () => {
const { actions, find, exists, waitFor } = testBed;
const { actions, find, exists } = testBed;

const error = {
status: 409,
Expand All @@ -157,29 +149,29 @@ describe('<PipelinesCreate />', () => {

httpRequestsMockHelpers.setCreatePipelineResponse(undefined, { body: error });

await act(async () => {
actions.clickSubmitButton();
await waitFor('savePipelineError');
});
await actions.clickSubmitButton();

expect(exists('savePipelineError')).toBe(true);
expect(find('savePipelineError').text()).toContain(error.message);
});

test('displays nested pipeline errors as a flat list', async () => {
const { actions, find, exists, waitFor } = testBed;
const { actions, find, exists, component } = testBed;
httpRequestsMockHelpers.setCreatePipelineResponse(undefined, {
body: nestedProcessorsErrorFixture,
});

await act(async () => {
actions.clickSubmitButton();
await waitFor('savePipelineError');
});
await actions.clickSubmitButton();

expect(exists('savePipelineError')).toBe(true);
expect(exists('savePipelineError.showErrorsButton')).toBe(true);
find('savePipelineError.showErrorsButton').simulate('click');

await act(async () => {
find('savePipelineError.showErrorsButton').simulate('click');
});

component.update();

expect(exists('savePipelineError.hideErrorsButton')).toBe(true);
expect(exists('savePipelineError.showErrorsButton')).toBe(false);
expect(find('savePipelineError').find('li').length).toBe(8);
Expand Down
Loading

0 comments on commit 18a67b6

Please sign in to comment.