@centreon/js-config 23.10.1-remove-cypress-fail-fast.0 → 23.10.1-remove-video-compression.0

package/cypress/component/commands.tsx

@@ -4,7 +4,7 @@ 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';
 
@@ -24,7 +24,7 @@ export enum Method {
   PUT = 'PUT'
 }
 
-Cypress.Commands.add('mount', ({ Component, options }) => {
+Cypress.Commands.add('mount', ({ Component, options = {} }) => {
   const wrapped = (
     <ThemeProvider>
       <Box
@@ -36,11 +36,10 @@ Cypress.Commands.add('mount', ({ Component, options }) => {
       >
         {Component}
       </Box>
+      <CssBaseline />
     </ThemeProvider>
   );
 
-  document.getElementsByTagName('body')[0].setAttribute('style', 'margin:0px');
-
   return mount(wrapped, options);
 });
 
@@ -128,6 +127,11 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add('makeSnapshot', (title?: string) => {
+  cy.viewport(1280, 590);
+  cy.matchImageSnapshot(title);
+});
+
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -135,8 +139,9 @@ declare global {
         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;
+      mount: ({ Component, options }: MountProps) => Cypress.Chainable;
+      moveSortableElement: ({ element, direction }) => void;
       moveSortableElementUsingAriaLabel: ({ ariaLabel, direction }) => void;
       waitForRequest: (alias) => Cypress.Chainable;
     }

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 {};

package/cypress/e2e/commands.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 
 import './commands/configuration';
+import './commands/monitoring';
 
 const apiLoginV2 = '/centreon/authentication/providers/configurations/local';
 
@@ -103,12 +104,15 @@ interface CopyFromContainerProps {
 
 Cypress.Commands.add(
   'copyFromContainer',
-  ({
-    name = Cypress.env('dockerName'),
-    source,
-    destination
-  }: CopyFromContainerProps) => {
-    return cy.exec(`docker cp ${name}:${source} "${destination}"`);
+  (
+    {
+      name = Cypress.env('dockerName'),
+      source,
+      destination
+    }: CopyFromContainerProps,
+    options?: Partial<Cypress.ExecOptions>
+  ) => {
+    return cy.exec(`docker cp ${name}:${source} "${destination}"`, options);
   }
 );
 
@@ -120,12 +124,15 @@ interface CopyToContainerProps {
 
 Cypress.Commands.add(
   'copyToContainer',
-  ({
-    name = Cypress.env('dockerName'),
-    source,
-    destination
-  }: CopyToContainerProps) => {
-    return cy.exec(`docker cp ${source} ${name}:${destination}`);
+  (
+    {
+      name = Cypress.env('dockerName'),
+      source,
+      destination
+    }: CopyToContainerProps,
+    options?: Partial<Cypress.ExecOptions>
+  ) => {
+    return cy.exec(`docker cp ${source} ${name}:${destination}`, options);
   }
 );
 
@@ -136,7 +143,7 @@ interface LoginByTypeOfUserProps {
 
 Cypress.Commands.add(
   'loginByTypeOfUser',
-  ({ jsonName, loginViaApi }): Cypress.Chainable => {
+  ({ jsonName = 'admin', loginViaApi = false }): Cypress.Chainable => {
     if (loginViaApi) {
       return cy
         .fixture(`users/${jsonName}.json`)
@@ -153,12 +160,15 @@ Cypress.Commands.add(
         .visit(`${Cypress.config().baseUrl}`)
         .wait('@getNavigationList');
     }
+
     cy.visit(`${Cypress.config().baseUrl}`)
       .fixture(`users/${jsonName}.json`)
       .then((credential) => {
-        cy.getByLabel({ label: 'Alias', tag: 'input' }).type(credential.login);
+        cy.getByLabel({ label: 'Alias', tag: 'input' }).type(
+          `{selectAll}{backspace}${credential.login}`
+        );
         cy.getByLabel({ label: 'Password', tag: 'input' }).type(
-          credential.password
+          `{selectAll}{backspace}${credential.password}`
         );
       })
       .getByLabel({ label: 'Connect', tag: 'button' })
@@ -215,11 +225,7 @@ interface StartContainerProps {
 Cypress.Commands.add(
   'startContainer',
   ({ name, image, portBindings }: StartContainerProps): Cypress.Chainable => {
-    return cy
-      .exec(`docker image inspect ${image} || docker pull ${image}`, {
-        timeout: 120000
-      })
-      .task('startContainer', { image, name, portBindings });
+    return cy.task('startContainer', { image, name, portBindings });
   }
 );
 
@@ -249,12 +255,13 @@ Cypress.Commands.add(
         portBindings: [{ destination: 4000, source: 80 }]
       })
       .then(() => {
-        const baseUrl = 'http://0.0.0.0:4000';
+        const baseUrl = 'http://127.0.0.1:4000';
 
         Cypress.config('baseUrl', baseUrl);
 
-        return cy.exec(
-          `npx wait-on ${baseUrl}/centreon/api/latest/platform/installation/status`
+        return cy.task(
+          'waitOn',
+          `${baseUrl}/centreon/api/latest/platform/installation/status`
         );
       })
       .visit('/') // this is necessary to refresh browser cause baseUrl has changed (flash appears in video)
@@ -306,12 +313,16 @@ Cypress.Commands.add(
           });
         }
 
-        return cy.copyFromContainer({
-          destination: `${logDirectory}/php8.1-fpm-centreon-error.log`,
-          name,
-          source: '/var/log/php8.1-fpm-centreon-error.log'
-        });
+        return cy.copyFromContainer(
+          {
+            destination: `${logDirectory}/php8.1-fpm-centreon-error.log`,
+            name,
+            source: '/var/log/php8.1-fpm-centreon-error.log'
+          },
+          { failOnNonZeroExit: false }
+        );
       })
+      .exec(`chmod -R 755 "${logDirectory}"`)
       .stopContainer({ name });
   }
 );
@@ -373,25 +384,81 @@ Cypress.Commands.add(
   }
 );
 
+interface ShareDashboardToUserProps {
+  dashboardName: string;
+  role: string;
+  userName: string;
+}
+
+interface ListingRequestResult {
+  body: {
+    result: Array<{
+      id: number;
+    }>;
+  };
+}
+
+Cypress.Commands.add(
+  'shareDashboardToUser',
+  ({ dashboardName, userName, role }: ShareDashboardToUserProps): void => {
+    Promise.all([
+      cy.request({
+        method: 'GET',
+        url: `/centreon/api/latest/configuration/users?search={"name":"${userName}"}`
+      }),
+      cy.request({
+        method: 'GET',
+        url: `/centreon/api/latest/configuration/dashboards?search={"name":"${dashboardName}"}`
+      })
+    ]).then(
+      ([retrievedUser, retrievedDashboard]: [
+        ListingRequestResult,
+        ListingRequestResult
+      ]) => {
+        const userId = retrievedUser.body.result[0].id;
+        const dashboardId = retrievedDashboard.body.result[0].id;
+
+        cy.request({
+          body: {
+            id: userId,
+            role: `${role}`
+          },
+          method: 'POST',
+          url: `/centreon/api/latest/configuration/dashboards/${dashboardId}/access_rights/contacts`
+        });
+      }
+    );
+  }
+);
+
 Cypress.Commands.add('getTimeFromHeader', (): Cypress.Chainable => {
-  return cy.waitUntil(() => {
-    return cy.get('header div[data-cy="clock"]').then(($time) => {
+  return cy
+    .get('header div[data-cy="clock"]', { timeout: 10000 })
+    .should('be.visible')
+    .then(($time) => {
       const headerTime = $time.children()[1].textContent;
       if (headerTime?.match(/\d+:\d+/)) {
-        return headerTime;
+        cy.log(`header time is : ${headerTime}`);
+
+        return cy.wrap(headerTime);
       }
 
-      return false;
+      throw new Error(`header time is not displayed`);
     });
-  });
 });
 
 declare global {
   namespace Cypress {
     interface Chainable {
       clickSubRootMenuItem: (page: string) => Cypress.Chainable;
-      copyFromContainer: (props: CopyFromContainerProps) => Cypress.Chainable;
-      copyToContainer: (props: CopyToContainerProps) => Cypress.Chainable;
+      copyFromContainer: (
+        props: CopyFromContainerProps,
+        options?: Partial<Cypress.ExecOptions>
+      ) => Cypress.Chainable;
+      copyToContainer: (
+        props: CopyToContainerProps,
+        options?: Partial<Cypress.ExecOptions>
+      ) => Cypress.Chainable;
       execInContainer: ({
         command,
         name
@@ -403,8 +470,8 @@ declare global {
       insertDashboard: (dashboard: Dashboard) => Cypress.Chainable;
       insertDashboardList: (fixtureFile: string) => Cypress.Chainable;
       loginByTypeOfUser: ({
-        jsonName = 'admin',
-        loginViaApi = false
+        jsonName,
+        loginViaApi
       }: LoginByTypeOfUserProps) => Cypress.Chainable;
       moveSortableElement: (direction: string) => Cypress.Chainable;
       navigateTo: ({
@@ -412,6 +479,11 @@ declare global {
         rootItemNumber,
         subMenu
       }: NavigateToProps) => Cypress.Chainable;
+      shareDashboardToUser: ({
+        dashboardName,
+        userName,
+        role
+      }: ShareDashboardToUserProps) => Cypress.Chainable;
       startContainer: ({
         name,
         image

package/cypress/e2e/configuration.ts

@@ -5,7 +5,9 @@ import { execSync } from 'child_process';
 
 import { defineConfig } from 'cypress';
 
-import setupNodeEvents from './plugins';
+import esbuildPreprocessor from './esbuild-preprocessor';
+import plugins from './plugins';
+import tasks from './tasks';
 
 interface ConfigurationOptions {
   cypressFolder?: string;
@@ -22,9 +24,7 @@ export default ({
   dockerName,
   env
 }: ConfigurationOptions): Cypress.ConfigOptions => {
-  const resultsFolder = `${cypressFolder || 'cypress'}/results${
-    isDevelopment ? '/dev' : ''
-  }`;
+  const resultsFolder = `${cypressFolder || 'cypress'}/results`;
 
   const webImageVersion = execSync('git rev-parse --abbrev-ref HEAD')
     .toString('utf8')
@@ -35,7 +35,12 @@ export default ({
     defaultCommandTimeout: 6000,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
-      setupNodeEvents,
+      setupNodeEvents: async (on, config) => {
+        await esbuildPreprocessor(on, config);
+        tasks(on);
+
+        return plugins(on, config);
+      },
       specPattern
     },
     env: {
@@ -58,6 +63,7 @@ export default ({
     retries: 0,
     screenshotsFolder: `${resultsFolder}/screenshots`,
     video: true,
+    videoCompression: 0,
     videosFolder: `${resultsFolder}/videos`
   });
 };

package/cypress/e2e/esbuild-preprocessor.ts

@@ -0,0 +1,26 @@
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
+import createEsbuildPlugin from '@badeball/cypress-cucumber-preprocessor/esbuild';
+
+export default async (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+): Promise<void> => {
+  await addCucumberPreprocessorPlugin(on, config);
+
+  on(
+    'file:preprocessor',
+    createBundler({
+      plugins: [
+        createEsbuildPlugin(config),
+        NodeModulesPolyfillPlugin(),
+        NodeGlobalsPolyfillPlugin({
+          buffer: true,
+          process: true
+        })
+      ]
+    })
+  );
+};

package/cypress/e2e/plugins.ts

@@ -3,132 +3,30 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-param-reassign */
 
-import Docker from 'dockerode';
-import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
-import webpackPreprocessor from '@cypress/webpack-preprocessor';
+export default (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+): Cypress.PluginConfigOptions => {
+  on('before:browser:launch', (browser, launchOptions) => {
+    const width = 1920;
+    const height = 1080;
 
-const docker = new Docker();
-
-const getWebpackOptions = (config): object => {
-  return {
-    module: {
-      rules: [
-        {
-          exclude: [/node_modules/],
-          test: /\.ts?$/,
-          use: [
-            {
-              loader: 'swc-loader'
-            }
-          ]
-        },
-        {
-          test: /\.feature$/,
-          use: [
-            {
-              loader: '@badeball/cypress-cucumber-preprocessor/webpack',
-              options: config
-            }
-          ]
-        }
-      ]
-    },
-    resolve: {
-      extensions: ['.ts', '.js']
-    }
-  };
-};
-
-export default async (on, config): Promise<void> => {
-  await addCucumberPreprocessorPlugin(on, config);
-
-  const webpackOptions = await getWebpackOptions(config);
-  const options = {
-    webpackOptions
-  };
-
-  on('file:preprocessor', webpackPreprocessor(options));
-
-  on('before:browser:launch', (browser = {}, launchOptions) => {
     if ((browser as { name }).name === 'chrome') {
+      // flags description : https://github.com/GoogleChrome/chrome-launcher/blob/main/docs/chrome-flags-for-tools.md
       launchOptions.args.push('--disable-gpu');
-      launchOptions.args = launchOptions.args.filter(
-        (element) => element !== '--disable-dev-shm-usage'
-      );
+      launchOptions.args.push('--auto-open-devtools-for-tabs');
+      launchOptions.args.push('--disable-extensions');
+      launchOptions.args.push('--hide-scrollbars');
+      launchOptions.args.push('--mute-audio');
+      launchOptions.args.push('--hide-scrollbars');
+
+      launchOptions.args.push(`--window-size=${width},${height}`);
+      // force screen to be non-retina and just use our given resolution
+      launchOptions.args.push('--force-device-scale-factor=1');
     }
 
     return launchOptions;
   });
 
-  interface PortBinding {
-    destination: number;
-    source: number;
-  }
-
-  interface StartContainerProps {
-    image: string;
-    name: string;
-    portBindings: Array<PortBinding>;
-  }
-
-  interface StopContainerProps {
-    name: string;
-  }
-
-  on('task', {
-    startContainer: async ({
-      image,
-      name,
-      portBindings = []
-    }: StartContainerProps) => {
-      const webContainers = await docker.listContainers({
-        all: true,
-        filters: { name: [name] }
-      });
-      if (webContainers.length) {
-        return webContainers[0];
-      }
-
-      const container = await docker.createContainer({
-        AttachStderr: true,
-        AttachStdin: false,
-        AttachStdout: true,
-        ExposedPorts: portBindings.reduce((accumulator, currentValue) => {
-          accumulator[`${currentValue.source}/tcp`] = {};
-
-          return accumulator;
-        }, {}),
-        HostConfig: {
-          PortBindings: portBindings.reduce((accumulator, currentValue) => {
-            accumulator[`${currentValue.source}/tcp`] = [
-              {
-                HostIP: '0.0.0.0',
-                HostPort: `${currentValue.destination}`
-              }
-            ];
-
-            return accumulator;
-          }, {})
-        },
-        Image: image,
-        OpenStdin: false,
-        StdinOnce: false,
-        Tty: true,
-        name
-      });
-
-      await container.start();
-
-      return container;
-    },
-    stopContainer: async ({ name }: StopContainerProps) => {
-      const container = await docker.getContainer(name);
-      await container.kill();
-      await container.remove();
-
-      return null;
-    }
-  });
-
   return config;
 };

package/cypress/e2e/tasks.ts

@@ -0,0 +1,97 @@
+import { execSync } from 'child_process';
+
+import Docker from 'dockerode';
+
+export default (on: Cypress.PluginEvents): void => {
+  const docker = new Docker();
+
+  interface PortBinding {
+    destination: number;
+    source: number;
+  }
+
+  interface StartContainerProps {
+    image: string;
+    name: string;
+    portBindings: Array<PortBinding>;
+  }
+
+  interface StopContainerProps {
+    name: string;
+  }
+
+  on('task', {
+    startContainer: async ({
+      image,
+      name,
+      portBindings = []
+    }: StartContainerProps) => {
+      const imageList = execSync(
+        'docker image list --format "{{.Repository}}:{{.Tag}}"'
+      ).toString('utf8');
+
+      if (
+        !imageList.match(
+          new RegExp(
+            `^${image.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')}`,
+            'm'
+          )
+        )
+      ) {
+        execSync(`docker pull ${image}`);
+      }
+
+      const webContainers = await docker.listContainers({
+        all: true,
+        filters: { name: [name] }
+      });
+      if (webContainers.length) {
+        return webContainers[0];
+      }
+
+      const container = await docker.createContainer({
+        AttachStderr: true,
+        AttachStdin: false,
+        AttachStdout: true,
+        ExposedPorts: portBindings.reduce((accumulator, currentValue) => {
+          accumulator[`${currentValue.source}/tcp`] = {};
+
+          return accumulator;
+        }, {}),
+        HostConfig: {
+          PortBindings: portBindings.reduce((accumulator, currentValue) => {
+            accumulator[`${currentValue.source}/tcp`] = [
+              {
+                HostIP: '127.0.0.1',
+                HostPort: `${currentValue.destination}`
+              }
+            ];
+
+            return accumulator;
+          }, {})
+        },
+        Image: image,
+        OpenStdin: false,
+        StdinOnce: false,
+        Tty: true,
+        name
+      });
+
+      await container.start();
+
+      return container;
+    },
+    stopContainer: async ({ name }: StopContainerProps) => {
+      const container = await docker.getContainer(name);
+      await container.kill();
+      await container.remove();
+
+      return null;
+    },
+    waitOn: async (url: string) => {
+      execSync(`npx wait-on ${url}`);
+
+      return null;
+    }
+  });
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@centreon/js-config",
   "description": "Centreon Frontend shared build configuration",
-  "version": "23.10.1-remove-cypress-fail-fast.0",
+  "version": "23.10.1-remove-video-compression.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -16,10 +16,15 @@
     "url": "https://github.com/centreon/centreon-frontend/issues"
   },
   "devDependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "^14.0.0",
-    "@tsconfig/node16": "^1.0.4",
-    "@types/dockerode": "^3.3.16",
+    "@badeball/cypress-cucumber-preprocessor": "^18.0.5",
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@tsconfig/node16": "^16.1.1",
+    "@types/cypress-cucumber-preprocessor": "^4.0.2",
+    "@types/dockerode": "^3.3.19",
     "dockerode": "^3.3.5",
+    "esbuild": "^0.19.3",
     "eslint": "^8.17.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "^8.5.0",

package/tsconfig/index.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "moduleResolution": "nodenext",
     "downlevelIteration": true,
-    "module": "esnext",
+    "module": "ESNext",
+    "moduleResolution": "node",
     "target": "es2018",
     "jsx": "react-jsx",
     "strict": true,