ADM-975 [frontend]: fix comments (#1533)

* ADM-975 [frontend]: show the all pipeline in the lead time for change details

* ADM-975 [frontend]: finish the function that user can select pipelines in the dora chart

* ADM-975 [frontend]: remove debug

* ADM-975 [backend]: change the lead time for change response

* ADM-975 [frontend][backend]: finish the dora metrics chart selection

* ADM-975 [frontend][backend]: finish the dora metrics chart selection

* ADM-975 [frontend]: fix the debug

* Revert "ADM-975 [frontend]: fix the debug"

This reverts commit 865db04.

* ADM-975 [backend]: fix the backend test coverage

* ADM-975 [frontend]: fix test coverage and cr comment

* ADM-975 [frontend]: fix issues

* ADM-975 [frontend]: adjust the style of pipeline selector

* ADM-975 [backend]: remove the request info files

* ADM-975 [backend][frontend]: fix the backend bug and fix e2e test

* ADM-975 [docs]: modify the spike

* ADM-975 [docs]: change the readme

* ADM-975 [frontend]: fix issues

* ADM-975 [frontend]: change the style of charts

* ADM-975 [frontend]: fix comments

* ADM-975 [frontend]: fix comments

frontend/__tests__/containers/ReportStep/ReportStep.test.tsx

@@ -32,11 +32,11 @@ import { addADeploymentFrequencySetting, updateDeploymentFrequencySettings } fro
 import { act, render, renderHook, screen, waitFor, within } from '@testing-library/react';
 import { DATA_LOADING_FAILED, DEFAULT_MESSAGE, MESSAGE } from '@src/constants/resources';
 import { closeNotification } from '@src/context/notification/NotificationSlice';
-import ReportStep, { resizeChart, showChart } from '@src/containers/ReportStep';
 import { addNotification } from '@src/context/notification/NotificationSlice';
 import { useGenerateReportEffect } from '@src/hooks/useGenerateReportEffect';
 import { backStep, updateReportId } from '@src/context/stepper/StepperSlice';
 import { useExportCsvEffect } from '@src/hooks/useExportCsvEffect';
+import ReportStep, { showChart } from '@src/containers/ReportStep';
 import { setupStore } from '../../utils/setupStoreUtil';
 import userEvent from '@testing-library/user-event';
 import React, { ReactNode } from 'react';
@@ -696,27 +696,6 @@ describe('Report Step', () => {
     });
   });
 
-  describe('resizeChart', () => {
-    beforeEach(() => {
-      jest.spyOn(echarts, 'init').mockImplementation(
-        () =>
-          ({
-            setOption: jest.fn(),
-            resize: jest.fn(),
-            dispatchAction: jest.fn(),
-            dispose: jest.fn(),
-          }) as unknown as echarts.ECharts,
-      );
-    });
-    it('should resize', () => {
-      const chart = echarts.init();
-      const resizeFunction = resizeChart(chart);
-
-      resizeFunction();
-      expect(chart.resize).toHaveBeenCalledTimes(1);
-    });
-  });
-
   describe('showChart test', () => {
     const chart = {
       setOption: jest.fn(),
@@ -741,19 +720,35 @@ describe('Report Step', () => {
       const div = document.createElement('div');
 
       const disposeFunction = showChart(div, false, {});
-      disposeFunction && disposeFunction();
+      window.dispatchEvent(new Event('resize'));
+      disposeFunction!();
+
+      expect(disposeFunction).not.toBeUndefined();
+      expect(echarts.init).toHaveBeenCalledTimes(1);
+      expect(chart.setOption).toHaveBeenCalledTimes(1);
+      expect(chart.dispose).toHaveBeenCalledTimes(1);
+      expect(chart.resize).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not resize when dispatch resize event after dispose', async () => {
+      const div = document.createElement('div');
+
+      const disposeFunction = showChart(div, false, {});
+      disposeFunction!();
+      window.dispatchEvent(new Event('resize'));
 
       expect(disposeFunction).not.toBeUndefined();
       expect(echarts.init).toHaveBeenCalledTimes(1);
       expect(chart.setOption).toHaveBeenCalledTimes(1);
       expect(chart.dispose).toHaveBeenCalledTimes(1);
+      expect(chart.resize).toHaveBeenCalledTimes(0);
     });
 
     it('should return hide loading when finished', async () => {
       const div = document.createElement('div');
 
       const disposeFunction = showChart(div, true, {});
-      disposeFunction && disposeFunction();
+      disposeFunction!();
 
       expect(disposeFunction).not.toBeUndefined();
       expect(echarts.init).toHaveBeenCalledTimes(1);

frontend/src/containers/ReportStep/index.tsx

@@ -25,7 +25,6 @@ import ReportContent from './ReportContent';
 import { useAppSelector } from '@src/hooks';
 import { useEffect, useState } from 'react';
 import * as echarts from 'echarts';
-import { ECharts } from 'echarts';
 
 export interface ReportStepProps {
   handleSave: () => void;
@@ -37,20 +36,17 @@ export interface DateRangeRequestResult {
   reportData: ReportResponseDTO | undefined;
 }
 
-export const resizeChart = (chart: ECharts) => {
-  return () => {
-    chart.resize();
-  };
-};
-
 export function showChart(div: HTMLDivElement | null, isFinished: boolean, options: echarts.EChartsCoreOption) {
   if (div) {
     const chart = echarts.init(div);
     chart.setOption(options);
-    const resize = resizeChart(chart);
+    const resize = () => {
+      chart.resize();
+    };
     window.addEventListener('resize', resize);
     return () => {
       chart.dispose();
+      window.removeEventListener('resize', resize);
     };
   }
 }