@centreon/js-config 24.4.12 → 24.4.13

package/cypress/e2e/configuration.ts

@@ -4,8 +4,11 @@
 import { execSync } from 'child_process';
 
 import { defineConfig } from 'cypress';
+import installLogsPrinter from 'cypress-terminal-report/src/installLogsPrinter';
 
-import setupNodeEvents from './plugins';
+import esbuildPreprocessor from './esbuild-preprocessor';
+import plugins from './plugins';
+import tasks from './tasks';
 
 interface ConfigurationOptions {
   cypressFolder?: string;
@@ -22,9 +25,7 @@ export default ({
   dockerName,
   env
 }: ConfigurationOptions): Cypress.ConfigOptions => {
-  const resultsFolder = `${cypressFolder || 'cypress'}/results${
-    isDevelopment ? '/dev' : ''
-  }`;
+  const resultsFolder = `${cypressFolder || '.'}/results`;
 
   const webImageVersion = execSync('git rev-parse --abbrev-ref HEAD')
     .toString('utf8')
@@ -35,8 +36,20 @@ export default ({
     defaultCommandTimeout: 6000,
     e2e: {
       excludeSpecPattern: ['*.js', '*.ts', '*.md'],
-      setupNodeEvents,
-      specPattern
+      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,
+      supportFile: 'support/e2e.{js,jsx,ts,tsx}'
     },
     env: {
       ...env,
@@ -45,34 +58,12 @@ export default ({
       WEB_IMAGE_VERSION: webImageVersion,
       dockerName: dockerName || 'centreon-dev'
     },
-    execTimeout: 120000,
-    reporter: 'mochawesome',
-    reporterOptions: {
-      html: false,
-      json: true,
-      overwrite: true,
-      reportDir: `${resultsFolder}/reports`,
-      reportFilename: '[name]-report.json'
-    },
+    execTimeout: 60000,
     requestTimeout: 10000,
     retries: 0,
     screenshotsFolder: `${resultsFolder}/screenshots`,
-    setupNodeEvents: (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;
-          });
-        }
-
-        return launchOptions;
-      });
-    },
     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,34 @@
 /* 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';
-
-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);
+export default (
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+): Cypress.PluginConfigOptions => {
+  on('before:browser:launch', (browser, launchOptions) => {
+    const width = 1920;
+    const height = 1080;
+
+    if (browser.name === 'chrome') {
+      if (browser.isHeadless) {
+        launchOptions.args.push('--headless=new');
+      }
 
-  const webpackOptions = await getWebpackOptions(config);
-  const options = {
-    webpackOptions
-  };
+      // 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');
 
-  on('file:preprocessor', webpackPreprocessor(options));
+      launchOptions.args.push(`--window-size=${width},${height}`);
 
-  on('before:browser:launch', (browser = {}, launchOptions) => {
-    if ((browser as { name }).name === 'chrome') {
-      launchOptions.args.push('--disable-gpu');
-      launchOptions.args = launchOptions.args.filter(
-        (element) => element !== '--disable-dev-shm-usage'
-      );
+      // 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/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

@@ -0,0 +1,105 @@
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync } from 'fs';
+
+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', {
+    createDirectory: async (directoryPath: string) => {
+      if (!existsSync(directoryPath)) {
+        mkdirSync(directoryPath, { recursive: true });
+      }
+
+      return null;
+    },
+    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/eslint/base.typescript.eslintrc.js

@@ -21,11 +21,15 @@ module.exports = {
           }
         ],
         '@typescript-eslint/camelcase': 'off',
-        '@typescript-eslint/consistent-type-definitions': [
+        '@typescript-eslint/consistent-type-definitions': ['off', 'interface'],
+        '@typescript-eslint/explicit-function-return-type': [
           'error',
-          'interface'
+          {
+            allowExpressions: true,
+            allowHigherOrderFunctions: true,
+            allowTypedFunctionExpressions: true
+          }
         ],
-        '@typescript-eslint/explicit-function-return-type': ['error'],
         '@typescript-eslint/explicit-member-accessibility': [
           'error',
           {
@@ -76,13 +80,21 @@ module.exports = {
           }
         ],
         camelcase: 'off',
+        'import/no-cycle': 'off',
+        'import/no-named-as-default': 'warn',
         'no-shadow': 'off',
         'no-unused-expressions': 'off'
       },
       settings: {
+        'import/parsers': {
+          '@typescript-eslint/parser': ['.ts', '.tsx']
+        },
         'import/resolver': {
           alias: {
             extensions: ['.ts', '.tsx', '.js', '.jsx']
+          },
+          typescript: {
+            alwaysTryTypes: true
           }
         }
       }

package/eslint/lambda/typescript.eslintrc.js

@@ -0,0 +1,48 @@
+module.exports = {
+    extends: [ '../node/typescript.eslintrc.js'],
+    overrides: [
+      {
+        files: ["*.spec.js", "*.test.ts", "*.tests.ts"],
+        rules: {
+          "import/first": 0,
+          "import/order": 0,
+          "@typescript-eslint/ban-ts-comment": 0,
+          "@typescript-eslint/no-explicit-any": 0
+        }
+      }
+    ],
+    rules: {
+      "import/extensions": ["off"],
+      "no-console": "off",
+      "no-underscore-dangle": "off",
+      "class-methods-use-this": "off",
+      "@typescript-eslint/naming-convention": [
+        "error",
+        {
+          format: ["camelCase", "PascalCase", "UPPER_CASE"],
+          selector: "variable"
+        },
+        {
+          filter: {
+            match: false,
+            regex: "(__esModule|.+-.+)"
+          },
+          format: ["snake_case", "camelCase", "PascalCase", "UPPER_CASE"],
+          selector: "property",
+          leadingUnderscore: "allow"
+        },
+        {
+          filter: {
+            match: false,
+            regex: "^_$"
+          },
+          format: ["snake_case", "camelCase", "PascalCase"],
+          selector: "parameter"
+        }
+      ],
+      "@typescript-eslint/require-array-sort-compare": "error"
+    },
+    parserOptions: {
+      project: ["./tsconfig.json"]
+    }
+  }

package/jest/index.js

@@ -1,12 +1,16 @@
 module.exports = {
   moduleNameMapper: {
     '\\.(s?css|png|svg|jpg)$': 'identity-obj-proxy',
+    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
     '^react($|/.+)': '<rootDir>/node_modules/react$1'
   },
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['/node_modules/'],
+  testPathIgnorePatterns: ['/node_modules/', '!*.cypress.spec.tsx'],
   transform: {
+    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
     '^.+\\.[jt]sx?$': [
       '@swc/jest',
       {

package/jest/lambda/typescript.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2023 Centreon Team
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+const path = require('path');
+
+const rootPath = path.join(__dirname);
+
+
+
+module.exports = {
+    rootDir: rootPath,
+    // Automatically clear mock calls and instances between every test
+    clearMocks: true,
+    // The directory where Jest should output its coverage files
+    coverageDirectory: '<rootDir>/coverage',
+    // An array of regexp pattern strings used to skip coverage collection
+    coveragePathIgnorePatterns: ['\\\\node_modules\\\\', 'tests'],
+
+    // An array of file extensions your modules use
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+
+    // Automatically reset mock state between every test
+    // resetMocks: true,
+
+    testMatch: ['**/*.(test|tests|spec|specs).+(ts|tsx|js)'],
+
+    // This option allows the use of a custom results processor
+    // testResultsProcessor: 'jest-sonar-reporter',
+
+    // A map from regular expressions to paths to transformers
+    transform: {
+        '^.+\\.(ts|tsx)$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.json' }],
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@centreon/js-config",
   "description": "Centreon Frontend shared build configuration",
-  "version": "24.4.12",
+  "version": "24.4.13",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/centreon/centreon-frontend.git"
@@ -16,13 +16,12 @@
     "url": "https://github.com/centreon/centreon-frontend/issues"
   },
   "devDependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "^14.0.0",
-    "@types/dockerode": "^3.3.16",
-    "dockerode": "^3.3.5",
+    "@tsconfig/node16": "^16.1.1",
     "eslint": "^8.17.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-hooks": "^0.4.3",
     "eslint-plugin-import": "^2.26.0",
@@ -43,5 +42,18 @@
     "tsconfig",
     "webpack",
     "cypress"
-  ]
+  ],
+  "dependencies": {
+    "@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.5",
+    "@types/dockerode": "^3.3.23",
+    "cypress-multi-reporters": "^1.6.4",
+    "cypress-terminal-report": "^5.3.9",
+    "dockerode": "^4.0.0",
+    "esbuild": "^0.19.5",
+    "mochawesome": "^7.1.3"
+  }
 }

package/tsconfig/index.json

@@ -1,13 +1,14 @@
 {
   "compilerOptions": {
-    "moduleResolution": "node",
     "downlevelIteration": true,
-    "module": "es6",
-    "target": "es6",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "target": "es2018",
     "jsx": "react-jsx",
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "resolveJsonModule": true
   }
 }

package/tsconfig/lambda/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "@tsconfig/node16/tsconfig.json",
+    "compilerOptions": {
+        "sourceMap": true,
+        "allowJs": true,
+        "strictNullChecks": false,
+        "declaration": false,
+        "esModuleInterop": true,
+        "types": [
+            "@types/jest",
+            "node"
+        ]
+    }
+}