feat: HTML mount component (#154)

* fix: Add config for enable detectChange manually

examples/ng9/src/app/app.module.ts

@@ -7,12 +7,14 @@ import { HttpClientModule } from '@angular/common/http';
 import { OnPushStratComponent } from './on-push-strat/on-push-strat.component';
 import { NetworkComponent } from './network/network.component';
 import { NetworkService } from './network.service';
+import { HtmlMountComponent } from './html-mount/html-mount.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     OnPushStratComponent,
     NetworkComponent,
+    HtmlMountComponent,
   ],
   imports: [
     BrowserModule,

examples/ng9/src/app/html-mount/html-mount.component.cy-spec.ts

@@ -0,0 +1,24 @@
+import { initEnvHtml, mountHtml } from 'cypress-angular-unit-test';
+import { HtmlMountComponent } from './html-mount.component';
+
+
+describe('HtmlMountComponent', () => {
+
+  beforeEach(() => {
+    initEnvHtml(HtmlMountComponent);
+  });
+
+  it('mount work', () => {
+    const fixture = mountHtml('<app-html-mount></app-html-mount>');
+    fixture.detectChanges();
+    cy.contains('works !');
+  });
+
+  it('mount with input work', () => {
+    const fixture = mountHtml(`<app-html-mount [data]="'my input'"></app-html-mount>`);
+    fixture.detectChanges();
+    cy.contains('works !');
+    cy.contains('my input');
+  });
+
+});

examples/ng9/src/app/html-mount/html-mount.component.html

@@ -0,0 +1,2 @@
+works !
+{{data}}

examples/ng9/src/app/html-mount/html-mount.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-html-mount',
+  templateUrl: './html-mount.component.html',
+})
+export class HtmlMountComponent implements OnInit {
+
+  @Input() data = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

examples/ng9/src/app/on-push-strat/on-push-strat.component.cy-spec.ts

@@ -1,15 +1,17 @@
-import { initEnv, mount } from 'cypress-angular-unit-test';
+import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
 import { OnPushStratComponent } from './on-push-strat.component';
 
 describe('OnPush strategy', () => {
 
   beforeEach(() => {
+    setConfig({ detectChanges: false });
     initEnv(OnPushStratComponent);
   });
 
   it('mount work', () => {
     const data = 'It works onPush';
-    mount(OnPushStratComponent, { data });
+    const fixture = mount(OnPushStratComponent, { data });
+    fixture.detectChanges();
     cy.contains(data);
   });
 

examples/ng9/src/app/work.cy-spec.ts

@@ -5,8 +5,8 @@ import 'core-js/es/reflect';
 import 'core-js/features/reflect';
 import 'core-js/stable/reflect';
 import 'zone.js/dist/zone';
+import { ProxyComponent } from '../../../../lib/proxy.component';
 import { AppComponent } from './app.component';
-import { FakeComponent } from './fake.component';
 import { HeroService } from './hero.service';
 import { NetworkService } from './network.service';
 import { NetworkComponent } from './network/network.component';
@@ -52,13 +52,13 @@ export const mountt = (component: any, inputs?: object) => {
 };
 
 export const initEnvHtml = (component: any): void => {
-  initEnv(FakeComponent, { declarations: [component] });
+  initEnv(ProxyComponent, { declarations: [component] });
 };
 
 export const mounttHtml = (htmlTemplate: string) => {
   TestBed.compileComponents();
-  TestBed.overrideComponent(FakeComponent, { set: { template: htmlTemplate } });
-  const fixture = TestBed.createComponent(FakeComponent);
+  TestBed.overrideComponent(ProxyComponent, { set: { template: htmlTemplate } });
+  const fixture = TestBed.createComponent(ProxyComponent);
   fixture.detectChanges();
   return fixture;
 };

lib/config.ts

@@ -0,0 +1,5 @@
+export class CypressAngularConfig {
+
+    detectChanges = true;
+
+}

lib/index.ts

@@ -1,5 +1,13 @@
 import { ComponentFixtureAutoDetect, getTestBed, TestBed, TestModuleMetadata } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { ProxyComponent } from './proxy.component';
+import { CypressAngularConfig } from './config';
+
+let config = new CypressAngularConfig();
+
+export const setConfig = (c: CypressAngularConfig) => {
+  config = c;
+}
 
 export const initEnv = (component: any, moduleDef?: TestModuleMetadata) => {
   checkIsComponentSpec();
@@ -11,13 +19,24 @@ export const initEnv = (component: any, moduleDef?: TestModuleMetadata) => {
     platformBrowserDynamicTesting()
   )
 
+  const declarations = [component];
+  const providers = [];
   // automatic component change detection
-  moduleDef?.providers?.push({ provide: ComponentFixtureAutoDetect, useValue: true })
-
+  if (config.detectChanges) {
+    providers.push({ provide: ComponentFixtureAutoDetect, useValue: true });
+  }
+  if (moduleDef) {
+    if (moduleDef.declarations) {
+      declarations.push(...moduleDef.declarations);
+    }
+    if (moduleDef.providers) {
+      providers.push(...moduleDef.providers);
+    }
+  }
   TestBed.configureTestingModule({
-    declarations: [component],
-    providers: moduleDef?.providers,
-    imports: moduleDef?.imports
+    declarations,
+    imports: moduleDef ? moduleDef.imports : [],
+    providers
   }).compileComponents();
 };
 
@@ -29,8 +48,28 @@ export const mount = (component: any, inputs?: object) => {
   const fixture = TestBed.createComponent(component);
   let componentInstance = fixture.componentInstance;
   componentInstance = Object.assign(componentInstance, inputs);
-  fixture.whenStable().then(() => fixture.detectChanges());
-  fixture.detectChanges();
+  if (config.detectChanges) {
+    fixture.whenStable().then(() => fixture.detectChanges());
+    fixture.detectChanges();
+  }
+  return fixture;
+};
+
+export const initEnvHtml = (component: any): void => {
+  initEnv(ProxyComponent, { declarations: [component] });
+};
+
+export const mountHtml = (htmlTemplate: string) => {
+  checkIsComponentSpec();
+
+  cy.log(`Mounting **${htmlTemplate}**`);
+  TestBed.compileComponents();
+  TestBed.overrideComponent(ProxyComponent, { set: { template: htmlTemplate } });
+  const fixture = TestBed.createComponent(ProxyComponent);
+  if (config.detectChanges) {
+    fixture.whenStable().then(() => fixture.detectChanges());
+    fixture.detectChanges();
+  }
   return fixture;
 };
 

examples/ng9/src/app/fake.component.ts → lib/proxy.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-    selector: 'app-fake',
+    selector: 'app-proxy',
     template: '',
 })
-export class FakeComponent implements OnInit {
+export class ProxyComponent implements OnInit {
 
     constructor() {
     }

support.js

@@ -1,6 +1,5 @@
 /// <reference types="cypress" />
 require('zone.js/dist/zone');
-require("zone.js/dist/zone-testing");
 
 // @ts-ignore
 const isComponentSpec = () => Cypress.spec.specType === 'component'