Updated jest testing

Signed-off-by: Dan Dong <[email protected]>

public/components/overview/components/__tests__/add_dashboard_callout.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { AddDashboardCallout } from '../add_dashboard_callout';
+import { configure, mount } from 'enzyme';
+import { gettingStartedURL } from '../card_configs';
+import Adapter from 'enzyme-adapter-react-16';
+
+describe('Add dashboard callout', () => {
+  configure({ adapter: new Adapter() });
+
+  const mockShowFlyout = jest.fn();
+  const mockNavigateToApp = jest.fn();
+  const wrapper = mount(
+    <AddDashboardCallout showFlyout={mockShowFlyout} navigateToApp={mockNavigateToApp} />
+  );
+
+  it('renders add dashboard callout', async () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('navigates to correct page', async () => {
+    wrapper.find('EuiLink').simulate('click');
+    expect(mockNavigateToApp).toHaveBeenCalledWith(gettingStartedURL, '#/');
+  });
+
+  it('opens flyout', async () => {
+    wrapper.find('EuiButton').simulate('click');
+    expect(mockShowFlyout).toBeCalledTimes(1);
+  });
+});

public/components/overview/components/__tests__/dashboard_controls.test.tsx

@@ -0,0 +1,140 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import { DashboardControls, Props } from '../dashboard_controls';
+import React from 'react';
+import Adapter from 'enzyme-adapter-react-16';
+import { OnTimeChangeProps } from '@elastic/eui';
+import { redirectToDashboards } from '../../../getting_started/components/utils';
+import { coreRefs } from '../../../../framework/core_refs';
+
+configure({ adapter: new Adapter() });
+
+const mountDashboardControls = (props: Partial<Props> = {}) => {
+  const defaultProps: Props = {
+    dashboardTitle: '',
+    dashboardId: '',
+    startDate: '',
+    endDate: '',
+    setStartDate: (_: string) => {},
+    setEndDate: (_: string) => {},
+    showFlyout: () => {},
+  };
+
+  return mount(<DashboardControls {...defaultProps} {...props} />);
+};
+
+jest.mock('../../../getting_started/components/utils', () => ({
+  redirectToDashboards: jest.fn(),
+}));
+
+jest.mock('../../../../framework/core_refs', () => ({
+  coreRefs: {
+    contentManagement: {
+      updatePageSection: jest.fn(),
+    },
+  },
+}));
+
+describe('Dashboard controls', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render', () => {
+    const wrapper = mountDashboardControls();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render with dashboard title', () => {
+    const mockDashboardTitle = 'my_dashboard';
+    const wrapper = mountDashboardControls({ dashboardTitle: mockDashboardTitle });
+    const title = wrapper
+      .find('h2')
+      .filterWhere((node) => node.text() === mockDashboardTitle)
+      .first();
+    expect(title.exists()).toBe(true);
+  });
+
+  it('title should redirect to dashboard', () => {
+    const mockDashboardId = '12345678';
+    const wrapper = mountDashboardControls({ dashboardId: mockDashboardId });
+
+    wrapper.find('EuiLink').simulate('click');
+    expect(redirectToDashboards).toHaveBeenCalledWith('/view/' + mockDashboardId);
+  });
+
+  it('should render date picker with correct start and end dates', () => {
+    const mockStartDate = '01/01/2000';
+    const mockEndDate = '12/12/2024';
+
+    const wrapper = mountDashboardControls({ startDate: mockStartDate, endDate: mockEndDate });
+
+    const datePicker = wrapper.find('EuiSuperDatePicker');
+    expect(datePicker.props().start).toBe(mockStartDate);
+    expect(datePicker.props().end).toBe(mockEndDate);
+  });
+
+  describe('Date Picker', () => {
+    it('should update date when selected', () => {
+      const mockSetStartDate = jest.fn();
+      const mockSetEndDate = jest.fn();
+      const newStartDate = '02/05/2000';
+      const newEndDate = '12/05/2024';
+
+      const wrapper = mountDashboardControls({
+        setStartDate: mockSetStartDate,
+        setEndDate: mockSetEndDate,
+      });
+      const onTimeChange = wrapper.find('EuiSuperDatePicker').prop('onTimeChange') as (
+        props: OnTimeChangeProps
+      ) => void;
+
+      onTimeChange({
+        end: newEndDate,
+        start: newStartDate,
+        isInvalid: false,
+        isQuickSelection: false,
+      });
+
+      expect(mockSetStartDate).toHaveBeenCalledWith(newStartDate);
+      expect(mockSetEndDate).toHaveBeenCalledWith(newEndDate);
+    });
+
+    it('should update coreRefs when selected', () => {
+      const newStartDate = '02/05/2000';
+      const newEndDate = '12/05/2024';
+
+      const wrapper = mountDashboardControls();
+      const onTimeChange = wrapper.find('EuiSuperDatePicker').prop('onTimeChange') as (
+        props: OnTimeChangeProps
+      ) => void;
+
+      onTimeChange({
+        end: newEndDate,
+        start: newStartDate,
+        isInvalid: false,
+        isQuickSelection: false,
+      });
+
+      const updatePageSectionCallback = (coreRefs?.contentManagement
+        ?.updatePageSection as jest.Mock).mock.calls[0][1];
+      const mockSection = {
+        kind: 'dashboard',
+        input: {
+          timeRange: { to: '', from: '' },
+        },
+      };
+      const result = updatePageSectionCallback(mockSection);
+
+      expect(coreRefs?.contentManagement?.updatePageSection).toHaveBeenCalled();
+      expect(result.input.timeRange).toEqual({
+        to: newEndDate,
+        from: newStartDate,
+      });
+    });
+  });
+});

public/components/overview/components/__tests__/select_dashboard_flyout.test.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { Props } from '../select_dashboard_flyout';
+import React from 'react';
+import { SelectDashboardFlyout } from '../select_dashboard_flyout';
+
+configure({ adapter: new Adapter() });
+
+const mountSelectDashboardFlyout = (props: Partial<Props> = {}) => {
+  const defaultProps: Props = {
+    closeFlyout: () => {},
+    wrapper: { dashboardSelected: false },
+    dashboards: {},
+    registerDashboard: () => {},
+  };
+
+  return mount(<SelectDashboardFlyout {...defaultProps} {...props} />);
+};
+
+describe('Select dashboard flyout', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render', () => {
+    const wrapper = mountSelectDashboardFlyout();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should change heading when dashboard is selected', () => {
+    const wrapper = mountSelectDashboardFlyout({ wrapper: { dashboardSelected: true } });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should close when user clicks cancel', () => {
+    const mockCloseFlyout = jest.fn();
+    const wrapper = mountSelectDashboardFlyout({ closeFlyout: mockCloseFlyout });
+
+    (wrapper.find('EuiFlyout').prop('onClose') as () => void)();
+    wrapper.find('EuiSmallButtonEmpty').simulate('click');
+
+    expect(mockCloseFlyout).toHaveBeenCalledTimes(2);
+  });
+});

public/components/overview/components/select_dashboard_flyout.tsx

@@ -20,7 +20,7 @@ import React, { useEffect, useState } from 'react';
 import { uiSettingsService } from '../../../../common/utils';
 import { DashboardDictionary } from '../home';
 
-interface Props {
+export interface Props {
   closeFlyout: () => void;
   wrapper: { dashboardSelected: boolean };
   dashboards: DashboardDictionary;