77 */
88import { Component , OnInit } from '@angular/core' ;
99import { CommonModule } from '@angular/common' ;
10- import { ComponentFixture , TestBed , async } from '@angular/core/testing' ;
10+ import { ComponentFixture , TestBed , async , inject } from '@angular/core/testing' ;
1111
1212import { customMatchers } from '../../utils/testing/custom-matchers' ;
1313import { makeCreateTestComponent , expectNativeEl } from '../../utils/testing/helpers' ;
@@ -23,10 +23,13 @@ import {MediaQueriesModule} from '../../media-query/_module';
2323
2424describe ( 'class directive' , ( ) => {
2525 let fixture : ComponentFixture < any > ;
26- let createTestComponent = makeCreateTestComponent ( ( ) => TestClassComponent ) ;
27- let activateMediaQuery : Function = ( alias , useOverlaps = false ) : void => {
28- let matchMedia : MockMatchMedia = fixture . debugElement . injector . get ( MatchMedia ) ;
29- matchMedia . activate ( alias , useOverlaps ) ;
26+ let matchMedia : MockMatchMedia ;
27+ let createTestComponent = ( template : string ) => {
28+ fixture = makeCreateTestComponent ( ( ) => TestClassComponent ) ( template ) ;
29+
30+ inject ( [ MatchMedia ] , ( _matchMedia : MockMatchMedia ) => {
31+ matchMedia = _matchMedia ;
32+ } ) ( ) ;
3033 } ;
3134
3235 beforeEach ( ( ) => {
@@ -42,163 +45,139 @@ describe('class directive', () => {
4245 ]
4346 } ) ;
4447 } ) ;
45- afterEach ( ( ) => {
46- if ( fixture ) {
47- fixture . debugElement . injector . get ( MatchMedia ) . clearAll ( ) ;
48- fixture = null ;
49- }
50- } ) ;
5148
52- [ 'xs' , 'sm' , 'md' , 'lg' ]
53- . forEach ( mq => {
54- const selector = `class-${ mq } ;
55- it ( `should apply '${ selector } ${ mq } , ( ) => {
56- fixture = createTestComponent ( `
57- <div ngClass.${ mq } ${ selector }
58- </div>
59- ` ) ;
60- activateMediaQuery ( mq ) ;
61- expectNativeEl ( fixture ) . toHaveCssClass ( selector ) ;
62- } ) ;
63- } ) ;
49+ [ 'xs' , 'sm' , 'md' , 'lg' ] . forEach ( mq => {
50+ const selector = `class-${ mq } ;
51+
52+ it ( `should apply '${ selector } ${ mq } , ( ) => {
53+ createTestComponent ( `<div ngClass.${ mq } ${ selector } ) ;
54+ matchMedia . activate ( mq ) ;
55+ expectNativeEl ( fixture ) . toHaveCssClass ( selector ) ;
56+ } ) ;
57+ } ) ;
6458
6559 it ( 'should merge `ngClass` values with any `class` values' , ( ) => {
66- fixture = createTestComponent ( `
67- <div class="class0" ngClass="class1 class2">
68- </div>
69- ` ) ;
60+ createTestComponent ( `<div class="class0" ngClass="class1 class2"></div>` ) ;
7061
7162 expectNativeEl ( fixture ) . toHaveCssClass ( 'class0' ) ;
7263 expectNativeEl ( fixture ) . toHaveCssClass ( 'class1' ) ;
7364 expectNativeEl ( fixture ) . toHaveCssClass ( 'class2' ) ;
7465 } ) ;
7566
7667 it ( 'should override base `class` values with responsive values' , ( ) => {
77- fixture = createTestComponent ( `
78- <div class="class0"
79- class.xs="class1 class2"
80- ngClass.xs="what">
81- </div>
82- ` ) ;
68+ createTestComponent ( `<div class="class0" class.xs="class1 class2" ngClass.xs="what"></div>` ) ;
8369
8470 expectNativeEl ( fixture ) . toHaveCssClass ( 'class0' ) ;
8571 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'class1' ) ;
8672 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'class2' ) ;
8773
88- activateMediaQuery ( 'xs' ) ;
74+ matchMedia . activate ( 'xs' ) ;
8975 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'class0' ) ;
9076 expectNativeEl ( fixture ) . toHaveCssClass ( 'class1' ) ;
9177 expectNativeEl ( fixture ) . toHaveCssClass ( 'class2' ) ;
9278
93- // activateMediaQuery ('lg');
79+ // matchMedia.activate ('lg');
9480 // expectNativeEl(fixture).toHaveCssClass('class0');
9581 // expectNativeEl(fixture).not.toHaveCssClass('class1');
9682 // expectNativeEl(fixture).not.toHaveCssClass('class2');
9783 } ) ;
9884
9985 it ( 'should keep the raw existing `class` with responsive updates' , ( ) => {
100- fixture = createTestComponent ( `
86+ createTestComponent ( `
10187 <div class="existing-class" ngClass="class1" ngClass.xs="xs-class">
10288 </div>
10389 ` ) ;
10490
10591 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
10692 expectNativeEl ( fixture ) . toHaveCssClass ( 'class1' ) ;
10793
108- activateMediaQuery ( 'xs' ) ;
94+ matchMedia . activate ( 'xs' ) ;
10995 expectNativeEl ( fixture ) . toHaveCssClass ( 'xs-class' ) ;
11096 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
11197 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'class1' ) ;
11298
113- activateMediaQuery ( 'lg' ) ;
99+ matchMedia . activate ( 'lg' ) ;
114100 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'xs-class' ) ;
115101 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
116102 expectNativeEl ( fixture ) . toHaveCssClass ( 'class1' ) ;
117103 } ) ;
118104
119105
120106 it ( 'should keep allow removal of class selector' , ( ) => {
121- fixture = createTestComponent ( `
122- <div
123- class="existing-class"
124- [ngClass.xs]="{'xs-class':true, 'existing-class':false}">
125- </div>
107+ createTestComponent ( `
108+ <div
109+ class="existing-class"
110+ [ngClass.xs]="{'xs-class':true, 'existing-class':false}">
111+ </div>
126112 ` ) ;
127113
128114 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
129- activateMediaQuery ( 'xs' ) ;
115+ matchMedia . activate ( 'xs' ) ;
130116 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'existing-class' ) ;
131117 expectNativeEl ( fixture ) . toHaveCssClass ( 'xs-class' ) ;
132118
133- activateMediaQuery ( 'lg' ) ;
119+ matchMedia . activate ( 'lg' ) ;
134120 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
135121 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'xs-class' ) ;
136122 } ) ;
137123
138124 it ( 'should keep existing ngClass selector' , ( ) => {
139125 // @see documentation for @angular/core ngClass =http://bit.ly/2mz0LAa
140- fixture = createTestComponent ( `
141- <div class="always"
142- ngClass="existing-class"
143- ngClass.xs="existing-class xs-class">
144- </div>
126+ createTestComponent ( `
127+ <div class="always"
128+ ngClass="existing-class"
129+ ngClass.xs="existing-class xs-class">
130+ </div>
145131 ` ) ;
146132
147133 expectNativeEl ( fixture ) . toHaveCssClass ( 'always' ) ;
148134 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
149135
150- activateMediaQuery ( 'xs' ) ;
136+ matchMedia . activate ( 'xs' ) ;
151137 expectNativeEl ( fixture ) . toHaveCssClass ( 'always' ) ;
152138 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
153139 expectNativeEl ( fixture ) . toHaveCssClass ( 'xs-class' ) ;
154140
155- activateMediaQuery ( 'lg' ) ;
141+ matchMedia . activate ( 'lg' ) ;
156142 expectNativeEl ( fixture ) . toHaveCssClass ( 'always' ) ;
157143 expectNativeEl ( fixture ) . toHaveCssClass ( 'existing-class' ) ;
158144 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'xs-class' ) ;
159145 } ) ;
160146
161147 it ( 'should support more than one responsive breakpoint on one element' , ( ) => {
162- fixture = createTestComponent ( `
163- <div ngClass.xs="xs-class"
164- ngClass.md="md-class">
165- </div>
166- ` ) ;
167- activateMediaQuery ( 'xs' ) ;
148+ createTestComponent ( `<div ngClass.xs="xs-class" ngClass.md="md-class"></div>` ) ;
149+ matchMedia . activate ( 'xs' ) ;
168150 expectNativeEl ( fixture ) . toHaveCssClass ( 'xs-class' ) ;
169151 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'md-class' ) ;
170- activateMediaQuery ( 'md' ) ;
152+ matchMedia . activate ( 'md' ) ;
171153 expectNativeEl ( fixture ) . not . toHaveCssClass ( 'xs-class' ) ;
172154 expectNativeEl ( fixture ) . toHaveCssClass ( 'md-class' ) ;
173155 } ) ;
174156
175157 it ( 'should work with ngClass object notation' , ( ) => {
176- fixture = createTestComponent ( `
177- <div [ngClass]="{'x1': hasX1, 'x3': hasX3}"
178- [ngClass.xs]="{'x1': hasX1, 'x2': hasX2}">
179- </div>
158+ createTestComponent ( `
159+ <div [ngClass]="{'x1': hasX1, 'x3': hasX3}"
160+ [ngClass.xs]="{'x1': hasX1, 'x2': hasX2}">
161+ </div>
180162 ` ) ;
181163 expectNativeEl ( fixture , { hasX1 : true , hasX2 : true , hasX3 : true } ) . toHaveCssClass ( 'x1' ) ;
182164 expectNativeEl ( fixture , { hasX1 : true , hasX2 : true , hasX3 : true } ) . not . toHaveCssClass ( 'x2' ) ;
183165 expectNativeEl ( fixture , { hasX1 : true , hasX2 : true , hasX3 : true } ) . toHaveCssClass ( 'x3' ) ;
184166
185- activateMediaQuery ( 'X' ) ;
167+ matchMedia . activate ( 'X' ) ;
186168 expectNativeEl ( fixture , { hasX1 : true , hasX2 : false , hasX3 : false } ) . toHaveCssClass ( 'x1' ) ;
187169 expectNativeEl ( fixture , { hasX1 : true , hasX2 : false , hasX3 : false } ) . not . toHaveCssClass ( 'x2' ) ;
188170 expectNativeEl ( fixture , { hasX1 : true , hasX2 : false , hasX3 : false } ) . not . toHaveCssClass ( 'x3' ) ;
189171
190- activateMediaQuery ( 'md' ) ;
172+ matchMedia . activate ( 'md' ) ;
191173 expectNativeEl ( fixture , { hasX1 : true , hasX2 : false , hasX3 : true } ) . toHaveCssClass ( 'x1' ) ;
192174 expectNativeEl ( fixture , { hasX1 : true , hasX2 : false , hasX3 : true } ) . not . toHaveCssClass ( 'x2' ) ;
193175 expectNativeEl ( fixture , { hasX1 : true , hasX2 : false , hasX3 : true } ) . toHaveCssClass ( 'x3' ) ;
194176 } ) ;
195177
196178 it ( 'should work with ngClass array notation' , ( ) => {
197- fixture = createTestComponent ( `
198- <div [ngClass.xs]="['xs-1', 'xs-2']">
199- </div>
200- ` ) ;
201- activateMediaQuery ( 'xs' ) ;
179+ createTestComponent ( `<div [ngClass.xs]="['xs-1', 'xs-2']"></div>` ) ;
180+ matchMedia . activate ( 'xs' ) ;
202181 expectNativeEl ( fixture ) . toHaveCssClass ( 'xs-1' ) ;
203182 expectNativeEl ( fixture ) . toHaveCssClass ( 'xs-2' ) ;
204183 } ) ;
@@ -565,7 +544,7 @@ describe('binding to CSS class list', () => {
565544
566545@Component ( { selector : 'test-cmp' , template : '' } )
567546class TestComponent {
568- condition : boolean = true ;
547+ condition = true ;
569548 items : any [ ] ;
570549 arrExpr : string [ ] = [ 'foo' ] ;
571550 setExpr : Set < string > = new Set < string > ( ) ;
0 commit comments