Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 6d3d71a

Browse files
feat: import NoopAnimationsModule by default (testing-library#40)
1 parent e5a516e commit 6d3d71a

File tree

6 files changed

+137
-21
lines changed

6 files changed

+137
-21
lines changed

‎projects/testing-library/src/lib/testing-library.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Component, OnInit, ElementRef, Type, DebugElement } from '@angular/core';
22
import { By } from '@angular/platform-browser';
3+
import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
34
import { TestBed, ComponentFixture } from '@angular/core/testing';
45
import { getQueriesForElement, prettyDOM, fireEvent, FireObject, FireFunction } from '@testing-library/dom';
56
import { RenderResult, RenderOptions } from './models';
@@ -43,7 +44,7 @@ export async function render<T>(
4344

4445
TestBed.configureTestingModule({
4546
declarations: [...declarations, ...componentDeclarations],
46-
imports: [...imports],
47+
imports: addAutoImports(imports),
4748
providers: [...providers],
4849
schemas: [...schemas],
4950
});
@@ -164,3 +165,11 @@ function declareComponents({ isTemplate, wrapper, excludeComponentDeclaration, t
164165

165166
return [templateOrComponent];
166167
}
168+
169+
function addAutoImports(imports: any[]) {
170+
if (imports.indexOf(NoopAnimationsModule) > -1 || imports.indexOf(BrowserAnimationsModule) > -1) {
171+
return imports;
172+
}
173+
174+
return [...imports, NoopAnimationsModule];
175+
}

‎projects/testing-library/tests/render.spec.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Component, ElementRef, OnInit, NgModule } from '@angular/core';
1+
import { Component, NgModule } from '@angular/core';
2+
import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
3+
import { TestBed } from '@angular/core/testing';
24
import { render } from '../src/public_api';
35

46
@Component({
@@ -18,3 +20,20 @@ test('should not throw if component is declared in an import', async () => {
1820
excludeComponentDeclaration: true,
1921
});
2022
});
23+
24+
test('should add NoopAnimationsModule by default', async () => {
25+
await render(FixtureComponent);
26+
const noopAnimationsModule = TestBed.get<NoopAnimationsModule>(NoopAnimationsModule);
27+
expect(noopAnimationsModule).toBeDefined();
28+
});
29+
30+
test('should not add NoopAnimationsModule if BrowserAnimationsModule is an import', async () => {
31+
await render(FixtureComponent, {
32+
imports: [BrowserAnimationsModule],
33+
});
34+
35+
const browserAnimationsModule = TestBed.get<BrowserAnimationsModule>(BrowserAnimationsModule);
36+
expect(browserAnimationsModule).toBeDefined();
37+
38+
expect(() => TestBed.get<NoopAnimationsModule>(NoopAnimationsModule)).toThrow();
39+
});

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

Lines changed: 66 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,41 @@ exports[`matches snapshot 1`] = `
44
<div
55
id="root0"
66
>
7-
<app-root>
7+
<app-root
8+
class="ng-tns-c0-0"
9+
>
810
<div
11+
class="ng-tns-c0-0"
912
style="text-align:center"
1013
>
11-
<h1>
14+
<h1
15+
class="ng-tns-c0-0"
16+
>
1217
Welcome to app!
1318
</h1>
1419
<img
1520
alt="Angular Logo"
21+
class="ng-tns-c0-0"
1622
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
1723
width="300"
1824
/>
1925
</div>
20-
<h2>
26+
<h2
27+
class="ng-tns-c0-0"
28+
>
2129
Here are some links to help you start:
2230
</h2>
23-
<ul>
24-
<li>
25-
<h2>
31+
<ul
32+
class="ng-tns-c0-0"
33+
>
34+
<li
35+
class="ng-tns-c0-0"
36+
>
37+
<h2
38+
class="ng-tns-c0-0"
39+
>
2640
<a
41+
class="ng-tns-c0-0"
2742
href="https://angular.io/tutorial"
2843
rel="noopener"
2944
target="_blank"
@@ -32,9 +47,14 @@ exports[`matches snapshot 1`] = `
3247
</a>
3348
</h2>
3449
</li>
35-
<li>
36-
<h2>
50+
<li
51+
class="ng-tns-c0-0"
52+
>
53+
<h2
54+
class="ng-tns-c0-0"
55+
>
3756
<a
57+
class="ng-tns-c0-0"
3858
href="https://github.com/angular/angular-cli/wiki"
3959
rel="noopener"
4060
target="_blank"
@@ -43,9 +63,14 @@ exports[`matches snapshot 1`] = `
4363
</a>
4464
</h2>
4565
</li>
46-
<li>
47-
<h2>
66+
<li
67+
class="ng-tns-c0-0"
68+
>
69+
<h2
70+
class="ng-tns-c0-0"
71+
>
4872
<a
73+
class="ng-tns-c0-0"
4974
href="https://blog.angular.io/"
5075
rel="noopener"
5176
target="_blank"
@@ -55,33 +80,58 @@ exports[`matches snapshot 1`] = `
5580
</h2>
5681
</li>
5782
</ul>
58-
<button>
83+
<button
84+
class="ng-tns-c0-0"
85+
>
5986
Greet
6087
</button>
6188
<form
62-
class="ng-untouched ng-pristine ng-invalid"
89+
class="ng-tns-c0-0 ng-untouched ng-pristine ng-invalid"
6390
ng-reflect-form="[object Object]"
6491
novalidate=""
6592
>
66-
<label>
93+
<label
94+
class="ng-tns-c0-0"
95+
>
6796
Name:
6897
<input
69-
class="ng-untouched ng-pristine ng-invalid"
98+
class="ng-tns-c0-0 ng-untouched ng-pristine ng-invalid"
7099
formcontrolname="name"
71100
ng-reflect-name="name"
72101
type="text"
73102
/>
74103
</label>
75-
<label>
104+
<label
105+
class="ng-tns-c0-0"
106+
>
76107
Age:
77108
<input
78-
class="ng-untouched ng-pristine ng-valid"
109+
class="ng-tns-c0-0 ng-untouched ng-pristine ng-valid"
79110
formcontrolname="age"
80111
ng-reflect-name="age"
81112
type="number"
82113
/>
83114
</label>
84115
</form>
116+
<div
117+
class="ng-tns-c0-0"
118+
>
119+
<button
120+
class="ng-tns-c0-0"
121+
>
122+
Toggle Open/Close
123+
</button>
124+
<div
125+
class="open-close-container ng-trigger ng-trigger-openClose"
126+
style="height:200px;opacity:1;background-color:yellow;0:height;1:opacity;2:background-color;"
127+
>
128+
<p
129+
class="ng-tns-c0-0"
130+
>
131+
The box is now Open!
132+
</p>
133+
</div>
134+
</div>
85135
</app-root>
86136
</div>
87137
`;

‎src/app/app.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,10 @@ <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular bl
3333
<input type="number" formControlName="age" />
3434
</label>
3535
</form>
36+
37+
<div>
38+
<button (click)="toggle()">Toggle Open/Close</button>
39+
<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
40+
<p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
41+
</div>
42+
</div>

‎src/app/app.component.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component } from '@angular/core';
2+
import { trigger, state, style, transition, animate } from '@angular/animations';
23
import { Store } from '@ngrx/store';
34
import { GreetService } from './greet.service';
45
import { FormBuilder, Validators } from '@angular/forms';
@@ -7,8 +8,31 @@ import { FormBuilder, Validators } from '@angular/forms';
78
selector: 'app-root',
89
templateUrl: './app.component.html',
910
styleUrls: ['./app.component.css'],
11+
animations: [
12+
trigger('openClose', [
13+
state(
14+
'open',
15+
style({
16+
height: '200px',
17+
opacity: 1,
18+
backgroundColor: 'yellow',
19+
}),
20+
),
21+
state(
22+
'closed',
23+
style({
24+
height: '100px',
25+
opacity: 0.5,
26+
backgroundColor: 'green',
27+
}),
28+
),
29+
transition('open => closed', [animate('1s')]),
30+
transition('closed => open', [animate('0.5s')]),
31+
]),
32+
],
1033
})
1134
export class AppComponent {
35+
isOpen = true;
1236
title = 'app';
1337
form = this.fb.group({
1438
name: ['', [Validators.required, Validators.minLength(2)]],
@@ -21,5 +45,11 @@ export class AppComponent {
2145
this.greetService.greet();
2246
}
2347

24-
onSubmit() {}
48+
onSubmit() {
49+
console.log('Form submitted: ', this.form.value);
50+
}
51+
52+
toggle() {
53+
this.isOpen = !this.isOpen;
54+
}
2555
}

‎src/app/app.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { BrowserModule } from '@angular/platform-browser';
2+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
23
import { NgModule } from '@angular/core';
4+
import { ReactiveFormsModule } from '@angular/forms';
35

46
import { AppComponent } from './app.component';
57
import { StoreModule } from '@ngrx/store';
6-
import { ReactiveFormsModule } from '@angular/forms';
78

89
@NgModule({
910
declarations: [AppComponent],
10-
imports: [BrowserModule, ReactiveFormsModule, StoreModule.forRoot({})],
11+
imports: [BrowserModule, ReactiveFormsModule, BrowserAnimationsModule,StoreModule.forRoot({})],
1112
providers: [],
1213
bootstrap: [AppComponent],
1314
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /