Adding tests for acceleration components

public/components/datasources/components/manage/accelerations/__tests__/acceleration_details_flyout.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { dummyAccelerations } from '../../../../../../../test/datasources';
+import { AccelerationDetailsFlyout } from '../acceleration_details_flyout';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+
+describe('Acceleration Details Flyout test', () => {
+  configure({ adapter: new Adapter() });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('Render acceleration detail flyout', () => {
+    const wrapper = mount(<AccelerationDetailsFlyout acceleration={dummyAccelerations[0]} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('Render acceleration detail flyout and click on schema tab', () => {
+    const utils = render(<AccelerationDetailsFlyout acceleration={dummyAccelerations[0]} />);
+
+    fireEvent.click(utils.getByTestId('accelerationDetailsFlyoutTab_schema'));
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+});

public/components/datasources/components/manage/accelerations/__tests__/acceleration_table.test.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { AccelerationTable } from '../acceleration_table';
+
+import React from 'react';
+import { dummyAccelerations } from '../../../../../../../test/datasources';
+import * as Plugin from '../../../../../../plugin';
+
+describe('Acceleration Table Test', () => {
+  configure({ adapter: new Adapter() });
+
+  Plugin.getRenderAccelerationDetailsFlyout = jest.fn();
+
+  it('Render empty acceleration table', () => {
+    const wrapper = mount(<AccelerationTable accelerations={[]} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('Render acceleration table with dummy acceleration', () => {
+    const wrapper = mount(<AccelerationTable accelerations={dummyAccelerations} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

public/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx

@@ -27,13 +27,13 @@
 } from '../accelerations/helpers/utils';
 
 export interface AccelerationDetailsFlyoutProps {
   acceleration: any;
 }
 
 export const AccelerationDetailsFlyout = (props: AccelerationDetailsFlyoutProps) => {
   const { acceleration } = props;
   const [selectedTab, setSelectedTab] = useState('details');
   const tabsMap: { [key: string]: any } = {
     details: AccelerationDetailsTab,
     schema: AccelerationSchemaTab,
     sql_definition: AccelerationSqlTab,
@@ -42,23 +42,32 @@
   const DiscoverButton = () => {
     // TODO: display button if can be sent to discover
     return (
-      <EuiButtonEmpty onClick={onDiscoverButtonClick}>
+      <EuiButtonEmpty
+        onClick={onDiscoverButtonClick}
+        data-test-subj="accelerationDetailsFlyoutDiscoverButton"
+      >
         <EuiIcon type={'discoverApp'} size="m" />
       </EuiButtonEmpty>
     );
   };
 
   const RefreshButton = () => {
     return (
-      <EuiButtonEmpty onClick={onRefreshButtonClick}>
+      <EuiButtonEmpty
+        onClick={onRefreshButtonClick}
+        data-test-subj="accelerationDetailsFlyoutRefreshButton"
+      >
         <EuiIcon type={getRefreshButtonIcon()} size="m" />
       </EuiButtonEmpty>
     );
   };
 
   const DeleteButton = () => {
     return (
-      <EuiButtonEmpty onClick={onDeleteButtonClick}>
+      <EuiButtonEmpty
+        onClick={onDeleteButtonClick}
+        data-test-subj="accelerationDetailsFlyoutDeleteButton"
+      >
         <EuiIcon type="trash" size="m" />
       </EuiButtonEmpty>
     );
@@ -90,6 +99,7 @@
           isSelected={tab.id === selectedTab}
           disabled={tab.disabled}
           key={index}
+          data-test-subj={'accelerationDetailsFlyoutTab_' + tab.id}
         >
           {tab.name}
         </EuiTab>
@@ -97,7 +107,7 @@
     });
   };
 
   const renderTabContent = (tab: string, tabAcceleration: any) => {
     const TabToDisplay = tabsMap[tab];
     return <TabToDisplay acceleration={tabAcceleration} />;
   };
@@ -107,7 +117,7 @@
       <EuiFlyoutHeader hasBorder>
         <EuiFlexGroup direction="row" alignItems="center" gutterSize="m">
           <EuiFlexItem>
-            <EuiText>
+            <EuiText data-test-subj="accelerationDetailsFlyoutTitle">
               <h2 className="panel-title">{acceleration.name}</h2>
             </EuiText>
           </EuiFlexItem>
@@ -122,7 +132,12 @@
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        <EuiTabs style={{ marginBottom: '-25px' }}>{renderTabs()}</EuiTabs>
+        <EuiTabs
+          style={{ marginBottom: '-25px' }}
+          data-test-subj="accelerationDetailsTabFlyoutTabs"
+        >
+          {renderTabs()}
+        </EuiTabs>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>{renderTabContent(selectedTab, acceleration)}</EuiFlyoutBody>
     </>

public/components/datasources/components/manage/accelerations/acceleration_table.tsx

@@ -27,7 +27,7 @@
 
 interface AccelerationTableTabProps {
   // TODO: Add acceleration type to plugin types
   accelerations: any[];
 }
 
 export const AccelerationTable = (props: AccelerationTableTabProps) => {
@@ -47,7 +47,11 @@
     // over from dashboards-query-workbench/public/components/acceleration/create/create_accelerations.tsx
     return (
       <>
-        <EuiButton onClick={() => console.log('clicked on create accelerations button')} fill>
+        <EuiButton
+          data-test-subj="createAccelerationButton"
+          onClick={() => console.log('clicked on create accelerations button')}
+          fill
+        >
           Create acceleration
         </EuiButton>
       </>
@@ -59,7 +63,7 @@
       <>
         <EuiFlexGroup direction="row" alignItems="center">
           <EuiFlexItem>
-            <EuiText>
+            <EuiText data-test-subj="accelerationTableHeaderTitle">
               <h3 className="panel-title">Accelerations</h3>
               <p>
                 Accelerations optimize query performance by indexing external data into OpenSearch.
@@ -100,7 +104,7 @@
     },
   ];
 
   const accelerationTableColumns: Array<EuiBasicTableColumn<any>> = [
     // TODO: fields should be determined by what the acceleration is
     // Show N/A if not applicable
     {
@@ -164,7 +168,12 @@
       name: 'Destination Index',
       sortable: true,
       render: (destination: string) => (
-        <EuiLink onClick={() => console.log('clicked on', destination)}>{destination}</EuiLink>
+        <EuiLink
+          onClick={() => console.log('clicked on', destination)}
+          data-test-subj="accelerationTableDiscoverButton"
+        >
+          {destination}
+        </EuiLink>
       ),
     },
     {
@@ -200,6 +209,7 @@
           columns={accelerationTableColumns}
           pagination={pagination}
           sorting={sorting}
+          data-test-subj="accelerationTable"
         />
       </EuiPanel>
     </>

public/components/datasources/components/manage/data_connection.tsx

@@ -34,6 +34,7 @@
 import { AssociatedObjectsTab } from './associated_objects/associated_objects_tab';
 import { AccelerationTable } from './accelerations/acceleration_table';
 import { mockAssociatedObjects } from './associated_objects/utils/associated_objects_tab_utils';
+import { dummyAccelerations } from '../../../../../test/datasources';
 
 interface DatasourceDetails {
   allowedRoles: string[];
@@ -52,7 +53,7 @@
   'prometheus.uri': string;
 }
 
 export const DataConnection = (props: any) => {
   const { dataSource } = props;
   const [datasourceDetails, setDatasourceDetails] = useState<DatasourceDetails>({
     allowedRoles: [],
@@ -64,24 +65,6 @@
   const [hasAccess, setHasAccess] = useState(true);
   const { http, chrome, application } = coreRefs;
 
-  // Dummy accelerations variables for mock purposes
-  // Actual accelerations should be retrieved from the backend
-  const sampleSql = 'select * from `httplogs`.`default`.`table2` limit 10';
-  const dummyAccelerations = [
-    {
-      name: 'dummy_acceleration_1',
-      status: 'ACTIVE',
-      type: 'skip',
-      database: 'default',
-      table: 'table1',
-      destination: 'N/A',
-      dateCreated: 1709339290,
-      dateUpdated: 1709339290,
-      index: 'security_logs_2022',
-      sql: sampleSql,
-    },
-  ];
-
   const DefaultDatasourceCards = () => {
     return (
       <EuiFlexGroup>
@@ -157,7 +140,7 @@
       .catch((_err) => {
         setHasAccess(false);
       });
   }, [chrome, http]);
 
   const tabs = [
     {

test/datasources.ts

@@ -806,3 +806,20 @@ export const mockRoleData = {
     },
   },
 };
+
+export const sampleSql = 'select * from `httplogs`.`default`.`table2` limit 10';
+
+export const dummyAccelerations = [
+  {
+    name: 'dummy_acceleration_1',
+    status: 'ACTIVE',
+    type: 'skip',
+    database: 'default',
+    table: 'table1',
+    destination: 'N/A',
+    dateCreated: 1709339290,
+    dateUpdated: 1709339290,
+    index: 'security_logs_2022',
+    sql: sampleSql,
+  },
+];