@@ -131,26 +131,51 @@ describe('property bindings', () => {
131131
132132it ( 'should bind ARIA properties to their corresponding attributes' , ( ) => {
133133 @Component ( {
134- template :'<button [ariaLabel]="label"></button>' ,
134+ template :'<button [ariaLabel]="label" [ariaHasPopup]="hasPopup" ></button>' ,
135135} )
136136class MyComp {
137137label ?:string ;
138+ hasPopup ?:string ;
138139}
139140
140141const fixture = TestBed . createComponent ( MyComp ) ;
141142const button = fixture . debugElement . query ( By . css ( 'button' ) ) . nativeElement ;
142143
143144fixture . componentInstance . label = 'Open' ;
145+ fixture . componentInstance . hasPopup = 'menu' ;
144146fixture . detectChanges ( ) ;
145147
146148expect ( button . getAttribute ( 'aria-label' ) ) . toBe ( 'Open' ) ;
149+ expect ( button . getAttribute ( 'aria-haspopup' ) ) . toBe ( 'menu' ) ;
147150
148151fixture . componentInstance . label = 'Close' ;
149152fixture . detectChanges ( ) ;
150153
151154expect ( button . getAttribute ( 'aria-label' ) ) . toBe ( 'Close' ) ;
152155} ) ;
153156
157+ it ( 'should bind interpolated ARIA attributes' , ( ) => {
158+ @Component ( {
159+ template :'<button aria-label="{{label}} menu"></button>' ,
160+ } )
161+ class MyComp {
162+ label ?:string ;
163+ }
164+
165+ const fixture = TestBed . createComponent ( MyComp ) ;
166+ const button = fixture . debugElement . query ( By . css ( 'button' ) ) . nativeElement ;
167+
168+ fixture . componentInstance . label = 'Open' ;
169+ fixture . detectChanges ( ) ;
170+
171+ expect ( button . getAttribute ( 'aria-label' ) ) . toBe ( 'Open menu' ) ;
172+
173+ fixture . componentInstance . label = 'Close' ;
174+ fixture . detectChanges ( ) ;
175+
176+ expect ( button . getAttribute ( 'aria-label' ) ) . toBe ( 'Close menu' ) ;
177+ } ) ;
178+
154179describe ( 'should bind to ARIA attribute names' , ( ) => {
155180it ( 'on HTML elements' , ( ) => {
156181 @Component ( {