@@ -7,8 +7,8 @@ import {ThemePalette} from '@angular/material/core';
7
7
describe ( 'MatBadge' , ( ) => {
8
8
let fixture : ComponentFixture < any > ;
9
9
let testComponent : BadgeTestApp ;
10
- let badgeNativeElement : HTMLElement ;
11
- let badgeDebugElement : DebugElement ;
10
+ let badgeHostNativeElement : HTMLElement ;
11
+ let badgeHostDebugElement : DebugElement ;
12
12
13
13
beforeEach ( fakeAsync ( ( ) => {
14
14
TestBed
@@ -22,12 +22,12 @@ describe('MatBadge', () => {
22
22
testComponent = fixture . debugElement . componentInstance ;
23
23
fixture . detectChanges ( ) ;
24
24
25
- badgeDebugElement = fixture . debugElement . query ( By . directive ( MatBadge ) ) ! ;
26
- badgeNativeElement = badgeDebugElement . nativeElement ;
25
+ badgeHostDebugElement = fixture . debugElement . query ( By . directive ( MatBadge ) ) ! ;
26
+ badgeHostNativeElement = badgeHostDebugElement . nativeElement ;
27
27
} ) ) ;
28
28
29
29
it ( 'should update the badge based on attribute' , ( ) => {
30
- const badgeElement = badgeNativeElement . querySelector ( '.mat-badge-content' ) ! ;
30
+ const badgeElement = badgeHostNativeElement . querySelector ( '.mat-badge-content' ) ! ;
31
31
expect ( badgeElement . textContent ) . toContain ( '1' ) ;
32
32
33
33
testComponent . badgeContent = '22' ;
@@ -36,7 +36,7 @@ describe('MatBadge', () => {
36
36
} ) ;
37
37
38
38
it ( 'should be able to pass in falsy values to the badge content' , ( ) => {
39
- const badgeElement = badgeNativeElement . querySelector ( '.mat-badge-content' ) ! ;
39
+ const badgeElement = badgeHostNativeElement . querySelector ( '.mat-badge-content' ) ! ;
40
40
expect ( badgeElement . textContent ) . toContain ( '1' ) ;
41
41
42
42
testComponent . badgeContent = 0 ;
@@ -45,7 +45,7 @@ describe('MatBadge', () => {
45
45
} ) ;
46
46
47
47
it ( 'should treat null and undefined as empty strings in the badge content' , ( ) => {
48
- const badgeElement = badgeNativeElement . querySelector ( '.mat-badge-content' ) ! ;
48
+ const badgeElement = badgeHostNativeElement . querySelector ( '.mat-badge-content' ) ! ;
49
49
expect ( badgeElement . textContent ) . toContain ( '1' ) ;
50
50
51
51
testComponent . badgeContent = null ;
@@ -60,83 +60,83 @@ describe('MatBadge', () => {
60
60
it ( 'should apply class based on color attribute' , ( ) => {
61
61
testComponent . badgeColor = 'primary' ;
62
62
fixture . detectChanges ( ) ;
63
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-primary' ) ) . toBe ( true ) ;
63
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-primary' ) ) . toBe ( true ) ;
64
64
65
65
testComponent . badgeColor = 'accent' ;
66
66
fixture . detectChanges ( ) ;
67
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-accent' ) ) . toBe ( true ) ;
67
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-accent' ) ) . toBe ( true ) ;
68
68
69
69
testComponent . badgeColor = 'warn' ;
70
70
fixture . detectChanges ( ) ;
71
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-warn' ) ) . toBe ( true ) ;
71
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-warn' ) ) . toBe ( true ) ;
72
72
73
73
testComponent . badgeColor = undefined ;
74
74
fixture . detectChanges ( ) ;
75
75
76
- expect ( badgeNativeElement . classList ) . not . toContain ( 'mat-badge-accent' ) ;
76
+ expect ( badgeHostNativeElement . classList ) . not . toContain ( 'mat-badge-accent' ) ;
77
77
} ) ;
78
78
79
79
it ( 'should update the badge position on direction change' , ( ) => {
80
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-above' ) ) . toBe ( true ) ;
81
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-after' ) ) . toBe ( true ) ;
80
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-above' ) ) . toBe ( true ) ;
81
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-after' ) ) . toBe ( true ) ;
82
82
83
83
testComponent . badgeDirection = 'below before' ;
84
84
fixture . detectChanges ( ) ;
85
85
86
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-below' ) ) . toBe ( true ) ;
87
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-before' ) ) . toBe ( true ) ;
86
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-below' ) ) . toBe ( true ) ;
87
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-before' ) ) . toBe ( true ) ;
88
88
} ) ;
89
89
90
90
it ( 'should change visibility to hidden' , ( ) => {
91
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-hidden' ) ) . toBe ( false ) ;
91
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-hidden' ) ) . toBe ( false ) ;
92
92
93
93
testComponent . badgeHidden = true ;
94
94
fixture . detectChanges ( ) ;
95
95
96
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-hidden' ) ) . toBe ( true ) ;
96
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-hidden' ) ) . toBe ( true ) ;
97
97
} ) ;
98
98
99
99
it ( 'should change badge sizes' , ( ) => {
100
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-medium' ) ) . toBe ( true ) ;
100
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-medium' ) ) . toBe ( true ) ;
101
101
102
102
testComponent . badgeSize = 'small' ;
103
103
fixture . detectChanges ( ) ;
104
104
105
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-small' ) ) . toBe ( true ) ;
105
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-small' ) ) . toBe ( true ) ;
106
106
107
107
testComponent . badgeSize = 'large' ;
108
108
fixture . detectChanges ( ) ;
109
109
110
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-large' ) ) . toBe ( true ) ;
110
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-large' ) ) . toBe ( true ) ;
111
111
} ) ;
112
112
113
113
it ( 'should change badge overlap' , ( ) => {
114
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-overlap' ) ) . toBe ( false ) ;
114
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-overlap' ) ) . toBe ( false ) ;
115
115
116
116
testComponent . badgeOverlap = true ;
117
117
fixture . detectChanges ( ) ;
118
118
119
- expect ( badgeNativeElement . classList . contains ( 'mat-badge-overlap' ) ) . toBe ( true ) ;
119
+ expect ( badgeHostNativeElement . classList . contains ( 'mat-badge-overlap' ) ) . toBe ( true ) ;
120
120
} ) ;
121
121
122
122
it ( 'should toggle `aria-describedby` depending on whether the badge has a description' , ( ) => {
123
- const badgeContent = badgeNativeElement . querySelector ( '.mat-badge-content' ) ! ;
124
-
125
- expect ( badgeContent . getAttribute ( 'aria-describedby' ) ) . toBeFalsy ( ) ;
123
+ expect ( badgeHostNativeElement . hasAttribute ( 'aria-describedby' ) ) . toBeFalse ( ) ;
126
124
127
125
testComponent . badgeDescription = 'Describing a badge' ;
128
126
fixture . detectChanges ( ) ;
129
127
130
- expect ( badgeContent . getAttribute ( 'aria-describedby' ) ) . toBeTruthy ( ) ;
128
+ const describedById = badgeHostNativeElement . getAttribute ( 'aria-describedby' ) || '' ;
129
+ const description = document . getElementById ( describedById ) ?. textContent ;
130
+ expect ( description ) . toBe ( 'Describing a badge' ) ;
131
131
132
132
testComponent . badgeDescription = '' ;
133
133
fixture . detectChanges ( ) ;
134
134
135
- expect ( badgeContent . getAttribute ( 'aria-describedby' ) ) . toBeFalsy ( ) ;
135
+ expect ( badgeHostNativeElement . hasAttribute ( 'aria-describedby' ) ) . toBeFalse ( ) ;
136
136
} ) ;
137
137
138
138
it ( 'should toggle visibility based on whether the badge has content' , ( ) => {
139
- const classList = badgeNativeElement . classList ;
139
+ const classList = badgeHostNativeElement . classList ;
140
140
141
141
expect ( classList . contains ( 'mat-badge-hidden' ) ) . toBe ( false ) ;
142
142
@@ -162,7 +162,7 @@ describe('MatBadge', () => {
162
162
} ) ;
163
163
164
164
it ( 'should apply view encapsulation on create badge content' , ( ) => {
165
- const badge = badgeNativeElement . querySelector ( '.mat-badge-content' ) ! ;
165
+ const badge = badgeHostNativeElement . querySelector ( '.mat-badge-content' ) ! ;
166
166
let encapsulationAttr : Attr | undefined ;
167
167
168
168
for ( let i = 0 ; i < badge . attributes . length ; i ++ ) {
@@ -176,7 +176,7 @@ describe('MatBadge', () => {
176
176
} ) ;
177
177
178
178
it ( 'should toggle a class depending on the badge disabled state' , ( ) => {
179
- const element : HTMLElement = badgeDebugElement . nativeElement ;
179
+ const element : HTMLElement = badgeHostDebugElement . nativeElement ;
180
180
181
181
expect ( element . classList ) . not . toContain ( 'mat-badge-disabled' ) ;
182
182
@@ -186,25 +186,6 @@ describe('MatBadge', () => {
186
186
expect ( element . classList ) . toContain ( 'mat-badge-disabled' ) ;
187
187
} ) ;
188
188
189
- it ( 'should update the aria-label if the description changes' , ( ) => {
190
- const badgeContent = badgeNativeElement . querySelector ( '.mat-badge-content' ) ! ;
191
-
192
- fixture . componentInstance . badgeDescription = 'initial content' ;
193
- fixture . detectChanges ( ) ;
194
-
195
- expect ( badgeContent . getAttribute ( 'aria-label' ) ) . toBe ( 'initial content' ) ;
196
-
197
- fixture . componentInstance . badgeDescription = 'changed content' ;
198
- fixture . detectChanges ( ) ;
199
-
200
- expect ( badgeContent . getAttribute ( 'aria-label' ) ) . toBe ( 'changed content' ) ;
201
-
202
- fixture . componentInstance . badgeDescription = '' ;
203
- fixture . detectChanges ( ) ;
204
-
205
- expect ( badgeContent . hasAttribute ( 'aria-label' ) ) . toBe ( false ) ;
206
- } ) ;
207
-
208
189
it ( 'should clear any pre-existing badges' , ( ) => {
209
190
const preExistingFixture = TestBed . createComponent ( PreExistingBadge ) ;
210
191
preExistingFixture . detectChanges ( ) ;
@@ -220,7 +201,7 @@ describe('MatBadge', () => {
220
201
} ) ;
221
202
222
203
it ( 'should expose the badge element' , ( ) => {
223
- const badgeElement = badgeNativeElement . querySelector ( '.mat-badge-content' ) ! ;
204
+ const badgeElement = badgeHostNativeElement . querySelector ( '.mat-badge-content' ) ! ;
224
205
expect ( fixture . componentInstance . badgeInstance . getBadgeElement ( ) ) . toBe ( badgeElement ) ;
225
206
} ) ;
226
207
@@ -288,9 +269,7 @@ class NestedBadge {
288
269
289
270
290
271
@Component ( {
291
- template : `
292
- <ng-template matBadge="1">Notifications</ng-template>
293
- `
272
+ template : `<ng-template matBadge="1">Notifications</ng-template>` ,
294
273
} )
295
274
class BadgeOnTemplate {
296
275
}
0 commit comments