1
1
import { LEFT_ARROW } from '@angular/cdk/keycodes' ;
2
2
import { dispatchFakeEvent , dispatchKeyboardEvent } from '../../cdk/testing/private' ;
3
- import { Component , OnInit , QueryList , ViewChild , ViewChildren } from '@angular/core' ;
3
+ import { Component , DebugElement , OnInit , QueryList , ViewChild , ViewChildren } from '@angular/core' ;
4
4
import {
5
5
waitForAsync ,
6
6
ComponentFixture ,
@@ -41,6 +41,7 @@ describe('MDC-based MatTabGroup', () => {
41
41
TabGroupWithIndirectDescendantTabs ,
42
42
TabGroupWithSpaceAbove ,
43
43
NestedTabGroupWithLabel ,
44
+ TabsWithClassesTestApp ,
44
45
] ,
45
46
} ) ;
46
47
@@ -364,7 +365,6 @@ describe('MDC-based MatTabGroup', () => {
364
365
365
366
expect ( contentElements . map ( e => e . getAttribute ( 'tabindex' ) ) ) . toEqual ( [ '1' , null , null ] ) ;
366
367
} ) ;
367
-
368
368
} ) ;
369
369
370
370
describe ( 'aria labelling' , ( ) => {
@@ -404,11 +404,16 @@ describe('MDC-based MatTabGroup', () => {
404
404
405
405
expect ( tab . getAttribute ( 'aria-label' ) ) . toBe ( 'Fruit' ) ;
406
406
expect ( tab . hasAttribute ( 'aria-labelledby' ) ) . toBe ( false ) ;
407
+
408
+ fixture . componentInstance . ariaLabel = 'Veggie' ;
409
+ fixture . detectChanges ( ) ;
410
+ expect ( tab . getAttribute ( 'aria-label' ) ) . toBe ( 'Veggie' ) ;
407
411
} ) ;
408
412
} ) ;
409
413
410
414
describe ( 'disable tabs' , ( ) => {
411
415
let fixture : ComponentFixture < DisabledTabsTestApp > ;
416
+
412
417
beforeEach ( ( ) => {
413
418
fixture = TestBed . createComponent ( DisabledTabsTestApp ) ;
414
419
} ) ;
@@ -482,7 +487,6 @@ describe('MDC-based MatTabGroup', () => {
482
487
expect ( tabs [ 0 ] . origin ) . toBeLessThan ( 0 ) ;
483
488
} ) ) ;
484
489
485
-
486
490
it ( 'should update selected index if the last tab removed while selected' , fakeAsync ( ( ) => {
487
491
const component : MatTabGroup =
488
492
fixture . debugElement . query ( By . css ( 'mat-tab-group' ) ) . componentInstance ;
@@ -500,7 +504,6 @@ describe('MDC-based MatTabGroup', () => {
500
504
expect ( component . selectedIndex ) . toBe ( numberOfTabs - 2 ) ;
501
505
} ) ) ;
502
506
503
-
504
507
it ( 'should maintain the selected tab if a new tab is added' , ( ) => {
505
508
fixture . detectChanges ( ) ;
506
509
const component : MatTabGroup =
@@ -517,7 +520,6 @@ describe('MDC-based MatTabGroup', () => {
517
520
expect ( component . _tabs . toArray ( ) [ 2 ] . isActive ) . toBe ( true ) ;
518
521
} ) ;
519
522
520
-
521
523
it ( 'should maintain the selected tab if a tab is removed' , ( ) => {
522
524
// Select the second tab.
523
525
fixture . componentInstance . selectedIndex = 1 ;
@@ -565,7 +567,6 @@ describe('MDC-based MatTabGroup', () => {
565
567
566
568
expect ( fixture . componentInstance . handleSelection ) . not . toHaveBeenCalled ( ) ;
567
569
} ) ) ;
568
-
569
570
} ) ;
570
571
571
572
describe ( 'async tabs' , ( ) => {
@@ -756,6 +757,100 @@ describe('MDC-based MatTabGroup', () => {
756
757
} ) ) ;
757
758
} ) ;
758
759
760
+ describe ( 'tabs with custom css classes' , ( ) => {
761
+ let fixture : ComponentFixture < TabsWithClassesTestApp > ;
762
+
763
+ beforeEach ( ( ) => {
764
+ fixture = TestBed . createComponent ( TabsWithClassesTestApp ) ;
765
+ } ) ;
766
+
767
+ it ( 'should apply label classes' , ( ) => {
768
+ fixture . detectChanges ( ) ;
769
+
770
+ const labelElements = fixture . debugElement
771
+ . queryAll ( By . css ( '.mdc-tab.hardcoded.label.classes' ) ) ;
772
+ expect ( labelElements . length ) . toBe ( 1 ) ;
773
+ } ) ;
774
+
775
+ it ( 'should apply body classes' , ( ) => {
776
+ fixture . detectChanges ( ) ;
777
+
778
+ const bodyElements = fixture . debugElement
779
+ . queryAll ( By . css ( 'mat-tab-body.hardcoded.body.classes' ) ) ;
780
+ expect ( bodyElements . length ) . toBe ( 1 ) ;
781
+ } ) ;
782
+
783
+ it ( 'should set classes as strings dynamically' , ( ) => {
784
+ fixture . detectChanges ( ) ;
785
+ let labelElements : DebugElement [ ] ;
786
+ let bodyElements : DebugElement [ ] ;
787
+
788
+ labelElements = fixture . debugElement
789
+ . queryAll ( By . css ( '.mdc-tab.custom-label-class.one-more-label-class' ) ) ;
790
+ bodyElements = fixture . debugElement
791
+ . queryAll ( By . css ( 'mat-tab-body.custom-body-class.one-more-body-class' ) ) ;
792
+ expect ( labelElements . length ) . toBe ( 0 ) ;
793
+ expect ( bodyElements . length ) . toBe ( 0 ) ;
794
+
795
+ fixture . componentInstance . labelClassList = 'custom-label-class one-more-label-class' ;
796
+ fixture . componentInstance . bodyClassList = 'custom-body-class one-more-body-class' ;
797
+ fixture . detectChanges ( ) ;
798
+
799
+ labelElements = fixture . debugElement
800
+ . queryAll ( By . css ( '.mdc-tab.custom-label-class.one-more-label-class' ) ) ;
801
+ bodyElements = fixture . debugElement
802
+ . queryAll ( By . css ( 'mat-tab-body.custom-body-class.one-more-body-class' ) ) ;
803
+ expect ( labelElements . length ) . toBe ( 2 ) ;
804
+ expect ( bodyElements . length ) . toBe ( 2 ) ;
805
+
806
+ delete fixture . componentInstance . labelClassList ;
807
+ delete fixture . componentInstance . bodyClassList ;
808
+ fixture . detectChanges ( ) ;
809
+
810
+ labelElements = fixture . debugElement
811
+ . queryAll ( By . css ( '.mdc-tab.custom-label-class.one-more-label-class' ) ) ;
812
+ bodyElements = fixture . debugElement
813
+ . queryAll ( By . css ( 'mat-tab-body.custom-body-class.one-more-body-class' ) ) ;
814
+ expect ( labelElements . length ) . toBe ( 0 ) ;
815
+ expect ( bodyElements . length ) . toBe ( 0 ) ;
816
+ } ) ;
817
+
818
+ it ( 'should set classes as strings array dynamically' , ( ) => {
819
+ fixture . detectChanges ( ) ;
820
+ let labelElements : DebugElement [ ] ;
821
+ let bodyElements : DebugElement [ ] ;
822
+
823
+ labelElements = fixture . debugElement
824
+ . queryAll ( By . css ( '.mdc-tab.custom-label-class.one-more-label-class' ) ) ;
825
+ bodyElements = fixture . debugElement
826
+ . queryAll ( By . css ( 'mat-tab-body.custom-body-class.one-more-body-class' ) ) ;
827
+ expect ( labelElements . length ) . toBe ( 0 ) ;
828
+ expect ( bodyElements . length ) . toBe ( 0 ) ;
829
+
830
+ fixture . componentInstance . labelClassList = [ 'custom-label-class' , 'one-more-label-class' ] ;
831
+ fixture . componentInstance . bodyClassList = [ 'custom-body-class' , 'one-more-body-class' ] ;
832
+ fixture . detectChanges ( ) ;
833
+
834
+ labelElements = fixture . debugElement
835
+ . queryAll ( By . css ( '.mdc-tab.custom-label-class.one-more-label-class' ) ) ;
836
+ bodyElements = fixture . debugElement
837
+ . queryAll ( By . css ( 'mat-tab-body.custom-body-class.one-more-body-class' ) ) ;
838
+ expect ( labelElements . length ) . toBe ( 2 ) ;
839
+ expect ( bodyElements . length ) . toBe ( 2 ) ;
840
+
841
+ delete fixture . componentInstance . labelClassList ;
842
+ delete fixture . componentInstance . bodyClassList ;
843
+ fixture . detectChanges ( ) ;
844
+
845
+ labelElements = fixture . debugElement
846
+ . queryAll ( By . css ( '.mdc-tab.custom-label-class.one-more-label-class' ) ) ;
847
+ bodyElements = fixture . debugElement
848
+ . queryAll ( By . css ( 'mat-tab-body.custom-body-class.one-more-body-class' ) ) ;
849
+ expect ( labelElements . length ) . toBe ( 0 ) ;
850
+ expect ( bodyElements . length ) . toBe ( 0 ) ;
851
+ } ) ;
852
+ } ) ;
853
+
759
854
/**
760
855
* Checks that the `selectedIndex` has been updated; checks that the label and body have their
761
856
* respective `active` classes
@@ -935,6 +1030,7 @@ class SimpleTabsTestApp {
935
1030
animationDone ( ) { }
936
1031
}
937
1032
1033
+
938
1034
@Component ( {
939
1035
template : `
940
1036
<mat-tab-group class="tab-group"
@@ -965,6 +1061,7 @@ class SimpleDynamicTabsTestApp {
965
1061
}
966
1062
}
967
1063
1064
+
968
1065
@Component ( {
969
1066
template : `
970
1067
<mat-tab-group class="tab-group" [(selectedIndex)]="selectedIndex">
@@ -990,8 +1087,8 @@ class BindedTabsTestApp {
990
1087
}
991
1088
}
992
1089
1090
+
993
1091
@Component ( {
994
- selector : 'test-app' ,
995
1092
template : `
996
1093
<mat-tab-group class="tab-group">
997
1094
<mat-tab>
@@ -1014,6 +1111,7 @@ class DisabledTabsTestApp {
1014
1111
isDisabled = false ;
1015
1112
}
1016
1113
1114
+
1017
1115
@Component ( {
1018
1116
template : `
1019
1117
<mat-tab-group class="tab-group">
@@ -1059,7 +1157,6 @@ class TabGroupWithSimpleApi {
1059
1157
1060
1158
1061
1159
@Component ( {
1062
- selector : 'nested-tabs' ,
1063
1160
template : `
1064
1161
<mat-tab-group>
1065
1162
<mat-tab label="One">Tab one content</mat-tab>
@@ -1077,8 +1174,8 @@ class NestedTabs {
1077
1174
@ViewChildren ( MatTabGroup ) groups : QueryList < MatTabGroup > ;
1078
1175
}
1079
1176
1177
+
1080
1178
@Component ( {
1081
- selector : 'template-tabs' ,
1082
1179
template : `
1083
1180
<mat-tab-group>
1084
1181
<mat-tab label="One">
@@ -1091,11 +1188,11 @@ class NestedTabs {
1091
1188
</mat-tab>
1092
1189
</mat-tab-group>
1093
1190
` ,
1094
- } )
1095
- class TemplateTabs { }
1191
+ } )
1192
+ class TemplateTabs { }
1096
1193
1097
1194
1098
- @Component ( {
1195
+ @Component ( {
1099
1196
template : `
1100
1197
<mat-tab-group>
1101
1198
<mat-tab [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"></mat-tab>
@@ -1160,6 +1257,7 @@ class TabGroupWithInkBarFitToContent {
1160
1257
fitInkBarToContent = true ;
1161
1258
}
1162
1259
1260
+
1163
1261
@Component ( {
1164
1262
template : `
1165
1263
<div style="height: 300px; background-color: aqua">
@@ -1202,3 +1300,31 @@ class TabGroupWithSpaceAbove {
1202
1300
} )
1203
1301
class NestedTabGroupWithLabel {
1204
1302
}
1303
+
1304
+
1305
+ @Component ( {
1306
+ template : `
1307
+ <mat-tab-group class="tab-group">
1308
+ <mat-tab label="Tab One">
1309
+ Tab one content
1310
+ </mat-tab>
1311
+ <mat-tab label="Tab Two" [class]="labelClassList">
1312
+ Tab two content
1313
+ </mat-tab>
1314
+ <mat-tab label="Tab Three" [bodyClass]="bodyClassList">
1315
+ Tab three content
1316
+ </mat-tab>
1317
+ <mat-tab label="Tab Four" [class]="labelClassList" [bodyClass]="bodyClassList">
1318
+ Tab four content
1319
+ </mat-tab>
1320
+ <mat-tab label="Tab Five" class="hardcoded label classes" bodyClass="hardcoded body classes">
1321
+ Tab five content
1322
+ </mat-tab>
1323
+ </mat-tab-group>
1324
+ ` ,
1325
+ } )
1326
+ class TabsWithClassesTestApp {
1327
+ @ViewChildren ( MatTab ) tabs : QueryList < MatTab > ;
1328
+ labelClassList ?: string | string [ ] ;
1329
+ bodyClassList ?: string | string [ ] ;
1330
+ }
0 commit comments