[Multiple Datasource Test] Add test for error_menu, item, data_source…

…_multi_selectable (opensearch-project#6752)

* add test for data_source_error_menu, data_source_item, data_source_multi_selectable

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* Changeset file for PR opensearch-project#6752 created/updated

* add content verify in test

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

---------

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

changelogs/fragments/6752.yml

@@ -0,0 +1,2 @@
+fix:
+- Add test for data_source_error_menu, data_source_item, data_source_multi_selectable ([#6752](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6752))

src/plugins/data_source_management/public/components/data_source_error_menu/data_source_error_menu.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DataSourceErrorMenu } from './data_source_error_menu';
+import { coreMock } from '../../../../../core/public/mocks';
+import { render } from '@testing-library/react';
+
+describe('DataSourceErrorMenu', () => {
+  const applicationMock = coreMock.createStart().application;
+  it('renders without crashing', () => {
+    const component = shallow(<DataSourceErrorMenu application={applicationMock} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should toggle popover when icon button is clicked', () => {
+    const container = render(<DataSourceErrorMenu application={applicationMock} />);
+    const iconButton = container.getByTestId('dataSourceErrorMenuHeaderLink');
+    iconButton.click();
+    expect(container.getByTestId('dataSourceErrorPopover')).toBeVisible();
+    expect(container.getByTestId('datasourceTableEmptyState')).toHaveTextContent(
+      'Failed to fetch data sources'
+    );
+  });
+});

src/plugins/data_source_management/public/components/data_source_item/data_source_item.test.tsx

@@ -43,4 +43,21 @@ describe('Test on ShowDataSourceOption', () => {
     expect(component.find(EuiFlexItem)).toHaveLength(2);
     expect(component.find(EuiBadge)).toHaveLength(1);
   });
+
+  it('should render the component with a default data source', () => {
+    const item: DataSourceOption = {
+      id: 'default data source',
+      label: 'DataSource 1',
+      visible: true,
+    };
+    const defaultDataSource = 'default data source';
+    const wrapper = shallow(
+      <DataSourceItem className="test" option={item} defaultDataSource={defaultDataSource} />
+    );
+
+    expect(wrapper.find(EuiFlexGroup).exists()).toBe(true);
+    expect(wrapper.find(EuiFlexItem).exists()).toBe(true);
+    expect(wrapper.find(EuiBadge).exists()).toBe(true);
+    expect(wrapper.find(EuiBadge).prop('children')).toBe('Default');
+  });
 });

src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.test.tsx

@@ -4,13 +4,13 @@
  */
 
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
-import { notificationServiceMock } from '../../../../../core/public/mocks';
+import { fatalErrorsServiceMock, notificationServiceMock } from '../../../../../core/public/mocks';
 import {
   getDataSourcesWithFieldsResponse,
   mockResponseForSavedObjectsCalls,
   mockManagementPlugin,
 } from '../../mocks';
-import { ShallowWrapper, shallow } from 'enzyme';
+import { ShallowWrapper, mount, shallow } from 'enzyme';
 import { DataSourceMultiSelectable } from './data_source_multi_selectable';
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
@@ -91,6 +91,11 @@ describe('DataSourceMultiSelectable', () => {
     );
     await nextTick();
     expect(toasts.add).toBeCalledTimes(1);
+    expect(toasts.add).toBeCalledWith({
+      color: 'danger',
+      text: expect.any(Function),
+      title: 'Failed to fetch data sources',
+    });
   });
 
   it('should callback when onChange happens', async () => {
@@ -111,7 +116,7 @@ describe('DataSourceMultiSelectable', () => {
     expect(callbackMock).toBeCalledWith([]);
   });
 
-  it('should retrun correct state when ui Settings provided', async () => {
+  it('should return correct state when ui Settings provided', async () => {
     spyOn(uiSettings, 'get').and.returnValue('test1');
     component = shallow(
       <DataSourceMultiSelectable
@@ -129,7 +134,7 @@ describe('DataSourceMultiSelectable', () => {
     expect(component.state('selectedOptions')).toHaveLength(3);
   });
 
-  it('should retrun correct state when ui Settings provided and hide cluster is false', async () => {
+  it('should return correct state when ui Settings provided and hide cluster is false', async () => {
     spyOn(uiSettings, 'get').and.returnValue('test1');
     component = shallow(
       <DataSourceMultiSelectable
@@ -146,4 +151,38 @@ describe('DataSourceMultiSelectable', () => {
     expect(component.state('defaultDataSource')).toEqual('test1');
     expect(component.state('selectedOptions')).toHaveLength(4);
   });
+
+  it('should handle no available data source error when selected option is empty and hide localcluster', async () => {
+    mockResponseForSavedObjectsCalls(client, 'find', {});
+    const wrapper = mount(
+      <DataSourceMultiSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={jest.fn()}
+        hideLocalCluster={true}
+        fullWidth={false}
+        uiSettings={uiSettings}
+      />
+    );
+    await wrapper.instance().componentDidMount!();
+    expect(wrapper.state('selectedOptions')).toHaveLength(0);
+    expect(wrapper.state('showEmptyState')).toBe(true);
+  });
+
+  it('should not handle no available data source error when selected option is empty and not hide localcluster', async () => {
+    mockResponseForSavedObjectsCalls(client, 'find', {});
+    const wrapper = mount(
+      <DataSourceMultiSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={jest.fn()}
+        hideLocalCluster={false}
+        fullWidth={false}
+        uiSettings={uiSettings}
+      />
+    );
+    await wrapper.instance().componentDidMount!();
+    expect(wrapper.state('selectedOptions')).toHaveLength(1);
+    expect(wrapper.state('showEmptyState')).toBe(false);
+  });
 });