1
- import {
2
- TestBed ,
3
- inject ,
4
- async ,
5
- TestComponentBuilder ,
6
- ComponentFixture ,
7
- } from '@angular/core/testing' ;
1
+ import { TestBed , ComponentFixture } from '@angular/core/testing' ;
8
2
import { Component , ViewChild } from '@angular/core' ;
9
3
import { MdRipple , MdRippleModule } from './ripple' ;
10
4
5
+
11
6
/** Creates a DOM event to indicate that a CSS transition for the given property ended. */
12
7
const createTransitionEndEvent = ( propertyName : string ) => {
13
8
// The "new" TransitionEvent constructor isn't available in anything except Firefox:
@@ -61,18 +56,17 @@ const pxStringToFloat = (s: string) => {
61
56
} ;
62
57
63
58
describe ( 'MdRipple' , ( ) => {
64
- let builder : TestComponentBuilder ;
65
59
let fixture : ComponentFixture < any > ;
66
60
let rippleElement : HTMLElement ;
67
61
let rippleBackground : Element ;
68
62
let originalBodyMargin : string ;
69
63
70
- beforeEach ( async ( ( ) => {
64
+ beforeEach ( ( ) => {
71
65
TestBed . configureTestingModule ( {
72
66
imports : [ MdRippleModule ] ,
73
67
declarations : [ BasicRippleContainer , RippleContainerWithInputBindings ] ,
74
68
} ) ;
75
- } ) ) ;
69
+ } ) ;
76
70
77
71
beforeEach ( ( ) => {
78
72
// Set body margin to 0 during tests so it doesn't mess up position calculations.
@@ -84,21 +78,15 @@ describe('MdRipple', () => {
84
78
document . body . style . margin = originalBodyMargin ;
85
79
} ) ;
86
80
87
- beforeEach ( inject ( [ TestComponentBuilder ] , ( tcb : TestComponentBuilder ) => {
88
- builder = tcb ;
89
- } ) ) ;
90
-
91
81
describe ( 'basic ripple' , ( ) => {
92
- beforeEach ( async ( ( ) => {
93
- builder . createAsync ( BasicRippleContainer ) . then ( f => {
94
- fixture = f ;
95
- fixture . detectChanges ( ) ;
82
+ beforeEach ( ( ) => {
83
+ fixture = TestBed . createComponent ( BasicRippleContainer ) ;
84
+ fixture . detectChanges ( ) ;
96
85
97
- rippleElement = fixture . debugElement . nativeElement . querySelector ( '[md-ripple]' ) ;
98
- rippleBackground = rippleElement . querySelector ( '.md-ripple-background' ) ;
99
- expect ( rippleBackground ) . toBeTruthy ( ) ;
100
- } ) ;
101
- } ) ) ;
86
+ rippleElement = fixture . debugElement . nativeElement . querySelector ( '[md-ripple]' ) ;
87
+ rippleBackground = rippleElement . querySelector ( '.md-ripple-background' ) ;
88
+ expect ( rippleBackground ) . toBeTruthy ( ) ;
89
+ } ) ;
102
90
103
91
it ( 'shows background when parent receives mousedown event' , ( ) => {
104
92
expect ( rippleBackground . classList ) . not . toContain ( 'md-ripple-active' ) ;
@@ -198,18 +186,16 @@ describe('MdRipple', () => {
198
186
let controller : RippleContainerWithInputBindings ;
199
187
let rippleComponent : MdRipple ;
200
188
201
- beforeEach ( async ( ( ) => {
202
- builder . createAsync ( RippleContainerWithInputBindings ) . then ( f => {
203
- fixture = f ;
204
- fixture . detectChanges ( ) ;
189
+ beforeEach ( ( ) => {
190
+ fixture = TestBed . createComponent ( RippleContainerWithInputBindings ) ;
191
+ fixture . detectChanges ( ) ;
205
192
206
- controller = fixture . debugElement . componentInstance ;
207
- rippleComponent = controller . ripple ;
208
- rippleElement = fixture . debugElement . nativeElement . querySelector ( '[md-ripple]' ) ;
209
- rippleBackground = rippleElement . querySelector ( '.md-ripple-background' ) ;
210
- expect ( rippleBackground ) . toBeTruthy ( ) ;
211
- } ) ;
212
- } ) ) ;
193
+ controller = fixture . debugElement . componentInstance ;
194
+ rippleComponent = controller . ripple ;
195
+ rippleElement = fixture . debugElement . nativeElement . querySelector ( '[md-ripple]' ) ;
196
+ rippleBackground = rippleElement . querySelector ( '.md-ripple-background' ) ;
197
+ expect ( rippleBackground ) . toBeTruthy ( ) ;
198
+ } ) ;
213
199
214
200
it ( 'sets ripple background color' , ( ) => {
215
201
// This depends on the exact color format that getComputedStyle returns; for example, alpha
0 commit comments