feat: import NoopAnimationsModule by default (#40)

Author: timdeschryver

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<T>(
 
   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];
+}

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>(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>(BrowserAnimationsModule);
+  expect(browserAnimationsModule).toBeDefined();
+
+  expect(() => TestBed.get<NoopAnimationsModule>(NoopAnimationsModule)).toThrow();
+});

src/app/__snapshots__/app.component.spec.ts.snap

@@ -4,26 +4,41 @@ exports[`matches snapshot 1`] = `
 <div
   id="root0"
 >
-  <app-root>
+  <app-root
+    class="ng-tns-c0-0"
+  >
     <div
+      class="ng-tns-c0-0"
       style="text-align:center"
     >
-      <h1>
+      <h1
+        class="ng-tns-c0-0"
+      >
         Welcome to app!
       </h1>
       <img
         alt="Angular Logo"
+        class="ng-tns-c0-0"
         src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
         width="300"
       />
     </div>
-    <h2>
+    <h2
+      class="ng-tns-c0-0"
+    >
       Here are some links to help you start:
     </h2>
-    <ul>
-      <li>
-        <h2>
+    <ul
+      class="ng-tns-c0-0"
+    >
+      <li
+        class="ng-tns-c0-0"
+      >
+        <h2
+          class="ng-tns-c0-0"
+        >
           <a
+            class="ng-tns-c0-0"
             href="https://angular.io/tutorial"
             rel="noopener"
             target="_blank"
@@ -32,9 +47,14 @@ exports[`matches snapshot 1`] = `
           </a>
         </h2>
       </li>
-      <li>
-        <h2>
+      <li
+        class="ng-tns-c0-0"
+      >
+        <h2
+          class="ng-tns-c0-0"
+        >
           <a
+            class="ng-tns-c0-0"
             href="https://github.com/angular/angular-cli/wiki"
             rel="noopener"
             target="_blank"
@@ -43,9 +63,14 @@ exports[`matches snapshot 1`] = `
           </a>
         </h2>
       </li>
-      <li>
-        <h2>
+      <li
+        class="ng-tns-c0-0"
+      >
+        <h2
+          class="ng-tns-c0-0"
+        >
           <a
+            class="ng-tns-c0-0"
             href="https://blog.angular.io/"
             rel="noopener"
             target="_blank"
@@ -55,33 +80,58 @@ exports[`matches snapshot 1`] = `
         </h2>
       </li>
     </ul>
-    <button>
+    <button
+      class="ng-tns-c0-0"
+    >
       Greet
     </button>
     <form
-      class="ng-untouched ng-pristine ng-invalid"
+      class="ng-tns-c0-0 ng-untouched ng-pristine ng-invalid"
       ng-reflect-form="[object Object]"
       novalidate=""
     >
-      <label>
+      <label
+        class="ng-tns-c0-0"
+      >
          Name: 
         <input
-          class="ng-untouched ng-pristine ng-invalid"
+          class="ng-tns-c0-0 ng-untouched ng-pristine ng-invalid"
           formcontrolname="name"
           ng-reflect-name="name"
           type="text"
         />
       </label>
-      <label>
+      <label
+        class="ng-tns-c0-0"
+      >
          Age: 
         <input
-          class="ng-untouched ng-pristine ng-valid"
+          class="ng-tns-c0-0 ng-untouched ng-pristine ng-valid"
           formcontrolname="age"
           ng-reflect-name="age"
           type="number"
         />
       </label>
     </form>
+    <div
+      class="ng-tns-c0-0"
+    >
+      <button
+        class="ng-tns-c0-0"
+      >
+        Toggle Open/Close
+      </button>
+      <div
+        class="open-close-container ng-trigger ng-trigger-openClose"
+        style="height:200px;opacity:1;background-color:yellow;0:height;1:opacity;2:background-color;"
+      >
+        <p
+          class="ng-tns-c0-0"
+        >
+          The box is now Open!
+        </p>
+      </div>
+    </div>
   </app-root>
 </div>
 `;

src/app/app.component.html

@@ -33,3 +33,10 @@ <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular bl
     <input type="number" formControlName="age" />
   </label>
 </form>
+
+<div>
+  <button (click)="toggle()">Toggle Open/Close</button>
+  <div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
+    <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
+  </div>
+</div>

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;
+  }
 }

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],
 })