diff --git a/examples/ng9/src/app/app.module.ts b/examples/ng9/src/app/app.module.ts index 29009dd0..7a9758d3 100644 --- a/examples/ng9/src/app/app.module.ts +++ b/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, diff --git a/examples/ng9/src/app/html-mount/html-mount.component.cy-spec.ts b/examples/ng9/src/app/html-mount/html-mount.component.cy-spec.ts new file mode 100644 index 00000000..2812442e --- /dev/null +++ b/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(''); + fixture.detectChanges(); + cy.contains('works !'); + }); + + it('mount with input work', () => { + const fixture = mountHtml(``); + fixture.detectChanges(); + cy.contains('works !'); + cy.contains('my input'); + }); + +}); diff --git a/examples/ng9/src/app/html-mount/html-mount.component.html b/examples/ng9/src/app/html-mount/html-mount.component.html new file mode 100644 index 00000000..82e5023f --- /dev/null +++ b/examples/ng9/src/app/html-mount/html-mount.component.html @@ -0,0 +1,2 @@ +works ! +{{data}} \ No newline at end of file diff --git a/examples/ng9/src/app/html-mount/html-mount.component.ts b/examples/ng9/src/app/html-mount/html-mount.component.ts new file mode 100644 index 00000000..bb6bba1e --- /dev/null +++ b/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 { + } + +} diff --git a/examples/ng9/src/app/on-push-strat/on-push-strat.component.cy-spec.ts b/examples/ng9/src/app/on-push-strat/on-push-strat.component.cy-spec.ts index 87ce9abc..a8059854 100644 --- a/examples/ng9/src/app/on-push-strat/on-push-strat.component.cy-spec.ts +++ b/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); }); diff --git a/examples/ng9/src/app/work.cy-spec.ts b/examples/ng9/src/app/work.cy-spec.ts index 4c96878b..cd155619 100644 --- a/examples/ng9/src/app/work.cy-spec.ts +++ b/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; }; diff --git a/lib/config.ts b/lib/config.ts new file mode 100644 index 00000000..6078a689 --- /dev/null +++ b/lib/config.ts @@ -0,0 +1,5 @@ +export class CypressAngularConfig { + + detectChanges = true; + +} \ No newline at end of file diff --git a/lib/index.ts b/lib/index.ts index d603c2a2..d304256e 100644 --- a/lib/index.ts +++ b/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; }; diff --git a/examples/ng9/src/app/fake.component.ts b/lib/proxy.component.ts similarity index 65% rename from examples/ng9/src/app/fake.component.ts rename to lib/proxy.component.ts index 9863977a..6e073d7c 100644 --- a/examples/ng9/src/app/fake.component.ts +++ b/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() { } diff --git a/support.js b/support.js index 51564ab2..201cba25 100644 --- a/support.js +++ b/support.js @@ -1,6 +1,5 @@ /// require('zone.js/dist/zone'); -require("zone.js/dist/zone-testing"); // @ts-ignore const isComponentSpec = () => Cypress.spec.specType === 'component'