@centreon/js-config 24.10.3 → 24.11.0

package/biome/base.json

@@ -0,0 +1,224 @@
+{
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "formatWithErrors": false
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      },
+      "complexity": {
+        "noBannedTypes": "off",
+        "noForEach": "off"
+      },
+      "correctness": {
+        "noUnusedImports": "error",
+        "noUnusedVariables": "error",
+        "useExhaustiveDependencies": "off",
+        "noUnknownUnit": "error",
+        "noUnknownProperty": "error",
+        "noUnknownFunction": "error"
+      },
+      "nursery": {
+        "noRestrictedImports": {
+          "level": "error",
+          "options": {
+            "paths": {
+              "lodash": "Using lodash is not encouraged.",
+              "moment": "Using moment is not encouraged."
+            }
+          }
+        }
+      },
+      "suspicious": {
+        "noConsole": "error",
+        "useAwait": "error"
+      },
+      "performance": {
+        "noAccumulatingSpread": "off"
+      },
+      "style": {
+        "useLiteralEnumMembers": "off",
+        "useImportType": "off",
+        "noNamespace": "error",
+        "noNamespaceImport": "error",
+        "useFragmentSyntax": "error",
+        "useFilenamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": false,
+            "filenameCases": [
+              "camelCase",
+              "PascalCase",
+              "kebab-case"
+            ]
+          }
+        },
+        "useNamingConvention": {
+          "level": "error",
+          "options": {
+            "strictCase": false,
+            "conventions": [
+              {
+                "formats": [
+                  "camelCase",
+                  "PascalCase"
+                ],
+                "selector": {
+                  "kind": "variable"
+                }
+              },
+              {
+                "selector": {
+                  "kind": "interface"
+                },
+                "formats": [
+                  "PascalCase"
+                ]
+              },
+              {
+                "selector": {
+                  "kind": "enum"
+                },
+                "formats": [
+                  "PascalCase"
+                ]
+              },
+              {
+                "selector": {
+                  "kind": "objectLiteralProperty"
+                },
+                "match": ".*"
+              },
+              {
+                "match": "_(.*)|([a-zA-Z].*)",
+                "selector": {
+                  "kind": "functionParameter"
+                },
+                "formats": [
+                  "snake_case",
+                  "PascalCase",
+                  "camelCase"
+                ]
+              },
+              {
+                "match": ".*",
+                "formats": [
+                  "snake_case",
+                  "camelCase",
+                  "PascalCase",
+                  "CONSTANT_CASE"
+                ]
+              }
+            ]
+          }
+        },
+        "noRestrictedGlobals": {
+          "level": "error",
+          "options": {
+            "deniedGlobals": [
+              "isFinite",
+              "isNaN",
+              "addEventListener",
+              "blur",
+              "close",
+              "closed",
+              "confirm",
+              "defaultStatus",
+              "defaultstatus",
+              "event",
+              "external",
+              "find",
+              "focus",
+              "frameElement",
+              "frames",
+              "history",
+              "innerHeight",
+              "innerWidth",
+              "length",
+              "location",
+              "locationbar",
+              "menubar",
+              "moveBy",
+              "moveTo",
+              "name",
+              "onblur",
+              "onerror",
+              "onfocus",
+              "onload",
+              "onresize",
+              "onunload",
+              "open",
+              "opener",
+              "opera",
+              "outerHeight",
+              "outerWidth",
+              "pageXOffset",
+              "pageYOffset",
+              "parent",
+              "print",
+              "removeEventListener",
+              "resizeBy",
+              "resizeTo",
+              "screen",
+              "screenLeft",
+              "screenTop",
+              "screenX",
+              "screenY",
+              "scroll",
+              "scrollbars",
+              "scrollBy",
+              "scrollTo",
+              "scrollX",
+              "scrollY",
+              "self",
+              "status",
+              "statusbar",
+              "stop",
+              "toolbar",
+              "top"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": true,
+      "quoteStyle": "single",
+      "semicolons": "always",
+      "indentStyle": "space",
+      "trailingCommas": "none"
+    },
+    "linter": {
+      "enabled": true
+    }
+  },
+  "json": {
+    "parser": {
+      "allowComments": true,
+      "allowTrailingCommas": false
+    },
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space"
+    }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space"
+    },
+    "linter": {
+      "enabled": true
+    }
+  }
+}

package/cypress/component/commands.tsx

@@ -4,17 +4,29 @@ import React from 'react';
 import { mount } from 'cypress/react18';
 import { equals, isNil } from 'ramda';
 
-import { Box } from '@mui/material';
+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',
@@ -24,7 +36,7 @@ export enum Method {
   PUT = 'PUT'
 }
 
-Cypress.Commands.add('mount', ({ Component, options }) => {
+Cypress.Commands.add('mount', ({ Component, options = {} }) => {
   const wrapped = (
     <ThemeProvider>
       <Box
@@ -36,11 +48,10 @@ Cypress.Commands.add('mount', ({ Component, options }) => {
       >
         {Component}
       </Box>
+      <CssBaseline />
     </ThemeProvider>
   );
 
-  document.getElementsByTagName('body')[0].setAttribute('style', 'margin:0px');
-
   return mount(wrapped, options);
 });
 
@@ -51,6 +62,7 @@ interface Query {
 
 export interface InterceptAPIRequestProps<T> {
   alias: string;
+  delay?: number;
   method: Method;
   path: string;
   query?: Query;
@@ -66,23 +78,25 @@ Cypress.Commands.add(
     response,
     alias,
     query,
-    statusCode = 200
+    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(500),
+            ctx.delay(delay),
             ctx.json(response),
             ctx.status(statusCode)
           );
         }
         if (!getQuery && isNil(query)) {
           return res(
-            ctx.delay(500),
+            ctx.delay(delay),
             ctx.json(response),
             ctx.status(statusCode)
           );
@@ -95,20 +109,32 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add('moveSortableElement', ({ element, direction }): void => {
-  const key = `{${direction}arrow}`;
+interface MoveSortableElementProps {
+  direction: 'up' | 'down' | 'left' | 'right';
+  element: Cypress.Chainable<JQuery<HTMLElement>>;
+  times?: number;
+}
 
-  element.type(' ', {
-    force: true,
-    scrollBehavior: false
-  });
-  element.eq(-1).type(key, {
-    scrollBehavior: false
-  });
-  element.eq(-1).type(' ', {
-    scrollBehavior: false
-  });
-});
+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',
@@ -128,15 +154,49 @@ Cypress.Commands.add(
   }
 );
 
+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;
-      mount: ({ Component, options = {} }: MountProps) => Cypress.Chainable;
-      moveSortableElement: ({ ariaLabel, direction }) => void;
+      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,32 +1,44 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const { devServer } = require('cypress-rspack-dev-server');
 const { defineConfig } = require('cypress');
 const {
   addMatchImageSnapshotPlugin
 } = require('@simonsmith/cypress-image-snapshot/plugin');
+const cypressCodeCoverageTask = require('@cypress/code-coverage/task');
 
-module.exports = ({ webpackConfig, cypressFolder, specPattern, env }) => {
+module.exports = ({
+  rspackConfig,
+  cypressFolder,
+  specPattern,
+  env,
+  excludeSpecPattern
+}) => {
   const mainCypressFolder = cypressFolder || 'cypress';
 
   return defineConfig({
     component: {
-      devServer: {
-        bundler: 'webpack',
-        framework: 'react',
-        webpackConfig
-      },
+      devServer: (devServerConfig) =>
+        devServer({
+          ...devServerConfig,
+          framework: 'react',
+          rspackConfig
+        }),
+      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');
-            launchOptions.args = launchOptions.args.map((arg) => {
-              if (arg === '--headless') {
-                return '--headless=new';
-              }
-
-              return arg;
-            });
           }
 
           return launchOptions;
@@ -36,8 +48,17 @@ module.exports = ({ webpackConfig, cypressFolder, specPattern, env }) => {
       supportFile: `${mainCypressFolder}/support/component.tsx`
     },
     env: {
-      ...env,
-      baseUrl: 'http://localhost:9092'
+      baseUrl: 'http://localhost:9092',
+      codeCoverage: {
+        exclude: [
+          'cypress/**/*.*',
+          'packages/**',
+          'node_modules',
+          '**/*.js',
+          '**/*.spec.tsx'
+        ]
+      },
+      ...env
     },
     reporter: 'mochawesome',
     reporterOptions: {
@@ -48,6 +69,8 @@ module.exports = ({ webpackConfig, cypressFolder, specPattern, env }) => {
       reportFilename: '[name]-report.json'
     },
     video: true,
-    videosFolder: `${mainCypressFolder}/results/videos`
+    videosFolder: `${mainCypressFolder}/results/videos`,
+    viewportHeight: 590,
+    viewportWidth: 1280
   });
 };

package/cypress/component/disableCssTransitions.ts

@@ -0,0 +1,19 @@
+const disableMotion = (win): void => {
+  const injectedStyleEl = win.document.getElementById('__cy_disable_motion__');
+  if (injectedStyleEl) {
+    return;
+  }
+  win.document.head.insertAdjacentHTML(
+    'beforeend',
+    `
+      <style id="__cy_disable_motion__">
+        /* Disable CSS transitions. */
+        *, *::before, *::after { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; }
+        /* Disable CSS animations. */
+        *, *::before, *::after { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; }
+      </style>
+    `.trim()
+  );
+};
+
+export default disableMotion;

package/cypress/component/enableVisualTesting.ts

@@ -13,7 +13,7 @@ const enableVisualTesting = (cypressFolder = 'cypress'): void => {
     capture: 'viewport',
     customDiffConfig: { threshold: 0.01 },
     customSnapshotsDir: `${cypressFolder}/visual-testing-snapshots`,
-    failureThreshold: 0.06,
+    failureThreshold: Cypress.env('updateSnapshots') === true ? 0 : 0.07,
     failureThresholdType: 'percent'
   });
 };

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);
+}