@centreon/js-config 23.10.1-remove-video-compression.0 → 23.10.1-stabilization-panel-edit-23-10.0

package/cypress/component/commands.tsx

@@ -11,6 +11,8 @@ 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;
@@ -132,9 +134,16 @@ Cypress.Commands.add('makeSnapshot', (title?: string) => {
   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;

package/cypress/component/configuration.js

@@ -24,6 +24,14 @@ module.exports = ({
       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`

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/e2e/commands.ts

@@ -3,6 +3,10 @@
 import './commands/configuration';
 import './commands/monitoring';
 
+import installLogsCollector from 'cypress-terminal-report/src/installLogsCollector';
+
+installLogsCollector();
+
 const apiLoginV2 = '/centreon/authentication/providers/configurations/local';
 
 const artifactIllegalCharactersMatcher = /[,\s/|<>*?:"]/g;
@@ -207,7 +211,20 @@ interface ExecInContainerProps {
 Cypress.Commands.add(
   'execInContainer',
   ({ command, name }: ExecInContainerProps): Cypress.Chainable => {
-    return cy.exec(`docker exec -i ${name} ${command}`);
+    return cy
+      .exec(`docker exec -i ${name} ${command}`, { failOnNonZeroExit: false })
+      .then((result) => {
+        if (result.code) {
+          // output will not be truncated
+          throw new Error(`
+            Execution of "${command}" failed
+            Exit code: ${result.code}
+            Stdout:\n${result.stdout}
+            Stderr:\n${result.stderr}`);
+        }
+
+        return cy.wrap(result);
+      });
   }
 );
 
@@ -225,7 +242,18 @@ interface StartContainerProps {
 Cypress.Commands.add(
   'startContainer',
   ({ name, image, portBindings }: StartContainerProps): Cypress.Chainable => {
-    return cy.task('startContainer', { image, name, portBindings });
+    return cy.task(
+      'startContainer',
+      { image, name, portBindings },
+      { timeout: 600000 } // 10 minutes because docker pull can be very slow
+    );
+  }
+);
+
+Cypress.Commands.add(
+  'createDirectory',
+  (directoryPath: string): Cypress.Chainable => {
+    return cy.task('createDirectory', directoryPath);
   }
 );
 
@@ -288,7 +316,7 @@ Cypress.Commands.add(
 
     return cy
       .visitEmptyPage()
-      .exec(`mkdir -p "${logDirectory}"`)
+      .createDirectory(logDirectory)
       .copyFromContainer({
         destination: `${logDirectory}/broker`,
         name,
@@ -459,6 +487,7 @@ declare global {
         props: CopyToContainerProps,
         options?: Partial<Cypress.ExecOptions>
       ) => Cypress.Chainable;
+      createDirectory: (directoryPath: string) => Cypress.Chainable;
       execInContainer: ({
         command,
         name

package/cypress/e2e/configuration.ts

@@ -4,6 +4,7 @@
 import { execSync } from 'child_process';
 
 import { defineConfig } from 'cypress';
+import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter';
 
 import esbuildPreprocessor from './esbuild-preprocessor';
 import plugins from './plugins';
@@ -24,7 +25,7 @@ export default ({
   dockerName,
   env
 }: ConfigurationOptions): Cypress.ConfigOptions => {
-  const resultsFolder = `${cypressFolder || 'cypress'}/results`;
+  const resultsFolder = `${cypressFolder || '.'}/results`;
 
   const webImageVersion = execSync('git rev-parse --abbrev-ref HEAD')
     .toString('utf8')
@@ -35,13 +36,20 @@ export default ({
     defaultCommandTimeout: 6000,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
+      fixturesFolder: 'fixtures',
+      reporter: require.resolve('cypress-multi-reporters'),
+      reporterOptions: {
+        configFile: `${__dirname}/reporter-config.js`
+      },
       setupNodeEvents: async (on, config) => {
+        installLogsPrinter(on);
         await esbuildPreprocessor(on, config);
         tasks(on);
 
         return plugins(on, config);
       },
-      specPattern
+      specPattern,
+      supportFile: 'support/e2e.{js,jsx,ts,tsx}'
     },
     env: {
       ...env,
@@ -51,14 +59,6 @@ export default ({
       dockerName: dockerName || 'centreon-dev'
     },
     execTimeout: 60000,
-    reporter: 'mochawesome',
-    reporterOptions: {
-      html: false,
-      json: true,
-      overwrite: true,
-      reportDir: `${resultsFolder}/reports`,
-      reportFilename: '[name]-report.json'
-    },
     requestTimeout: 10000,
     retries: 0,
     screenshotsFolder: `${resultsFolder}/screenshots`,

package/cypress/e2e/plugins.ts

@@ -11,16 +11,20 @@ export default (
     const width = 1920;
     const height = 1080;
 
-    if ((browser as { name }).name === 'chrome') {
+    if (browser.name === 'chrome') {
+      if (browser.isHeadless) {
+        launchOptions.args.push('--headless=new');
+      }
+
       // flags description : https://github.com/GoogleChrome/chrome-launcher/blob/main/docs/chrome-flags-for-tools.md
       launchOptions.args.push('--disable-gpu');
       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');
     }

package/cypress/e2e/reporter-config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  mochawesomeReporterOptions: {
+    consoleReporter: 'none',
+    html: false,
+    json: true,
+    overwrite: true,
+    reportDir: 'results/reports',
+    reportFilename: '[name]-report.json'
+  },
+  reporterEnabled: `mochawesome,${require.resolve(
+    '@badeball/cypress-cucumber-preprocessor/pretty-reporter'
+  )}`
+};

package/cypress/e2e/tasks.ts

@@ -1,4 +1,5 @@
 import { execSync } from 'child_process';
+import { existsSync, mkdirSync } from 'fs';
 
 import Docker from 'dockerode';
 
@@ -21,6 +22,13 @@ export default (on: Cypress.PluginEvents): void => {
   }
 
   on('task', {
+    createDirectory: async (directoryPath: string) => {
+      if (!existsSync(directoryPath)) {
+        mkdirSync(directoryPath, { recursive: true });
+      }
+
+      return null;
+    },
     startContainer: async ({
       image,
       name,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@centreon/js-config",
   "description": "Centreon Frontend shared build configuration",
-  "version": "23.10.1-remove-video-compression.0",
+  "version": "23.10.1-stabilization-panel-edit-23-10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -16,15 +16,7 @@
     "url": "https://github.com/centreon/centreon-frontend/issues"
   },
   "devDependencies": {
-    "@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",
@@ -50,5 +42,18 @@
     "tsconfig",
     "webpack",
     "cypress"
-  ]
+  ],
+  "dependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "^18.0.6",
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@types/cypress-cucumber-preprocessor": "^4.0.2",
+    "@types/dockerode": "^3.3.19",
+    "cypress-multi-reporters": "^1.6.3",
+    "cypress-terminal-report": "^5.3.6",
+    "dockerode": "^3.3.5",
+    "esbuild": "^0.19.3",
+    "mochawesome": "^7.1.3"
+  }
 }