@centreon/js-config 23.10.65 → 24.4.0

package/cypress/component/commands.tsx

@@ -1,158 +1,203 @@
-/* eslint-disable @typescript-eslint/no-namespace */
-import React from 'react';
-
-import { mount } from 'cypress/react18';
-import { equals, isNil } from 'ramda';
-
-import { Box, CssBaseline } from '@mui/material';
-
-import { ThemeProvider } from '@centreon/ui';
-
-import '@testing-library/cypress/add-commands';
-import 'cypress-msw-interceptor';
-
-import disableMotion from './disableCssTransitions';
-
-interface MountProps {
-  Component: React.ReactNode;
-  options?: object;
-}
-
-export enum Method {
-  DELETE = 'DELETE',
-  GET = 'GET',
-  PATCH = 'PATCH',
-  POST = 'POST',
-  PUT = 'PUT'
-}
-
-Cypress.Commands.add('mount', ({ Component, options = {} }) => {
-  const wrapped = (
-    <ThemeProvider>
-      <Box
-        sx={{
-          backgroundColor: 'background.paper',
-          height: '100%',
-          width: '100%'
-        }}
-      >
-        {Component}
-      </Box>
-      <CssBaseline />
-    </ThemeProvider>
-  );
-
-  return mount(wrapped, options);
-});
-
-interface Query {
-  name: string;
-  value: string;
-}
-
-export interface InterceptAPIRequestProps<T> {
-  alias: string;
-  method: Method;
-  path: string;
-  query?: Query;
-  response?: T | Array<T>;
-  statusCode?: number;
-}
-
-Cypress.Commands.add(
-  'interceptAPIRequest',
-  <T extends object>({
-    method,
-    path,
-    response,
-    alias,
-    query,
-    statusCode = 200
-  }: InterceptAPIRequestProps<T>): void => {
-    cy.interceptRequest(
-      method,
-      path.replace('./', '**'),
-      (req, res, ctx) => {
-        const getQuery = req?.url?.searchParams?.get(query?.name);
-        if (query && equals(query.value, getQuery)) {
-          return res(
-            ctx.delay(500),
-            ctx.json(response),
-            ctx.status(statusCode)
-          );
-        }
-        if (!getQuery && isNil(query)) {
-          return res(
-            ctx.delay(500),
-            ctx.json(response),
-            ctx.status(statusCode)
-          );
-        }
-
-        return null;
-      },
-      alias
-    );
-  }
-);
-
-Cypress.Commands.add('moveSortableElement', ({ element, direction }): void => {
-  const key = `{${direction}arrow}`;
-
-  element.type(' ', {
-    force: true,
-    scrollBehavior: false
-  });
-  element.eq(-1).type(key, {
-    scrollBehavior: false
-  });
-  element.eq(-1).type(' ', {
-    scrollBehavior: false
-  });
-});
-
-Cypress.Commands.add(
-  'moveSortableElementUsingAriaLabel',
-  ({ ariaLabel, direction }): void => {
-    const key = `{${direction}arrow}`;
-
-    cy.findByLabelText(ariaLabel).type(' ', {
-      force: true,
-      scrollBehavior: false
-    });
-    cy.findAllByLabelText(ariaLabel).eq(-1).type(key, {
-      scrollBehavior: false
-    });
-    cy.findAllByLabelText(ariaLabel).eq(-1).type(' ', {
-      scrollBehavior: false
-    });
-  }
-);
-
-Cypress.Commands.add('makeSnapshot', (title?: string) => {
-  cy.viewport(1280, 590);
-  cy.matchImageSnapshot(title);
-});
-
-Cypress.Commands.add('cssDisableMotion', (): void => {
-  Cypress.on('window:before:load', (cyWindow) => {
-    disableMotion(cyWindow);
-  });
-});
-
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      cssDisableMotion: () => Cypress.Chainable;
-      interceptAPIRequest: <T extends object>(
-        props: InterceptAPIRequestProps<T>
-      ) => Cypress.Chainable;
-      interceptRequest: (method, path, mock, alias) => Cypress.Chainable;
-      makeSnapshot: (title?: string) => void;
-      mount: ({ Component, options }: MountProps) => Cypress.Chainable;
-      moveSortableElement: ({ element, direction }) => void;
-      moveSortableElementUsingAriaLabel: ({ ariaLabel, direction }) => void;
-      waitForRequest: (alias) => Cypress.Chainable;
-    }
-  }
-}
+/* eslint-disable @typescript-eslint/no-namespace */
+import React from 'react';
+
+import { mount } from 'cypress/react18';
+import { equals, isNil } from 'ramda';
+
+import { Box, CssBaseline } from '@mui/material';
+
+import { ThemeProvider } from '@centreon/ui';
+
+import '@testing-library/cypress/add-commands';
+import 'cypress-msw-interceptor';
+import 'cypress-real-events';
+
+import disableMotion from './disableCssTransitions';
+
+interface MountProps {
+  Component: React.ReactNode;
+  options?: object;
+}
+interface Resolution {
+  height: number;
+  width: number;
+}
+
+interface MakeSnapshotWithCustomResolution {
+  resolution: Resolution;
+  title: string;
+}
+
+export enum Method {
+  DELETE = 'DELETE',
+  GET = 'GET',
+  PATCH = 'PATCH',
+  POST = 'POST',
+  PUT = 'PUT'
+}
+
+Cypress.Commands.add('mount', ({ Component, options = {} }) => {
+  const wrapped = (
+    <ThemeProvider>
+      <Box
+        sx={{
+          backgroundColor: 'background.paper',
+          height: '100%',
+          width: '100%'
+        }}
+      >
+        {Component}
+      </Box>
+      <CssBaseline />
+    </ThemeProvider>
+  );
+
+  return mount(wrapped, options);
+});
+
+interface Query {
+  name: string;
+  value: string;
+}
+
+export interface InterceptAPIRequestProps<T> {
+  alias: string;
+  delay?: number;
+  method: Method;
+  path: string;
+  query?: Query;
+  response?: T | Array<T>;
+  statusCode?: number;
+}
+
+Cypress.Commands.add(
+  'interceptAPIRequest',
+  <T extends object>({
+    method,
+    path,
+    response,
+    alias,
+    query,
+    statusCode = 200,
+    delay = 500
+  }: InterceptAPIRequestProps<T>): void => {
+    cy.interceptRequest(
+      method,
+      path.replace('./', '**'),
+      (req, res, ctx) => {
+        const getQuery = req?.url?.searchParams?.get(query?.name);
+        if (query && equals(query.value, getQuery)) {
+          return res(
+            ctx.delay(delay),
+            ctx.json(response),
+            ctx.status(statusCode)
+          );
+        }
+        if (!getQuery && isNil(query)) {
+          return res(
+            ctx.delay(delay),
+            ctx.json(response),
+            ctx.status(statusCode)
+          );
+        }
+
+        return null;
+      },
+      alias
+    );
+  }
+);
+
+interface MoveSortableElementProps {
+  direction: 'up' | 'down' | 'left' | 'right';
+  element: Cypress.Chainable<JQuery<HTMLElement>>;
+  times?: number;
+}
+
+Cypress.Commands.add(
+  'moveSortableElement',
+  ({ element, direction, times = 1 }: MoveSortableElementProps): void => {
+    const key = `{${direction}arrow}`;
+
+    element.type(' ', {
+      force: true,
+      scrollBehavior: false
+    });
+
+    Array.from({ length: times }).forEach(() => {
+      element.eq(-1).type(key, {
+        scrollBehavior: false
+      });
+    });
+    element.eq(-1).type(' ', {
+      scrollBehavior: false
+    });
+  }
+);
+
+Cypress.Commands.add(
+  'moveSortableElementUsingAriaLabel',
+  ({ ariaLabel, direction }): void => {
+    const key = `{${direction}arrow}`;
+
+    cy.findByLabelText(ariaLabel).type(' ', {
+      force: true,
+      scrollBehavior: false
+    });
+    cy.findAllByLabelText(ariaLabel).eq(-1).type(key, {
+      scrollBehavior: false
+    });
+    cy.findAllByLabelText(ariaLabel).eq(-1).type(' ', {
+      scrollBehavior: false
+    });
+  }
+);
+
+Cypress.Commands.add('adjustViewport', () => cy.viewport(1280, 590));
+
+Cypress.Commands.add('makeSnapshot', (title?: string) => {
+  cy.adjustViewport();
+  cy.matchImageSnapshot(title);
+});
+
+Cypress.Commands.add(
+  'makeSnapshotWithCustomResolution',
+  ({ title, resolution }: MakeSnapshotWithCustomResolution) => {
+    const { width, height } = resolution;
+    cy.viewport(width, height);
+    cy.matchImageSnapshot(title);
+  }
+);
+
+Cypress.Commands.add('cssDisableMotion', (): void => {
+  Cypress.on('window:before:load', (cyWindow) => {
+    disableMotion(cyWindow);
+  });
+});
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      adjustViewport: () => Cypress.Chainable;
+      cssDisableMotion: () => Cypress.Chainable;
+      getRequestCalls: (alias) => Cypress.Chainable;
+      interceptAPIRequest: <T extends object>(
+        props: InterceptAPIRequestProps<T>
+      ) => Cypress.Chainable;
+      interceptRequest: (method, path, mock, alias) => Cypress.Chainable;
+      makeSnapshot: (title?: string) => void;
+      makeSnapshotWithCustomResolution: ({
+        title,
+        resolution
+      }: MakeSnapshotWithCustomResolution) => Cypress.Chainable;
+      mount: ({ Component, options }: MountProps) => Cypress.Chainable;
+      moveSortableElement: ({
+        element,
+        direction,
+        times
+      }: MoveSortableElementProps) => void;
+      moveSortableElementUsingAriaLabel: ({ ariaLabel, direction }) => void;
+      waitForRequest: (alias) => Cypress.Chainable;
+    }
+  }
+}

package/cypress/component/configuration.js

@@ -1,54 +1,83 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { defineConfig } = require('cypress');
-const {
-  addMatchImageSnapshotPlugin
-} = require('@simonsmith/cypress-image-snapshot/plugin');
-
-module.exports = ({
-  webpackConfig,
-  cypressFolder,
-  specPattern,
-  env,
-  useVite = false,
-  excludeSpecPattern
-}) => {
-  const mainCypressFolder = cypressFolder || 'cypress';
-
-  return defineConfig({
-    component: {
-      devServer: {
-        bundler: useVite ? 'vite' : 'webpack',
-        framework: 'react',
-        webpackConfig
-      },
-      excludeSpecPattern,
-      setupNodeEvents: (on, config) => {
-        addMatchImageSnapshotPlugin(on, config);
-
-        on('before:browser:launch', (browser, launchOptions) => {
-          if (browser.name === 'chrome' && browser.isHeadless) {
-            launchOptions.args.push('--headless=new');
-          }
-
-          return launchOptions;
-        });
-      },
-      specPattern,
-      supportFile: `${mainCypressFolder}/support/component.tsx`
-    },
-    env: {
-      ...env,
-      baseUrl: 'http://localhost:9092'
-    },
-    reporter: 'mochawesome',
-    reporterOptions: {
-      html: false,
-      json: true,
-      overwrite: true,
-      reportDir: `${mainCypressFolder}/results`,
-      reportFilename: '[name]-report.json'
-    },
-    video: true,
-    videosFolder: `${mainCypressFolder}/results/videos`
-  });
-};
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { defineConfig } = require('cypress');
+const { devServer } = require('cypress-rspack-dev-server');
+const {
+  addMatchImageSnapshotPlugin
+} = require('@simonsmith/cypress-image-snapshot/plugin');
+const cypressCodeCoverageTask = require('@cypress/code-coverage/task');
+
+module.exports = ({
+  webpackConfig,
+  cypressFolder,
+  specPattern,
+  env,
+  useVite = false,
+  excludeSpecPattern
+}) => {
+  const mainCypressFolder = cypressFolder || 'cypress';
+
+  return defineConfig({
+    component: {
+      devServer: useVite
+        ? {
+            bundler: 'vite',
+            framework: 'react',
+            webpackConfig
+          }
+        : (devServerConfig) =>
+            devServer({
+              ...devServerConfig,
+              framework: 'react',
+              rspackConfig: webpackConfig
+            }),
+      excludeSpecPattern,
+      setupNodeEvents: (on, config) => {
+        addMatchImageSnapshotPlugin(on, config);
+
+        cypressCodeCoverageTask(on, config);
+        on('task', {
+          coverageReport: () => {
+            return null;
+          }
+        });
+
+        on('before:browser:launch', (browser, launchOptions) => {
+          if (browser.name === 'chrome' && browser.isHeadless) {
+            launchOptions.args.push('--headless=new');
+            launchOptions.args.push('--force-color-profile=srgb');
+            launchOptions.args.push('--window-size=1400,1200');
+          }
+
+          return launchOptions;
+        });
+      },
+      specPattern,
+      supportFile: `${mainCypressFolder}/support/component.tsx`
+    },
+    env: {
+      baseUrl: 'http://localhost:9092',
+      codeCoverage: {
+        exclude: [
+          'cypress/**/*.*',
+          'packages/**',
+          'node_modules',
+          '**/*.js',
+          '**/*.spec.tsx'
+        ]
+      },
+      ...env
+    },
+    reporter: 'mochawesome',
+    reporterOptions: {
+      html: false,
+      json: true,
+      overwrite: true,
+      reportDir: `${mainCypressFolder}/results`,
+      reportFilename: '[name]-report.json'
+    },
+    video: true,
+    videosFolder: `${mainCypressFolder}/results/videos`,
+    viewportHeight: 590,
+    viewportWidth: 1280
+  });
+};

package/cypress/component/enableVisualTesting.ts

@@ -1,21 +1,21 @@
-import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';
-
-const enableVisualTesting = (cypressFolder = 'cypress'): void => {
-  if (Cypress.config('isInteractive')) {
-    Cypress.Commands.add('matchImageSnapshot', () => {
-      cy.log('Skipping snapshot');
-    });
-
-    return;
-  }
-
-  addMatchImageSnapshotCommand({
-    capture: 'viewport',
-    customDiffConfig: { threshold: 0.01 },
-    customSnapshotsDir: `${cypressFolder}/visual-testing-snapshots`,
-    failureThreshold: 0.07,
-    failureThresholdType: 'percent'
-  });
-};
-
-export default enableVisualTesting;
+import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';
+
+const enableVisualTesting = (cypressFolder = 'cypress'): void => {
+  if (Cypress.config('isInteractive')) {
+    Cypress.Commands.add('matchImageSnapshot', () => {
+      cy.log('Skipping snapshot');
+    });
+
+    return;
+  }
+
+  addMatchImageSnapshotCommand({
+    capture: 'viewport',
+    customDiffConfig: { threshold: 0.01 },
+    customSnapshotsDir: `${cypressFolder}/visual-testing-snapshots`,
+    failureThreshold: 0.07,
+    failureThresholdType: 'percent'
+  });
+};
+
+export default enableVisualTesting;

package/cypress/component/excludeNodeModulesFromCoverage.js

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+
+const filePath = process.argv[2];
+
+const { error: logError } = console;
+
+try {
+  const outFile = fs.readFileSync(path.resolve(filePath)).toString();
+  const outFileJson = JSON.parse(outFile);
+
+  const coveragesWithoutNodeModules = Object.entries(outFileJson)
+    .map(([key, value]) => {
+      if (key.includes('node_modules')) {
+        return undefined;
+      }
+
+      return [key, value];
+    })
+    .filter((v) => v);
+
+  const finalOutJson = coveragesWithoutNodeModules.reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      [key]: value
+    }),
+    {}
+  );
+
+  fs.writeFileSync(
+    path.resolve(filePath),
+    JSON.stringify(finalOutJson, null, 2)
+  );
+} catch (error) {
+  logError(error.message);
+}