From bcd6e4c4686e42a179f87347ec827a4f35092937 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Thu, 8 Jan 2015 13:57:41 +0100 Subject: [PATCH] feat(directive): add ng-non-bindable directive --- modules/directives/src/ng_non_bindable.js | 8 ++ .../directives/test/ng_non_bindable_spec.js | 89 +++++++++++++++++++ 2 files changed, 97 insertions(+) create mode 100644 modules/directives/src/ng_non_bindable.js create mode 100644 modules/directives/test/ng_non_bindable_spec.js diff --git a/modules/directives/src/ng_non_bindable.js b/modules/directives/src/ng_non_bindable.js new file mode 100644 index 0000000000..be0793575c --- /dev/null +++ b/modules/directives/src/ng_non_bindable.js @@ -0,0 +1,8 @@ +import {Decorator} from 'core/annotations/annotations'; + +@Decorator({ + selector: '[ng-non-bindable]', + compileChildren: false +}) +export class NgNonBindable { +} diff --git a/modules/directives/test/ng_non_bindable_spec.js b/modules/directives/test/ng_non_bindable_spec.js new file mode 100644 index 0000000000..3282f75951 --- /dev/null +++ b/modules/directives/test/ng_non_bindable_spec.js @@ -0,0 +1,89 @@ +import {describe, xit, it, expect, beforeEach, ddescribe, iit} from 'test_lib/test_lib'; +import {DOM} from 'facade/dom'; +import {Injector} from 'di/di'; +import {Lexer, Parser, ChangeDetector} from 'change_detection/change_detection'; +import {Compiler, CompilerCache} from 'core/compiler/compiler'; +import {DirectiveMetadataReader} from 'core/compiler/directive_metadata_reader'; +import {Decorator, Component} from 'core/annotations/annotations'; +import {TemplateConfig} from 'core/annotations/template_config'; +import {NgElement} from 'core/dom/element'; +import {NgNonBindable} from 'directives/ng_non_bindable'; + +export function main() { + describe('ng-non-bindable', () => { + var view, cd, compiler, component; + beforeEach(() => { + compiler = new Compiler(null, new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache()); + }); + + function createElement(html) { + return DOM.createTemplate(html).content.firstChild; + } + + function createView(pv) { + component = new TestComponent(); + view = pv.instantiate(null); + view.hydrate(new Injector([]), null, component); + cd = new ChangeDetector(view.recordRange); + } + + function compileWithTemplate(template) { + return compiler.compile(TestComponent, createElement(template)); + } + + it('should not interpolate children', (done) => { + var template = '
{{text}}{{text}}
'; + compileWithTemplate(template).then((pv) => { + createView(pv); + cd.detectChanges(); + expect(DOM.getText(view.nodes[0])).toEqual('foo{{text}}'); + done(); + }); + }); + + it('should ignore directives on child nodes', (done) => { + var template = '
{{text}}
'; + compileWithTemplate(template).then((pv) => { + createView(pv); + cd.detectChanges(); + var span = DOM.querySelector(view.nodes[0], '#child'); + expect(DOM.hasClass(span, 'compiled')).toBeFalsy(); + done(); + }); + }); + + it('should trigger directives on the same node', (done) => { + var template = '
{{text}}
'; + compileWithTemplate(template).then((pv) => { + createView(pv); + cd.detectChanges(); + var span = DOM.querySelector(view.nodes[0], '#child'); + expect(DOM.hasClass(span, 'compiled')).toBeTruthy(); + done(); + }); + }); + }) +} + +@Component({ + selector: 'test-cmp', + template: new TemplateConfig({ + inline: '', // each test swaps with a custom template. + directives: [NgNonBindable, TestDecorator] + }) +}) +class TestComponent { + text: string; + constructor() { + this.text = 'foo'; + } +} + +@Decorator({ + selector: '[test-dec]' +}) +class TestDecorator { + constructor(el: NgElement) { + DOM.addClass(el.domElement, 'compiled'); + } +}