@centreon/ui 24.4.1-MON-34691-improve-code-coverage.26 → 24.4.1-MON-23368-containers.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34691-improve-code-coverage.26",
+  "version": "24.4.1-MON-23368-containers.68",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -28,7 +28,6 @@
   "author": {
     "name": "centreon@centreon.com"
   },
-  "baseCodeCoveragePercentage": 60,
   "license": "GPL-2.0",
   "bugs": {
     "url": "https://github.com/centreon/centreon/issues"
@@ -48,11 +47,11 @@
     "test/*"
   ],
   "devDependencies": {
-    "@cypress/react": "^7.0.2",
-    "@cypress/webpack-dev-server": "^3.2.3",
+    "@cypress/react": "^8.0.0",
+    "@cypress/webpack-dev-server": "^3.7.3",
     "@faker-js/faker": "^8.0.2",
-    "@mdx-js/react": "^2.1.4",
-    "@simonsmith/cypress-image-snapshot": "^6.1.0",
+    "@mdx-js/react": "^3.0.0",
+    "@simonsmith/cypress-image-snapshot": "^9.0.1",
     "@storybook/addon-a11y": "^7.0.9",
     "@storybook/addon-docs": "^7.0.9",
     "@storybook/addon-essentials": "^7.0.9",
@@ -73,16 +72,15 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/cypress": "^1.1.3",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^29.5.11",
     "@types/mocha": "^10.0.6",
-    "@types/ramda": "^0.29.6",
-    "@types/react": "^18.0.26",
-    "@types/testing-library__jest-dom": "^5.14.6",
+    "@types/ramda": "^0.29.9",
+    "@types/react": "^18.2.48",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
-    "axios-mock-adapter": "^1.21.4",
-    "cypress": "^13.3.1",
+    "axios-mock-adapter": "^1.22.0",
+    "cypress": "^13.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -93,27 +91,26 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "remark-gfm": "^3.0.1",
-    "sass": "^1.62.1",
     "speed-measure-vite-plugin": "^0.1.2",
-    "storybook": "^7.0.9",
+    "storybook": "^7.6.8",
     "storybook-addon-mock": "^4.0.0",
-    "storybook-dark-mode": "^3.0.0",
+    "storybook-dark-mode": "^3.0.3",
     "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-plugin-turbosnap": "^1.0.2"
+    "vite-plugin-turbosnap": "^1.0.3"
   },
   "dependencies": {
-    "@lexical/html": "^0.12.2",
-    "@lexical/link": "^0.12.2",
-    "@lexical/list": "^0.12.2",
-    "@lexical/react": "^0.12.2",
-    "@lexical/rich-text": "^0.12.2",
-    "@lexical/selection": "^0.12.2",
-    "@lexical/utils": "^0.12.2",
+    "@lexical/html": "^0.12.6",
+    "@lexical/link": "^0.12.6",
+    "@lexical/list": "^0.12.6",
+    "@lexical/react": "^0.12.6",
+    "@lexical/rich-text": "^0.12.6",
+    "@lexical/selection": "^0.12.6",
+    "@lexical/utils": "^0.12.6",
     "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
@@ -123,9 +120,9 @@
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
-    "d3-array": "3.2.0",
+    "d3-array": "3.2.4",
     "humanize-duration": "^3.27.3",
-    "lexical": "^0.12.2",
+    "lexical": "^0.12.6",
     "notistack": "^3.0.1",
     "ramda": "0.29.1",
     "react-grid-layout": "^1.3.4",

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -46,7 +46,10 @@ const CheckboxGroup = ({
       return;
     }
 
-    setFieldValue(fieldName, value?.filter((elm) => !equals(elm, label)));
+    setFieldValue(
+      fieldName,
+      value?.filter((elm) => !equals(elm, label))
+    );
   };
 
   return useMemoComponent({

package/src/Graph/Gauge/Gauge.tsx

@@ -5,7 +5,7 @@ import { Metric } from '../common/timeSeries/models';
 
 import ResponsiveGauge from './ResponsiveGauge';
 
-export interface Props {
+interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box, Typography } from '@mui/material';
 
+import EllipsisTypography from '../../Typography/EllipsisTypography';
+
 import heatMapData from './HeatMapData.json';
 
 import { HeatMap } from '.';
@@ -20,6 +22,29 @@ const meta: Meta<typeof HeatMap<Data>> = {
 export default meta;
 type Story = StoryObj<typeof HeatMap<Data>>;
 
+const TileContent = ({
+  isSmallestSize,
+  data
+}: {
+  data: Data;
+  isSmallestSize: boolean;
+}): JSX.Element | false =>
+  !isSmallestSize && (
+    <Box
+      sx={{
+        alignItems: 'center',
+        color: 'common.black',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%'
+      }}
+    >
+      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
+    </Box>
+  );
+
 const TooltipContent = ({ data }: { data: Data }): JSX.Element => {
   return (
     <Box sx={{ backgroundColor: 'common.white', color: 'common.black' }}>

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -40,7 +40,7 @@ const ResponsiveHeatMap = <TData,>({
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
 
-    if (lt(width, 680) && gt(maxTotalTilesWidth, width) && !tileSizeFixed) {
+    if (lt(width, 680) && gt(maxTotalTilesWidth, width)) {
       return smallestTileSize;
     }
 
@@ -66,19 +66,13 @@ const ResponsiveHeatMap = <TData,>({
       }}
     >
       {tiles.map(({ backgroundColor, id, data }) => (
-        <Box
-          className={classes.heatMapTile}
-          data-testid={id}
-          key={id}
-          sx={{ backgroundColor }}
-        >
+        <Box className={classes.heatMapTile} key={id} sx={{ backgroundColor }}>
           <Tooltip
             hasCaret
             classes={{
               arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
               tooltip: classes.heatMapTooltip
             }}
-            data-testid={`tooltip-${data?.id}`}
             followCursor={false}
             label={
               displayTooltipCondition?.(data) &&

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -130,11 +130,10 @@ const WrapperThresholdLines = ({
 
   return (
     <g>
-      {filteredThresholdLines.map(
-        (element) =>
-          element?.map(({ Component, props, key }) => (
-            <Component {...props} id={key} key={key} />
-          ))
+      {filteredThresholdLines.map((element) =>
+        element?.map(({ Component, props, key }) => (
+          <Component {...props} id={key} key={key} />
+        ))
       )}
     </g>
   );

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,8 +43,9 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${event.contact
-    ?.name})`;
+  const content = `${truncate(event.content)} (${t(labelBy)} ${
+    event.contact?.name
+  })`;
 
   return (
     <g>

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -8,7 +8,7 @@ interface MakeStylesProps {
 
 export const legendWidth = 21;
 const legendItemHeight = 5.25;
-const legendItemHeightCompact = 2;
+const legendItemHeightCompact = 1.75;
 
 export const useStyles = makeStyles<MakeStylesProps>()(
   (theme, { limitLegendRows }) => ({

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -38,7 +38,7 @@ const LegendHeader = ({
 
   const getEndText = (): string => {
     if (value) {
-      return value;
+      return `${value}${hasUnit ? ` ${unit}` : ''}`;
     }
 
     return hasUnit ? ` ${unitName}` : '';

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -5,7 +5,7 @@ import { equals, find, isNil } from 'ramda';
 
 import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
-  formatMetricValueWithUnit,
+  formatMetricValue,
   getLineForMetric,
   getMetrics,
   getTimeValue
@@ -73,7 +73,7 @@ const useInteractiveValues = ({
       metric_id
     }) as Line;
 
-    const formattedValue = formatMetricValueWithUnit({
+    const formattedValue = formatMetricValue({
       base,
       unit,
       value

package/src/Graph/LineChart/index.tsx

@@ -78,7 +78,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
+      style={{ height: '100%', width: '100%' }}
     >
       <ParentSize>
         {({

package/src/Graph/Text/Text.tsx

@@ -11,7 +11,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 
 import { useTextStyles } from './Text.styles';
 
-export interface Props {
+interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

package/src/Graph/common/timeSeries/index.ts

@@ -476,7 +476,15 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
-const getBase1024 = ({ unit, base }): boolean => {
+const formatMetricValue = ({
+  value,
+  unit,
+  base = 1000
+}: FormatMetricValueProps): string | null => {
+  if (isNil(value)) {
+    return null;
+  }
+
   const base2Units = [
     'B',
     'bytes',
@@ -489,19 +497,7 @@ const getBase1024 = ({ unit, base }): boolean => {
     'b'
   ];
 
-  return base2Units.includes(unit) || Number(base) === 1024;
-};
-
-const formatMetricValue = ({
-  value,
-  unit,
-  base = 1000
-}: FormatMetricValueProps): string | null => {
-  if (isNil(value)) {
-    return null;
-  }
-
-  const base1024 = getBase1024({ base, unit });
+  const base1024 = base2Units.includes(unit) || Number(base) === 1024;
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
@@ -529,8 +525,6 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
-  const base1024 = getBase1024({ base, unit });
-
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -543,9 +537,7 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return base1024 || !unit || equals(unit, 'ms')
-    ? formattedMetricValue
-    : `${formattedMetricValue} ${unit}`;
+  return formattedMetricValue;
 };
 
 const getStackedYScale = ({

package/src/Graph/index.ts

@@ -2,5 +2,4 @@ export { default as LineChart } from './LineChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
-
 export { HeatMap } from './HeatMap';

package/src/Graph/Gauge/Gauge.cypress.spec.tsx

@@ -1,102 +0,0 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-
-import { Props, Gauge } from './Gauge';
-
-const initialize = (
-  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
-): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <Gauge
-          baseColor="#000"
-          data={dataLastWeek}
-          labels={{
-            critical: 'Critical',
-            warning: 'Warning'
-          }}
-          {...args}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Gauge', () => {
-  it('does not display the gauge when there is no data', () => {
-    initialize({ data: undefined, thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('not.exist');
-  });
-
-  it('displays the gauge as success when corresponding thresholds are set', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
-    cy.findByTestId('1.1500000000000001-arc').should('be.visible');
-    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the gauge as warning when corresponding thresholds are set', () => {
-    initialize({ thresholds: warningThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
-    cy.findByTestId('1.25-arc').should('be.visible');
-    cy.findByTestId('0.15000000000000013-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the gauge as critical when corresponding thresholds are set', () => {
-    initialize({ thresholds: criticalThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
-    cy.findByTestId('0.6399999999999999-arc').should('be.visible');
-    cy.findByTestId('0.54-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays ranged thresholds', () => {
-    initialize({ thresholds: rangedThresholds });
-
-    cy.findByTestId('0.37-arc').should('be.visible');
-    cy.findByTestId('0.09999999999999998-arc').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the threshold tooltip when a threshold is hovered', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.findByTestId('1.1500000000000001-arc').trigger('mouseover', {
-      force: true
-    });
-
-    cy.contains('Warning').should('be.visible');
-
-    cy.findByTestId('0.15000000000000013-arc').trigger('mouseover', {
-      force: true
-    });
-
-    cy.contains('Critical').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the value as raw when the prop is set', () => {
-    initialize({ displayAsRaw: true, thresholds: successThresholds });
-
-    cy.contains('0.40663333333 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Graph/HeatMap/HeatMap.cypress.spec.tsx

@@ -1,145 +0,0 @@
-import { pluck } from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import EllipsisTypography from '../../Typography/EllipsisTypography';
-
-import HeatMap from './HeatMap';
-import heatMapData from './HeatMapData.json';
-import { HeatMapProps } from './model';
-
-const dataIds = pluck('id', heatMapData);
-
-interface Data {
-  counter: number;
-  host: string;
-  service: string;
-}
-
-const TileContent = ({
-  isSmallestSize,
-  data
-}: {
-  data: Data;
-  isSmallestSize: boolean;
-}): JSX.Element | false =>
-  !isSmallestSize && (
-    <Box
-      sx={{
-        alignItems: 'center',
-        color: 'common.black',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%'
-      }}
-    >
-      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
-      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
-    </Box>
-  );
-
-const initialize = ({
-  width = '100vw',
-  height = '100vh',
-  ...args
-}: Omit<HeatMapProps<Data>, 'tiles' | 'children'> & {
-  height?: string;
-  width?: string;
-}): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height, width }}>
-        <HeatMap tiles={heatMapData} {...args}>
-          {TileContent}
-        </HeatMap>
-      </div>
-    )
-  });
-};
-
-describe('HeatMap', () => {
-  it('displays tiles', () => {
-    initialize({});
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('be.visible');
-    });
-  });
-
-  it('does not display the tooltip when the prop is not set and the tile is hovered', () => {
-    initialize({});
-
-    cy.findByTestId(dataIds[0]).trigger('mouseover');
-
-    cy.findByTestId(`tooltip-${dataIds[0]}`).should('not.exist');
-  });
-
-  it('displays the tooltip when the prop is set and the tile is hovered', () => {
-    initialize({
-      tooltipContent: ({ data }) => (
-        <Typography>
-          This is the tooltip for {data.host}-{data.service}-{data.counter}
-        </Typography>
-      )
-    });
-
-    cy.findByTestId(dataIds[0]).trigger('mouseover');
-
-    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
-      'be.visible'
-    );
-  });
-
-  it('displays the tooltip conditionally when the prop is set and the tile is hovered', () => {
-    initialize({
-      displayTooltipCondition: ({ counter }) => counter > 100,
-      tooltipContent: ({ data }) => (
-        <Typography>
-          This is the tooltip for {data.host}-{data.service}-{data.counter}
-        </Typography>
-      )
-    });
-
-    cy.findByTestId(dataIds[0]).trigger('mouseover');
-
-    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
-      'not.exist'
-    );
-
-    cy.findByTestId(dataIds[1]).trigger('mouseover');
-
-    cy.contains(`This is the tooltip for Server-Service Counter-779`).should(
-      'be.visible'
-    );
-  });
-
-  it('displays tiles with fixed size', () => {
-    initialize({ height: '200px', tileSizeFixed: true, width: '590px' });
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('be.visible');
-    });
-  });
-
-  it('displays tiles as small when the container width is under the breakpoint', () => {
-    initialize({ height: '200px', width: '590px' });
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('be.visible');
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display tiles as small when the contains width is 0', () => {
-    initialize({ height: '200px', width: '0px' });
-    dataIds.forEach((id) => {
-      cy.findByTestId(id).should('not.exist');
-    });
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a single tile', () => {
-    initialize({ tiles: [heatMapData[0]] });
-    cy.findByTestId(dataIds[0]).should('be.visible');
-  });
-});

package/src/Graph/SingleBar/SingleBar.cypress.spec.tsx

@@ -1,121 +0,0 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-
-import SingleBar from './SingleBar';
-import { SingleBarProps } from './models';
-
-const initialize = (
-  args: Omit<SingleBarProps, 'data' | 'labels' | 'baseColor'>
-): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <SingleBar
-          baseColor="#000"
-          data={dataLastWeek}
-          labels={{
-            critical: 'Critical',
-            warning: 'Warning'
-          }}
-          {...args}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Single bar', () => {
-  it('displays the single bar as success when corresponding thresholds are set', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
-    cy.findByTestId('warning-line-0.5').should('be.visible');
-    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-1.5').should('be.visible');
-    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the single bar as warning when corresponding thresholds are set', () => {
-    initialize({ thresholds: warningThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
-    cy.findByTestId('warning-line-0.4').should('be.visible');
-    cy.findByTestId('warning-line-0.4-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-1.5').should('be.visible');
-    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the single bar as critical when corresponding thresholds are set', () => {
-    initialize({ thresholds: criticalThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
-    cy.findByTestId('warning-line-0.2').should('be.visible');
-    cy.findByTestId('warning-line-0.2-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-0.3').should('be.visible');
-    cy.findByTestId('critical-line-0.3-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays ranged thresholds', () => {
-    initialize({ thresholds: rangedThresholds });
-
-    cy.findByTestId('warning-line-0.13').should('be.visible');
-    cy.findByTestId('warning-line-0.13-tooltip').should('be.visible');
-    cy.findByTestId('warning-line-0.5').should('be.visible');
-    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-0.55').should('be.visible');
-    cy.findByTestId('critical-line-0.55-tooltip').should('be.visible');
-    cy.findByTestId('critical-line-0.65').should('be.visible');
-    cy.findByTestId('critical-line-0.65-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the threshold tooltip when a threshold is hovered', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.findByTestId('warning-line-0.5-tooltip').trigger('mouseover');
-
-    cy.contains('Warning').should('be.visible');
-
-    cy.findByTestId('critical-line-1.5-tooltip').trigger('mouseover');
-
-    cy.contains('Critical').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays single bar as small when the props is set', () => {
-    initialize({ size: 'small', thresholds: successThresholds });
-
-    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the value as raw when the prop is set', () => {
-    initialize({ displayAsRaw: true, thresholds: successThresholds });
-
-    cy.contains('0.40663333333 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the value when the prop is set', () => {
-    initialize({ showLabels: false, thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Graph/Text/Text.cypress.spec.tsx

@@ -1,101 +0,0 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
-import {
-  criticalThresholds,
-  rangedThresholds,
-  successThresholds,
-  warningThresholds
-} from '../common/testUtils';
-
-import { Text, Props } from './Text';
-
-const initialize = (
-  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
-): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <Text
-          baseColor="#000"
-          data={dataLastWeek}
-          labels={{
-            critical: 'Critical',
-            warning: 'Warning'
-          }}
-          {...args}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Text', () => {
-  it('displays the text as success when corresponding thresholds are set', () => {
-    initialize({ thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(136, 185, 34)');
-    cy.contains('Warning: 0.5 s').should('be.visible');
-    cy.contains('Critical: 1.5 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the text as warning when corresponding thresholds are set', () => {
-    initialize({ thresholds: warningThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(253, 155, 39)');
-    cy.contains('Warning: 0.4 s').should('be.visible');
-    cy.contains('Critical: 1.5 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the text as critical when corresponding thresholds are set', () => {
-    initialize({ thresholds: criticalThresholds });
-
-    cy.contains('0.41 s').should('have.css', 'color', 'rgb(255, 74, 74)');
-    cy.contains('Warning: 0.2 s').should('be.visible');
-    cy.contains('Critical: 0.3 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays ranged thresholds', () => {
-    initialize({ thresholds: rangedThresholds });
-
-    cy.contains('Warning: 0.13 s - 0.5 s').should('be.visible');
-    cy.contains('Critical: 0.55 s - 0.65 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the value as raw when the prop is set', () => {
-    initialize({ displayAsRaw: true, thresholds: successThresholds });
-
-    cy.contains('0.40663333333 s').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('does not display the text', () => {
-    initialize({ data: undefined, thresholds: successThresholds });
-
-    cy.contains('0.41 s').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays text with default values when the data is empty', () => {
-    initialize({
-      data: {
-        global: {},
-        metrics: [],
-        times: []
-      },
-      thresholds: successThresholds
-    });
-
-    cy.contains('0').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});

package/src/Graph/common/testUtils.ts

@@ -1,71 +0,0 @@
-export const successThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 1.5
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.5
-    }
-  ]
-};
-
-export const warningThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 1.5
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.4
-    }
-  ]
-};
-
-export const criticalThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 0.3
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.2
-    }
-  ]
-};
-
-export const rangedThresholds = {
-  critical: [
-    {
-      label: 'Critical',
-      value: 0.55
-    },
-    {
-      label: 'Critical',
-      value: 0.65
-    }
-  ],
-  enabled: true,
-  warning: [
-    {
-      label: 'Warning',
-      value: 0.13
-    },
-    {
-      label: 'Warning',
-      value: 0.5
-    }
-  ]
-};