feat: Possibility to init with a single Module (#408)

README.md

@@ -1,4 +1,5 @@
-# cypress-angular-unit-test 
+# cypress-angular-unit-test
+
 [![npm version](https://badge.fury.io/js/cypress-angular-unit-test.svg)](https://badge.fury.io/js/cypress-angular-unit-test) [![renovate-app badge][renovate-badge]][renovate-app] ![cypress version](https://img.shields.io/badge/cypress-6.9.1-brightgreen) [![ci status][ci image]][ci url] [![cypress-angular-unit-test](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/nf7zag/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/nf7zag/runs)
 
 ## Installation
@@ -50,6 +51,10 @@ describe('AppComponent', () => {
   it('shows the input', () => {
     // Init Angular stuff
     initEnv(AppComponent);
+    // You can also :
+    // initEnv({declarations: [AppComponent]});
+    // initEnv({imports: [MyModule]});
+
     // component + any inputs object
     mount(AppComponent, { title: 'World' });
     // use any Cypress command afterwards
@@ -60,17 +65,6 @@ describe('AppComponent', () => {
 
 ![Demo](images/demo.gif)
 
-Under the hood, it's based on [TestBed](https://angular.io/api/core/testing/TestBed), you can use it by calling :
-
-```js
-getCypressTestBed();
-
-// Don't call TestBed.* directly in your spec !
-
-// So, to inject a Service you can do :
-const componentService = getCypressTestBed().inject(SomeService);
-```
-
 ## Examples
 
 | Use case                                             | Description                                                                                  |

lib/config.ts

@@ -1,46 +1,43 @@
 export class StyleOptions {
-
-    /**
-     * Creates <link href="..." /> element for each stylesheet
-     * @alias stylesheet
-     */
-    stylesheets?: string[];
-
-    /**
-     * Creates <link href="..." /> element for each stylesheet
-     * @alias stylesheets
-     */
-    stylesheet?: string;
-
-    /**
-     * Creates <style>...</style> element and inserts given CSS.
-     * @alias styles
-     */
-    style?: string;
-
-    /**
-     * Creates <style>...</style> element for each given CSS text.
-     * @alias style
-     */
-    styles?: string[];
-
-    /**
-     * Loads each file and creates a <style>...</style> element
-     * with the loaded CSS
-     * @alias cssFile
-     */
-    cssFiles?: string[];
-
-    /**
-     * Single CSS file to load into a <style></style> element
-     * @alias cssFile
-     */
-    cssFile?: string;
-
+  /**
+   * Creates <link href="..." /> element for each stylesheet
+   * @alias stylesheet
+   */
+  stylesheets?: string[];
+
+  /**
+   * Creates <link href="..." /> element for each stylesheet
+   * @alias stylesheets
+   */
+  stylesheet?: string;
+
+  /**
+   * Creates <style>...</style> element and inserts given CSS.
+   * @alias styles
+   */
+  style?: string;
+
+  /**
+   * Creates <style>...</style> element for each given CSS text.
+   * @alias style
+   */
+  styles?: string[];
+
+  /**
+   * Loads each file and creates a <style>...</style> element
+   * with the loaded CSS
+   * @alias cssFile
+   */
+  cssFiles?: string[];
+
+  /**
+   * Single CSS file to load into a <style></style> element
+   * @alias cssFile
+   */
+  cssFile?: string;
 }
 export class CypressAngularConfig extends StyleOptions {
+  detectChanges? = true;
 
-    detectChanges?= true;
-
-    log?= false;
-}
+  log? = false;
+}

lib/css-utils.ts

@@ -4,115 +4,118 @@ import { CypressAngularConfig } from './config';
  * Insert links to external style resources.
  */
 function insertStylesheets(
-    stylesheets: string[],
-    document: Document,
-    el: HTMLElement,
+  stylesheets: string[],
+  document: Document,
+  el: HTMLElement,
 ) {
-    stylesheets.forEach(href => {
-        const link = document.createElement('link')
-        link.type = 'text/css'
-        link.rel = 'stylesheet'
-        link.href = href
-        document.body.insertBefore(link, el);
-    })
+  stylesheets.forEach((href) => {
+    const link = document.createElement('link');
+    link.type = 'text/css';
+    link.rel = 'stylesheet';
+    link.href = href;
+    const el = document.getElementById('root');
+    document.body.insertBefore(link, el);
+  });
 }
 
 /**
  * Inserts a single stylesheet element
  */
 function insertStyles(styles: string[], document: Document, el: HTMLElement) {
-    styles.forEach(style => {
-        const styleElement = document.createElement('style')
-        styleElement.appendChild(document.createTextNode(style))
-        document.body.insertBefore(styleElement, el)
-    })
+  styles.forEach((style) => {
+    const styleElement = document.createElement('style');
+    styleElement.appendChild(document.createTextNode(style));
+    const el = document.getElementById('root');
+    document.body.insertBefore(styleElement, el);
+  });
 }
 
 function insertSingleCssFile(
-    cssFilename: string,
-    document: Document,
-    el: HTMLElement,
-    log?: boolean,
+  cssFilename: string,
+  document: Document,
+  el: HTMLElement,
+  log?: boolean,
 ) {
-    cy.readFile(cssFilename, { log }).then(css => {
-        const style = document.createElement('style')
-        style.appendChild(document.createTextNode(css))
-        document.body.insertBefore(style, el)
-    })
+  cy.readFile(cssFilename, { log }).then((css) => {
+    const style = document.createElement('style');
+    style.appendChild(document.createTextNode(css));
+    const el = document.getElementById('root');
+    document.body.insertBefore(style, el);
+  });
 }
 
 /**
  * Reads the given CSS file from local file system
  * and adds the loaded style text as an element.
  */
 function insertLocalCssFiles(
-    cssFilenames: string[],
-    document: Document,
-    el: HTMLElement,
-    log?: boolean,
+  cssFilenames: string[],
+  document: Document,
+  el: HTMLElement,
+  log?: boolean,
 ) {
-    cssFilenames.forEach(cssFilename =>
-        insertSingleCssFile(cssFilename, document, el, log)
-    );
+  cssFilenames.forEach((cssFilename) =>
+    insertSingleCssFile(cssFilename, document, el, log),
+  );
 }
 
 /**
  * Injects custom style text or CSS file or 3rd party style resources
  * into the given document.
  */
 export function injectStylesBeforeElement(
-    options: CypressAngularConfig,
-    document: Document,
-    el: HTMLElement,
+  options: CypressAngularConfig,
+  document: Document,
+  el: HTMLElement,
 ): void {
-    // first insert all stylesheets as Link elements
-    let stylesheets: string[] = []
+  // first insert all stylesheets as Link elements
+  let stylesheets: string[] = [];
 
-    if (typeof options.stylesheet === 'string') {
-        stylesheets.push(options.stylesheet)
-    } else if (Array.isArray(options.stylesheet)) {
-        stylesheets = stylesheets.concat(options.stylesheet)
-    }
+  if (typeof options.stylesheet === 'string') {
+    stylesheets.push(options.stylesheet);
+  } else if (Array.isArray(options.stylesheet)) {
+    stylesheets = stylesheets.concat(options.stylesheet);
+  }
 
-    if (typeof options.stylesheets === 'string') {
-        options.stylesheets = [options.stylesheets]
-    }
-    if (options.stylesheets) {
-        stylesheets = stylesheets.concat(options.stylesheets)
-    }
+  if (typeof options.stylesheets === 'string') {
+    options.stylesheets = [options.stylesheets];
+  }
+  if (options.stylesheets) {
+    stylesheets = stylesheets.concat(options.stylesheets);
+  }
 
-    insertStylesheets(stylesheets, document, el)
+  insertStylesheets(stylesheets, document, el);
 
-    // insert any styles as <style>...</style> elements
-    let styles: string[] = []
-    if (typeof options.style === 'string') {
-        styles.push(options.style)
-    } else if (Array.isArray(options.style)) {
-        styles = styles.concat(options.style)
-    }
-    if (typeof options.styles === 'string') {
-        styles.push(options.styles)
-    } else if (Array.isArray(options.styles)) {
-        styles = styles.concat(options.styles)
-    }
+  // insert any styles as <style>...</style> elements
+  let styles: string[] = [];
+  if (typeof options.style === 'string') {
+    styles.push(options.style);
+  } else if (Array.isArray(options.style)) {
+    styles = styles.concat(options.style);
+  }
+  if (typeof options.styles === 'string') {
+    styles.push(options.styles);
+  } else if (Array.isArray(options.styles)) {
+    styles = styles.concat(options.styles);
+  }
 
-    insertStyles(styles, document, el)
+  insertStyles(styles, document, el);
 
-    // now load any css files by path and add their content
-    // as <style>...</style> elements
-    let cssFiles: string[] = []
+  // now load any css files by path and add their content
+  // as <style>...</style> elements
+  let cssFiles: string[] = [];
 
-    if (typeof options.cssFile === 'string') {
-        cssFiles.push(options.cssFile)
-    } else if (Array.isArray(options.cssFile)) {
-        cssFiles = cssFiles.concat(options.cssFile)
-    }
+  if (typeof options.cssFile === 'string') {
+    cssFiles.push(options.cssFile);
+  } else if (Array.isArray(options.cssFile)) {
+    cssFiles = cssFiles.concat(options.cssFile);
+  }
 
-    if (typeof options.cssFiles === 'string') {
-        cssFiles.push(options.cssFiles)
-    } else if (Array.isArray(options.cssFiles)) {
-        cssFiles = cssFiles.concat(options.cssFiles)
-    }
+  if (typeof options.cssFiles === 'string') {
+    cssFiles.push(options.cssFiles);
+  } else if (Array.isArray(options.cssFiles)) {
+    cssFiles = cssFiles.concat(options.cssFiles);
+  }
 
-    insertLocalCssFiles(cssFiles, document, el, options.log)
-}
+  insertLocalCssFiles(cssFiles, document, el, options.log);
+}