| 
									
										
										
										
											2017-12-01 14:23:03 -08:00
										 |  |  | /** | 
					
						
							|  |  |  |  * @license | 
					
						
							|  |  |  |  * Copyright Google Inc. All Rights Reserved. | 
					
						
							|  |  |  |  * | 
					
						
							|  |  |  |  * Use of this source code is governed by an MIT-style license that can be | 
					
						
							|  |  |  |  * found in the LICENSE file at https://angular.io/license
 | 
					
						
							|  |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-02-06 16:11:20 -08:00
										 |  |  | import {defineDirective} from '../../src/render3/index'; | 
					
						
							| 
									
										
										
										
											2018-02-16 16:58:07 -08:00
										 |  |  | import {bind, componentRefresh, elementEnd, elementProperty, elementStart, load} from '../../src/render3/instructions'; | 
					
						
							| 
									
										
										
										
											2017-12-01 14:23:03 -08:00
										 |  |  | 
 | 
					
						
							|  |  |  | import {renderToHtml} from './render_util'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | describe('directive', () => { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   describe('host', () => { | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     it('should support host bindings in directives', () => { | 
					
						
							|  |  |  |       let directiveInstance: Directive|undefined; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       class Directive { | 
					
						
							|  |  |  |         klass = 'foo'; | 
					
						
							| 
									
										
										
										
											2018-01-08 21:57:50 -08:00
										 |  |  |         static ngDirectiveDef = defineDirective({ | 
					
						
							| 
									
										
										
										
											2018-01-22 15:27:21 -08:00
										 |  |  |           type: Directive, | 
					
						
							| 
									
										
										
										
											2018-01-08 21:57:50 -08:00
										 |  |  |           factory: () => directiveInstance = new Directive, | 
					
						
							| 
									
										
										
										
											2018-01-22 19:52:06 -08:00
										 |  |  |           hostBindings: (directiveIndex: number, elementIndex: number) => { | 
					
						
							| 
									
										
										
										
											2018-02-16 16:58:07 -08:00
										 |  |  |             elementProperty(elementIndex, 'className', bind(load<Directive>(directiveIndex).klass)); | 
					
						
							| 
									
										
										
										
											2018-01-08 21:57:50 -08:00
										 |  |  |           } | 
					
						
							|  |  |  |         }); | 
					
						
							| 
									
										
										
										
											2017-12-01 14:23:03 -08:00
										 |  |  |       } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       function Template(ctx: any, cm: boolean) { | 
					
						
							|  |  |  |         if (cm) { | 
					
						
							| 
									
										
										
										
											2018-02-06 16:11:20 -08:00
										 |  |  |           elementStart(0, 'span', null, [Directive]); | 
					
						
							|  |  |  |           elementEnd(); | 
					
						
							| 
									
										
										
										
											2017-12-01 14:23:03 -08:00
										 |  |  |         } | 
					
						
							| 
									
										
										
										
											2018-01-22 19:52:06 -08:00
										 |  |  |         Directive.ngDirectiveDef.h(1, 0); | 
					
						
							| 
									
										
										
										
											2018-02-06 16:11:20 -08:00
										 |  |  |         componentRefresh(1, 0); | 
					
						
							| 
									
										
										
										
											2017-12-01 14:23:03 -08:00
										 |  |  |       } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |       expect(renderToHtml(Template, {})).toEqual('<span class="foo"></span>'); | 
					
						
							|  |  |  |       directiveInstance !.klass = 'bar'; | 
					
						
							|  |  |  |       expect(renderToHtml(Template, {})).toEqual('<span class="bar"></span>'); | 
					
						
							|  |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | }); |