add custom cy.mount

frontend/cypress/support/component.ts

@@ -1,39 +1,29 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-import { mount } from 'cypress/angular';
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
+import { Type } from '@angular/core'
+import { NgSelectModule } from '@ng-select/ng-select';
+import { mount, MountConfig } from 'cypress/angular'
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount;
+      mount: typeof customMount
     }
   }
 }
 
-Cypress.Commands.add('mount', mount);
 
-// Example use:
-// cy.mount(MyComponent)
+// Source : https://docs.cypress.io/guides/component-testing/angular/examples#Default-Declarations-Providers-or-Imports
+const declarations = []
+const imports = [NgSelectModule]
+const providers = []
+
+function customMount<T>(component: string | Type<T>, config?: MountConfig<T>) {
+  if (!config) {
+    config = { declarations, imports, providers }
+  } else {
+    config.declarations = [...(config?.declarations || []), ...declarations]
+    config.imports = [...(config?.imports || []), ...imports]
+    config.providers = [...(config?.providers || []), ...providers]
+  }
+  return mount<T>(component, config)
+}
+
+Cypress.Commands.add('mount', customMount)

frontend/src/app/GN2CommonModule/form/datasets/datasets.component.cy.ts

@@ -5,27 +5,26 @@ import { from } from 'rxjs';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 export class DataFormServiceMock {
-  constructor() {}
-  getDatasets(params, queryStrings = {}, fields = []) {
-    return from([{ dataset_name: 'test', id_dataset: 1, id_acquisition_framework: 1 }]);
-  }
+    constructor() { }
+    getDatasets(params, queryStrings = {}, fields = []) {
+        return from([{ dataset_name: 'test', id_dataset: 1, id_acquisition_framework: 1 }]);
+    }
 }
 
 describe('Dataset Component', () => {
-  it('show component', () => {
-    let p = new FormGroup({
-      id_dataset: new FormControl(null),
+    it('show component', () => {
+        let p = new FormGroup({
+            id_dataset: new FormControl(null),
+        });
+        cy.mount(DatasetsComponent, {
+            componentProperties: {
+                parentFormControl: new FormControl(),
+                label: 'Jeux de données',
+                //multiSelect: true,
+                idAcquisitionFramework: 1,
+            },
+            declarations: [DatasetsComponent],
+            providers: [IterableDiffers, { provide: DataFormService, useClass: DataFormServiceMock }],
+        });
     });
-    cy.mount(DatasetsComponent, {
-      componentProperties: {
-        parentFormControl: new FormControl(),
-        label: 'Jeux de données',
-        //multiSelect: true,
-        idAcquisitionFramework: 1,
-      },
-      imports: [NgSelectModule],
-      declarations: [DatasetsComponent],
-      providers: [IterableDiffers, { provide: DataFormService, useClass: DataFormServiceMock }],
-    });
-  });
 });