From ae7ca720a055f8d217760b3a9be102691ea035ed Mon Sep 17 00:00:00 2001
From: iadibar <adi.bar1@intl.att.com>
Date: Sun, 4 Feb 2024 09:34:21 +0200
Subject: [PATCH] add UT

---
 .../charts/utils/charts.utils.test.ts         |  7 ++++
 .../dynamic-chart/DynamicChart.test.tsx       | 33 +++++++++++++++
 .../CustomDropdownIndicator.test.tsx          | 30 +++++++++++++
 .../CustomDropdownIndicator.test.tsx.snap     | 13 ++++++
 .../custom-option/CustomOption.test.tsx       | 42 +++++++++++++++++++
 .../__snapshots__/CustomOption.test.tsx.snap  | 17 ++++++++
 .../CustomValueContainer.test.tsx             | 29 +++++++++++++
 .../CustomValueContainer.test.tsx.snap        | 17 ++++++++
 .../hooks/useDynamicChartData.test.ts         | 13 ++++++
 .../utils/dynamic-chart.utils.test.ts         | 19 +++++++++
 .../charts/hooks/useChartsData.test.ts        |  4 +-
 portal/src/app/hooks/useOutsideClick.test.tsx | 30 +++++++++++++
 12 files changed, 252 insertions(+), 2 deletions(-)
 create mode 100644 portal/src/app/components/dashboard/components/charts/utils/charts.utils.test.ts
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.test.tsx
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/CustomDropdownIndicator.test.tsx
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/__snapshots__/CustomDropdownIndicator.test.tsx.snap
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/CustomOption.test.tsx
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/__snapshots__/CustomOption.test.tsx.snap
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/CustomValueContainer.test.tsx
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/__snapshots__/CustomValueContainer.test.tsx.snap
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.test.ts
 create mode 100644 portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/utils/dynamic-chart.utils.test.ts
 create mode 100644 portal/src/app/hooks/useOutsideClick.test.tsx

diff --git a/portal/src/app/components/dashboard/components/charts/utils/charts.utils.test.ts b/portal/src/app/components/dashboard/components/charts/utils/charts.utils.test.ts
new file mode 100644
index 00000000..4d698d56
--- /dev/null
+++ b/portal/src/app/components/dashboard/components/charts/utils/charts.utils.test.ts
@@ -0,0 +1,7 @@
+import { getColorByName } from './charts.utils';
+
+describe('Charts Util Test', () => {
+  test('should get color by name', () => {
+    expect(getColorByName('bikel1')).toBe('#FF8500');
+  });
+});
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.test.tsx b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.test.tsx
new file mode 100644
index 00000000..6d6fc957
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/DynamicChart.test.tsx
@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import { useDynamicChartData } from './hooks/useDynamicChartData';
+import { BarChart } from '../../../../../../../dashboard/components/charts/BarChart/BarChart';
+import { LineChart } from '../../../../../../../dashboard/components/charts/LineChart/LineChart';
+
+jest.mock('../../../../../../../dashboard/components/charts/BarChart/BarChart');
+jest.mock('../../../../../../../dashboard/components/charts/LineChart/LineChart');
+jest.mock('../../../../../../../../shared/components/att-select/AttSelect', () => ({
+    AttSelect: jest.fn(() => <div>Mocked AttSelect</div>),
+}));
+jest.mock('./hooks/useDynamicChartData');
+
+describe('DynamicChart', () => {
+    test('should render Charts', async () => {
+        (BarChart as jest.Mock).mockImplementation(() => <div>BarChart</div>);
+        (LineChart as jest.Mock).mockImplementation(() => <div>LineChart</div>);
+
+
+      (useDynamicChartData as jest.Mock).mockReturnValue({
+        yAxiosOptions: [{
+            label: 'averageCPU',
+            value: 'averageCPU'
+        },
+        {
+            label: 'averageMemory',
+            value: 'averageMemory'
+        }],
+        });
+
+      const { container } = render(<BarChart title='Iterations' labels={[]} data={undefined} keyOfData={''} tooltipKeys={[]} tooltipLabels={[]} />);
+      expect(container).toBeTruthy();
+    });
+});
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/CustomDropdownIndicator.test.tsx b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/CustomDropdownIndicator.test.tsx
new file mode 100644
index 00000000..029bdf4b
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/CustomDropdownIndicator.test.tsx
@@ -0,0 +1,30 @@
+import { render, RenderResult } from '@testing-library/react';
+import { CustomDropdownIndicator } from './CustomDropdownIndicator';
+import { DropdownIndicatorProps } from 'react-select';
+import { AttSelectOption } from '../../../../../../../../../../shared/components/att-select';
+
+describe('CustomDropdownIndicator', () => {
+  const mockProps: DropdownIndicatorProps<AttSelectOption, any> = {
+      innerProps: undefined as any,
+      isFocused: false,
+      isDisabled: false,
+      clearValue: jest.fn(),
+      cx: jest.fn(),
+      getStyles: jest.fn(),
+      getClassNames: jest.fn(),
+      getValue: jest.fn(),
+      hasValue: false,
+      isMulti: false,
+      isRtl: false,
+      options: [],
+      selectOption: jest.fn(),
+      selectProps: undefined as any,
+      setValue: jest.fn(),
+      theme: undefined as any,
+  };
+
+  it('should render CustomDropdownIndicator', () => {
+    const { container }: RenderResult = render(<CustomDropdownIndicator {...mockProps} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/__snapshots__/CustomDropdownIndicator.test.tsx.snap b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/__snapshots__/CustomDropdownIndicator.test.tsx.snap
new file mode 100644
index 00000000..ad0f259f
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-dropdown-indicator/__snapshots__/CustomDropdownIndicator.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomDropdownIndicator should render CustomDropdownIndicator 1`] = `
+<div>
+  <div
+    class="css-0"
+  >
+    <svg>
+      arrow-down-selector.svg
+    </svg>
+  </div>
+</div>
+`;
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/CustomOption.test.tsx b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/CustomOption.test.tsx
new file mode 100644
index 00000000..52b12c7c
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/CustomOption.test.tsx
@@ -0,0 +1,42 @@
+import { render, RenderResult } from '@testing-library/react';
+import { CustomOption } from './CustomOption';
+import { SelectorCustomOptionProps } from '../../../../../../../../../../shared/components/selector-custom-option';
+
+describe('CustomOption', () => {
+  const mockOption = { value: 'option1', label: 'Option 1' };
+  const mockProps: SelectorCustomOptionProps = {
+    data: mockOption,
+    isSelected: false,
+    selectOption: jest.fn(),
+    label: 'Option 1',
+    innerProps: {},
+    innerRef: jest.fn(),
+    children: null,
+    type: 'option',
+    isDisabled: false,
+    isFocused: false,
+    clearValue: jest.fn(),
+    cx: jest.fn(),
+    getStyles: jest.fn(),
+    getClassNames: jest.fn(),
+    getValue: jest.fn().mockReturnValue([{ label: 'Option 1', value: 'option1' }]),
+    hasValue: true,
+    isMulti: true,
+    isRtl: false,
+    options: [],
+    selectProps: expect.any(Object),
+    setValue: jest.fn(),
+    theme: expect.any(Object),
+    onOptionChanged: jest.fn(),
+    showInputOption: false,
+    setShowInputOption: jest.fn(),
+    inputValue: '1111',
+    setInputValue: jest.fn(),
+    setMenuIsOpen: jest.fn(),
+  };
+
+  it('should render CustomOption', () => {
+    const { container }: RenderResult = render(<CustomOption {...mockProps} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/__snapshots__/CustomOption.test.tsx.snap b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/__snapshots__/CustomOption.test.tsx.snap
new file mode 100644
index 00000000..6848c4f2
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-option/__snapshots__/CustomOption.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomOption should render CustomOption 1`] = `
+<div
+  aria-disabled="false"
+  class="css-0"
+>
+  <img
+    alt="option1"
+    class="icon"
+    src="bar.svg"
+  />
+  <span>
+    Option1
+  </span>
+</div>
+`;
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/CustomValueContainer.test.tsx b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/CustomValueContainer.test.tsx
new file mode 100644
index 00000000..34bccade
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/CustomValueContainer.test.tsx
@@ -0,0 +1,29 @@
+import { render, RenderResult } from '@testing-library/react';
+import { CustomValueContainer } from './CustomValueContainer';
+import { GroupBase, SetValueAction, ValueContainerProps } from 'react-select';
+import { AttSelectOption } from '../../../../../../../../../../shared/components/att-select';
+
+describe('CustomValueContainer', () => {
+    const mockProps: ValueContainerProps<AttSelectOption<any>, boolean, GroupBase<AttSelectOption<any>>> = {
+      children: undefined,
+      isDisabled: false,
+      clearValue: jest.fn(),
+      cx: jest.fn(),
+      getStyles: jest.fn(),
+      getClassNames: jest.fn(),
+      getValue: jest.fn(),
+      hasValue: false,
+      isMulti: false,
+      isRtl: false,
+      options: [],
+      selectOption: jest.fn(),
+      selectProps: undefined as any,
+      setValue: jest.fn(),
+      theme: undefined as any
+  };
+
+  it('should render CustomValueContainer', () => {
+    const { container }: RenderResult = render(<CustomValueContainer {...mockProps} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/__snapshots__/CustomValueContainer.test.tsx.snap b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/__snapshots__/CustomValueContainer.test.tsx.snap
new file mode 100644
index 00000000..3de4a472
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/components/custom-value-container/__snapshots__/CustomValueContainer.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomValueContainer should render CustomValueContainer 1`] = `
+<div>
+  <div
+    class="css-0"
+  >
+    <div
+      class="input_wrapper"
+    >
+      <span
+        class="placeholder"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.test.ts b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.test.ts
new file mode 100644
index 00000000..f9ea9782
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/hooks/useDynamicChartData.test.ts
@@ -0,0 +1,13 @@
+import { act, renderHook } from "@testing-library/react";
+import { useDynamicChartData } from "./useDynamicChartData";
+import { MOCK_DATA_FOR_EXPERIMENT } from "../../../../__mocks__/mocks";
+
+describe('useDynamicChartData', () => {
+  test('should get data', async () => {
+
+    const { result } = renderHook(() => useDynamicChartData(MOCK_DATA_FOR_EXPERIMENT));
+    act(() => {
+        expect(result.current).toEqual( {yAxiosOptions: [{label: "averageCPU", value: "averageCPU"}, {label: "averageMemory", value: "averageMemory"}]});
+    });
+  });
+});
diff --git a/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/utils/dynamic-chart.utils.test.ts b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/utils/dynamic-chart.utils.test.ts
new file mode 100644
index 00000000..0058e309
--- /dev/null
+++ b/portal/src/app/components/home/components/experiment/components/charts/components/dynamic-chart/utils/dynamic-chart.utils.test.ts
@@ -0,0 +1,19 @@
+import { ChartType } from '../models/dynamic-chart.interface';
+import { capitalizeFirstLetter, getIconByValue, getTitleByXAxiosValue } from './dynamic-chart.utils';
+import LineSvg from '../../../../../../../../../../../src/assets/images/line.svg';
+import BarSvg from '../../../../../../../../../../../src/assets/images/bar.svg';
+
+describe('Dynamic chart util test', () => {
+  test('should get icon by value', () => {
+    expect(getIconByValue(ChartType.LINE)).toBe(LineSvg);
+    expect(getIconByValue(ChartType.BAR)).toBe(BarSvg);
+  });
+
+  test('should capitalize first letter', () => {
+    expect(capitalizeFirstLetter('test')).toBe('Test');
+  });
+
+  test('should get title by XAxios value', () => {
+    expect(getTitleByXAxiosValue('NUMBER_OF_ITERATIONS')).toBe('Iterations');
+  });
+});
diff --git a/portal/src/app/components/home/components/experiment/components/charts/hooks/useChartsData.test.ts b/portal/src/app/components/home/components/experiment/components/charts/hooks/useChartsData.test.ts
index 868b2319..fa0ee268 100644
--- a/portal/src/app/components/home/components/experiment/components/charts/hooks/useChartsData.test.ts
+++ b/portal/src/app/components/home/components/experiment/components/charts/hooks/useChartsData.test.ts
@@ -53,8 +53,8 @@ describe('useChartsData', () => {
       ],
       lineChartData: { labels: [104, 1024], datasets: [ 
         {
-          backgroundColor: "#05BBFF",
-          borderColor: "#05BBFF",
+          backgroundColor: "#086CE1",
+          borderColor: "#086CE1",
           borderWidth: 1,
           data: {
               averageCPU: [25.5, 2],
diff --git a/portal/src/app/hooks/useOutsideClick.test.tsx b/portal/src/app/hooks/useOutsideClick.test.tsx
new file mode 100644
index 00000000..2aa48728
--- /dev/null
+++ b/portal/src/app/hooks/useOutsideClick.test.tsx
@@ -0,0 +1,30 @@
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { MutableRefObject, useRef } from 'react';
+import { useOutsideClick } from './useOutsideClick';
+
+interface TestComponentProps {
+  onClickOutside: () => void
+}
+
+describe('useOutsideClick', () => {
+  let TestComponent: React.FC<TestComponentProps>;
+
+  beforeEach(() => {
+    TestComponent = function Component({ onClickOutside }: TestComponentProps) {
+        const innerElementRef: MutableRefObject<HTMLDivElement | null> = useRef<HTMLDivElement | null>(null);
+        useOutsideClick(innerElementRef, onClickOutside);
+        return <div ref={innerElementRef} data-testid='inside'>Test Component</div>;
+      };
+  });
+  afterEach(cleanup);
+
+  test('should not trigger event when inside element is clicked', () => {
+    const onClickOutside: jest.Mock = jest.fn();
+    const { getByTestId } = render(<TestComponent onClickOutside={onClickOutside} />);
+    const insideElement: HTMLElement = getByTestId('inside');
+    act(() => {
+      fireEvent.mouseDown(insideElement);
+    });
+    expect(onClickOutside).toHaveBeenCalledTimes(0);
+  });
+});