Unit test/config controls

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap

@@ -15091,12 +15091,14 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         className="euiAccordion__padding--s"
                                       >
                                         <EuiButton
+                                          data-test-subj="config-color-theme-accordion"
                                           fullWidth={true}
                                           onClick={[Function]}
                                           size="s"
                                         >
                                           <EuiButtonDisplay
                                             baseClassName="euiButton"
+                                            data-test-subj="config-color-theme-accordion"
                                             disabled={false}
                                             element="button"
                                             fullWidth={true}
@@ -15107,6 +15109,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           >
                                             <button
                                               className="euiButton euiButton--primary euiButton--small euiButton--fullWidth"
+                                              data-test-subj="config-color-theme-accordion"
                                               disabled={false}
                                               onClick={[Function]}
                                               style={

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_availibility.test.tsx

@@ -0,0 +1,73 @@
+import { waitFor } from '@testing-library/react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { TEST_CONFIG_AVAILABILITY } from '../../../../../../../test/event_analytics_constants';
+import { ConfigAvailability } from '../config_panes/config_controls';
+
+describe('ConfigAvailability component', () => {
+  configure({ adapter: new Adapter() });
+  const vizStates = [
+    {
+      thid: 'AA12BB44',
+      name: 'testNameA',
+      color: '#FFFFFF',
+      value: 4,
+      expression: '≥',
+    },
+    {
+      thid: 'AA13BB45',
+      name: 'testNameB',
+      color: '#000000',
+      value: 3,
+      expression: '≥',
+    },
+  ];
+  const onConfigChange = (configs: any) => {
+    // console.log('configs', configs);
+  };
+  const wrapper = mount(
+    <ConfigAvailability
+      visualizations={TEST_CONFIG_AVAILABILITY}
+      onConfigChange={onConfigChange}
+      vizState={{ level: vizStates }}
+    />
+  );
+
+  it('Renders configAvailability component with visualization and viztypes data', async () => {
+    wrapper.update();
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders configAvailability component to simulate accordion button', async () => {
+    wrapper.find('button[data-test-subj="config-availibility-accordion"]').simulate('click');
+  });
+
+  it('Renders configAvailability component to simulate color picker', async () => {
+    wrapper
+      .find('input[data-test-subj="euiColorPickerAnchor config-availibility-colorpicker-AA12BB44"]')
+      .simulate('click');
+  });
+
+  it('Renders configAvailability component to simulate field text', async () => {
+    wrapper
+      .find('input[data-test-subj="config-availibility-fieldtext-AA12BB44"]')
+      .simulate('click');
+  });
+
+  it('Renders configAvailability component to simulate select availability dropdown', async () => {
+    wrapper.find('select[data-test-subj="config-availibility-select-AA12BB44"]').simulate('click');
+  });
+
+  it('Renders configAvailability component to simulate field number', async () => {
+    wrapper
+      .find('input[data-test-subj="config-availibility-fieldnumber-AA12BB44"]')
+      .simulate('click');
+  });
+
+  it('Renders configAvailability component to simulate trash icon', async () => {
+    wrapper.find('svg[data-test-subj="config-availibility-trash-AA12BB44"]').simulate('click');
+  });
+});

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_color_palette_picker.test.tsx

@@ -0,0 +1,108 @@
+import { euiPaletteColorBlind } from '@elastic/eui';
+import { waitFor } from '@testing-library/react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import {
+  MULTI_COLOR_PALETTE,
+  SINGLE_COLOR_PALETTE,
+} from '../../../../../../../common/constants/colors';
+import { ColorPalettePicker } from '../config_panes/config_controls';
+
+describe('ColorPalettePicker component', () => {
+  configure({ adapter: new Adapter() });
+  const palettes = [
+    {
+      value: 'default',
+      title: 'Default',
+      type: 'text',
+    },
+    {
+      value: 'singleColor',
+      title: 'Single Color',
+      type: 'text',
+    },
+    {
+      value: 'multicolor',
+      title: 'Multi Color',
+      type: 'text',
+    },
+  ];
+  const onConfigChange = (configs: any) => {
+    // console.log('vizType', vizType);
+  };
+
+  const wrapper = mount(
+    <ColorPalettePicker
+      title={'Color theme'}
+      selectedColor={{
+        name: 'singleColor',
+        childColor: '#D36086',
+        parentColors: [],
+      }}
+      numberOfParents={0}
+      colorPalettes={palettes}
+      onSelectChange={onConfigChange}
+    />
+  );
+
+  it('Renders ColorPalettePicker component with data selected color as SINGLE_COLOR_PALETTE', async () => {
+    wrapper.update();
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders ColorPalettePicker component with data selected color as MULTI_COLOR_PALETTE', async () => {
+    const wrapperComp = mount(
+      <ColorPalettePicker
+        title={'Color theme'}
+        selectedColor={{
+          name: 'multicolor',
+          childColor: '#5D826F',
+          parentColors: ['#68917C'],
+        }}
+        numberOfParents={1}
+        colorPalettes={palettes}
+        onSelectChange={onConfigChange}
+      />
+    );
+    wrapperComp.update();
+    await waitFor(() => {
+      expect(wrapperComp).toMatchSnapshot();
+    });
+  });
+
+  it('Renders ColorPalettePicker component to simulate color picker', async () => {
+    wrapper
+      .find('input[data-test-subj="euiColorPickerAnchor config-color-palette-colorpicker"]')
+      .simulate('click', { value: '#FFFFFF' });
+    wrapper.update();
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  // it('Renders ColorPalettePicker component to simulate color picker in Multi color palette', async () => {
+  //   const wrapper = mount(
+  //     <ColorPalettePicker
+  //       title={'testTitle'}
+  //       selectedColor={{ name: MULTI_COLOR_PALETTE }}
+  //       numberOfParents={3}
+  //       colorPalettes={palettes}
+  //       onSelectChange={onConfigChange}
+  //     />
+  //   );
+  //   wrapper
+  //     .find('input[data-test-subj="euiColorPickerAnchor config-color-palette-colorpicker-1"]')
+  //     .simulate('click');
+  // });
+
+  it('Renders ColorPalettePicker component to simulate color palette picker', async () => {
+    wrapper.find('button[data-test-subj="config-color-palette-picker"]').simulate('click');
+    wrapper.update();
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_color_theme.test.tsx

@@ -0,0 +1,59 @@
+import { waitFor } from '@testing-library/react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { TEST_COLOR_THEME } from '../../../../../../../test/event_analytics_constants';
+import { ConfigColorTheme } from '../config_panes/config_controls';
+
+describe('ConfigColorTheme component', () => {
+  configure({ adapter: new Adapter() });
+  const vizStates = [
+    {
+      ctid: 'AA12BB44',
+      name: { label: 'testNameA' },
+      color: '#FFFFFF',
+    },
+    {
+      ctid: 'AA13BB45',
+      name: { label: 'testNameB' },
+      color: '#000000',
+    },
+  ];
+  const onConfigChange = (configs: any) => {
+    // console.log('configs', configs);
+  };
+  const wrapper = mount(
+    <ConfigColorTheme
+      visualizations={TEST_COLOR_THEME}
+      schemas={{}}
+      vizState={vizStates}
+      handleConfigChange={onConfigChange}
+      sectionName={'Color theme'}
+    />
+  );
+
+  it('Renders ConfigColorTheme component', async () => {
+    wrapper.update();
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders ConfigColorTheme component to simulate accordion button', async () => {
+    wrapper.find('button[data-test-subj="config-color-theme-accordion"]').simulate('click');
+  });
+
+  it('Renders ConfigColorTheme component to simulate color picker', async () => {
+    wrapper
+      .find('input[data-test-subj="euiColorPickerAnchor config-color-theme-colorpicker-AA12BB44"]')
+      .simulate('click');
+  });
+
+  it('Renders ConfigColorTheme component to simulate combo box', async () => {
+    wrapper.find('div[data-test-subj="config-color-theme-combobox-AA12BB44"]').simulate('click');
+  });
+
+  it('Renders ConfigColorTheme component to simulate trash icon', async () => {
+    wrapper.find('svg[data-test-subj="config-color-theme-trash-AA12BB44"]').simulate('click');
+  });
+});

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx

@@ -121,7 +121,7 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
       >
         <EuiButton
           fullWidth
-          data-test-subj="addAvailabilityButton"
+          data-test-subj="config-availibility-accordion"
           size="s"
           onClick={handleAddAvailability}
           disabled={!hasSpanInApp}
@@ -138,6 +138,7 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
                     <EuiFlexItem grow={3}>
                       <EuiFormRow helpText="color">
                         <EuiColorPicker
+                          data-test-subj={`config-availibility-colorpicker-${thr.thid}`}
                           fullWidth
                           onChange={handleAvailabilityChange(thr.thid, 'color')}
                           color={thr.color}
@@ -147,39 +148,43 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
                     <EuiFlexItem grow={5}>
                       <EuiFormRow helpText="name">
                         <EuiFieldText
+                          data-test-subj={`config-availibility-fieldtext-${thr.thid}`}
                           onChange={handleAvailabilityChange(thr.thid, 'name')}
                           value={thr.name || ''}
                           arial-label="Input availability name"
-                          data-test-subj="nameFieldText"
                         />
                       </EuiFormRow>
                     </EuiFlexItem>
                     <EuiFormRow helpText="expression">
                       <EuiFlexItem grow={4}>
                         <EuiSelect
+                          data-test-subj={`config-availibility-select-${thr.thid}`}
                           options={expressionOptions}
                           value={thr.expression || ''}
                           onChange={handleAvailabilityChange(thr.thid, 'expression')}
                           aria-label="Select availability expression"
-                          data-test-subj="expressionSelect"
                         />
                       </EuiFlexItem>
                     </EuiFormRow>
                     <EuiFlexItem grow={5}>
                       <EuiFormRow helpText="value">
                         <EuiFieldNumber
+                          data-test-subj={`config-availibility-fieldnumber-${thr.thid}`}
                           fullWidth
                           placeholder="availability value"
                           value={thr.value || 0}
                           onChange={handleAvailabilityChange(thr.thid, 'value')}
                           aria-label="Input availability value"
-                          data-test-subj="valueFieldNumber"
                         />
                       </EuiFormRow>
                     </EuiFlexItem>
                     <EuiFlexItem grow={1}>
                       <EuiFormRow>
-                        <EuiIcon type="trash" onClick={handleAvailabilityDelete(thr.thid)} />
+                        <EuiIcon
+                          type="trash"
+                          data-test-subj={`config-availibility-trash-${thr.thid}`}
+                          onClick={handleAvailabilityDelete(thr.thid)}
+                        />
                       </EuiFormRow>
                     </EuiFlexItem>
                   </EuiFlexGroup>

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx

@@ -81,7 +81,11 @@ export const ColorPalettePicker = ({
         {[SINGLE_COLOR_PALETTE, MULTI_COLOR_PALETTE].includes(selectedColor.name) && (
           <EuiFlexItem grow={1}>
             <EuiFormRow helpText={selectedColor.name === MULTI_COLOR_PALETTE && 'Child field'}>
-              <EuiColorPicker onChange={onChildColorChange} color={childColor} />
+              <EuiColorPicker
+                data-test-subj="config-color-palette-colorpicker"
+                onChange={onChildColorChange}
+                color={childColor}
+              />
             </EuiFormRow>
           </EuiFlexItem>
         )}
@@ -93,6 +97,7 @@ export const ColorPalettePicker = ({
               <EuiFlexItem grow={1} key={i}>
                 <EuiFormRow helpText={`Parent ${i + 1} field`}>
                   <EuiColorPicker
+                    data-test-subj={`config-color-palette-colorpicker-${i}`}
                     onChange={onParentColorChange(i)}
                     color={parentColors[i] ?? '#000000'}
                   />
@@ -101,6 +106,7 @@ export const ColorPalettePicker = ({
             ))}
         <EuiFlexItem grow={3}>
           <EuiColorPalettePicker
+            data-test-subj="config-color-palette-picker"
             palettes={colorPalettes}
             onChange={onPaletteChange}
             valueOfSelected={selectedColor.name}