test(General): ✅ Increment code coverage

src/API/Prometheus.interfaces.ts

@@ -7,7 +7,7 @@ type PrometheusApiResultValue = [number, `${number}` | 'NaN'];
 
 export interface PrometheusResponse<T> {
   data: {
-    result: T;
+    result: T | [];
   };
 }
 

src/core/components/HighlightValueCell/__tests__/HighLightValueCell.spec.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { VarColors } from '@config/colors';
+
+import HighlightValueCell from './../index';
+
+describe('HighlightValueCell', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render without highlighting when value is not updated', () => {
+    const data = { id: 1, name: 'Test' };
+    const value = 42;
+    const format = jest.fn((val) => val);
+
+    const useRefSpy = jest.spyOn(React, 'useRef');
+    useRefSpy.mockReturnValue({ current: value });
+
+    const { getByText, queryByTestId } = render(<HighlightValueCell data={data} value={value} format={format} />);
+
+    expect(getByText('42')).toBeInTheDocument();
+    expect(format).toHaveBeenCalledWith(value);
+    expect(queryByTestId('highlighted-value')).not.toBeInTheDocument();
+  });
+
+  it('should render with highlighting when value is updated', () => {
+    const data = { id: 1, name: 'Test' };
+    const value = 42;
+    const newValue = 50;
+    const format = jest.fn((val) => val);
+
+    const useRefSpy = jest.spyOn(React, 'useRef');
+    useRefSpy.mockReturnValue({ current: value });
+
+    const { getByText, getByTestId } = render(<HighlightValueCell data={data} value={newValue} format={format} />);
+
+    expect(getByText('50')).toBeInTheDocument();
+    expect(format).toHaveBeenCalledWith(newValue);
+    expect(getByTestId('highlighted-value')).toBeInTheDocument();
+    expect(getByTestId('highlighted-value')).toHaveStyle(`color: ${VarColors.Green500}; font-weight: 900;`);
+  });
+});

src/core/components/HighlightValueCell/index.tsx

@@ -25,6 +25,7 @@ const HighlightValueCell = function <T>({ value, format }: HighlightValueCellPro
 
   return isValueUpdated() ? (
     <div
+      data-testid="highlighted-value"
       style={{
         fontWeight: 900,
         color: VarColors.Green500

src/core/components/LinkCell/LinkCell.interfaces.ts

@@ -1,6 +1,6 @@
 export interface LinkCellProps<T> {
   data: T;
-  value: string;
+  value: string | undefined;
   link: string;
   isDisabled?: boolean;
   type?: 'process' | 'site' | 'component' | 'service';

src/core/components/LinkCell/__tests__/LinkCell.spec.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+
+import { Wrapper } from '@core/components/Wrapper';
+
+import LinkCell from '../index';
+
+describe('LinkCell', () => {
+  const data = { id: 1, name: 'Test' };
+
+  it('should render a disabled cell with Truncate for non-empty value', () => {
+    render(<LinkCell data={data} value="Long text" isDisabled={true} link="/some-link" />);
+    const truncateElement = screen.getByText('Long text');
+    expect(truncateElement).toBeInTheDocument();
+  });
+
+  it('should render a non-disabled cell with Link for non-empty value', () => {
+    render(
+      <Wrapper>
+        <LinkCell data={data} value="Long text" link="/some-link" />
+      </Wrapper>
+    );
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', '#/some-link');
+  });
+
+  it('should render an empty cell', () => {
+    render(<LinkCell data={data} value="" link="/some-link" />);
+    const emptyElement = screen.getByText("''");
+    expect(emptyElement).toBeInTheDocument();
+  });
+
+  it('should render a non-disabled cell with fitContent', () => {
+    render(
+      <Wrapper>
+        <LinkCell data={data} value="Long text" link="/some-link" fitContent={true} />
+      </Wrapper>
+    );
+    const textElement = screen.getByText('Long text');
+    expect(textElement).toBeInTheDocument();
+  });
+
+  it('should handle non-string values', () => {
+    render(<LinkCell data={data} value={undefined} link="/some-link" />);
+    const emptyElement = screen.getByText("''");
+    expect(emptyElement).toBeInTheDocument();
+  });
+});

src/core/components/LinkCell/index.tsx

@@ -5,29 +5,44 @@ import ResourceIcon from '@core/components/ResourceIcon';
 
 import { LinkCellProps } from './LinkCell.interfaces';
 
-const LinkCell = function <T>({ value, link, type, isDisabled = false, fitContent }: LinkCellProps<T>) {
+// Renders the value of the cell, either truncated or not depending on the fitContent prop
+function renderValue(value: string, isDisabled: boolean, fitContent: boolean) {
+  if (isDisabled) {
+    return (
+      <Truncate content={value} position={'middle'}>
+        {value}
+      </Truncate>
+    );
+  }
+
+  return fitContent ? (
+    value
+  ) : (
+    <Truncate content={value} position={'middle'}>
+      {value}
+    </Truncate>
+  );
+}
+
+// A cell that contains a link to another page
+const LinkCell = function <T>({ value, link, type, isDisabled = false, fitContent = false }: LinkCellProps<T>) {
+  // If there is no value, display an empty string
   if (!value) {
-    return '';
+    return <span>''</span>;
   }
 
+  const stringValue = value.toString();
+
   return (
     <div style={{ display: 'flex' }}>
+      {/* If a type is provided, display a corresponding icon */}
       {type && <ResourceIcon type={type} />}
-      {isDisabled && (
-        <Truncate content={value.toString()} position={'middle'}>
-          {value}
-        </Truncate>
-      )}
-      {!isDisabled && (
-        <Link to={link}>
-          {fitContent ? (
-            value
-          ) : (
-            <Truncate content={value.toString()} position={'middle'}>
-              {value}
-            </Truncate>
-          )}
-        </Link>
+      {/* If the cell is disabled, render the value without a link */}
+      {isDisabled ? (
+        renderValue(stringValue, isDisabled, fitContent)
+      ) : (
+        // Otherwise, render the value as a link
+        <Link to={link}>{renderValue(stringValue, isDisabled, fitContent)}</Link>
       )}
     </div>
   );

src/core/components/SKSanckeyChart/SankeyFilter.tsx

@@ -13,36 +13,8 @@ import {
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 
-interface FilterValues {
-  [key: string]: string | undefined;
-}
-
-export const sankeyMetricOptions = [
-  { id: 'none', name: 'Display only relationships' },
-  { id: 'byterate', name: 'Compare avg. byterate (last hour)' }
-];
-
-export const ServiceClientResourceOptions: { name: string; id: 'client' | 'clientSite' }[] = [
-  {
-    name: 'Client sites',
-    id: 'clientSite'
-  },
-  {
-    name: 'Client processes',
-    id: 'client'
-  }
-];
-
-export const ServiceServerResourceOptions: { name: string; id: 'server' | 'serverSite' }[] = [
-  {
-    name: 'Server sites',
-    id: 'serverSite'
-  },
-  {
-    name: 'Server processes',
-    id: 'server'
-  }
-];
+import { ServiceClientResourceOptions, ServiceServerResourceOptions, sankeyMetricOptions } from './SkSankey.constants';
+import { SankeyFilterValues } from './SkSankeyChart.interfaces';
 
 const SankeyFilter: FC<{ onSearch?: Function }> = memo(({ onSearch }) => {
   const [isClientExpanded, setIsClientExpanded] = useState(false);
@@ -55,21 +27,21 @@ const SankeyFilter: FC<{ onSearch?: Function }> = memo(({ onSearch }) => {
   const [visibleMetrics, setVisibleMetrics] = useState(sankeyMetricOptions[0].id);
 
   const handleSelectClient = (_?: ReactMouseEvent<Element, MouseEvent>, selected?: string | number) => {
-    const selection = selected as keyof FilterValues;
+    const selection = selected as keyof SankeyFilterValues;
 
     setClientType(selection as 'client' | 'clientSite');
     setIsClientExpanded(false);
   };
 
   const handleSelectServer = (_?: ReactMouseEvent<Element, MouseEvent>, selected?: string | number) => {
-    const selection = selected as keyof FilterValues;
+    const selection = selected as keyof SankeyFilterValues;
 
     setServerType(selection as 'server' | 'serverSite');
     setIsServerExpanded(false);
   };
 
   const handleMetricSelect = (_?: ReactMouseEvent<Element, MouseEvent>, selected?: string | number) => {
-    const selection = selected as keyof FilterValues;
+    const selection = selected as keyof SankeyFilterValues;
 
     setVisibleMetrics(selection as string);
     setIsMetricExpanded(false);
@@ -185,7 +157,7 @@ const SankeyFilter: FC<{ onSearch?: Function }> = memo(({ onSearch }) => {
   );
 
   return (
-    <Toolbar collapseListedFiltersBreakpoint="xl">
+    <Toolbar data-testid="sankey-filter" collapseListedFiltersBreakpoint="xl">
       <ToolbarContent>{toolbarItems}</ToolbarContent>
     </Toolbar>
   );

src/core/components/SKSanckeyChart/SkSankey.constants.ts

@@ -0,0 +1,55 @@
+import { VarColors } from '@config/colors';
+import { DEFAULT_FONT_VAR } from '@config/config';
+
+import { Themes } from './SkSankeyChart.interfaces';
+
+// Constants
+export const DEFAULT_SANKEY_CHART_FLOW_VALUE = 0.000001;
+export const DEFAULT_SANKEY_CHART_HEIGHT = '350px';
+
+// Themes
+const commonStyle = {
+  fontSize: 14,
+  fontFamily: DEFAULT_FONT_VAR,
+  tooltip: { container: { color: VarColors.Black900 } }
+};
+
+export const themeStyle: Themes = {
+  dark: {
+    ...commonStyle,
+    labelTextColor: VarColors.White
+  },
+
+  light: {
+    ...commonStyle,
+    labelTextColor: VarColors.Black900
+  }
+};
+
+//Filters
+export const sankeyMetricOptions = [
+  { id: 'none', name: 'Display only relationships' },
+  { id: 'byterate', name: 'Compare avg. byterate (last hour)' }
+];
+
+export const ServiceClientResourceOptions: { name: string; id: 'client' | 'clientSite' }[] = [
+  {
+    name: 'Client sites',
+    id: 'clientSite'
+  },
+  {
+    name: 'Client processes',
+    id: 'client'
+  }
+];
+
+export const ServiceServerResourceOptions: { name: string; id: 'server' | 'serverSite' }[] = [
+  {
+    name: 'Server sites',
+    id: 'serverSite'
+  },
+  {
+    name: 'Server processes',
+    id: 'server'
+  }
+];

src/core/components/SKSanckeyChart/SkSankeyChart.interfaces.ts

@@ -0,0 +1,32 @@
+import { VarColors } from '@config/colors';
+
+export interface ThemesProps {
+  labelTextColor: VarColors;
+  fontFamily: string;
+  fontSize: number;
+  tooltip: { container: { color: string } };
+}
+
+export interface Themes {
+  [key: string]: ThemesProps;
+}
+
+export interface SkSankeyChartNode {
+  id: string;
+  nodeColor?: string;
+}
+
+interface SkSankeyChartLink {
+  source: string;
+  target: string;
+  value: number;
+}
+
+export interface SkSankeyChartProps {
+  nodes: SkSankeyChartNode[];
+  links: SkSankeyChartLink[];
+}
+
+export interface SankeyFilterValues {
+  [key: string]: string | undefined;
+}