[Cases] e2e test for custom fields (elastic#168347)

## Summary Added functional test for custom fields. ## Flaky test runner: https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3414 https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3426 ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Antonio <[email protected]>
ersin-erdal · Oct 10, 2023 · 5ef9111 · 5ef9111
1 parent cafb9d0
commit 5ef9111
Show file tree

Hide file tree

Showing 15 changed files with 647 additions and 12 deletions.
diff --git a/x-pack/plugins/cases/public/components/configure_cases/index.test.tsx b/x-pack/plugins/cases/public/components/configure_cases/index.test.tsx
@@ -647,7 +647,7 @@ describe('ConfigureCases', () => {
       appMockRender.render(<ConfigureCases />);
 
       expect(
-        screen.getByTestId(`custom-field-${customFieldsMock[0].label}-${customFieldsMock[0].type}`)
+        screen.getByTestId(`custom-field-${customFieldsMock[0].key}-${customFieldsMock[0].type}`)
       ).toBeInTheDocument();
     });
 
@@ -666,7 +666,7 @@ describe('ConfigureCases', () => {
 
       for (const field of customFieldsConfigurationMock) {
         expect(
-          within(list).getByTestId(`custom-field-${field.label}-${field.type}`)
+          within(list).getByTestId(`custom-field-${field.key}-${field.type}`)
         ).toBeInTheDocument();
       }
     });

diff --git a/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.test.tsx b/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.test.tsx
@@ -40,7 +40,7 @@ describe('CustomFieldsList', () => {
     expect(screen.getByTestId('custom-fields-list')).toBeInTheDocument();
 
     for (const field of customFieldsConfigurationMock) {
-      expect(screen.getByTestId(`custom-field-${field.label}-${field.type}`)).toBeInTheDocument();
+      expect(screen.getByTestId(`custom-field-${field.key}-${field.type}`)).toBeInTheDocument();
     }
   });
 
@@ -54,7 +54,7 @@ describe('CustomFieldsList', () => {
     expect(list).toBeInTheDocument();
     expect(
       screen.getByTestId(
-        `custom-field-${customFieldsConfigurationMock[0].label}-${customFieldsConfigurationMock[0].type}`
+        `custom-field-${customFieldsConfigurationMock[0].key}-${customFieldsConfigurationMock[0].type}`
       )
     ).toBeInTheDocument();
     expect(

diff --git a/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx
@@ -59,7 +59,7 @@ const CustomFieldsListComponent: React.FC<Props> = (props) => {
             <React.Fragment key={customField.key}>
               <EuiPanel
                 paddingSize="s"
-                data-test-subj={`custom-field-${customField.label}-${customField.type}`}
+                data-test-subj={`custom-field-${customField.key}-${customField.type}`}
                 hasShadow={false}
               >
                 <EuiFlexGroup alignItems="center" gutterSize="s">

diff --git a/x-pack/plugins/cases/public/components/custom_fields/text/configure.tsx b/x-pack/plugins/cases/public/components/custom_fields/text/configure.tsx
@@ -20,6 +20,7 @@ const ConfigureComponent: CustomFieldType<CaseCustomFieldText>['Configure'] = ()
         component={CheckBoxField}
         componentProps={{
           label: i18n.FIELD_OPTIONS,
+          'data-test-subj': 'text-custom-field-options-wrapper',
           euiFieldProps: {
             label: i18n.FIELD_OPTION_REQUIRED,
             'data-test-subj': 'text-custom-field-options',

diff --git a/x-pack/test/cases_api_integration/common/lib/api/configuration.ts b/x-pack/test/cases_api_integration/common/lib/api/configuration.ts
@@ -72,6 +72,7 @@ export const createConfiguration = async (
 
   const { body: configuration } = await apiCall
     .set('kbn-xsrf', 'true')
+    .set('x-elastic-internal-origin', 'foo')
     .set(headers)
     .send(req)
     .expect(expectedHttpCode);

diff --git a/x-pack/test/functional/services/cases/api.ts b/x-pack/test/functional/services/cases/api.ts
@@ -6,14 +6,21 @@
  */
 
 import pMap from 'p-map';
-import { Case, CaseSeverity, CaseStatuses } from '@kbn/cases-plugin/common/types/domain';
+import {
+  Case,
+  CaseSeverity,
+  CaseStatuses,
+  Configuration,
+} from '@kbn/cases-plugin/common/types/domain';
 import { CasePostRequest } from '@kbn/cases-plugin/common/types/api';
 import {
   createCase as createCaseAPI,
   deleteAllCaseItems,
   createComment,
   updateCase,
   getCase,
+  createConfiguration,
+  getConfigurationRequest,
 } from '../../../cases_api_integration/common/lib/api';
 import {
   loginUsers,
@@ -136,5 +143,23 @@ export function CasesAPIServiceProvider({ getService }: FtrProviderContext) {
         latestVersion = theCase[0].version;
       }
     },
+
+    async createConfigWithCustomFields({
+      customFields,
+      owner,
+    }: {
+      customFields: Configuration['customFields'];
+      owner: string;
+    }) {
+      return createConfiguration(
+        kbnSupertest,
+        getConfigurationRequest({
+          overrides: {
+            customFields,
+            owner,
+          },
+        })
+      );
+    },
   };
 }
diff --git a/x-pack/test/functional_with_es_ssl/apps/cases/group1/create_case_form.ts b/x-pack/test/functional_with_es_ssl/apps/cases/group1/create_case_form.ts
@@ -7,7 +7,7 @@
 
 import expect from '@kbn/expect';
 import { v4 as uuidv4 } from 'uuid';
-import { CaseSeverity } from '@kbn/cases-plugin/common/types/domain';
+import { CaseSeverity, CustomFieldTypes } from '@kbn/cases-plugin/common/types/domain';
 import { FtrProviderContext } from '../../../ftr_provider_context';
 import {
   createUsersAndRoles,
@@ -126,5 +126,62 @@ export default ({ getService, getPageObject }: FtrProviderContext) => {
         await testSubjects.existOrFail('user-profile-assigned-user-cases_all_user2-remove-group');
       });
     });
+
+    describe('customFields', () => {
+      it('creates a case with custom fields', async () => {
+        const customFields = [
+          {
+            key: 'valid_key_1',
+            label: 'Summary',
+            type: CustomFieldTypes.TEXT,
+            required: true,
+          },
+          {
+            key: 'valid_key_2',
+            label: 'Sync',
+            type: CustomFieldTypes.TOGGLE,
+            required: true,
+          },
+        ];
+
+        await cases.api.createConfigWithCustomFields({ customFields, owner: 'cases' });
+
+        const caseTitle = 'test-' + uuidv4();
+        await cases.create.openCreateCasePage();
+
+        // verify custom fields on create case page
+        await testSubjects.existOrFail('create-case-custom-fields');
+
+        await cases.create.setTitle(caseTitle);
+        await cases.create.setDescription('this is a test description');
+
+        // set custom field values
+        const textCustomField = await testSubjects.find(
+          `${customFields[0].key}-text-create-custom-field`
+        );
+        await textCustomField.type('This is a sample text!');
+
+        const toggleCustomField = await testSubjects.find(
+          `${customFields[1].key}-toggle-create-custom-field`
+        );
+        await toggleCustomField.click();
+
+        await cases.create.submitCase();
+
+        await header.waitUntilLoadingHasFinished();
+
+        await testSubjects.existOrFail('case-view-title');
+
+        // validate custom fields
+        const summary = await testSubjects.find(`case-text-custom-field-${customFields[0].key}`);
+
+        expect(await summary.getVisibleText()).equal('This is a sample text!');
+
+        const sync = await testSubjects.find(
+          `case-toggle-custom-field-form-field-${customFields[1].key}`
+        );
+        expect(await sync.getAttribute('aria-checked')).equal('true');
+      });
+    });
   });
 };
diff --git a/x-pack/test/functional_with_es_ssl/apps/cases/group1/view_case.ts b/x-pack/test/functional_with_es_ssl/apps/cases/group1/view_case.ts
@@ -7,7 +7,12 @@
 
 import expect from '@kbn/expect';
 import { v4 as uuidv4 } from 'uuid';
-import { AttachmentType, CaseSeverity, CaseStatuses } from '@kbn/cases-plugin/common/types/domain';
+import {
+  AttachmentType,
+  CaseSeverity,
+  CaseStatuses,
+  CustomFieldTypes,
+} from '@kbn/cases-plugin/common/types/domain';
 import { setTimeout as setTimeoutAsync } from 'timers/promises';
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
@@ -1148,6 +1153,96 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
         expect(testUserText).to.be('test user');
       });
     });
+
+    describe('customFields', () => {
+      const customFields = [
+        {
+          key: 'valid_key_1',
+          label: 'Summary',
+          type: CustomFieldTypes.TEXT,
+          required: true,
+        },
+        {
+          key: 'valid_key_2',
+          label: 'Sync',
+          type: CustomFieldTypes.TOGGLE,
+          required: true,
+        },
+      ];
+
+      before(async () => {
+        await cases.navigation.navigateToApp();
+        await cases.api.createConfigWithCustomFields({ customFields, owner: 'cases' });
+        await cases.api.createCase({
+          customFields: [
+            {
+              key: 'valid_key_1',
+              type: CustomFieldTypes.TEXT,
+              value: ['this is a text field value'],
+            },
+            {
+              key: 'valid_key_2',
+              type: CustomFieldTypes.TOGGLE,
+              value: true,
+            },
+          ],
+        });
+        await cases.casesTable.waitForCasesToBeListed();
+        await cases.casesTable.goToFirstListedCase();
+        await header.waitUntilLoadingHasFinished();
+      });
+
+      afterEach(async () => {
+        await cases.api.deleteAllCases();
+      });
+
+      it('updates a custom field correctly', async () => {
+        const summary = await testSubjects.find(`case-text-custom-field-${customFields[0].key}`);
+        expect(await summary.getVisibleText()).equal('this is a text field value');
+
+        const sync = await testSubjects.find(
+          `case-toggle-custom-field-form-field-${customFields[1].key}`
+        );
+        expect(await sync.getAttribute('aria-checked')).equal('true');
+
+        await testSubjects.click(`case-text-custom-field-edit-button-${customFields[0].key}`);
+
+        await retry.waitFor('custom field edit form to exist', async () => {
+          return await testSubjects.exists(
+            `case-text-custom-field-form-field-${customFields[0].key}`
+          );
+        });
+
+        const inputField = await testSubjects.find(
+          `case-text-custom-field-form-field-${customFields[0].key}`
+        );
+
+        await inputField.type(' edited!!');
+
+        await testSubjects.click(`case-text-custom-field-submit-button-${customFields[0].key}`);
+
+        await retry.waitFor('update toast exist', async () => {
+          return await testSubjects.exists('toastCloseButton');
+        });
+
+        await testSubjects.click('toastCloseButton');
+
+        await sync.click();
+
+        await header.waitUntilLoadingHasFinished();
+
+        expect(await summary.getVisibleText()).equal('this is a text field value edited!!');
+
+        expect(await sync.getAttribute('aria-checked')).equal('false');
+
+        // validate user action
+        const userActions = await find.allByCssSelector(
+          '[data-test-subj*="customFields-update-action"]'
+        );
+
+        expect(userActions).length(2);
+      });
+    });
   });
 };
 

diff --git a/x-pack/test/functional_with_es_ssl/apps/cases/group2/configure.ts b/x-pack/test/functional_with_es_ssl/apps/cases/group2/configure.ts
@@ -14,6 +14,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
   const cases = getService('cases');
   const toasts = getService('toasts');
   const header = getPageObject('header');
+  const find = getService('find');
 
   describe('Configure', function () {
     before(async () => {
@@ -28,6 +29,7 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
       this.beforeEach(async () => {
         await header.waitUntilLoadingHasFinished();
       });
+
       it('defaults the closure option correctly', async () => {
         await cases.common.assertRadioGroupValue('closure-options-radio-group', 'close-by-user');
       });
@@ -53,5 +55,54 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
         expect(await testSubjects.exists('euiFlyoutCloseButton')).to.be(false);
       });
     });
+
+    describe('Custom fields', function () {
+      it('adds a custom field', async () => {
+        await testSubjects.existOrFail('custom-fields-form-group');
+        await common.clickAndValidate('add-custom-field', 'custom-field-flyout');
+
+        await testSubjects.setValue('custom-field-label-input', 'Summary');
+
+        await testSubjects.setCheckbox('text-custom-field-options-wrapper', 'check');
+
+        await testSubjects.click('custom-field-flyout-save');
+        expect(await testSubjects.exists('euiFlyoutCloseButton')).to.be(false);
+
+        await testSubjects.existOrFail('custom-fields-list');
+
+        expect(await testSubjects.getVisibleText('custom-fields-list')).to.be('Summary\nText');
+      });
+
+      it('edits a custom field', async () => {
+        await testSubjects.existOrFail('custom-fields-form-group');
+        const textField = await find.byCssSelector('[data-test-subj*="-custom-field-edit"]');
+
+        await textField.click();
+
+        const input = await testSubjects.find('custom-field-label-input');
+
+        await input.type('!!!');
+
+        await testSubjects.click('custom-field-flyout-save');
+        expect(await testSubjects.exists('euiFlyoutCloseButton')).to.be(false);
+
+        await testSubjects.existOrFail('custom-fields-list');
+
+        expect(await testSubjects.getVisibleText('custom-fields-list')).to.be('Summary!!!\nText');
+      });
+
+      it('deletes a custom field', async () => {
+        await testSubjects.existOrFail('custom-fields-form-group');
+        const deleteButton = await find.byCssSelector('[data-test-subj*="-custom-field-delete"]');
+
+        await deleteButton.click();
+
+        await testSubjects.existOrFail('confirm-delete-custom-field-modal');
+
+        await testSubjects.click('confirmModalConfirmButton');
+
+        await testSubjects.missingOrFail('custom-fields-list');
+      });
+    });
   });
 };