Merge pull request #465 from bartoval/refactor_metric_filters

Refactor metric filters

__tests__/core/SkBiFlowDetails.spec.tsx

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/react';
+import { Server } from 'miragejs';
+
+import { Protocols } from '@API/REST.enum';
+import { getTestsIds } from '@config/testIds';
+import { BiFlowLabels } from '@core/components/SkBiFlowDetails/BiFlow.enum';
+
+import biFlowData from '../../mocks/data/FLOW_PAIRS.json';
+import { loadMockServer } from '../../mocks/server';
+import SkBiFlowDetails from '../../src/core/components/SkBiFlowDetails';
+import { Wrapper } from '../../src/core/components/Wrapper';
+import { BiFlowResponse } from '../../src/types/REST.interfaces';
+
+describe('BiFlowDetails component', () => {
+  let server: Server;
+
+  beforeEach(() => {
+    server = loadMockServer() as Server;
+    server.logging = false;
+  });
+
+  afterEach(() => {
+    server.shutdown();
+    jest.clearAllMocks();
+  });
+
+  it('should render the http/2 Open Request', () => {
+    render(
+      <Wrapper>
+        <SkBiFlowDetails biflow={biFlowData.results[0] as BiFlowResponse} />
+      </Wrapper>
+    );
+
+    expect(screen.getByTestId(getTestsIds.biFlowView(biFlowData.results[0].identity))).toBeInTheDocument();
+    expect(screen.getByText(BiFlowLabels.Terminated)).toBeInTheDocument();
+    expect(screen.getByText(biFlowData.results[0].protocol)).toHaveTextContent(Protocols.Http2);
+    expect(screen.getByText(BiFlowLabels.Method)).toBeInTheDocument();
+    expect(screen.getByText(BiFlowLabels.Status)).toBeInTheDocument();
+    expect(screen.queryByText(BiFlowLabels.Host)).not.toBeInTheDocument();
+    expect(screen.queryByText(BiFlowLabels.ProxyHost)).not.toBeInTheDocument();
+  });
+
+  it('should render a Terminated Connection', () => {
+    render(
+      <Wrapper>
+        <SkBiFlowDetails biflow={biFlowData.results[4] as BiFlowResponse} />
+      </Wrapper>
+    );
+
+    expect(screen.getByText(BiFlowLabels.Closed)).toBeInTheDocument();
+    expect(screen.getByText(biFlowData.results[4].protocol)).toHaveTextContent(Protocols.Tcp);
+    expect(screen.getByText(BiFlowLabels.Trace)).toBeInTheDocument();
+    expect(screen.getByText(BiFlowLabels.Duration)).toBeInTheDocument();
+    expect(screen.getAllByText(BiFlowLabels.Host)[0]).toBeInTheDocument();
+    expect(screen.getByText(BiFlowLabels.ProxyHost)).toBeInTheDocument();
+  });
+
+  it('should render an Open Connection', () => {
+    render(
+      <Wrapper>
+        <SkBiFlowDetails biflow={biFlowData.results[3] as BiFlowResponse} />
+      </Wrapper>
+    );
+
+    expect(screen.getByText(BiFlowLabels.Open)).toBeInTheDocument();
+    expect(screen.getByText(biFlowData.results[3].protocol)).toHaveTextContent(Protocols.Tcp);
+    expect(screen.getByText(BiFlowLabels.Trace)).toBeInTheDocument();
+    expect(screen.getAllByText(BiFlowLabels.Host)[0]).toBeInTheDocument();
+    expect(screen.getByText(BiFlowLabels.ProxyHost)).toBeInTheDocument();
+    expect(screen.queryByText(BiFlowLabels.Duration)).not.toBeInTheDocument();
+  });
+});

__tests__/core/SkDurationCell.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+
+import SkDurationCell from '../../src/core/components/SKDurationCell';
+import { formatLatency } from '../../src/core/utils/formatLatency';
+
+jest.mock('@core/utils/formatLatency', () => ({
+  formatLatency: jest.fn()
+}));
+
+describe('SkDurationCell', () => {
+  it('renders the formatted duration when value is provided', () => {
+    const value = 123456; // microseconds
+    const formattedLatency = '123 ms';
+
+    (formatLatency as jest.Mock).mockReturnValue(formattedLatency);
+
+    render(<SkDurationCell value={value} data={{}} />);
+
+    expect(formatLatency).toHaveBeenCalledWith(value);
+    expect(screen.getByText(formattedLatency)).toBeInTheDocument();
+  });
+
+  it('renders null when value is falsy', () => {
+    const { container } = render(<SkDurationCell value={null} data={{}} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

__tests__/core/SkSelectTypeHeadWithCheckboxUseData.spec.ts

@@ -70,23 +70,20 @@ describe('SkSelectTypeHeadWithCheckboxUseData', () => {
       result.current.toggleServiceMenu();
     });
 
-    // Simulate ArrowDown key press (focus first option)
     act(() => {
       result.current.handleMenuArrowKeys('ArrowDown');
     });
 
     expect(result.current.focusedItemIndex).toBe(0);
     expect(result.current.activeItem).toBe('select-multi-typeahead-checkbox-1');
 
-    // Simulate another ArrowDown key press (focus second enabled option)
     act(() => {
       result.current.handleMenuArrowKeys('ArrowDown');
     });
 
     expect(result.current.focusedItemIndex).toBe(1);
     expect(result.current.activeItem).toBe('select-multi-typeahead-checkbox-2');
 
-    // Simulate ArrowUp key press (wrap around to last option)
     act(() => {
       result.current.handleMenuArrowKeys('ArrowUp');
     });
@@ -100,26 +97,21 @@ describe('SkSelectTypeHeadWithCheckboxUseData', () => {
       SkSelectTypeHeadWithCheckboxUseData({ initIdsSelected: [], initOptions, onSelected: mockOnSelected })
     );
 
-    // Simulate Enter key press (open menu)
     act(() => {
       result.current.onInputKeyDown({ key: 'Enter' });
     });
     expect(result.current.isOpen).toBe(true);
 
-    // Simulate Tab key press (close menu)
     act(() => {
       result.current.onInputKeyDown({ key: 'Tab' });
     });
     expect(result.current.isOpen).toBe(false);
 
-    // Simulate Escape key press (close menu)
     act(() => {
       result.current.onInputKeyDown({ key: 'Escape' });
     });
     expect(result.current.isOpen).toBe(false);
 
-    // Simulate ArrowDown key press (focus first option)
-
     act(() => {
       result.current.toggleServiceMenu();
     });
@@ -130,14 +122,12 @@ describe('SkSelectTypeHeadWithCheckboxUseData', () => {
     expect(result.current.focusedItemIndex).toBe(0);
     expect(result.current.activeItem).toBe('select-multi-typeahead-checkbox-1');
 
-    // Simulate ArrowUp key press (wrap around to last option)
     act(() => {
       result.current.onInputKeyDown({ key: 'ArrowUp' });
     });
     expect(result.current.focusedItemIndex).toBe(2);
     expect(result.current.activeItem).toBe('select-multi-typeahead-checkbox-3');
 
-    // Simulate Enter key press (select focused option)
     act(() => {
       result.current.onInputKeyDown({ key: 'Enter' });
     });

__tests__/core/SkTimeRangeFilter.spec.tsx

@@ -9,7 +9,7 @@ describe('SkTimeRangeFilter', () => {
     const mockHandleToggle = jest.fn();
     render(<SkTimeRangeFilter duration={defaultTimeInterval.seconds} onSelectTimeInterval={mockHandleToggle} />);
 
-    await eventUser.click(screen.getByTestId('sk-time-range-filter-type'));
+    await eventUser.click(screen.getByText(timeIntervalMap.oneMinute.label));
     await eventUser.click(screen.getByText(timeIntervalMap.fiveMinutes.label));
 
     expect(mockHandleToggle).toHaveBeenCalledTimes(1);