diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts index 1b56e977..abd08e81 100644 --- a/projects/testing-library/src/lib/testing-library.ts +++ b/projects/testing-library/src/lib/testing-library.ts @@ -1,5 +1,6 @@ import { Component, OnInit, ElementRef, Type, DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; +import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { getQueriesForElement, prettyDOM, fireEvent, FireObject, FireFunction } from '@testing-library/dom'; import { RenderResult, RenderOptions } from './models'; @@ -43,7 +44,7 @@ export async function render( TestBed.configureTestingModule({ declarations: [...declarations, ...componentDeclarations], - imports: [...imports], + imports: addAutoImports(imports), providers: [...providers], schemas: [...schemas], }); @@ -164,3 +165,11 @@ function declareComponents({ isTemplate, wrapper, excludeComponentDeclaration, t return [templateOrComponent]; } + +function addAutoImports(imports: any[]) { + if (imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1) { + return imports; + } + + return [...imports, NoopAnimationsModule]; +} diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts index 83b5126b..c3563b3b 100644 --- a/projects/testing-library/tests/render.spec.ts +++ b/projects/testing-library/tests/render.spec.ts @@ -1,4 +1,6 @@ -import { Component, ElementRef, OnInit, NgModule } from '@angular/core'; +import { Component, NgModule } from '@angular/core'; +import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { TestBed } from '@angular/core/testing'; import { render } from '../src/public_api'; @Component({ @@ -18,3 +20,20 @@ test('should not throw if component is declared in an import', async () => { excludeComponentDeclaration: true, }); }); + +test('should add NoopAnimationsModule by default', async () => { + await render(FixtureComponent); + const noopAnimationsModule = TestBed.get(NoopAnimationsModule); + expect(noopAnimationsModule).toBeDefined(); +}); + +test('should not add NoopAnimationsModule if BrowserAnimationsModule is an import', async () => { + await render(FixtureComponent, { + imports: [BrowserAnimationsModule], + }); + + const browserAnimationsModule = TestBed.get(BrowserAnimationsModule); + expect(browserAnimationsModule).toBeDefined(); + + expect(() => TestBed.get(NoopAnimationsModule)).toThrow(); +}); diff --git a/src/app/__snapshots__/app.component.spec.ts.snap b/src/app/__snapshots__/app.component.spec.ts.snap index fefed968..dafd7f11 100644 --- a/src/app/__snapshots__/app.component.spec.ts.snap +++ b/src/app/__snapshots__/app.component.spec.ts.snap @@ -4,26 +4,41 @@ exports[`matches snapshot 1`] = ` `; diff --git a/src/app/app.component.html b/src/app/app.component.html index 8eaeb267..b34da425 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -33,3 +33,10 @@

Angular bl + +
+ +
+

The box is now {{ isOpen ? 'Open' : 'Closed' }}!

+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 33787300..af80c27b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { trigger, state, style, transition, animate } from '@angular/animations'; import { Store } from '@ngrx/store'; import { GreetService } from './greet.service'; import { FormBuilder, Validators } from '@angular/forms'; @@ -7,8 +8,31 @@ import { FormBuilder, Validators } from '@angular/forms'; selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], + animations: [ + trigger('openClose', [ + state( + 'open', + style({ + height: '200px', + opacity: 1, + backgroundColor: 'yellow', + }), + ), + state( + 'closed', + style({ + height: '100px', + opacity: 0.5, + backgroundColor: 'green', + }), + ), + transition('open => closed', [animate('1s')]), + transition('closed => open', [animate('0.5s')]), + ]), + ], }) export class AppComponent { + isOpen = true; title = 'app'; form = this.fb.group({ name: ['', [Validators.required, Validators.minLength(2)]], @@ -21,5 +45,11 @@ export class AppComponent { this.greetService.greet(); } - onSubmit() {} + onSubmit() { + console.log('Form submitted: ', this.form.value); + } + + toggle() { + this.isOpen = !this.isOpen; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 49fb5756..c6b3c600 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,13 +1,14 @@ import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { StoreModule } from '@ngrx/store'; -import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, ReactiveFormsModule, StoreModule.forRoot({})], + imports: [BrowserModule, ReactiveFormsModule, BrowserAnimationsModule, StoreModule.forRoot({})], providers: [], bootstrap: [AppComponent], })