Merge pull request #468 from bartoval/migrate_to_skSelect

refactor(General): ♻️ Migrate to skSelect component

__tests__/core/SKSankeyFIlter.spec.tsx

@@ -3,7 +3,7 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
 import {
   ServiceClientResourceOptions,
   ServiceServerResourceOptions,
-  sankeyMetricOptions
+  SankeyMetricOptions
 } from '../../src/core/components/SKSanckeyChart/SkSankey.constants';
 import SankeyFilter from '../../src/core/components/SKSanckeyChart/SkSankeyFilter';
 
@@ -18,16 +18,16 @@ describe('SankeyFilter', () => {
     const { getByText } = render(<SankeyFilter />);
 
     // Find and click the client resource toggle button
-    const clientToggle = getByText(ServiceClientResourceOptions[0].name);
+    const clientToggle = getByText(ServiceClientResourceOptions[0].label);
     fireEvent.click(clientToggle);
 
     // Find and click the "Client sites" option
-    const clientOption = getByText(ServiceClientResourceOptions[1].name);
+    const clientOption = getByText(ServiceClientResourceOptions[1].label);
     fireEvent.click(clientOption);
 
     await waitFor(() => {
       // Assert that the client resource has been selected
-      const selectedClient = getByText(ServiceClientResourceOptions[1].name);
+      const selectedClient = getByText(ServiceClientResourceOptions[1].label);
       expect(selectedClient).toBeInTheDocument();
     });
   });
@@ -36,16 +36,16 @@ describe('SankeyFilter', () => {
     const { getByText } = render(<SankeyFilter />);
 
     // Find and click the server resource toggle button
-    const serverToggle = getByText(ServiceServerResourceOptions[0].name);
+    const serverToggle = getByText(ServiceServerResourceOptions[0].label);
     fireEvent.click(serverToggle);
 
     // Find and click the "Server processes" option
-    const serverOption = getByText(ServiceServerResourceOptions[1].name);
+    const serverOption = getByText(ServiceServerResourceOptions[1].label);
     fireEvent.click(serverOption);
 
     await waitFor(() => {
       // Assert that the server resource has been selected
-      const selectedServer = getByText(ServiceServerResourceOptions[1].name);
+      const selectedServer = getByText(ServiceServerResourceOptions[1].label);
       expect(selectedServer).toBeInTheDocument();
     });
   });
@@ -54,16 +54,16 @@ describe('SankeyFilter', () => {
     const { getByText } = render(<SankeyFilter />);
 
     // Find and click the metric toggle button
-    const metricToggle = getByText(sankeyMetricOptions[0].name);
+    const metricToggle = getByText(SankeyMetricOptions[0].label);
     fireEvent.click(metricToggle);
 
     // Find and click a metric option
-    const metricOption = getByText(sankeyMetricOptions[1].name);
+    const metricOption = getByText(SankeyMetricOptions[1].label);
     fireEvent.click(metricOption);
 
     // Assert that the metric has been selected
     await waitFor(() => {
-      const selectedMetric = getByText(sankeyMetricOptions[1].name);
+      const selectedMetric = getByText(SankeyMetricOptions[1].label);
       expect(selectedMetric).toBeInTheDocument();
     });
   });

__tests__/core/SkSearchFilter-service.spec.ts

@@ -1,16 +1,14 @@
+import { SkSelectOption } from '@core/components/SkSelect';
+
 import { SkSearchFilterController } from '../../src/core/components/SkTable/SkSearchFilter/services'; // Assuming your service file path
-import {
-  FilterType,
-  FilterTypeWithSearchText,
-  FilterSelected
-} from '../../src/types/SkFilter.interfaces'; // Assuming your interface file path
+import { FilterTypeWithSearchText, FilterSelected } from '../../src/types/SkFilter.interfaces'; // Assuming your interface file path
 
 describe('SkSearchFilterController', () => {
   describe('getFilterTypesWithSearchValues', () => {
     it('should return an empty array when filterValues is undefined', () => {
-      const selectOptions: FilterType[] = [
-        { id: 'filter1', name: 'Filter 1' },
-        { id: 'filter2', name: 'Filter 2' }
+      const selectOptions: SkSelectOption[] = [
+        { id: 'filter1', label: 'Filter 1' },
+        { id: 'filter2', label: 'Filter 2' }
       ];
 
       const result = SkSearchFilterController.getFilterTypesWithSearchValues(selectOptions, undefined);
@@ -19,9 +17,9 @@ describe('SkSearchFilterController', () => {
     });
 
     it('should return all selected filters with search values', () => {
-      const selectOptions: FilterType[] = [
-        { id: 'filter1', name: 'Filter 1' },
-        { id: 'filter2', name: 'Filter 2' }
+      const selectOptions: SkSelectOption[] = [
+        { id: 'filter1', label: 'Filter 1' },
+        { id: 'filter2', label: 'Filter 2' }
       ];
 
       const filterValues: FilterSelected = {
@@ -30,8 +28,8 @@ describe('SkSearchFilterController', () => {
       };
 
       const expectedResult: FilterTypeWithSearchText[] = [
-        { id: 'filter1', name: 'Filter 1', searchValue: 'value1' },
-        { id: 'filter2', name: 'Filter 2', searchValue: 'value2' }
+        { id: 'filter1', label: 'Filter 1', searchValue: 'value1' },
+        { id: 'filter2', label: 'Filter 2', searchValue: 'value2' }
       ];
 
       const result = SkSearchFilterController.getFilterTypesWithSearchValues(selectOptions, filterValues);
@@ -40,18 +38,18 @@ describe('SkSearchFilterController', () => {
     });
 
     it('should return only selected filters with search values', () => {
-      const selectOptions: FilterType[] = [
-        { id: 'filter1', name: 'Filter 1' },
-        { id: 'filter2', name: 'Filter 2' },
-        { id: 'filter3', name: 'Filter 3' }
+      const selectOptions: SkSelectOption[] = [
+        { id: 'filter1', label: 'Filter 1' },
+        { id: 'filter2', label: 'Filter 2' },
+        { id: 'filter3', label: 'Filter 3' }
       ];
 
       const filterValues: FilterSelected = {
         filter1: 'value1',
         filter2: undefined
       };
 
-      const expectedResult: FilterTypeWithSearchText[] = [{ id: 'filter1', name: 'Filter 1', searchValue: 'value1' }];
+      const expectedResult: FilterTypeWithSearchText[] = [{ id: 'filter1', label: 'Filter 1', searchValue: 'value1' }];
 
       const result = SkSearchFilterController.getFilterTypesWithSearchValues(selectOptions, filterValues);
 

__tests__/core/SkSearchFilter.spec.tsx

@@ -7,8 +7,8 @@ import { testIds } from '../../src/core/components/SkTable/SkSearchFilter/SkSear
 describe('SkSearchFilter', () => {
   const onSearchMock = jest.fn();
   const selectOptions = [
-    { id: 'option1', name: 'Option 1' },
-    { id: 'option2', name: 'Option 2' }
+    { id: 'option1', label: 'Option 1' },
+    { id: 'option2', label: 'Option 2' }
   ];
 
   it('should handle input change', async () => {
@@ -66,15 +66,15 @@ describe('SkSearchFilter', () => {
     const { getByTestId, getByText, getByPlaceholderText } = render(
       <SkSearchFilter onSearch={onSearchMock} selectOptions={selectOptions} />
     );
-    let selectedFilterBtn = getByText(selectOptions[0].name);
+    let selectedFilterBtn = getByText(selectOptions[0].label);
 
     await eventUser.click(selectedFilterBtn);
     expect(getByTestId(testIds.selectFilterType)).toBeInTheDocument();
 
-    selectedFilterBtn = getByText(selectOptions[1].name);
+    selectedFilterBtn = getByText(selectOptions[1].label);
 
     await eventUser.click(selectedFilterBtn);
-    expect(getByPlaceholderText(`Search by ${selectOptions[1].name.toLowerCase()}`)).toBeInTheDocument();
+    expect(getByPlaceholderText(`Search by ${selectOptions[1].label.toLowerCase()}`)).toBeInTheDocument();
   });
 
   it('should change the filter type selection', async () => {

__tests__/core/SkUpdateDataButton.spec.tsx

@@ -24,7 +24,7 @@ describe('SkUpdateDataButton component', () => {
 
     await waitFor(() => {
       fireEvent.click(screen.getByText('Refresh off'));
-      expect(screen.getByText(refreshDataIntervalMap[1].key)).toBeInTheDocument();
+      expect(screen.getByText(refreshDataIntervalMap[1].label)).toBeInTheDocument();
     });
   });
 
@@ -37,30 +37,29 @@ describe('SkUpdateDataButton component', () => {
         <SkUpdateDataButton
           onRefreshIntervalSelected={onRefreshIntervalSelectedMock}
           onClick={revalidateLiveQueriesMock}
-          refreshIntervalDefault={'15s'}
         />
       </Wrapper>
     );
 
-    fireEvent.click(screen.getByText(refreshDataIntervalMap[1].key));
-    fireEvent.click(screen.getByText(refreshDataIntervalMap[2].key));
+    fireEvent.click(screen.getByText(refreshDataIntervalMap[0].label));
+    fireEvent.click(screen.getByText(refreshDataIntervalMap[2].label));
 
     await waitFor(() => {
       // call the first one and the one inside the setInterval
-      expect(revalidateLiveQueriesMock).toHaveBeenCalledTimes(2);
-      expect(onRefreshIntervalSelectedMock).toHaveBeenCalledWith(refreshDataIntervalMap[2].value);
+      expect(revalidateLiveQueriesMock).toHaveBeenCalledTimes(1);
+      expect(onRefreshIntervalSelectedMock).toHaveBeenCalledWith(Number(refreshDataIntervalMap[2].id));
     });
   });
 
   it('should calls functions on refresh interval selection', async () => {
     const revalidateLiveQueriesMock = jest.fn();
     render(
       <Wrapper>
-        <SkUpdateDataButton onClick={revalidateLiveQueriesMock} refreshIntervalDefault={'15s'} />
+        <SkUpdateDataButton onClick={revalidateLiveQueriesMock} refreshIntervalDefault={'15'} />
       </Wrapper>
     );
 
     fireEvent.click(screen.getByTestId('update-data-click'));
-    await waitFor(() => expect(revalidateLiveQueriesMock).toHaveBeenCalledTimes(2));
+    await waitFor(() => expect(revalidateLiveQueriesMock).toHaveBeenCalledTimes(1));
   });
 });