@centreon/js-config 24.4.14 → 24.4.16

package/cypress/component/commands.tsx

@@ -4,17 +4,28 @@ 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 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 +35,7 @@ export enum Method {
   PUT = 'PUT'
 }
 
-Cypress.Commands.add('mount', ({ Component, options }) => {
+Cypress.Commands.add('mount', ({ Component, options = {} }) => {
   const wrapped = (
     <ThemeProvider>
       <Box
@@ -36,11 +47,10 @@ Cypress.Commands.add('mount', ({ Component, options }) => {
       >
         {Component}
       </Box>
+      <CssBaseline />
     </ThemeProvider>
   );
 
-  document.getElementsByTagName('body')[0].setAttribute('style', 'margin:0px');
-
   return mount(wrapped, options);
 });
 
@@ -95,20 +105,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 +150,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

@@ -3,29 +3,34 @@ 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 = ({
+  webpackConfig,
+  cypressFolder,
+  specPattern,
+  env,
+  useVite = false,
+  excludeSpecPattern
+}) => {
   const mainCypressFolder = cypressFolder || 'cypress';
 
   return defineConfig({
     component: {
       devServer: {
-        bundler: 'webpack',
+        bundler: useVite ? 'vite' : 'webpack',
         framework: 'react',
         webpackConfig
       },
+      excludeSpecPattern,
       setupNodeEvents: (on, config) => {
         addMatchImageSnapshotPlugin(on, config);
 
+        cypressCodeCoverageTask(on, config);
+
         on('before:browser:launch', (browser, launchOptions) => {
           if (browser.name === 'chrome' && browser.isHeadless) {
-            launchOptions.args = launchOptions.args.map((arg) => {
-              if (arg === '--headless') {
-                return '--headless=new';
-              }
-
-              return arg;
-            });
+            launchOptions.args.push('--headless=new');
           }
 
           return launchOptions;
@@ -35,8 +40,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: {
@@ -47,6 +61,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: 0.07,
     failureThresholdType: 'percent'
   });
 };

package/cypress/e2e/commands/configuration.ts

@@ -144,6 +144,7 @@ interface Host {
   alias?: string | null;
   checkCommand?: string | null;
   checkPeriod?: string | null;
+  hostGroup?: string;
   maxCheckAttempts?: number | null;
   name: string;
   passiveCheckEnabled?: boolean;
@@ -159,6 +160,7 @@ Cypress.Commands.add(
     alias = null,
     checkCommand = null,
     checkPeriod = null,
+    hostGroup = '',
     maxCheckAttempts = 1,
     name,
     passiveCheckEnabled = true,
@@ -176,7 +178,7 @@ Cypress.Commands.add(
         bodyContent: {
           action: 'ADD',
           object: 'HOST',
-          values: `${name};${hostAlias};${address};${template};${poller};`
+          values: `${name};${hostAlias};${address};${template};${poller};${hostGroup}`
         }
       })
       .then(() => {

package/cypress/e2e/commands/monitoring.ts

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+
+const apiBase = '/centreon/api';
+const apiActionV1 = `${apiBase}/index.php`;
+
+const getStatusNumberFromString = (status: string): number => {
+  const statuses = {
+    critical: '2',
+    down: '1',
+    ok: '0',
+    unknown: '3',
+    unreachable: '2',
+    up: '0',
+    warning: '1'
+  };
+
+  if (status in statuses) {
+    return statuses[status];
+  }
+
+  throw new Error(`Status ${status} does not exist`);
+};
+
+interface SubmitResult {
+  host: string;
+  output: string;
+  perfdata?: string | null;
+  service?: string | null;
+  status: string;
+}
+
+Cypress.Commands.add(
+  'submitResults',
+  (results: Array<SubmitResult>): Cypress.Chainable => {
+    results.forEach(
+      ({ host, output, perfdata = '', service = null, status }) => {
+        const timestampNow = Math.floor(Date.now() / 1000) - 15;
+        const updatetime = timestampNow.toString();
+
+        const result = {
+          host,
+          output,
+          perfdata,
+          service,
+          status: getStatusNumberFromString(status),
+          updatetime
+        };
+
+        cy.request({
+          body: {
+            results: [result]
+          },
+          headers: {
+            'Content-Type': 'application/json',
+            'centreon-auth-token': window.localStorage.getItem('userTokenApiV1')
+          },
+          method: 'POST',
+          url: `${apiActionV1}?action=submit&object=centreon_submit_results`
+        });
+      }
+    );
+
+    return cy.wrap(null);
+  }
+);
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      submitResults: (props: Array<SubmitResult>) => Cypress.Chainable;
+    }
+  }
+}
+
+export {};