From f5d44a42c979afe42f6555548fcc20202f2de483 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 9 Sep 2016 12:03:51 -0700 Subject: [PATCH] refactor(NgClass): cleanup, readability (#11467) --- .../common/src/directives/ng_class.ts | 89 ++--- .../common/test/directives/ng_class_spec.ts | 360 ++++++++---------- modules/@angular/facade/src/collection.ts | 12 +- tools/public_api_guard/common/index.d.ts | 4 +- 4 files changed, 208 insertions(+), 257 deletions(-) diff --git a/modules/@angular/common/src/directives/ng_class.ts b/modules/@angular/common/src/directives/ng_class.ts index 823faf69ba..72c4270ed4 100644 --- a/modules/@angular/common/src/directives/ng_class.ts +++ b/modules/@angular/common/src/directives/ng_class.ts @@ -8,10 +8,8 @@ import {CollectionChangeRecord, Directive, DoCheck, ElementRef, Input, IterableDiffer, IterableDiffers, KeyValueChangeRecord, KeyValueDiffer, KeyValueDiffers, Renderer} from '@angular/core'; -import {StringMapWrapper, isListLikeIterable} from '../facade/collection'; -import {isArray, isPresent, isString} from '../facade/lang'; - - +import {isListLikeIterable} from '../facade/collection'; +import {isPresent} from '../facade/lang'; /** * The `NgClass` directive conditionally adds and removes CSS classes on an HTML element based on @@ -79,7 +77,7 @@ export class NgClass implements DoCheck { private _iterableDiffer: IterableDiffer; private _keyValueDiffer: KeyValueDiffer; private _initialClasses: string[] = []; - private _rawClass: string[]|Set; + private _rawClass: string[]|Set|{[klass: string]: any}; constructor( private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers, @@ -87,58 +85,57 @@ export class NgClass implements DoCheck { @Input('class') - set initialClasses(v: string) { + set klass(v: string) { this._applyInitialClasses(true); - this._initialClasses = isPresent(v) && isString(v) ? v.split(' ') : []; + this._initialClasses = typeof v === 'string' ? v.split(/\s+/) : []; this._applyInitialClasses(false); this._applyClasses(this._rawClass, false); } @Input() - set ngClass(v: string|string[]|Set|{[key: string]: any}) { + set ngClass(v: string|string[]|Set|{[klass: string]: any}) { this._cleanupClasses(this._rawClass); - if (isString(v)) { - v = (v).split(' '); - } - - this._rawClass = >v; this._iterableDiffer = null; this._keyValueDiffer = null; - if (isPresent(v)) { - if (isListLikeIterable(v)) { - this._iterableDiffer = this._iterableDiffers.find(v).create(null); + + this._rawClass = typeof v === 'string' ? v.split(/\s+/) : v; + + if (this._rawClass) { + if (isListLikeIterable(this._rawClass)) { + this._iterableDiffer = this._iterableDiffers.find(this._rawClass).create(null); } else { - this._keyValueDiffer = this._keyValueDiffers.find(v).create(null); + this._keyValueDiffer = this._keyValueDiffers.find(this._rawClass).create(null); } } } ngDoCheck(): void { - if (isPresent(this._iterableDiffer)) { - var changes = this._iterableDiffer.diff(this._rawClass); - if (isPresent(changes)) { + if (this._iterableDiffer) { + const changes = this._iterableDiffer.diff(this._rawClass); + if (changes) { this._applyIterableChanges(changes); } - } - if (isPresent(this._keyValueDiffer)) { - var changes = this._keyValueDiffer.diff(this._rawClass); - if (isPresent(changes)) { + } else if (this._keyValueDiffer) { + const changes = this._keyValueDiffer.diff(this._rawClass); + if (changes) { this._applyKeyValueChanges(changes); } } } - private _cleanupClasses(rawClassVal: string[]|Set|{[key: string]: any}): void { + private _cleanupClasses(rawClassVal: string[]|Set|{[klass: string]: any}): void { this._applyClasses(rawClassVal, true); this._applyInitialClasses(false); } private _applyKeyValueChanges(changes: any): void { changes.forEachAddedItem( - (record: KeyValueChangeRecord) => { this._toggleClass(record.key, record.currentValue); }); + (record: KeyValueChangeRecord) => this._toggleClass(record.key, record.currentValue)); + changes.forEachChangedItem( - (record: KeyValueChangeRecord) => { this._toggleClass(record.key, record.currentValue); }); + (record: KeyValueChangeRecord) => this._toggleClass(record.key, record.currentValue)); + changes.forEachRemovedItem((record: KeyValueChangeRecord) => { if (record.previousValue) { this._toggleClass(record.key, false); @@ -148,42 +145,34 @@ export class NgClass implements DoCheck { private _applyIterableChanges(changes: any): void { changes.forEachAddedItem( - (record: CollectionChangeRecord) => { this._toggleClass(record.item, true); }); + (record: CollectionChangeRecord) => this._toggleClass(record.item, true)); + changes.forEachRemovedItem( - (record: CollectionChangeRecord) => { this._toggleClass(record.item, false); }); + (record: CollectionChangeRecord) => this._toggleClass(record.item, false)); } private _applyInitialClasses(isCleanup: boolean) { - this._initialClasses.forEach(className => this._toggleClass(className, !isCleanup)); + this._initialClasses.forEach(klass => this._toggleClass(klass, !isCleanup)); } private _applyClasses( rawClassVal: string[]|Set|{[key: string]: any}, isCleanup: boolean) { - if (isPresent(rawClassVal)) { - if (isArray(rawClassVal)) { - (rawClassVal).forEach(className => this._toggleClass(className, !isCleanup)); - } else if (rawClassVal instanceof Set) { - (>rawClassVal).forEach(className => this._toggleClass(className, !isCleanup)); + if (rawClassVal) { + if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) { + (rawClassVal).forEach((klass: string) => this._toggleClass(klass, !isCleanup)); } else { - StringMapWrapper.forEach( - <{[k: string]: any}>rawClassVal, (expVal: any, className: string) => { - if (isPresent(expVal)) this._toggleClass(className, !isCleanup); - }); + Object.keys(rawClassVal).forEach(klass => { + if (isPresent(rawClassVal[klass])) this._toggleClass(klass, !isCleanup); + }); } } } - private _toggleClass(className: string, enabled: boolean): void { - className = className.trim(); - if (className.length > 0) { - if (className.indexOf(' ') > -1) { - var classes = className.split(/\s+/g); - for (var i = 0, len = classes.length; i < len; i++) { - this._renderer.setElementClass(this._ngEl.nativeElement, classes[i], enabled); - } - } else { - this._renderer.setElementClass(this._ngEl.nativeElement, className, enabled); - } + private _toggleClass(klass: string, enabled: boolean): void { + klass = klass.trim(); + if (klass) { + klass.split(/\s+/g).forEach( + klass => { this._renderer.setElementClass(this._ngEl.nativeElement, klass, enabled); }); } } } diff --git a/modules/@angular/common/test/directives/ng_class_spec.ts b/modules/@angular/common/test/directives/ng_class_spec.ts index 4c4bcda6a5..5c962840c0 100644 --- a/modules/@angular/common/test/directives/ng_class_spec.ts +++ b/modules/@angular/common/test/directives/ng_class_spec.ts @@ -6,20 +6,23 @@ * found in the LICENSE file at https://angular.io/license */ -import {NgClass, NgFor} from '@angular/common'; import {Component} from '@angular/core'; import {ComponentFixture, TestBed, async} from '@angular/core/testing'; import {beforeEach, ddescribe, describe, expect, iit, inject, it, xdescribe, xit} from '@angular/core/testing/testing_internal'; -import {ListWrapper, StringMapWrapper} from '../../src/facade/collection'; - -function detectChangesAndCheck(fixture: ComponentFixture, classes: string) { - fixture.detectChanges(); - expect(fixture.debugElement.children[0].nativeElement.className).toEqual(classes); -} - export function main() { describe('binding to CSS class list', () => { + let fixture: ComponentFixture; + + function detectChangesAndExpectClassName(classes: string): void { + fixture.detectChanges(); + expect(fixture.debugElement.children[0].nativeElement.className).toEqual(classes); + } + + function getComponent(): TestComponent { return fixture.debugElement.componentInstance; } + + afterEach(() => { fixture = null; }); + beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestComponent], @@ -27,268 +30,221 @@ export function main() { }); it('should clean up when the directive is destroyed', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - fixture.debugElement.componentInstance.items = [['0']]; + getComponent().items = [['0']]; fixture.detectChanges(); - fixture.debugElement.componentInstance.items = [['1']]; - - detectChangesAndCheck(fixture, '1'); + getComponent().items = [['1']]; + detectChangesAndExpectClassName('1'); })); describe('expressions evaluating to objects', () => { it('should add classes specified in an object literal', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - detectChangesAndCheck(fixture, 'foo'); + detectChangesAndExpectClassName('foo'); })); - it('should add classes specified in an object literal without change in class names', async(() => { - let template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = + createTestComponent(`
`); - detectChangesAndCheck(fixture, 'foo-bar fooBar'); + detectChangesAndExpectClassName('foo-bar fooBar'); })); it('should add and remove classes based on changes in object literal values', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = + createTestComponent('
'); - detectChangesAndCheck(fixture, 'foo'); + detectChangesAndExpectClassName('foo'); - fixture.debugElement.componentInstance.condition = false; - detectChangesAndCheck(fixture, 'bar'); + getComponent().condition = false; + detectChangesAndExpectClassName('bar'); })); it('should add and remove classes based on changes to the expression object', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); + let objExpr = getComponent().objExpr; - detectChangesAndCheck(fixture, 'foo'); + detectChangesAndExpectClassName('foo'); - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true); - detectChangesAndCheck(fixture, 'foo bar'); + objExpr['bar'] = true; + detectChangesAndExpectClassName('foo bar'); - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'baz', true); - detectChangesAndCheck(fixture, 'foo bar baz'); + objExpr['baz'] = true; + detectChangesAndExpectClassName('foo bar baz'); - StringMapWrapper.delete(fixture.debugElement.componentInstance.objExpr, 'bar'); - detectChangesAndCheck(fixture, 'foo baz'); + delete (objExpr['bar']); + detectChangesAndExpectClassName('foo baz'); })); it('should add and remove classes based on reference changes to the expression object', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - detectChangesAndCheck(fixture, 'foo'); + detectChangesAndExpectClassName('foo'); - fixture.debugElement.componentInstance.objExpr = {foo: true, bar: true}; - detectChangesAndCheck(fixture, 'foo bar'); + getComponent().objExpr = {foo: true, bar: true}; + detectChangesAndExpectClassName('foo bar'); - fixture.debugElement.componentInstance.objExpr = {baz: true}; - detectChangesAndCheck(fixture, 'baz'); + getComponent().objExpr = {baz: true}; + detectChangesAndExpectClassName('baz'); })); it('should remove active classes when expression evaluates to null', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - detectChangesAndCheck(fixture, 'foo'); + detectChangesAndExpectClassName('foo'); - fixture.debugElement.componentInstance.objExpr = null; - detectChangesAndCheck(fixture, ''); + getComponent().objExpr = null; + detectChangesAndExpectClassName(''); - fixture.debugElement.componentInstance.objExpr = {'foo': false, 'bar': true}; - detectChangesAndCheck(fixture, 'bar'); + getComponent().objExpr = {'foo': false, 'bar': true}; + detectChangesAndExpectClassName('bar'); })); it('should allow multiple classes per expression', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - fixture.debugElement.componentInstance.objExpr = {'bar baz': true, 'bar1 baz1': true}; - detectChangesAndCheck(fixture, 'bar baz bar1 baz1'); + getComponent().objExpr = {'bar baz': true, 'bar1 baz1': true}; + detectChangesAndExpectClassName('bar baz bar1 baz1'); - fixture.debugElement.componentInstance.objExpr = {'bar baz': false, 'bar1 baz1': true}; - detectChangesAndCheck(fixture, 'bar1 baz1'); + getComponent().objExpr = {'bar baz': false, 'bar1 baz1': true}; + detectChangesAndExpectClassName('bar1 baz1'); })); it('should split by one or more spaces between classes', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - fixture.debugElement.componentInstance.objExpr = {'foo bar baz': true}; - detectChangesAndCheck(fixture, 'foo bar baz'); + getComponent().objExpr = {'foo bar baz': true}; + detectChangesAndExpectClassName('foo bar baz'); })); - }); describe('expressions evaluating to lists', () => { it('should add classes specified in a list literal', async(() => { - let template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = + createTestComponent(`
`); - detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar'); + detectChangesAndExpectClassName('foo bar foo-bar fooBar'); })); it('should add and remove classes based on changes to the expression', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - var arrExpr: string[] = fixture.debugElement.componentInstance.arrExpr; - detectChangesAndCheck(fixture, 'foo'); + fixture = createTestComponent('
'); + let arrExpr = getComponent().arrExpr; + detectChangesAndExpectClassName('foo'); arrExpr.push('bar'); - detectChangesAndCheck(fixture, 'foo bar'); + detectChangesAndExpectClassName('foo bar'); arrExpr[1] = 'baz'; - detectChangesAndCheck(fixture, 'foo baz'); + detectChangesAndExpectClassName('foo baz'); - ListWrapper.remove(fixture.debugElement.componentInstance.arrExpr, 'baz'); - detectChangesAndCheck(fixture, 'foo'); + getComponent().arrExpr = arrExpr.filter((v: string) => v !== 'baz'); + detectChangesAndExpectClassName('foo'); })); it('should add and remove classes when a reference changes', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'foo'); + fixture = createTestComponent('
'); + detectChangesAndExpectClassName('foo'); - fixture.debugElement.componentInstance.arrExpr = ['bar']; - detectChangesAndCheck(fixture, 'bar'); + getComponent().arrExpr = ['bar']; + detectChangesAndExpectClassName('bar'); })); it('should take initial classes into account when a reference changes', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'foo'); + fixture = createTestComponent('
'); + detectChangesAndExpectClassName('foo'); - fixture.debugElement.componentInstance.arrExpr = ['bar']; - detectChangesAndCheck(fixture, 'foo bar'); + getComponent().arrExpr = ['bar']; + detectChangesAndExpectClassName('foo bar'); })); it('should ignore empty or blank class names', async(() => { - let template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.arrExpr = ['', ' ']; - detectChangesAndCheck(fixture, 'foo'); + fixture = createTestComponent('
'); + getComponent().arrExpr = ['', ' ']; + detectChangesAndExpectClassName('foo'); })); it('should trim blanks from class names', async(() => { - var template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - fixture.debugElement.componentInstance.arrExpr = [' bar ']; - detectChangesAndCheck(fixture, 'foo bar'); + getComponent().arrExpr = [' bar ']; + detectChangesAndExpectClassName('foo bar'); })); it('should allow multiple classes per item in arrays', async(() => { - var template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); + fixture = createTestComponent('
'); - fixture.debugElement.componentInstance.arrExpr = ['foo bar baz', 'foo1 bar1 baz1']; - detectChangesAndCheck(fixture, 'foo bar baz foo1 bar1 baz1'); + getComponent().arrExpr = ['foo bar baz', 'foo1 bar1 baz1']; + detectChangesAndExpectClassName('foo bar baz foo1 bar1 baz1'); - fixture.debugElement.componentInstance.arrExpr = ['foo bar baz foobar']; - detectChangesAndCheck(fixture, 'foo bar baz foobar'); + getComponent().arrExpr = ['foo bar baz foobar']; + detectChangesAndExpectClassName('foo bar baz foobar'); })); }); describe('expressions evaluating to sets', () => { it('should add and remove classes if the set instance changed', async(() => { - var template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - var setExpr = new Set(); + fixture = createTestComponent('
'); + let setExpr = new Set(); setExpr.add('bar'); - fixture.debugElement.componentInstance.setExpr = setExpr; - detectChangesAndCheck(fixture, 'bar'); + getComponent().setExpr = setExpr; + detectChangesAndExpectClassName('bar'); setExpr = new Set(); setExpr.add('baz'); - fixture.debugElement.componentInstance.setExpr = setExpr; - detectChangesAndCheck(fixture, 'baz'); + getComponent().setExpr = setExpr; + detectChangesAndExpectClassName('baz'); })); }); describe('expressions evaluating to string', () => { it('should add classes specified in a string literal', async(() => { - var template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'foo bar foo-bar fooBar'); + fixture = createTestComponent(`
`); + detectChangesAndExpectClassName('foo bar foo-bar fooBar'); })); it('should add and remove classes based on changes to the expression', async(() => { - var template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'foo'); + fixture = createTestComponent('
'); + detectChangesAndExpectClassName('foo'); - fixture.debugElement.componentInstance.strExpr = 'foo bar'; - detectChangesAndCheck(fixture, 'foo bar'); + getComponent().strExpr = 'foo bar'; + detectChangesAndExpectClassName('foo bar'); - fixture.debugElement.componentInstance.strExpr = 'baz'; - detectChangesAndCheck(fixture, 'baz'); - + getComponent().strExpr = 'baz'; + detectChangesAndExpectClassName('baz'); })); it('should remove active classes when switching from string to null', async(() => { - var template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'foo'); - - fixture.debugElement.componentInstance.strExpr = null; - detectChangesAndCheck(fixture, ''); + fixture = createTestComponent(`
`); + detectChangesAndExpectClassName('foo'); + getComponent().strExpr = null; + detectChangesAndExpectClassName(''); })); it('should take initial classes into account when switching from string to null', async(() => { - var template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'foo'); - - fixture.debugElement.componentInstance.strExpr = null; - detectChangesAndCheck(fixture, 'foo'); + fixture = createTestComponent(`
`); + detectChangesAndExpectClassName('foo'); + getComponent().strExpr = null; + detectChangesAndExpectClassName('foo'); })); it('should ignore empty and blank strings', async(() => { - var template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - fixture.debugElement.componentInstance.strExpr = ''; - detectChangesAndCheck(fixture, 'foo'); - + fixture = createTestComponent(`
`); + getComponent().strExpr = ''; + detectChangesAndExpectClassName('foo'); })); }); @@ -296,83 +252,82 @@ export function main() { describe('cooperation with other class-changing constructs', () => { it('should co-operate with the class attribute', async(() => { - var template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true); - detectChangesAndCheck(fixture, 'init foo bar'); + fixture = createTestComponent('
'); + let objExpr = getComponent().objExpr; - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false); - detectChangesAndCheck(fixture, 'init bar'); + objExpr['bar'] = true; + detectChangesAndExpectClassName('init foo bar'); - fixture.debugElement.componentInstance.objExpr = null; - detectChangesAndCheck(fixture, 'init foo'); + objExpr['foo'] = false; + detectChangesAndExpectClassName('init bar'); + getComponent().objExpr = null; + detectChangesAndExpectClassName('init foo'); })); it('should co-operate with the interpolated class attribute', async(() => { - var template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true); - detectChangesAndCheck(fixture, `init foo bar`); + fixture = createTestComponent(`
`); + let objExpr = getComponent().objExpr; - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false); - detectChangesAndCheck(fixture, `init bar`); + objExpr['bar'] = true; + detectChangesAndExpectClassName(`init foo bar`); - fixture.debugElement.componentInstance.objExpr = null; - detectChangesAndCheck(fixture, `init foo`); + objExpr['foo'] = false; + detectChangesAndExpectClassName(`init bar`); + getComponent().objExpr = null; + detectChangesAndExpectClassName(`init foo`); })); it('should co-operate with the class attribute and binding to it', async(() => { - var template = `
`; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true); - detectChangesAndCheck(fixture, `init foo bar`); + fixture = + createTestComponent(`
`); + let objExpr = getComponent().objExpr; - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false); - detectChangesAndCheck(fixture, `init bar`); + objExpr['bar'] = true; + detectChangesAndExpectClassName(`init foo bar`); - fixture.debugElement.componentInstance.objExpr = null; - detectChangesAndCheck(fixture, `init foo`); + objExpr['foo'] = false; + detectChangesAndExpectClassName(`init bar`); + getComponent().objExpr = null; + detectChangesAndExpectClassName(`init foo`); })); it('should co-operate with the class attribute and class.name binding', async(() => { - var template = + const template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'init foo baz'); + fixture = createTestComponent(template); + let objExpr = getComponent().objExpr; - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true); - detectChangesAndCheck(fixture, 'init foo baz bar'); + detectChangesAndExpectClassName('init foo baz'); - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'foo', false); - detectChangesAndCheck(fixture, 'init baz bar'); + objExpr['bar'] = true; + detectChangesAndExpectClassName('init foo baz bar'); - fixture.debugElement.componentInstance.condition = false; - detectChangesAndCheck(fixture, 'init bar'); + objExpr['foo'] = false; + detectChangesAndExpectClassName('init baz bar'); + getComponent().condition = false; + detectChangesAndExpectClassName('init bar'); })); it('should co-operate with initial class and class attribute binding when binding changes', async(() => { - var template = '
'; - TestBed.overrideComponent(TestComponent, {set: {template: template}}); - let fixture = TestBed.createComponent(TestComponent); - detectChangesAndCheck(fixture, 'init foo'); + const template = '
'; + fixture = createTestComponent(template); + let cmp = getComponent(); - StringMapWrapper.set(fixture.debugElement.componentInstance.objExpr, 'bar', true); - detectChangesAndCheck(fixture, 'init foo bar'); + detectChangesAndExpectClassName('init foo'); - fixture.debugElement.componentInstance.strExpr = 'baz'; - detectChangesAndCheck(fixture, 'init bar baz foo'); + cmp.objExpr['bar'] = true; + detectChangesAndExpectClassName('init foo bar'); - fixture.debugElement.componentInstance.objExpr = null; - detectChangesAndCheck(fixture, 'init baz'); + cmp.strExpr = 'baz'; + detectChangesAndExpectClassName('init bar baz foo'); + + cmp.objExpr = null; + detectChangesAndExpectClassName('init baz'); })); }); }); @@ -384,8 +339,13 @@ class TestComponent { items: any[]; arrExpr: string[] = ['foo']; setExpr: Set = new Set(); - objExpr = {'foo': true, 'bar': false}; + objExpr: {[klass: string]: any} = {'foo': true, 'bar': false}; strExpr = 'foo'; constructor() { this.setExpr.add('foo'); } } + +function createTestComponent(template: string): ComponentFixture { + return TestBed.overrideComponent(TestComponent, {set: {template: template}}) + .createComponent(TestComponent); +} \ No newline at end of file diff --git a/modules/@angular/facade/src/collection.ts b/modules/@angular/facade/src/collection.ts index 29176a78c6..1308f28518 100644 --- a/modules/@angular/facade/src/collection.ts +++ b/modules/@angular/facade/src/collection.ts @@ -149,18 +149,20 @@ export class StringMapWrapper { } static equals(m1: {[key: string]: V}, m2: {[key: string]: V}): boolean { - var k1 = Object.keys(m1); - var k2 = Object.keys(m2); + const k1 = Object.keys(m1); + const k2 = Object.keys(m2); + if (k1.length != k2.length) { return false; } - var key: any /** TODO #???? */; - for (var i = 0; i < k1.length; i++) { - key = k1[i]; + + for (let i = 0; i < k1.length; i++) { + const key = k1[i]; if (m1[key] !== m2[key]) { return false; } } + return true; } } diff --git a/tools/public_api_guard/common/index.d.ts b/tools/public_api_guard/common/index.d.ts index 83ba08ee01..f1c8199e47 100644 --- a/tools/public_api_guard/common/index.d.ts +++ b/tools/public_api_guard/common/index.d.ts @@ -109,9 +109,9 @@ export declare class LowerCasePipe implements PipeTransform { /** @stable */ export declare class NgClass implements DoCheck { - initialClasses: string; + klass: string; ngClass: string | string[] | Set | { - [key: string]: any; + [klass: string]: any; }; constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer); ngDoCheck(): void;