add tests

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.helpers.tsx

@@ -174,6 +174,41 @@ const createActions = (testBed: TestBed<TestSubject>) => {
  });
  },
 
+ clickDocumentsDropdown() {
+ act(() => {
+ find('documentsDropdown.documentsButton').simulate('click');
+ });
+ component.update();
+ },
+
+ clickEditDocumentsButton() {
+ act(() => {
+ find('editDocumentsButton').simulate('click');
+ });
+ component.update();
+ },
+
+ clickResetButton() {
+ act(() => {
+ find('resetButton').simulate('click');
+ });
+ component.update();
+ },
+
+ async clickConfirmResetButton() {
+ const modal = document.body.querySelector(
+ '[data-test-subj="resetDocumentsConfirmationModal"]'
+ );
+ const confirmButton: HTMLButtonElement | null = modal!.querySelector(
+ '[data-test-subj="confirmModalConfirmButton"]'
+ );
+
+ await act(async () => {
+ confirmButton!.click();
+ });
+ component.update();
+ },
+
  async clickProcessor(processorSelector: string) {
  await act(async () => {
  find(`${processorSelector}.manageItemButton`).simulate('click');
@@ -211,6 +246,7 @@ type TestSubject =
  | 'addDocumentsButton'
  | 'testPipelineFlyout'
  | 'documentsDropdown'
+ | 'documentsDropdown.documentsButton'
  | 'outputTab'
  | 'documentsEditor'
  | 'runPipelineButton'
@@ -229,4 +265,6 @@ type TestSubject =
  | 'configurationTab'
  | 'outputTab'
  | 'processorOutputTabContent'
+ | 'editDocumentsButton'
+ | 'resetButton'
  | string;

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/__jest__/test_pipeline.test.tsx

@@ -22,6 +22,27 @@ describe('Test pipeline', () => {
 
  const { server, httpRequestsMockHelpers } = setupEnvironment();
 
+ // This is a hack
+ // We need to provide the processor id in the mocked output;
+ // this is generated dynamically
+ // As a workaround, the value is added as a data attribute in the UI
+ // and we retrieve it to generate the mocked output.
+ const addProcessorTagtoMockOutput = (output: VerboseTestOutput) => {
+ const { find } = testBed;
+
+ const docs = output.docs.map((doc) => {
+ const results = doc.processor_results.map((result, index) => {
+ const tag = find(`processors>${index}`).props()['data-processor-id'];
+ return {
+ ...result,
+ tag,
+ };
+ });
+ return { processor_results: results };
+ });
+ return { docs };
+ };
+
  beforeAll(() => {
  jest.useFakeTimers();
  });
@@ -160,30 +181,76 @@ describe('Test pipeline', () => {
  expect(exists('pipelineExecutionError')).toBe(true);
  expect(find('pipelineExecutionError').text()).toContain(error.message);
  });
- });
 
- describe('Processors', () => {
- // This is a hack
- // We need to provide the processor id in the mocked output;
- // this is generated dynamically and not something we can stub.
- // As a workaround, the value is added as a data attribute in the UI
- // and we retrieve it to generate the mocked output.
- const addProcessorTagtoMockOutput = (output: VerboseTestOutput) => {
- const { find } = testBed;
+ describe('Documents dropdown', () => {
+ beforeEach(async () => {
+ const { actions } = testBed;
 
- const docs = output.docs.map((doc) => {
- const results = doc.processor_results.map((result, index) => {
- const tag = find(`processors>${index}`).props()['data-processor-id'];
- return {
- ...result,
- tag,
- };
- });
- return { processor_results: results };
+ httpRequestsMockHelpers.setSimulatePipelineResponse(
+ addProcessorTagtoMockOutput(SIMULATE_RESPONSE)
+ );
+
+ // Open flyout
+ actions.clickAddDocumentsButton();
+ // Add sample documents and click run
+ actions.addDocumentsJson(JSON.stringify(DOCUMENTS));
+ await actions.clickRunPipelineButton();
+ // Close flyout
+ actions.closeTestPipelineFlyout();
+ });
+
+ it('should open flyout to edit documents', () => {
+ const { exists, actions } = testBed;
+
+ // Dropdown should be visible
+ expect(exists('documentsDropdown')).toBe(true);
+
+ // Open dropdown and edit documents
+ actions.clickDocumentsDropdown();
+ actions.clickEditDocumentsButton();
+
+ // Flyout should be visible with "Documents" tab enabled
+ expect(exists('testPipelineFlyout')).toBe(true);
+ expect(exists('documentsTabContent')).toBe(true);
+ });
+
+ it('should reset documents and stop pipeline simulation', async () => {
+ const { exists, actions, find } = testBed;
+
+ // Dropdown should be visible and processor status should equal "success"
+ expect(exists('documentsDropdown')).toBe(true);
+ const initialProcessorStatusLabel = find('processors>0.processorStatusIcon').props()[
+ 'aria-label'
+ ];
+ expect(initialProcessorStatusLabel).toEqual('Success');
+
+ // Open dropdown and click "reset" button
+ actions.clickDocumentsDropdown();
+ actions.clickResetButton();
+
+ // Verify modal
+ const modal = document.body.querySelector(
+ '[data-test-subj="resetDocumentsConfirmationModal"]'
+ );
+
+ expect(modal).not.toBe(null);
+ expect(modal!.textContent).toContain('Reset');
+
+ // Confirm reset and close modal
+ await actions.clickConfirmResetButton();
+
+ // Verify documents and processors were reset
+ expect(exists('documentsDropdown')).toBe(false);
+ expect(exists('addDocumentsButton')).toBe(true);
+ const resetProcessorStatusIconLabel = find('processors>0.processorStatusIcon').props()[
+ 'aria-label'
+ ];
+ expect(resetProcessorStatusIconLabel).toEqual('Not run');
  });
-  return { docs };
-  };
+ });
+ });
 
+ describe('Processors', () => {
  it('should show "inactive" processor status by default', async () => {
  const { find } = testBed;
 

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/test_pipeline/documents_dropdown/documents_dropdown.tsx

@@ -33,9 +33,9 @@ const i18nTexts = {
  }
  ),
  addDocumentsButtonLabel: i18n.translate(
- 'xpack.ingestPipelines.pipelineEditor.testPipeline.documentsDropdown.addDocumentsButtonLabel',
+ 'xpack.ingestPipelines.pipelineEditor.testPipeline.documentsDropdown.editDocumentsButtonLabel',
  {
- defaultMessage: 'Add documents',
+ defaultMessage: 'Edit documents',
  }
  ),
  resetButtonLabel: i18n.translate(
@@ -100,8 +100,10 @@ export const DocumentsDropdown: FunctionComponent<Props> = ({
  >
  <EuiSelectable
  singleSelection
+ data-test-subj="documentList"
  options={documents.map((doc, index) => ({
  key: index.toString(),
+ 'data-test-subj': 'documentListItem',
  checked: selectedDocumentIndex === index ? 'on' : undefined,
  label: i18n.translate(
  'xpack.ingestPipelines.pipelineEditor.testPipeline.documentLabel',
@@ -123,10 +125,10 @@ export const DocumentsDropdown: FunctionComponent<Props> = ({
  }}
  >
  {(list) => (
- <div>
+ <>
  <EuiPopoverTitle>{i18nTexts.popoverTitle}</EuiPopoverTitle>
  {list}
- </div>
+ </>
  )}
  </EuiSelectable>
 
@@ -142,7 +144,7 @@ export const DocumentsDropdown: FunctionComponent<Props> = ({
  openFlyout('documents');
  setShowPopover(false);
  }}
- data-test-subj="addDocumentsButton"
+ data-test-subj="editDocumentsButton"
  >
  {i18nTexts.addDocumentsButtonLabel}
  </EuiButton>