@centreon/js-config 23.10.1-debug-openid.5 → 23.10.1-debug-e2e-cookies.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/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

@@ -5,10 +5,7 @@ import './commands/monitoring';
 
 import installLogsCollector from 'cypress-terminal-report/src/installLogsCollector';
 
-installLogsCollector({
-  enableExtendedCollector: true,
-  xhr: { printHeaderData: true, printRequestData: true }
-});
+installLogsCollector({ enableExtendedCollector: true });
 
 const apiLoginV2 = '/centreon/authentication/providers/configurations/local';
 
@@ -214,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);
+      });
   }
 );
 
@@ -232,7 +242,20 @@ interface StartContainerProps {
 Cypress.Commands.add(
   'startContainer',
   ({ name, image, portBindings }: StartContainerProps): Cypress.Chainable => {
-    return cy.task('startContainer', { image, name, portBindings });
+    cy.log(`Starting container ${name} from image ${image}`);
+
+    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);
   }
 );
 
@@ -285,7 +308,7 @@ Cypress.Commands.add(
   ({
     name = Cypress.env('dockerName')
   }: StopWebContainerProps = {}): Cypress.Chainable => {
-    const logDirectory = `cypress/results/logs/${Cypress.spec.name.replace(
+    const logDirectory = `results/logs/${Cypress.spec.name.replace(
       artifactIllegalCharactersMatcher,
       '_'
     )}/${Cypress.currentTest.title.replace(
@@ -295,7 +318,7 @@ Cypress.Commands.add(
 
     return cy
       .visitEmptyPage()
-      .exec(`mkdir -p "${logDirectory}"`)
+      .createDirectory(logDirectory)
       .copyFromContainer({
         destination: `${logDirectory}/broker`,
         name,
@@ -311,6 +334,11 @@ Cypress.Commands.add(
         name,
         source: '/var/log/centreon'
       })
+      .copyFromContainer({
+        destination: `${logDirectory}/centreon-gorgone`,
+        name,
+        source: '/var/log/centreon-gorgone'
+      })
       .then(() => {
         if (Cypress.env('WEB_IMAGE_OS').includes('alma')) {
           return cy.copyFromContainer({
@@ -329,6 +357,24 @@ Cypress.Commands.add(
           { failOnNonZeroExit: false }
         );
       })
+      .then(() => {
+        if (Cypress.env('WEB_IMAGE_OS').includes('alma')) {
+          return cy.copyFromContainer({
+            destination: `${logDirectory}/httpd`,
+            name,
+            source: '/var/log/httpd'
+          });
+        }
+
+        return cy.copyFromContainer(
+          {
+            destination: `${logDirectory}/apache2`,
+            name,
+            source: '/var/log/apache2'
+          },
+          { failOnNonZeroExit: false }
+        );
+      })
       .exec(`chmod -R 755 "${logDirectory}"`)
       .stopContainer({ name });
   }
@@ -341,9 +387,11 @@ interface StopContainerProps {
 Cypress.Commands.add(
   'stopContainer',
   ({ name }: StopContainerProps): Cypress.Chainable => {
+    cy.log(`Stopping container ${name}`);
+
     cy.exec(`docker logs ${name}`).then(({ stdout }) => {
       cy.writeFile(
-        `cypress/results/logs/${Cypress.spec.name.replace(
+        `results/logs/${Cypress.spec.name.replace(
           artifactIllegalCharactersMatcher,
           '_'
         )}/${Cypress.currentTest.title.replace(
@@ -391,6 +439,41 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add(
+  'insertDashboardWithWidget',
+  (dashboardBody, patchBody) => {
+    cy.request({
+      body: {
+        ...dashboardBody
+      },
+      method: 'POST',
+      url: '/centreon/api/latest/configuration/dashboards'
+    }).then((response) => {
+      const dashboardId = response.body.id;
+      cy.waitUntil(
+        () => {
+          return cy
+            .request({
+              method: 'GET',
+              url: `/centreon/api/latest/configuration/dashboards/${dashboardId}`
+            })
+            .then((getResponse) => {
+              return getResponse.body && getResponse.body.id === dashboardId;
+            });
+        },
+        {
+          timeout: 10000
+        }
+      );
+      cy.request({
+        body: patchBody,
+        method: 'PATCH',
+        url: `/centreon/api/latest/configuration/dashboards/${dashboardId}`
+      });
+    });
+  }
+);
+
 interface ShareDashboardToUserProps {
   dashboardName: string;
   role: string;
@@ -405,6 +488,30 @@ interface ListingRequestResult {
   };
 }
 
+interface PatchDashboardBody {
+  panels: Array<{
+    layout: {
+      height: number;
+      min_height: number;
+      min_width: number;
+      width: number;
+      x: number;
+      y: number;
+    };
+    name: string;
+    widget_settings: {
+      options: {
+        description: {
+          content: string;
+          enabled: boolean;
+        };
+        name: string;
+      };
+    };
+    widget_type: string;
+  }>;
+}
+
 Cypress.Commands.add(
   'shareDashboardToUser',
   ({ dashboardName, userName, role }: ShareDashboardToUserProps): void => {
@@ -466,6 +573,7 @@ declare global {
         props: CopyToContainerProps,
         options?: Partial<Cypress.ExecOptions>
       ) => Cypress.Chainable;
+      createDirectory: (directoryPath: string) => Cypress.Chainable;
       execInContainer: ({
         command,
         name
@@ -476,6 +584,11 @@ declare global {
       hoverRootMenuItem: (rootItemNumber: number) => Cypress.Chainable;
       insertDashboard: (dashboard: Dashboard) => Cypress.Chainable;
       insertDashboardList: (fixtureFile: string) => Cypress.Chainable;
+      insertDashboardWithWidget: (
+        dashboard: Dashboard,
+        patch: PatchDashboardBody
+      ) => Cypress.Chainable;
+
       loginByTypeOfUser: ({
         jsonName,
         loginViaApi

package/cypress/e2e/configuration.ts

@@ -5,6 +5,7 @@ import { execSync } from 'child_process';
 
 import { defineConfig } from 'cypress';
 import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter';
+import { config as configDotenv } from 'dotenv';
 
 import esbuildPreprocessor from './esbuild-preprocessor';
 import plugins from './plugins';
@@ -14,6 +15,7 @@ interface ConfigurationOptions {
   cypressFolder?: string;
   dockerName?: string;
   env?: Record<string, unknown>;
+  envFile?: string;
   isDevelopment?: boolean;
   specPattern: string;
 }
@@ -23,9 +25,14 @@ export default ({
   cypressFolder,
   isDevelopment,
   dockerName,
-  env
+  env,
+  envFile
 }: ConfigurationOptions): Cypress.ConfigOptions => {
-  const resultsFolder = `${cypressFolder || 'cypress'}/results`;
+  if (envFile) {
+    configDotenv({ path: envFile });
+  }
+
+  const resultsFolder = `${cypressFolder || '.'}/results`;
 
   const webImageVersion = execSync('git rev-parse --abbrev-ref HEAD')
     .toString('utf8')
@@ -36,6 +43,7 @@ export default ({
     defaultCommandTimeout: 6000,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
+      fixturesFolder: 'fixtures',
       reporter: require.resolve('cypress-multi-reporters'),
       reporterOptions: {
         configFile: `${__dirname}/reporter-config.js`
@@ -47,11 +55,12 @@ export default ({
 
         return plugins(on, config);
       },
-      specPattern
+      specPattern,
+      supportFile: 'support/e2e.{js,jsx,ts,tsx}'
     },
     env: {
       ...env,
-      OPENID_IMAGE_VERSION: '23.04',
+      OPENID_IMAGE_VERSION: process.env.MAJOR || '24.04',
       WEB_IMAGE_OS: 'alma9',
       WEB_IMAGE_VERSION: webImageVersion,
       dockerName: dockerName || 'centreon-dev'

package/cypress/e2e/reporter-config.js

@@ -4,7 +4,7 @@ module.exports = {
     html: false,
     json: true,
     overwrite: true,
-    reportDir: 'cypress/results/reports',
+    reportDir: 'results/reports',
     reportFilename: '[name]-report.json'
   },
   reporterEnabled: `mochawesome,${require.resolve(

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-debug-openid.5",
+  "version": "23.10.1-debug-e2e-cookies.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -44,16 +44,17 @@
     "cypress"
   ],
   "dependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "^18.0.6",
+    "@badeball/cypress-cucumber-preprocessor": "^19.1.0",
     "@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",
+    "@types/cypress-cucumber-preprocessor": "^4.0.5",
+    "@types/dockerode": "^3.3.23",
+    "cypress-multi-reporters": "^1.6.4",
+    "cypress-terminal-report": "^5.3.9",
+    "dockerode": "^4.0.0",
+    "dotenv": "^16.3.1",
+    "esbuild": "^0.19.5",
     "mochawesome": "^7.1.3"
   }
 }