diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts index 1de652e..f866304 100644 --- a/projects/testing-library/src/lib/models.ts +++ b/projects/testing-library/src/lib/models.ts @@ -76,6 +76,19 @@ export interface RenderResult extend } export interface RenderComponentOptions { + /** + * @description + * Automatically detect changes as a "real" running component would do. + * + * @default + * true + * + * @example + * const component = await render(AppComponent, { + * autoDetectChanges: false + * }) + */ + autoDetectChanges?: boolean; /** * @description * Will call detectChanges when the component is compiled diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts index 7782f0c..62f1196 100644 --- a/projects/testing-library/src/lib/testing-library.ts +++ b/projects/testing-library/src/lib/testing-library.ts @@ -47,6 +47,7 @@ export async function render( const { dom: domConfig, ...globalConfig } = getConfig(); const { detectChanges: detectChangesOnRender = true, + autoDetectChanges = true, declarations = [], imports = [], providers = [], @@ -64,14 +65,7 @@ export async function render( defaultImports = [], } = { ...globalConfig, ...renderOptions }; - dtlConfigure({ - eventWrapper: (cb) => { - const result = cb(); - detectChangesForMountedFixtures(); - return result; - }, - ...domConfig, - }); + dtlConfigure(domConfig); TestBed.configureTestingModule({ declarations: addAutoDeclarations(sut, { @@ -193,7 +187,6 @@ export async function render( result = doNavigate(); } - detectChanges(); return result ?? false; }; @@ -223,7 +216,6 @@ export async function render( } fixture = await createComponent(componentContainer); - setComponentProperties(fixture, properties); setComponentInputs(fixture, inputs); setComponentOutputs(fixture, outputs); @@ -245,6 +237,10 @@ export async function render( fixture.componentInstance.ngOnChanges(changes); } + if (autoDetectChanges) { + fixture.autoDetectChanges(true); + } + detectChanges = () => { if (isAlive) { fixture.detectChanges(); @@ -395,8 +391,6 @@ async function waitForWrapper( inFakeAsync = false; } - detectChanges(); - return await dtlWaitFor(() => { setTimeout(() => detectChanges(), 0); if (inFakeAsync) { diff --git a/projects/testing-library/tests/fire-event.spec.ts b/projects/testing-library/tests/fire-event.spec.ts index ebb8501..ace4ba8 100644 --- a/projects/testing-library/tests/fire-event.spec.ts +++ b/projects/testing-library/tests/fire-event.spec.ts @@ -1,17 +1,48 @@ import { Component } from '@angular/core'; import { render, fireEvent, screen } from '../src/public_api'; +import { FormsModule } from '@angular/forms'; -@Component({ - selector: 'atl-fixture', - template: ` `, -}) -class FixtureComponent {} +describe('fireEvent', () => { + @Component({ + selector: 'atl-fixture', + template: ` +
Hello {{ name }}
`, + }) + class FixtureComponent { + name = ''; + } -test('does not call detect changes when fixture is destroyed', async () => { - const { fixture } = await render(FixtureComponent); + it('automatically detect changes when event is fired', async () => { + await render(FixtureComponent, { + imports: [FormsModule], + }); - fixture.destroy(); + fireEvent.input(screen.getByTestId('input'), { target: { value: 'Tim' } }); - // should otherwise throw - fireEvent.input(screen.getByTestId('input'), { target: { value: 'Bonjour' } }); + expect(screen.getByText('Hello Tim')).toBeInTheDocument(); + }); + + it('can disable automatic detect changes when event is fired', async () => { + const { detectChanges } = await render(FixtureComponent, { + imports: [FormsModule], + autoDetectChanges: false, + }); + + fireEvent.input(screen.getByTestId('input'), { target: { value: 'Tim' } }); + + expect(screen.queryByText('Hello Tim')).not.toBeInTheDocument(); + + detectChanges(); + + expect(screen.getByText('Hello Tim')).toBeInTheDocument(); + }); + + it('does not call detect changes when fixture is destroyed', async () => { + const { fixture } = await render(FixtureComponent); + + fixture.destroy(); + + // should otherwise throw + fireEvent.input(screen.getByTestId('input'), { target: { value: 'Bonjour' } }); + }); });