Add component templates tests

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx

@@ -68,11 +68,15 @@ describe('<TemplateCreate />', () => {
 
   beforeAll(() => {
     jest.useFakeTimers();
+
+    // disable all react-beautiful-dnd development warnings
+    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true;
   });
 
   afterAll(() => {
     server.restore();
     jest.useRealTimers();
+    (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false;
   });
 
   describe('on component mount', () => {
@@ -107,16 +111,16 @@ describe('<TemplateCreate />', () => {
     const componentTemplate1 = {
       name: 'test_component_template_1',
       hasMappings: true,
-      hasAliases: true,
-      hasSettings: true,
+      hasAliases: false,
+      hasSettings: false,
       usedBy: [],
       isManaged: false,
     };
 
     const componentTemplate2 = {
       name: 'test_component_template_2',
-      hasMappings: true,
-      hasAliases: true,
+      hasMappings: false,
+      hasAliases: false,
       hasSettings: true,
       usedBy: ['test_index_template_1'],
       isManaged: false,
@@ -146,7 +150,102 @@ describe('<TemplateCreate />', () => {
         expect(find('stepTitle').text()).toEqual('Component templates (optional)');
       });
 
-      // TODO add tests for component templates selector
+      it('should list the available component templates', () => {
+        const {
+          actions: {
+            componentTemplates: { getComponentTemplatesInList },
+          },
+        } = testBed;
+        const componentsFound = getComponentTemplatesInList();
+        expect(componentsFound).toEqual(componentTemplates.map((c) => c.name));
+      });
+
+      it('should allow to search for a component', async () => {
+        const {
+          component,
+          form: { setInputValue },
+          actions: {
+            componentTemplates: { getComponentTemplatesInList },
+          },
+        } = testBed;
+
+        await act(async () => {
+          setInputValue('componentTemplateSearchBox', 'template_2');
+        });
+        component.update();
+
+        const componentsFound = getComponentTemplatesInList();
+        expect(componentsFound).toEqual(['test_component_template_2']);
+      });
+
+      it('should allow to filter component by Index settings, mappings and aliases', async () => {
+        const {
+          find,
+          exists,
+          actions: {
+            componentTemplates: { showFilters, selectFilter, getComponentTemplatesInList },
+          },
+        } = testBed;
+
+        showFilters();
+
+        expect(find('filterList.filterItem').map((wrapper) => wrapper.text())).toEqual([
+          'Index settings',
+          'Mappings',
+          'Aliases',
+        ]);
+
+        await selectFilter('settings');
+        expect(getComponentTemplatesInList()).toEqual(['test_component_template_2']); // only this one has settings
+
+        await selectFilter('mappings');
+        expect(exists('componentTemplatesList')).toBe(false); // no component has **both** settings and mappings
+        expect(exists('componentTemplates.emptySearchResult')).toBe(true);
+        expect(find('componentTemplates.emptySearchResult').text()).toContain(
+          'No components match your search'
+        );
+
+        await selectFilter('settings'); // unselect settings
+        expect(getComponentTemplatesInList()).toEqual(['test_component_template_1']); // only this one has mappings
+
+        await selectFilter('mappings'); // unselect mappings (back to start)
+        expect(getComponentTemplatesInList()).toEqual([
+          'test_component_template_1',
+          'test_component_template_2',
+        ]);
+
+        await selectFilter('aliases');
+        expect(exists('componentTemplatesList')).toBe(false); // no component has aliases defined.
+      });
+
+      it('should allow to select and unselect a component template', async () => {
+        const {
+          find,
+          exists,
+          actions: {
+            componentTemplates: {
+              selectComponentAt,
+              unSelectComponentAt,
+              getComponentTemplatesSelected,
+            },
+          },
+        } = testBed;
+
+        // Start with empty selection
+        expect(exists('componentTemplatesSelection.emptyPrompt')).toBe(true);
+        expect(find('componentTemplatesSelection.emptyPrompt').text()).toContain(
+          'Add component template building blocks to this template.'
+        );
+
+        // Select first component in the list
+        await selectComponentAt(0);
+        expect(exists('componentTemplatesSelection.emptyPrompt')).toBe(false);
+        expect(getComponentTemplatesSelected()).toEqual(['test_component_template_1']);
+
+        // Unselect the component
+        await unSelectComponentAt(0);
+        expect(exists('componentTemplatesSelection.emptyPrompt')).toBe(true);
+      });
     });
 
     // describe('index settings (step 3)', () => {

x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_form.helpers.ts

@@ -168,6 +168,50 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
     component.update();
   };
 
+  const componentTemplates = {
+    getComponentTemplatesInList() {
+      const { find } = testBed;
+      return find('componentTemplatesList.item.name').map((wrapper) => wrapper.text());
+    },
+    getComponentTemplatesSelected() {
+      const { find } = testBed;
+      return find('componentTemplatesSelection.item.name').map((wrapper) => wrapper.text());
+    },
+    showFilters() {
+      const { find, component } = testBed;
+      act(() => {
+        find('componentTemplates.filterButton').simulate('click');
+      });
+      component.update();
+    },
+    async selectFilter(filter: 'settings' | 'mappings' | 'aliases') {
+      const { find, component } = testBed;
+      const filters = ['settings', 'mappings', 'aliases'];
+      const index = filters.indexOf(filter);
+
+      await act(async () => {
+        find('filterList.filterItem').at(index).simulate('click');
+      });
+      component.update();
+    },
+    async selectComponentAt(index: number) {
+      const { find, component } = testBed;
+
+      await act(async () => {
+        find('componentTemplatesList.item.action-plusInCircle').at(index).simulate('click');
+      });
+      component.update();
+    },
+    async unSelectComponentAt(index: number) {
+      const { find, component } = testBed;
+
+      await act(async () => {
+        find('componentTemplatesSelection.item.action-minusInCircle').at(index).simulate('click');
+      });
+      component.update();
+    },
+  };
+
   return {
     ...testBed,
     actions: {
@@ -184,6 +228,7 @@ export const formSetup = async (initTestBed: SetupFunc<TestSubjects>) => {
       completeStepFour,
       selectSummaryTab,
       addMappingField,
+      componentTemplates,
     },
   };
 };
@@ -194,6 +239,17 @@ export type TestSubjects =
   | 'backButton'
   | 'codeEditorContainer'
   | 'confirmModalConfirmButton'
+  | 'componentTemplates.filterButton'
+  | 'componentTemplates.emptySearchResult'
+  | 'filterList.filterItem'
+  | 'componentTemplatesList'
+  | 'componentTemplatesList.item.name'
+  | 'componentTemplatesList.item.action-plusInCircle'
+  | 'componentTemplatesSelection'
+  | 'componentTemplatesSelection.item.name'
+  | 'componentTemplatesSelection.item.action-minusInCircle'
+  | 'componentTemplatesSelection.emptyPrompt'
+  | 'componentTemplateSearchBox'
   | 'createFieldForm.addPropertyButton'
   | 'createFieldForm.addButton'
   | 'createFieldForm.addFieldButton'

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx

@@ -145,12 +145,13 @@ export const ComponentTemplates = ({ isLoading, components, listItemProps }: Pro
             />
           </EuiButton>
         }
+        data-test-subj="emptySearchResult"
       />
     );
   };
 
   return (
-    <div className="componentTemplates">
+    <div className="componentTemplates" data-test-subj="componentTemplates">
       <div className="componentTemplates__header">
         <EuiFlexGroup gutterSize="none">
           <EuiFlexItem>
@@ -162,6 +163,7 @@ export const ComponentTemplates = ({ isLoading, components, listItemProps }: Pro
               }}
               aria-label={i18nTexts.searchBoxPlaceholder}
               className="componentTemplates__searchBox"
+              data-test-subj="componentTemplateSearchBox"
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx

@@ -19,10 +19,10 @@ interface Props {
 
 export const ComponentTemplatesList = ({ components, listItemProps }: Props) => {
   return (
-    <>
+    <div data-test-subj="componentTemplatesList">
       {components.map((component) => (
         <ComponentTemplatesListItem key={component.name} component={component} {...listItemProps} />
       ))}
-    </>
+    </div>
   );
 };

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx

@@ -48,6 +48,7 @@ export const ComponentTemplatesListItem = ({
       className={classNames('componentTemplatesListItem', {
         'componentTemplatesListItem--selected': isSelectedValue,
       })}
+      data-test-subj="item"
     >
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
@@ -59,7 +60,7 @@ export const ComponentTemplatesListItem = ({
                 </div>
               </EuiFlexItem>
             )}
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem grow={false} data-test-subj="name">
               {/* <EuiText>{component.name}</EuiText> */}
               <EuiLink onClick={() => onViewDetail(component)}>{component.name}</EuiLink>
             </EuiFlexItem>
@@ -83,7 +84,7 @@ export const ComponentTemplatesListItem = ({
                     <EuiButtonIcon
                       iconType={action.icon}
                       onClick={() => action.handler(component)}
-                      data-test-subj="addPropertyButton"
+                      data-test-subj={`action-${action.icon}`}
                       aria-label={action.label}
                     />
                   </EuiToolTip>

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx

@@ -160,6 +160,7 @@ export const ComponentTemplatesSelector = ({
           // eslint-disable-next-line @typescript-eslint/naming-convention
           'componentTemplatesSelector__selection--is-empty': !hasSelection,
         })}
+        data-test-subj="componentTemplatesSelection"
       >
         {hasSelection ? (
           <>
@@ -200,7 +201,7 @@ export const ComponentTemplatesSelector = ({
             </div>
           </>
         ) : (
-          <EuiText textAlign="center">
+          <EuiText textAlign="center" data-test-subj="emptyPrompt">
             <p>
               <FormattedMessage
                 id="xpack.idxMgmt.componentTemplatesSelector.noComponentSelectedLabel-1"

x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx

@@ -56,7 +56,7 @@ export function FilterListButton({ onChange, filters }: Props) {
       numFilters={Object.keys(filters).length}
       hasActiveFilters={activeFilters.length > 0}
       numActiveFilters={activeFilters.length}
-      data-test-subj="viewButton"
+      data-test-subj="filterButton"
     >
       <FormattedMessage
         id="xpack.idxMgmt.indexTemplatesList.filterButtonLabel"