/** * @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 */ import {CommonModule} from '@angular/common'; import {Component, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, HostBinding, Input, NgModule, Renderer2, ViewChild, ViewContainerRef} from '@angular/core'; import {bypassSanitizationTrustStyle} from '@angular/core/src/sanitization/bypass'; import {ngDevModeResetPerfCounters} from '@angular/core/src/util/ng_dev_mode'; import {TestBed} from '@angular/core/testing'; import {getElementClasses, getElementStyles, getSortedClassName, getSortedStyle} from '@angular/core/testing/src/styling'; import {By, DomSanitizer, SafeStyle} from '@angular/platform-browser'; import {expect} from '@angular/platform-browser/testing/src/matchers'; import {ivyEnabled, modifiedInIvy, onlyInIvy} from '@angular/private/testing'; describe('styling', () => { beforeEach(ngDevModeResetPerfCounters); describe('apply in prioritization order', () => { it('should perform static bindings', () => { @Component({template: `
`}) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const [staticDiv] = fixture.nativeElement.querySelectorAll('div'); expect(getSortedClassName(staticDiv)).toEqual('STATIC'); expect(getSortedStyle(staticDiv)).toEqual('color: blue;'); }); it('should perform prop bindings', () => { @Component({ template: `
` }) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(getSortedClassName(div)).toEqual('dynamic'); expect(getSortedStyle(div)).toEqual('color: blue; width: 100px;'); }); onlyInIvy('style merging is ivy only feature').it('should perform map bindings', () => { @Component({ template: `
` }) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(getSortedClassName(div)).toEqual('dynamic'); expect(getSortedStyle(div)).toEqual('color: blue; width: 100px;'); }); onlyInIvy('style merging is ivy only feature') .it('should perform interpolation bindings', () => { @Component({ // TODO(misko): change `style-x` to `style` once #34202 lands template: `
` }) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(getSortedClassName(div)).toEqual('dynamic static'); expect(getSortedStyle(div)).toEqual('color: blue;'); }); onlyInIvy('style merging is ivy only feature').it('should support hostBindings', () => { @Component({ template: `
` }) class Cmp { } @Directive({ selector: '[my-host-bindings-1]', host: {'class': 'HOST_STATIC_1', 'style': 'font-family: "c1"'} }) class Dir1 { } @Directive({ selector: '[my-host-bindings-2]', host: {'class': 'HOST_STATIC_2', 'style': 'font-family: "c2"'} }) class Dir2 { } TestBed.configureTestingModule({ declarations: [ // Order of directives in the template does not matter. // Order of declarations matters as it determines the relative priority for overrides. Dir1, Dir2, // Even thought component is at the end, it will still have lowest priority because // components are special that way. Cmp, ] }); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(getSortedClassName(div)).toEqual('HOST_STATIC_1 HOST_STATIC_2 STATIC'); expect(getSortedStyle(div)).toEqual('color: blue; font-family: c2;'); }); it('should support hostBindings inheritance', () => { @Component({template: `
`}) class Cmp { } @Directive({host: {'class': 'SUPER_STATIC', 'style': 'font-family: "super"; width: "1px";'}}) class SuperDir { } @Directive({ selector: '[my-host-bindings]', host: {'class': 'HOST_STATIC', 'style': 'font-family: "host font"'} }) class Dir extends SuperDir { } TestBed.configureTestingModule({declarations: [Cmp, Dir]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(getSortedClassName(div)) .toEqual(ivyEnabled ? 'HOST_STATIC STATIC SUPER_STATIC' : 'HOST_STATIC STATIC'); // Browsers keep the '"' around the font name, but Domino removes it some we do search and // replace. Yes we could do `replace(/"/g, '')` but that fails on android. expect(getSortedStyle(div).replace('"', '').replace('"', '')) .toEqual( ivyEnabled ? 'color: blue; font-family: host font; width: 1px;' : 'color: blue; font-family: host font;'); }); onlyInIvy('style merging is ivy only feature') .it('should apply template classes in correct order', () => { @Component({ template: `
` }) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const classDiv = fixture.nativeElement.querySelector('div'); expect(getSortedClassName(classDiv)).toEqual('STATIC bar foo'); }); onlyInIvy('style merging is ivy only feature') .it('should apply template styles in correct order', () => { @Component({ template: `
` }) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const styleDiv = fixture.nativeElement.querySelector('div'); expect(getSortedStyle(styleDiv)) .toEqual('background-color: yellow; color: blue; width: 110px;'); }); it('should work with ngClass/ngStyle', () => { @Component( {template: `
`}) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(getSortedClassName(div)).toEqual('dynamic'); expect(getSortedStyle(div)).toEqual('font-family: dynamic;'); }); }); describe('css variables', () => { onlyInIvy('css variables').it('should support css variables', () => { // This test only works in browsers which support CSS variables. if (!(typeof getComputedStyle !== 'undefined' && typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined' && CSS.supports('color', 'var(--fake-var)'))) return; @Component({ template: `
CONTENT
` }) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); // document.body.appendChild(fixture.nativeElement); fixture.detectChanges(); const span = fixture.nativeElement.querySelector('span') as HTMLElement; expect(getComputedStyle(span).getPropertyValue('width')).toEqual('100px'); }); }); modifiedInIvy('shadow bindings include static portion') .it('should bind [class] as input to directive', () => { // VE Behavior https://stackblitz.com/edit/angular-cycpsf // IVY behavior is slightly different see next test with same name. @Component({ template: `
` }) class Cmp { } @Directive({selector: '[dir-shadows-class-input]'}) class DirectiveShadowsClassInput { constructor(private elementRef: ElementRef) {} @Input('class') set klass(value: string) { this.elementRef.nativeElement.setAttribute('shadow-class', value); } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const [div1, div2] = fixture.nativeElement.querySelectorAll('div'); // Static value `class="s1"` is always written to the DOM. expect(div1.className).toEqual('s1'); // VE passes the dynamic portion of `class` to the directive. expect(div1.getAttribute('shadow-class')).toEqual('d1'); // Interpolation `class="s2 {{'d2'}}"` does not have a static portion and so no value is // written to DOM. expect(div2.className).toEqual(''); expect(div2.getAttribute('shadow-class')).toEqual('s2 d2'); }); onlyInIvy('shadow bindings include static portion') .it('should bind [class] as input to directive', () => { // VE Behavior https://stackblitz.com/edit/angular-cycpsf // IVY behavior is slightly different see next test with same name. @Component({ template: `
` }) class Cmp { } @Directive({selector: '[dir-shadows-class-input]'}) class DirectiveShadowsClassInput { constructor(private elementRef: ElementRef) {} @Input('class') set klass(value: string) { this.elementRef.nativeElement.setAttribute('shadow-class', value); } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const [div1, div2] = fixture.nativeElement.querySelectorAll('div'); // Static value `class="s1"` is always written to the DOM. expect(div1.className).toEqual('s1'); // VE has weird behavior where it calls the @Input('class') with either `class="static` or // `[class]="dynamic"` but never both. This is determined at compile time. Due to locality // we don't know if `[class]` is coming if we see `class` only. So we need to combine the // static and dynamic parte. This results in slightly different calling sequence, but should // result in the same final DOM. expect(div1.getAttribute('shadow-class')).toEqual('s1 d1'); expect(div2.className).toEqual(''); expect(div2.getAttribute('shadow-class')).toEqual('s2 d2'); }); onlyInIvy('shadow bindings include static portion') .it('should bind [class] as input to directive when both static and falsy dynamic values are present', () => { @Component({ template: `
` }) class Cmp { classBinding: any = undefined; } @Directive({selector: '[dir-shadows-class-input]'}) class DirectiveShadowsClassInput { constructor(private elementRef: ElementRef) {} @Input('class') set klass(value: string) { this.elementRef.nativeElement.setAttribute('shadow-class', value); } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.className).toEqual('s1'); expect(div.getAttribute('shadow-class')).toEqual('s1'); fixture.componentInstance.classBinding = null; fixture.detectChanges(); expect(div.className).toEqual('s1'); expect(div.getAttribute('shadow-class')).toEqual('s1'); fixture.componentInstance.classBinding = false; fixture.detectChanges(); expect(div.className).toEqual('s1'); expect(div.getAttribute('shadow-class')).toEqual('s1'); fixture.componentInstance.classBinding = {toString: () => 'd1'}; fixture.detectChanges(); expect(div.className).toEqual('s1'); expect(div.getAttribute('shadow-class')).toEqual('s1 d1'); }); modifiedInIvy('shadow bindings include static portion') .it('should bind [style] as input to directive', () => { // VE Behavior https://stackblitz.com/edit/angular-cycpsf @Component({ template: `
` }) class Cmp { } @Directive({selector: '[dir-shadows-style-input]'}) class DirectiveShadowsClassInput { constructor(private elementRef: ElementRef) {} @Input('style') set style(value: string) { this.elementRef.nativeElement.setAttribute('shadow-style', value); } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.style.cssText).toEqual('color: red;'); // VE has weird behavior where it calls the @Input('class') with either `class="static` or // `[class]="dynamic"` but never both. This is determined at compile time. Due to locality // we // don't know if `[class]` is coming if we see `class` only. So we need to combine the two // This results in slightly different calling sequence, but should result in the same final // DOM. expect(div.getAttribute('shadow-style')).toEqual('width: 100px;'); }); onlyInIvy('shadow bindings include static portion') .it('should bind [style] as input to directive', () => { // VE Behavior https://stackblitz.com/edit/angular-cycpsf @Component({ template: `
` }) class Cmp { } @Directive({selector: '[dir-shadows-style-input]'}) class DirectiveShadowsClassInput { constructor(private elementRef: ElementRef) {} @Input('style') set style(value: string) { this.elementRef.nativeElement.setAttribute('shadow-style', value); } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.style.cssText).toEqual('color: red;'); // VE has weird behavior where it calls the @Input('class') with either `class="static` or // `[class]="dynamic"` but never both. This is determined at compile time. Due to locality // we // don't know if `[class]` is coming if we see `class` only. So we need to combine the two // This results in slightly different calling sequence, but should result in the same final // DOM. expect(div.getAttribute('shadow-style')).toEqual('color: red; width: 100px;'); }); it('should prevent circular ExpressionChangedAfterItHasBeenCheckedError on shadow inputs', () => { @Component({template: `
`}) class Cmp { } @Directive({selector: '[dir-shadows-class-input]'}) class DirectiveShadowsClassInput { @Input('class') klass: string|undefined; @HostBinding('class') get hostClasses() { return `${this.klass} SUFFIX`; } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveShadowsClassInput]}); const fixture = TestBed.createComponent(Cmp); expect(() => fixture.detectChanges()).not.toThrow(); const div = fixture.nativeElement.querySelector('div'); expect(div.className).toEqual('s1 SUFFIX'); }); it('should recover from exceptions', () => { @Component({ template: `
` }) class Cmp { id = 'throw_id'; klass: string|string[] = 'throw_klass'; foo = `throw_foo`; maybeThrow(value: any) { if (typeof value === 'string' && value.indexOf('throw') === 0) { throw new Error(value); } return value; } } let myDirHostBinding = false; @Directive({selector: '[my-dir]'}) class MyDirective { @HostBinding('class.myDir') get myDir(): boolean { if (myDirHostBinding === false) { throw new Error('class.myDir'); } return myDirHostBinding; } } TestBed.configureTestingModule({declarations: [Cmp, MyDirective]}); const fixture = TestBed.createComponent(Cmp); const cmp = fixture.componentInstance; const div = fixture.nativeElement.querySelector('div'); const span = fixture.nativeElement.querySelector('span'); expect(() => fixture.detectChanges()).toThrowError(/throw_id/); expect(div.id).toBeFalsy(); expectClass(span).toEqual({}); cmp.id = 'myId'; expect(() => fixture.detectChanges()).toThrowError(/throw_klass/); expect(div.id).toEqual('myId'); expectClass(span).toEqual({}); cmp.klass = ['BAR']; expect(() => fixture.detectChanges()).toThrowError(/throw_foo/); expect(div.id).toEqual('myId'); expectClass(span).toEqual(ivyEnabled ? {BAR: true} : {}); cmp.foo = 'foo'; expect(() => fixture.detectChanges()).toThrowError(/class.myDir/); expect(div.id).toEqual('myId'); expectClass(span).toEqual(ivyEnabled ? {BAR: true, foo: true} : {}); myDirHostBinding = true; fixture.detectChanges(); expect(div.id).toEqual('myId'); expectClass(span).toEqual({BAR: true, foo: true, myDir: true}); }); it('should render inline style and class attribute values on the element before a directive is instantiated', () => { @Component({ template: `
` }) class Cmp { } @Directive({selector: '[directive-expecting-styling]'}) class DirectiveExpectingStyling { constructor(elm: ElementRef) { const native = elm.nativeElement; native.setAttribute('data-captured-width', native.style.width); native.setAttribute('data-captured-classes', native.className); } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveExpectingStyling]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expect(element.style.width).toEqual('200px'); expect(element.getAttribute('data-captured-width')).toEqual('200px'); expect(element.className.trim()).toEqual('abc xyz'); expect(element.getAttribute('data-captured-classes')).toEqual('abc xyz'); }); it('should only render the same initial styling values once before a directive runs', () => { @Component({ template: `
` }) class Cmp { } @Directive({selector: '[directive-expecting-styling]'}) class DirectiveExpectingStyling { constructor(elm: ElementRef) { const native = elm.nativeElement; native.style.width = '300px'; native.classList.remove('abc'); } } TestBed.configureTestingModule({declarations: [Cmp, DirectiveExpectingStyling]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expect(element.style.width).toEqual('300px'); expect(element.classList.contains('abc')).toBeFalsy(); }); it('should ensure that static classes are assigned to ng-container elements and picked up for content projection', () => { @Component({ template: ` outer inner ` }) class MyApp { } @Component({ selector: 'project', template: `
` }) class ProjectCmp { } TestBed.configureTestingModule({declarations: [MyApp, ProjectCmp]}); const fixture = TestBed.createComponent(MyApp); const element = fixture.nativeElement; fixture.detectChanges(); const inner = element.querySelector('.inner-area'); expect(inner.textContent.trim()).toEqual('inner'); const outer = element.querySelector('.outer-area'); expect(outer.textContent.trim()).toEqual('outer'); }); it('should render initial styling for repeated nodes that a component host', () => { @Component({ selector: '[comp]', template: '', }) class Comp { } @Component({ template: `

A

` }) class App { items = [1, 2, 3]; } TestBed.configureTestingModule({ declarations: [App, Comp], }); const fixture = TestBed.createComponent(App); fixture.detectChanges(); expect(fixture.debugElement.queryAll(By.css('.a')).length).toBe(3); }); it('should do nothing for empty style bindings', () => { @Component({template: '
'}) class App { } TestBed.configureTestingModule({declarations: [App]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(); expect(fixture.nativeElement.innerHTML).toBe('
'); }); it('should do nothing for empty class bindings', () => { @Component({template: '
'}) class App { } TestBed.configureTestingModule({declarations: [App]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(); expect(fixture.nativeElement.innerHTML).toBe('
'); }); it('should be able to bind zero', () => { @Component({template: '
'}) class App { @ViewChild('div') div !: ElementRef; opacity = 0; } TestBed.configureTestingModule({declarations: [App]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(); expect(fixture.componentInstance.div.nativeElement.style.opacity).toBe('0'); }); it('should be able to bind a SafeValue to backgroundImage', () => { @Component({template: '
'}) class Cmp { image !: SafeStyle; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const sanitizer: DomSanitizer = TestBed.inject(DomSanitizer); fixture.componentInstance.image = sanitizer.bypassSecurityTrustStyle('url("#test")'); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div') as HTMLDivElement; expect(div.style.backgroundImage).toBe('url("#test")'); onlyInIvy('perf counters').expectPerfCounters({ rendererSetStyle: 1, tNode: 3, }); }); it('should not write to the native element if a directive shadows the class input', () => { // This ex is a bit contrived. In real apps, you might have a shared class that is extended // both by components with host elements and by directives on template nodes. In that case, the // host styles for the template directives should just be ignored. @Directive({selector: 'ng-template[styleDir]', host: {'[style.display]': 'display'}}) class StyleDir { display = 'block'; } @Component({selector: 'app-comp', template: ``}) class MyApp { } TestBed.configureTestingModule({declarations: [MyApp, StyleDir]}); TestBed.createComponent(MyApp).detectChanges(); }); it('should be able to bind a SafeValue to clip-path', () => { @Component({template: '
'}) class Cmp { path !: SafeStyle; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const sanitizer: DomSanitizer = TestBed.inject(DomSanitizer); fixture.componentInstance.path = sanitizer.bypassSecurityTrustStyle('url("#test")'); fixture.detectChanges(); const html = fixture.nativeElement.innerHTML; // Note that check the raw HTML, because (at the time of writing) the Node-based renderer // that we use to run tests doesn't support `clip-path` in `CSSStyleDeclaration`. expect(html).toMatch(/style=["|']clip-path:\s*url\(.*#test.*\)/); }); it('should support interpolations inside a class binding', () => { @Component({ template: `
` }) class Cmp { one = '1'; two = '2'; three = '3'; four = '4'; five = '5'; six = '6'; seven = '7'; eight = '8'; nine = '9'; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const instance = fixture.componentInstance; fixture.detectChanges(); const divs = fixture.nativeElement.querySelectorAll('div'); expect(divs[0].getAttribute('class')).toBe('a1b2c3d4e5f6g7h8i9j'); expect(divs[1].getAttribute('class')).toBe('a1b2c3d4e5f6g7h8i'); expect(divs[2].getAttribute('class')).toBe('a1b2c3d4e5f6g7h'); expect(divs[3].getAttribute('class')).toBe('a1b2c3d4e5f6g'); expect(divs[4].getAttribute('class')).toBe('a1b2c3d4e5f'); expect(divs[5].getAttribute('class')).toBe('a1b2c3d4e'); expect(divs[6].getAttribute('class')).toBe('a1b2c3d'); expect(divs[7].getAttribute('class')).toBe('a1b2c'); expect(divs[8].getAttribute('class')).toBe('a1b'); expect(divs[9].getAttribute('class')).toBe('1'); instance.one = instance.two = instance.three = instance.four = instance.five = instance.six = instance.seven = instance.eight = instance.nine = ''; fixture.detectChanges(); expect(divs[0].getAttribute('class')).toBe('abcdefghij'); expect(divs[1].getAttribute('class')).toBe('abcdefghi'); expect(divs[2].getAttribute('class')).toBe('abcdefgh'); expect(divs[3].getAttribute('class')).toBe('abcdefg'); expect(divs[4].getAttribute('class')).toBe('abcdef'); expect(divs[5].getAttribute('class')).toBe('abcde'); expect(divs[6].getAttribute('class')).toBe('abcd'); expect(divs[7].getAttribute('class')).toBe('abc'); expect(divs[8].getAttribute('class')).toBe('ab'); expect(divs[9].getAttribute('class')).toBeFalsy(); }); onlyInIvy('only Ivy supports style interpolation') .it('should support interpolations inside a style binding', () => { @Component({ template: `
` }) class Cmp { self = 'content: "self"'; one = '1'; two = '2'; three = '3'; four = '4'; five = '5'; six = '6'; seven = '7'; eight = '8'; nine = '9'; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const instance = fixture.componentInstance; fixture.detectChanges(); const divs = fixture.nativeElement.querySelectorAll('div'); expect(divs[0].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g7h8i9j"'); expect(divs[1].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g7h8i"'); expect(divs[2].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g7h"'); expect(divs[3].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f6g"'); expect(divs[4].style.getPropertyValue('content')).toBe('"a1b2c3d4e5f"'); expect(divs[5].style.getPropertyValue('content')).toBe('"a1b2c3d4e"'); expect(divs[6].style.getPropertyValue('content')).toBe('"a1b2c3d"'); expect(divs[7].style.getPropertyValue('content')).toBe('"a1b2c"'); expect(divs[8].style.getPropertyValue('content')).toBe('"a1b"'); expect(divs[9].style.getPropertyValue('content')).toBe('"self"'); instance.one = instance.two = instance.three = instance.four = instance.five = instance.six = instance.seven = instance.eight = instance.nine = instance.self = ''; fixture.detectChanges(); expect(divs[0].style.getPropertyValue('content')).toBe('"abcdefghij"'); expect(divs[1].style.getPropertyValue('content')).toBe('"abcdefghi"'); expect(divs[2].style.getPropertyValue('content')).toBe('"abcdefgh"'); expect(divs[3].style.getPropertyValue('content')).toBe('"abcdefg"'); expect(divs[4].style.getPropertyValue('content')).toBe('"abcdef"'); expect(divs[5].style.getPropertyValue('content')).toBe('"abcde"'); expect(divs[6].style.getPropertyValue('content')).toBe('"abcd"'); expect(divs[7].style.getPropertyValue('content')).toBe('"abc"'); expect(divs[8].style.getPropertyValue('content')).toBe('"ab"'); expect(divs[9].style.getPropertyValue('content')).toBeFalsy(); }); it('should support interpolations inside a class binding when other classes are present', () => { @Component({template: '
'}) class Cmp { one = 'one'; two = 'two'; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const classList = fixture.nativeElement.querySelector('div').classList; expect(classList).toContain('zero'); expect(classList).toContain('i-one'); expect(classList).toContain('two'); expect(classList).toContain('three'); fixture.componentInstance.one = fixture.componentInstance.two = ''; fixture.detectChanges(); expect(classList).toContain('zero'); expect(classList).toContain('i-'); expect(classList).toContain('three'); expect(classList).not.toContain('i-one'); expect(classList).not.toContain('two'); }); it('should support interpolations inside a style property binding', () => { @Component({ template: `
` }) class Cmp { singleBinding: string|null = '1337px'; one = 1; two = 2; three = 3; four = 4; five = 5; six = 6; seven = 7; eight = 8; nine = 9; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const instance = fixture.componentInstance; fixture.detectChanges(); const divs: NodeListOf = fixture.nativeElement.querySelectorAll('div'); expect(divs[0].style.fontFamily).toBe('f123456789'); expect(divs[1].style.fontFamily).toBe('f12345678'); expect(divs[2].style.fontFamily).toBe('f1234567'); expect(divs[3].style.fontFamily).toBe('f123456'); expect(divs[4].style.fontFamily).toBe('f12345'); expect(divs[5].style.fontFamily).toBe('f1234'); expect(divs[6].style.fontFamily).toBe('f123'); expect(divs[7].style.fontFamily).toBe('f12'); expect(divs[8].style.fontFamily).toBe('f1'); expect(divs[9].style.width).toBe('1337px'); instance.singleBinding = null; instance.one = instance.two = instance.three = instance.four = instance.five = instance.six = instance.seven = instance.eight = instance.nine = 1; fixture.detectChanges(); expect(divs[0].style.fontFamily).toBe('f111111111'); expect(divs[1].style.fontFamily).toBe('f11111111'); expect(divs[2].style.fontFamily).toBe('f1111111'); expect(divs[3].style.fontFamily).toBe('f111111'); expect(divs[4].style.fontFamily).toBe('f11111'); expect(divs[5].style.fontFamily).toBe('f1111'); expect(divs[6].style.fontFamily).toBe('f111'); expect(divs[7].style.fontFamily).toBe('f11'); expect(divs[8].style.fontFamily).toBe('f1'); expect(divs[9].style.width).toBeFalsy(); }); it('should support interpolations when a style property has a unit suffix', () => { @Component({template: '
'}) class Cmp { one = 1; three = 3; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.style.width).toBe('1337px'); fixture.componentInstance.one = 2; fixture.componentInstance.three = 6; fixture.detectChanges(); expect(div.style.width).toBe('2667px'); }); it('should not write to a `class` input binding in the event that there is no static class value', () => { let capturedClassBindingCount = 0; let capturedClassBindingValue: string|null|undefined = undefined; let capturedMyClassBindingCount = 0; let capturedMyClassBindingValue: string|null|undefined = undefined; @Component({template: '
'}) class Cmp { c: any = null; x = 'foo'; } @Directive({selector: '[my-class-dir]'}) class MyClassDir { @Input('class') set classVal(v: string) { capturedClassBindingCount++; capturedClassBindingValue = v; } @Input('my-class-dir') set myClassVal(v: string) { capturedMyClassBindingCount++; capturedMyClassBindingValue = v; } } TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); expect(capturedClassBindingCount).toEqual(1); expect(capturedClassBindingValue as any).toEqual(null); expect(capturedMyClassBindingCount).toEqual(1); expect(capturedMyClassBindingValue !).toEqual('foo'); fixture.componentInstance.c = 'dynamic-value'; fixture.detectChanges(); expect(capturedClassBindingCount).toEqual(2); expect(capturedClassBindingValue !).toEqual('dynamic-value'); expect(capturedMyClassBindingCount).toEqual(1); expect(capturedMyClassBindingValue !).toEqual('foo'); fixture.componentInstance.c = null; fixture.detectChanges(); expect(capturedClassBindingCount).toEqual(3); expect(capturedClassBindingValue as any).toEqual(null); expect(capturedMyClassBindingCount).toEqual(1); expect(capturedMyClassBindingValue !).toEqual('foo'); fixture.componentInstance.c = ''; fixture.detectChanges(); expect(capturedClassBindingCount).toEqual(4); expect(capturedClassBindingValue as any).toEqual(''); expect(capturedMyClassBindingCount).toEqual(1); expect(capturedMyClassBindingValue !).toEqual('foo'); }); it('should write to [class] binding during `update` mode if there is an instantiation-level value', () => { let capturedClassBindingCount = 0; let capturedClassBindingValue: string|null|undefined = undefined; @Component({template: '
'}) class Cmp { c: any = 'bar'; } @Directive({selector: '[my-class-dir]'}) class MyClassDir { @Input('class') set classVal(v: string) { capturedClassBindingCount++; capturedClassBindingValue = v; } } TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]}); const fixture = TestBed.createComponent(Cmp); expect(capturedClassBindingCount).toEqual(0); fixture.detectChanges(); expect(capturedClassBindingCount).toEqual(1); expect(capturedClassBindingValue as any).toEqual('bar'); fixture.componentInstance.c = 'dynamic-bar'; fixture.detectChanges(); expect(capturedClassBindingCount).toEqual(2); expect(capturedClassBindingValue !).toEqual('dynamic-bar'); }); it('should write to a `class` input binding if there is a static class value', () => { let capturedClassBindingCount = 0; let capturedClassBindingValue: string|null = null; let capturedMyClassBindingCount = 0; let capturedMyClassBindingValue: string|null = null; @Component({template: '
'}) class Cmp { x = 'foo'; } @Directive({selector: '[my-class-dir]'}) class MyClassDir { @Input('class') set classVal(v: string) { capturedClassBindingCount++; capturedClassBindingValue = v; } @Input('my-class-dir') set myClassVal(v: string) { capturedMyClassBindingCount++; capturedMyClassBindingValue = v; } } TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); expect(capturedClassBindingValue !).toEqual('static-val'); expect(capturedClassBindingCount).toEqual(1); expect(capturedMyClassBindingValue !).toEqual('foo'); expect(capturedMyClassBindingCount).toEqual(1); }); it('should write to a `className` input binding', () => { @Component({ selector: 'comp', template: `{{className}}`, }) class Comp { @Input() className: string = ''; } @Component({ template: ``, }) class App { } TestBed.configureTestingModule({declarations: [Comp, App]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(); expect(fixture.debugElement.nativeElement.firstChild.innerHTML).toBe('my-className'); }); onlyInIvy('only ivy combines static and dynamic class-related attr values') .it('should write combined class attribute and class binding to the class input', () => { @Component({ selector: 'comp', template: `{{className}}`, }) class Comp { @Input('class') className: string = ''; } @Component({ template: ``, }) class App { } TestBed.configureTestingModule({declarations: [Comp, App]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(); expect(fixture.debugElement.nativeElement.firstChild.innerHTML).toBe('static my-className'); }); onlyInIvy('only ivy persists static class/style attrs with their binding counterparts') .it('should write to a `class` input binding if there is a static class value and there is a binding value', () => { let capturedClassBindingCount = 0; let capturedClassBindingValue: string|null = null; let capturedMyClassBindingCount = 0; let capturedMyClassBindingValue: string|null = null; @Component({template: '
'}) class Cmp { c: any = null; x: any = 'foo'; } @Directive({selector: '[my-class-dir]'}) class MyClassDir { @Input('class') set classVal(v: string) { capturedClassBindingCount++; capturedClassBindingValue = v; } @Input('my-class-dir') set myClassVal(v: string) { capturedMyClassBindingCount++; capturedMyClassBindingValue = v; } } TestBed.configureTestingModule({declarations: [Cmp, MyClassDir]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); expect(capturedClassBindingCount) .toEqual( 2 // '2' is not ideal as '1' would be preferred. // The reason for two writes is that one is for the static // `class="static-val"` and one for `[class]="c"`. This means that // `class="static-val"` is written during the create block which is not ideal. // To do this correctly we would have to delay the `class="static-val"` until // the update block, but that would be expensive since it would require that we // would check if we possibly have this situation on every `advance()` // instruction. We don't think this is worth it, and we are just going to live // with this. ); expect(capturedClassBindingValue !).toEqual('static-val'); expect(capturedMyClassBindingCount).toEqual(1); expect(capturedMyClassBindingValue !).toEqual('foo'); capturedClassBindingCount = 0; fixture.componentInstance.c = 'dynamic-val'; fixture.detectChanges(); expect(capturedClassBindingCount).toEqual(1); expect(capturedClassBindingValue !).toEqual('static-val dynamic-val'); expect(capturedMyClassBindingCount).toEqual(1); expect(capturedMyClassBindingValue !).toEqual('foo'); }); onlyInIvy('only ivy balances styling across directives and component host bindings') .it('should allow multiple directives to set dynamic and static classes independent of one another', () => { @Component({ template: `
` }) class Cmp { } @Directive({selector: '[dir-one]', host: {'[class.dir-one]': 'dirOneExp'}}) class DirOne { dirOneExp = true; } @Directive({selector: '[dir-two]', host: {'class': 'dir-two'}}) class DirTwo { } TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expect(element.classList.contains('dir-one')).toBeTruthy(); expect(element.classList.contains('dir-two')).toBeTruthy(); }); describe('NgClass', () => { // We had a bug where NgClass would not allocate sufficient slots for host bindings, // so it would overwrite information about other directives nearby. This test checks // that TestDir's injector is not overwritten by NgClass, so TestDir should still // be found by DI when ChildDir is instantiated. it('should not overwrite other directive info when using NgClass', () => { @Directive({selector: '[test-dir]'}) class TestDir { } @Directive({selector: '[child-dir]'}) class ChildDir { constructor(public parent: TestDir) {} } @Component({ selector: 'app', template: `
Hello
` }) class AppComponent { classMap = {'with-button': true}; showing = false; } TestBed.configureTestingModule({declarations: [AppComponent, TestDir, ChildDir]}); const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const testDirDiv = fixture.debugElement.nativeElement.querySelector('div'); expect(testDirDiv.classList).toContain('with-button'); expect(fixture.debugElement.nativeElement.textContent).not.toContain('Hello'); fixture.componentInstance.classMap = {'with-button': false}; fixture.componentInstance.showing = true; fixture.detectChanges(); const childDir = fixture.debugElement.query(By.directive(ChildDir)).injector.get(ChildDir); expect(childDir.parent).toBeAnInstanceOf(TestDir); expect(testDirDiv.classList).not.toContain('with-button'); expect(fixture.debugElement.nativeElement.textContent).toContain('Hello'); }); }); it('should be able to name inputs starting with `class` or `style`', () => { @Directive({selector: '[dir]'}) class Dir { @Input('classesInSchool') classes = ''; @Input('styleOfClothing') style = ''; } @Component({ template: '', }) class App { @ViewChild(Dir) dir !: Dir; classes = 'math'; style = '80s'; } TestBed.configureTestingModule({declarations: [App, Dir]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(); const directive = fixture.componentInstance.dir; expect(directive.classes).toBe('math'); expect(directive.style).toBe('80s'); }); it('should be able to bind to `className`', () => { @Component({template: ''}) class App { @HostBinding('className') klass = 'one two'; } TestBed.configureTestingModule({declarations: [App]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(); const classList = fixture.nativeElement.classList; expect(classList.contains('one')).toBe(true); expect(classList.contains('two')).toBe(true); }); onlyInIvy('ivy resolves styling across directives, components and templates in unison') .it('should apply single property styles/classes to the element and default to any static styling values', () => { @Component({ template: `
` }) class Cmp { w: string|null|undefined = '100px'; h: string|null|undefined = '100px'; o: string|null|undefined = '0.5'; abc = true; xyz = false; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expect(element.style.width).toEqual('100px'); expect(element.style.height).toEqual('100px'); expect(element.style.opacity).toEqual('0.5'); expect(element.classList.contains('abc')).toBeTruthy(); expect(element.classList.contains('xyz')).toBeFalsy(); fixture.componentInstance.w = undefined; fixture.componentInstance.h = undefined; fixture.componentInstance.o = undefined; fixture.componentInstance.abc = false; fixture.componentInstance.xyz = true; fixture.detectChanges(); expect(element.style.width).toEqual('200px'); expect(element.style.height).toEqual('200px'); expect(element.style.opacity).toBeFalsy(); expect(element.classList.contains('abc')).toBeFalsy(); expect(element.classList.contains('xyz')).toBeTruthy(); fixture.componentInstance.w = null; fixture.componentInstance.h = null; fixture.componentInstance.o = null; fixture.detectChanges(); expect(element.style.width).toBeFalsy(); expect(element.style.height).toBeFalsy(); expect(element.style.opacity).toBeFalsy(); }); onlyInIvy('ivy resolves styling across directives, components and templates in unison') .it('should apply single style/class across the template and directive host bindings', () => { @Directive({selector: '[dir-that-sets-width]'}) class DirThatSetsWidthDirective { @Input('dir-that-sets-width') @HostBinding('style.width') public width: string = ''; } @Directive({selector: '[another-dir-that-sets-width]', host: {'[style.width]': 'width'}}) class AnotherDirThatSetsWidthDirective { @Input('another-dir-that-sets-width') public width: string = ''; } @Component({ template: `
` }) class Cmp { w0: string|null|undefined = null; w1: string|null|undefined = null; w2: string|null|undefined = null; } TestBed.configureTestingModule( {declarations: [Cmp, DirThatSetsWidthDirective, AnotherDirThatSetsWidthDirective]}); const fixture = TestBed.createComponent(Cmp); fixture.componentInstance.w0 = '100px'; fixture.componentInstance.w1 = '200px'; fixture.componentInstance.w2 = '300px'; fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expect(element.style.width).toEqual('100px'); fixture.componentInstance.w0 = undefined; fixture.detectChanges(); expect(element.style.width).toEqual('300px'); fixture.componentInstance.w2 = undefined; fixture.detectChanges(); expect(element.style.width).toEqual('200px'); fixture.componentInstance.w1 = undefined; fixture.detectChanges(); expect(element.style.width).toBeFalsy(); fixture.componentInstance.w2 = '400px'; fixture.detectChanges(); expect(element.style.width).toEqual('400px'); fixture.componentInstance.w1 = '500px'; fixture.componentInstance.w0 = '600px'; fixture.detectChanges(); expect(element.style.width).toEqual('600px'); }); onlyInIvy('ivy resolves styling across directives, components and templates in unison') .it('should only run stylingFlush once when there are no collisions between styling properties', () => { @Directive({selector: '[dir-with-styling]'}) class DirWithStyling { @HostBinding('style.font-size') public fontSize = '100px'; } @Component({selector: 'comp-with-styling'}) class CompWithStyling { @HostBinding('style.width') public width = '900px'; @HostBinding('style.height') public height = '900px'; } @Component({ template: ` ... ` }) class Cmp { opacity: string|null = '0.5'; @ViewChild(CompWithStyling, {static: true}) compWithStyling: CompWithStyling|null = null; @ViewChild(DirWithStyling, {static: true}) dirWithStyling: DirWithStyling|null = null; } TestBed.configureTestingModule({declarations: [Cmp, DirWithStyling, CompWithStyling]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const component = fixture.componentInstance; const element = fixture.nativeElement.querySelector('comp-with-styling'); expect(element.style.opacity).toEqual('0.5'); expect(element.style.width).toEqual('900px'); expect(element.style.height).toEqual('900px'); expect(element.style.fontSize).toEqual('100px'); // once for the template flush and again for the host bindings expect(ngDevMode !.rendererSetStyle).toEqual(4); ngDevModeResetPerfCounters(); component.opacity = '0.6'; component.compWithStyling !.height = '100px'; component.compWithStyling !.width = '100px'; component.dirWithStyling !.fontSize = '50px'; fixture.detectChanges(); expect(element.style.opacity).toEqual('0.6'); expect(element.style.width).toEqual('100px'); expect(element.style.height).toEqual('100px'); expect(element.style.fontSize).toEqual('50px'); // once for the template flush and again for the host bindings expect(ngDevMode !.rendererSetStyle).toEqual(4); }); onlyInIvy('ivy resolves styling across directives, components and templates in unison') .it('should combine all styling across the template, directive and component host bindings', () => { @Directive({selector: '[dir-with-styling]'}) class DirWithStyling { @HostBinding('style.color') public color = 'red'; @HostBinding('style.font-size') public fontSize = '100px'; @HostBinding('class.dir') public dirClass = true; } @Component({selector: 'comp-with-styling'}) class CompWithStyling { @HostBinding('style.width') public width = '900px'; @HostBinding('style.height') public height = '900px'; @HostBinding('class.comp') public compClass = true; } @Component({ template: ` ... ` }) class Cmp { opacity: string|null|undefined = '0.5'; width: string|null|undefined = 'auto'; tplClass = true; } TestBed.configureTestingModule({declarations: [Cmp, DirWithStyling, CompWithStyling]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('comp-with-styling'); expectStyle(element).toEqual({ 'color': 'red', 'font-size': '100px', 'height': '900px', 'opacity': '0.5', 'width': 'auto', }); expectClass(element).toEqual({ 'dir': true, 'comp': true, 'tpl': true, }); fixture.componentInstance.width = undefined; fixture.componentInstance.opacity = undefined; fixture.componentInstance.tplClass = false; fixture.detectChanges(); expectStyle(element).toEqual( {'color': 'red', 'width': '900px', 'height': '900px', 'font-size': '100px'}); expectClass(element).toEqual({ 'dir': true, 'comp': true, }); fixture.componentInstance.width = null; fixture.componentInstance.opacity = null; fixture.detectChanges(); expectStyle(element).toEqual({'color': 'red', 'height': '900px', 'font-size': '100px'}); }); onlyInIvy('ivy resolves styling across directives, components and templates in unison') .it('should properly apply styling across sub and super class directive host bindings', () => { @Directive({selector: '[super-class-dir]'}) class SuperClassDirective { @HostBinding('style.width') public w1 = '100px'; } @Component({selector: '[sub-class-dir]'}) class SubClassDirective extends SuperClassDirective { @HostBinding('style.width') public w2 = '200px'; } @Component({ template: `
` }) class Cmp { w3: string|null|undefined = '300px'; } TestBed.configureTestingModule( {declarations: [Cmp, SuperClassDirective, SubClassDirective]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expectStyle(element).toEqual({ 'width': '300px', }); fixture.componentInstance.w3 = null; fixture.detectChanges(); expectStyle(element).toEqual({}); fixture.componentInstance.w3 = undefined; fixture.detectChanges(); expectStyle(element).toEqual({ 'width': '200px', }); }); onlyInIvy('only ivy has style debugging support') .it('should apply map-based style and class entries', () => { @Component({template: '
'}) class Cmp { public c: {[key: string]: any}|null = null; updateClasses(classes: string) { const c = this.c || (this.c = {}); Object.keys(this.c).forEach(className => { c[className] = false; }); classes.split(/\s+/).forEach(className => { c[className] = true; }); } public s: {[key: string]: any}|null = null; updateStyles(prop: string, value: string|number|null) { const s = this.s || (this.s = {}); Object.assign(s, {[prop]: value}); } reset() { this.s = null; this.c = null; } } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; comp.updateStyles('width', '100px'); comp.updateStyles('height', '200px'); comp.updateClasses('abc'); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expectStyle(element).toEqual({width: '100px', height: '200px'}); expectClass(element).toEqual({abc: true}); comp.reset(); comp.updateStyles('width', '500px'); comp.updateStyles('height', null); comp.updateClasses('def'); fixture.detectChanges(); expectStyle(element).toEqual({width: '500px'}); expectClass(element).toEqual({def: true}); }); onlyInIvy('ivy resolves styling across directives, components and templates in unison') .it('should resolve styling collisions across templates, directives and components for prop and map-based entries', () => { @Directive({selector: '[dir-that-sets-styling]'}) class DirThatSetsStyling { @HostBinding('style') public map: any = {color: 'red', width: '777px'}; } @Component({ template: `
` }) class Cmp { map: any = {width: '111px', opacity: '0.5'}; width: string|null|undefined = '555px'; @ViewChild('dir', {read: DirThatSetsStyling, static: true}) dir !: DirThatSetsStyling; } TestBed.configureTestingModule({declarations: [Cmp, DirThatSetsStyling]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expectStyle(element).toEqual({ 'width': '555px', 'color': 'red', 'font-size': '99px', 'opacity': '0.5', }); comp.width = undefined; fixture.detectChanges(); expectStyle(element).toEqual({ 'width': '111px', 'color': 'red', 'font-size': '99px', 'opacity': '0.5', }); comp.map = null; fixture.detectChanges(); expectStyle(element).toEqual({ 'width': '200px', 'color': 'red', 'font-size': '99px', }); comp.dir.map = null; fixture.detectChanges(); expectStyle(element).toEqual({ 'width': '200px', 'font-size': '99px', }); }); onlyInIvy('ivy resolves styling across directives, components and templates in unison') .it('should only apply each styling property once per CD across templates, components, directives', () => { @Directive( {selector: '[dir-that-sets-styling]', host: {'style': 'width:0px; height:0px'}}) class DirThatSetsStyling { @HostBinding('style') public map: any = {width: '999px', height: '999px'}; } @Component({ template: `
` }) class Cmp { width: string|null|undefined = '111px'; height: string|null|undefined = '111px'; map: any = {width: '555px', height: '555px'}; @ViewChild('dir', {read: DirThatSetsStyling, static: true}) dir !: DirThatSetsStyling; } TestBed.configureTestingModule({declarations: [Cmp, DirThatSetsStyling]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; ngDevModeResetPerfCounters(); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); assertStyleCounters(4, 0); assertStyle(element, 'width', '111px'); assertStyle(element, 'height', '111px'); comp.width = '222px'; ngDevModeResetPerfCounters(); fixture.detectChanges(); assertStyleCounters(1, 0); assertStyle(element, 'width', '222px'); assertStyle(element, 'height', '111px'); comp.height = '222px'; ngDevModeResetPerfCounters(); fixture.detectChanges(); assertStyleCounters(1, 0); assertStyle(element, 'width', '222px'); assertStyle(element, 'height', '222px'); comp.width = undefined; ngDevModeResetPerfCounters(); fixture.detectChanges(); assertStyleCounters(1, 0); assertStyle(element, 'width', '555px'); assertStyle(element, 'height', '222px'); comp.width = '123px'; comp.height = '123px'; ngDevModeResetPerfCounters(); fixture.detectChanges(); assertStyle(element, 'width', '123px'); assertStyle(element, 'height', '123px'); comp.map = {}; ngDevModeResetPerfCounters(); fixture.detectChanges(); // No change, hence no write assertStyleCounters(0, 0); assertStyle(element, 'width', '123px'); assertStyle(element, 'height', '123px'); comp.width = undefined; ngDevModeResetPerfCounters(); fixture.detectChanges(); assertStyleCounters(1, 0); assertStyle(element, 'width', '999px'); assertStyle(element, 'height', '123px'); comp.dir.map = null; ngDevModeResetPerfCounters(); fixture.detectChanges(); // the width is only applied once assertStyleCounters(1, 0); assertStyle(element, 'width', '0px'); assertStyle(element, 'height', '123px'); comp.dir.map = {width: '1000px', height: '1100px', color: 'red'}; ngDevModeResetPerfCounters(); fixture.detectChanges(); assertStyleCounters(2, 0); assertStyle(element, 'width', '1000px'); assertStyle(element, 'height', '123px'); assertStyle(element, 'color', 'red'); comp.height = undefined; ngDevModeResetPerfCounters(); fixture.detectChanges(); // height gets applied twice and all other // values get applied assertStyleCounters(1, 0); assertStyle(element, 'width', '1000px'); assertStyle(element, 'height', '1100px'); assertStyle(element, 'color', 'red'); comp.map = {color: 'blue', width: '2000px', opacity: '0.5'}; ngDevModeResetPerfCounters(); fixture.detectChanges(); assertStyleCounters(3, 0); assertStyle(element, 'width', '2000px'); assertStyle(element, 'height', '1100px'); assertStyle(element, 'color', 'blue'); assertStyle(element, 'opacity', '0.5'); comp.map = {color: 'blue', width: '2000px'}; ngDevModeResetPerfCounters(); fixture.detectChanges(); // all four are applied because the map was altered assertStyleCounters(0, 1); assertStyle(element, 'width', '2000px'); assertStyle(element, 'height', '1100px'); assertStyle(element, 'color', 'blue'); assertStyle(element, 'opacity', ''); }); onlyInIvy('only ivy has [style.prop] support') .it('should sanitize style values before writing them', () => { @Component({ template: `
` }) class Cmp { widthExp = ''; bgImageExp = ''; styleMapExp: any = {}; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); comp.bgImageExp = 'url("javascript:img")'; fixture.detectChanges(); // for some reasons `background-image: unsafe` is suppressed expect(getSortedStyle(div)).toEqual(''); fixture.detectChanges(); expect(getSortedStyle(div)).not.toContain('javascript'); // Prove that bindings work. comp.widthExp = '789px'; comp.bgImageExp = bypassSanitizationTrustStyle(comp.bgImageExp) as string; fixture.detectChanges(); expect(div.style.getPropertyValue('background-image')).toEqual('url("javascript:img")'); expect(div.style.getPropertyValue('width')).toEqual('789px'); }); onlyInIvy('only ivy has [style] support') .it('should sanitize style values before writing them', () => { @Component({ template: `
` }) class Cmp { widthExp = ''; styleMapExp: {[key: string]: any} = {}; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); comp.styleMapExp['background-image'] = 'url("javascript:img")'; fixture.detectChanges(); // for some reasons `background-image: unsafe` is suppressed expect(getSortedStyle(div)).toEqual(''); // for some reasons `border-image: unsafe` is NOT suppressed fixture.detectChanges(); expect(getSortedStyle(div)).not.toContain('javascript'); // Prove that bindings work. comp.widthExp = '789px'; comp.styleMapExp = { 'background-image': bypassSanitizationTrustStyle(comp.styleMapExp['background-image']) }; fixture.detectChanges(); expect(div.style.getPropertyValue('background-image')).toEqual('url("javascript:img")'); expect(div.style.getPropertyValue('width')).toEqual('789px'); }); it('should apply a unit to a style before writing it', () => { @Component({ template: `
` }) class Cmp { widthExp: string|number|null = ''; heightExp: string|number|null = ''; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); comp.widthExp = '200'; comp.heightExp = 10; fixture.detectChanges(); expect(getSortedStyle(div)).toEqual('height: 10em; width: 200px;'); comp.widthExp = 0; comp.heightExp = null; fixture.detectChanges(); expect(getSortedStyle(div)).toEqual('width: 0px;'); }); it('should be able to bind a SafeValue to clip-path', () => { @Component({template: '
'}) class Cmp { path !: SafeStyle; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const sanitizer: DomSanitizer = TestBed.inject(DomSanitizer); fixture.componentInstance.path = sanitizer.bypassSecurityTrustStyle('url("#test")'); fixture.detectChanges(); const html = fixture.nativeElement.innerHTML; // Note that check the raw HTML, because (at the time of writing) the Node-based renderer // that we use to run tests doesn't support `clip-path` in `CSSStyleDeclaration`. expect(html).toMatch(/style=["|']clip-path:\s*url\(.*#test.*\)/); }); it('should handle values wrapped into SafeValue', () => { @Component({ template: `

`, }) class MyComp { constructor(private sanitizer: DomSanitizer) {} public width: string = 'calc(20%)'; public height: string = '10px'; public background: string = '1.png'; public color: string = 'red'; private getSafeStyle(value: string) { return this.sanitizer.bypassSecurityTrustStyle(value); } getBackgroundSafe() { return this.getSafeStyle(`url("/${this.background}")`); } getWidthSafe() { return this.getSafeStyle(this.width); } getHeightSafe() { return this.getSafeStyle(this.height); } getColorUnsafe() { return this.color; } } TestBed.configureTestingModule({ imports: [CommonModule], declarations: [MyComp], }); const fixture = TestBed.createComponent(MyComp); fixture.detectChanges(); const comp = fixture.componentInstance; const div = fixture.nativeElement.querySelector('div'); const p = fixture.nativeElement.querySelector('p'); const span = fixture.nativeElement.querySelector('span'); expect(div.style.background).toContain('url("/1.png")'); expect(p.style.width).toBe('calc(20%)'); expect(p.style.height).toBe('10px'); expect(span.style.color).toBe('red'); comp.background = '2.png'; comp.width = '5px'; comp.height = '100%'; comp.color = 'green'; fixture.detectChanges(); expect(div.style.background).toContain('url("/2.png")'); expect(p.style.width).toBe('5px'); expect(p.style.height).toBe('100%'); expect(span.style.color).toBe('green'); }); onlyInIvy('only ivy has style/class bindings debugging support') .it('should evaluate follow-up [style] maps even if a former map is null', () => { @Directive({selector: '[dir-with-styling]'}) class DirWithStyleMap { @HostBinding('style') public styleMap: any = {color: 'red'}; } @Directive({selector: '[dir-with-styling-part2]'}) class DirWithStyleMapPart2 { @HostBinding('style') public styleMap: any = {width: '200px'}; } @Component({ template: `
` }) class Cmp { map: any = null; @ViewChild('div', {read: DirWithStyleMap, static: true}) dir1 !: DirWithStyleMap; @ViewChild('div', {read: DirWithStyleMapPart2, static: true}) dir2 !: DirWithStyleMapPart2; } TestBed.configureTestingModule( {declarations: [Cmp, DirWithStyleMap, DirWithStyleMapPart2]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expectStyle(element).toEqual({ color: 'red', width: '200px', }); }); onlyInIvy('only ivy has style/class bindings debugging support') .it('should evaluate initial style/class values on a list of elements that changes', () => { @Component({ template: `
{{ item }}
` }) class Cmp { items = [1, 2, 3]; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); function getItemElements(): HTMLElement[] { return [].slice.call(fixture.nativeElement.querySelectorAll('div')); } function getItemClasses(): string[] { return getItemElements().map(e => e.className).sort().join(' ').split(' '); } expect(getItemElements().length).toEqual(3); expect(getItemClasses()).toEqual([ 'initial-class', 'item-1', 'initial-class', 'item-2', 'initial-class', 'item-3', ]); comp.items = [2, 4, 6, 8]; fixture.detectChanges(); expect(getItemElements().length).toEqual(4); expect(getItemClasses()).toEqual([ 'initial-class', 'item-2', 'initial-class', 'item-4', 'initial-class', 'item-6', 'initial-class', 'item-8', ]); }); onlyInIvy('only ivy has style/class bindings debugging support') .it('should create and update multiple class bindings across multiple elements in a template', () => { @Component({ template: `
header
{{ item }}
footer
` }) class Cmp { items = [1, 2, 3]; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); function getItemElements(): HTMLElement[] { return [].slice.call(fixture.nativeElement.querySelectorAll('div')); } function getItemClasses(): string[] { return getItemElements().map(e => e.className).sort().join(' ').split(' '); } const header = fixture.nativeElement.querySelector('header'); expect(header.classList.contains('header')); const footer = fixture.nativeElement.querySelector('footer'); expect(footer.classList.contains('footer')); expect(getItemElements().length).toEqual(3); expect(getItemClasses()).toEqual([ 'item', 'item-1', 'item', 'item-2', 'item', 'item-3', ]); }); onlyInIvy('only ivy has style/class bindings debugging support') .it('should understand multiple directives which contain initial classes', () => { @Directive({selector: 'dir-one'}) class DirOne { @HostBinding('class') public className = 'dir-one'; } @Directive({selector: 'dir-two'}) class DirTwo { @HostBinding('class') public className = 'dir-two'; } @Component({ template: `
` }) class Cmp { } TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const dirOne = fixture.nativeElement.querySelector('dir-one'); const div = fixture.nativeElement.querySelector('div'); const dirTwo = fixture.nativeElement.querySelector('dir-two'); expect(dirOne.classList.contains('dir-one')).toBeTruthy(); expect(dirTwo.classList.contains('dir-two')).toBeTruthy(); expect(div.classList.contains('initial')).toBeTruthy(); }); onlyInIvy('only ivy has style/class bindings debugging support') .it('should evaluate styling across the template directives when there are multiple elements/sources of styling', () => { @Directive({selector: '[one]'}) class DirOne { @HostBinding('class') public className = 'dir-one'; } @Directive({selector: '[two]'}) class DirTwo { @HostBinding('class') public className = 'dir-two'; } @Component({ template: `
` }) class Cmp { w = 100; h = 200; c = 'red'; } TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const divA = fixture.nativeElement.querySelector('.a'); const divB = fixture.nativeElement.querySelector('.b'); const divC = fixture.nativeElement.querySelector('.c'); expect(divA.style.width).toEqual('100px'); expect(divB.style.height).toEqual('200px'); expect(divC.style.color).toEqual('red'); }); onlyInIvy('only ivy has style/class bindings debugging support') .it('should evaluate styling across the template and directives within embedded views', () => { @Directive({selector: '[some-dir-with-styling]'}) class SomeDirWithStyling { @HostBinding('style') public styles = { width: '200px', height: '500px', }; } @Component({ template: `
{{ item }}

` }) class Cmp { items: any[] = []; c = 'red'; w = 100; h = 100; } TestBed.configureTestingModule({declarations: [Cmp, SomeDirWithStyling]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; comp.items = [1, 2, 3, 4]; fixture.detectChanges(); const items = fixture.nativeElement.querySelectorAll('.item'); expect(items.length).toEqual(4); const [a, b, c, d] = items; expect(a.style.height).toEqual('0px'); expect(b.style.height).toEqual('100px'); expect(c.style.height).toEqual('200px'); expect(d.style.height).toEqual('300px'); const section = fixture.nativeElement.querySelector('section'); const p = fixture.nativeElement.querySelector('p'); expect(section.style['width']).toEqual('100px'); expect(p.style['height']).toEqual('100px'); }); onlyInIvy('only ivy has style/class bindings debugging support') .it('should flush bindings even if any styling hasn\'t changed in a previous directive', () => { @Directive({selector: '[one]'}) class DirOne { @HostBinding('style.width') w = '100px'; @HostBinding('style.opacity') o = '0.5'; } @Directive({selector: '[two]'}) class DirTwo { @HostBinding('style.height') h = '200px'; @HostBinding('style.color') c = 'red'; } @Component({template: '
'}) class Cmp { @ViewChild('target', {read: DirOne, static: true}) one !: DirOne; @ViewChild('target', {read: DirTwo, static: true}) two !: DirTwo; } TestBed.configureTestingModule({declarations: [Cmp, DirOne, DirTwo]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.style.opacity).toEqual('0.5'); expect(div.style.color).toEqual('red'); expect(div.style.width).toEqual('100px'); expect(div.style.height).toEqual('200px'); comp.two.h = '300px'; fixture.detectChanges(); expect(div.style.opacity).toEqual('0.5'); expect(div.style.color).toEqual('red'); expect(div.style.width).toEqual('100px'); expect(div.style.height).toEqual('300px'); }); it('should work with NO_CHANGE values if they are applied to bindings ', () => { @Component({ template: `
` }) class Cmp { w: any = null; h: any = null; o: any = null; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; comp.w = '100px'; comp.h = '200px'; comp.o = '0.5'; fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.style.width).toEqual('100px'); expect(div.style.height).toEqual('200px'); expect(div.style.opacity).toEqual('0.5'); comp.w = '500px'; comp.o = '1'; fixture.detectChanges(); expect(div.style.width).toEqual('500px'); expect(div.style.height).toEqual('200px'); expect(div.style.opacity).toEqual('1'); }); it('should allow [ngStyle] and [ngClass] to be used together', () => { @Component({ template: `
` }) class Cmp { c: any = 'foo bar'; s: any = {width: '200px'}; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.style.width).toEqual('200px'); expect(div.classList.contains('foo')).toBeTruthy(); expect(div.classList.contains('bar')).toBeTruthy(); }); it('should allow to reset style property value defined using ngStyle', () => { @Component({ template: `
` }) class Cmp { s: any = {opacity: '1'}; clearStyle(): void { this.s = null; } } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const comp = fixture.componentInstance; fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.style.opacity).toEqual('1'); comp.clearStyle(); fixture.detectChanges(); expect(div.style.opacity).toEqual(''); }); it('should allow detectChanges to be run in a property change that causes additional styling to be rendered', () => { @Component({ selector: 'child', template: `
`, }) class ChildCmp { readyTpl = false; @HostBinding('class.ready-host') readyHost = false; } @Component({ selector: 'parent', template: `

{{prop}}

`, host: { '[style.color]': 'color', }, }) class ParentCmp { private _prop = ''; @ViewChild('template', {read: ViewContainerRef}) vcr: ViewContainerRef = null !; private child: ComponentRef = null !; @Input() set prop(value: string) { this._prop = value; if (this.child && value === 'go') { this.child.instance.readyHost = true; this.child.instance.readyTpl = true; this.child.changeDetectorRef.detectChanges(); } } get prop() { return this._prop; } ngAfterViewInit() { const factory = this.componentFactoryResolver.resolveComponentFactory(ChildCmp); this.child = this.vcr.createComponent(factory); } constructor(private componentFactoryResolver: ComponentFactoryResolver) {} } @Component({ template: ``, }) class App { prop = 'a'; } @NgModule({ entryComponents: [ChildCmp], declarations: [ChildCmp], }) class ChildCmpModule { } TestBed.configureTestingModule({declarations: [App, ParentCmp], imports: [ChildCmpModule]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(false); let readyHost = fixture.nativeElement.querySelector('.ready-host'); let readyChild = fixture.nativeElement.querySelector('.ready-child'); expect(readyHost).toBeFalsy(); expect(readyChild).toBeFalsy(); fixture.componentInstance.prop = 'go'; fixture.detectChanges(false); readyHost = fixture.nativeElement.querySelector('.ready-host'); readyChild = fixture.nativeElement.querySelector('.ready-child'); expect(readyHost).toBeTruthy(); expect(readyChild).toBeTruthy(); }); it('should allow detectChanges to be run in a hook that causes additional styling to be rendered', () => { @Component({ selector: 'child', template: `
`, }) class ChildCmp { readyTpl = false; @HostBinding('class.ready-host') readyHost = false; } @Component({ selector: 'parent', template: `

{{prop}}

`, }) class ParentCmp { updateChild = false; @ViewChild('template', {read: ViewContainerRef}) vcr: ViewContainerRef = null !; private child: ComponentRef = null !; ngDoCheck() { if (this.updateChild) { this.child.instance.readyHost = true; this.child.instance.readyTpl = true; this.child.changeDetectorRef.detectChanges(); } } ngAfterViewInit() { const factory = this.componentFactoryResolver.resolveComponentFactory(ChildCmp); this.child = this.vcr.createComponent(factory); } constructor(private componentFactoryResolver: ComponentFactoryResolver) {} } @Component({ template: ``, }) class App { @ViewChild('parent', {static: true}) public parent: ParentCmp|null = null; } @NgModule({ entryComponents: [ChildCmp], declarations: [ChildCmp], }) class ChildCmpModule { } TestBed.configureTestingModule({declarations: [App, ParentCmp], imports: [ChildCmpModule]}); const fixture = TestBed.createComponent(App); fixture.detectChanges(false); let readyHost = fixture.nativeElement.querySelector('.ready-host'); let readyChild = fixture.nativeElement.querySelector('.ready-child'); expect(readyHost).toBeFalsy(); expect(readyChild).toBeFalsy(); const parent = fixture.componentInstance.parent !; parent.updateChild = true; fixture.detectChanges(false); readyHost = fixture.nativeElement.querySelector('.ready-host'); readyChild = fixture.nativeElement.querySelector('.ready-child'); expect(readyHost).toBeTruthy(); expect(readyChild).toBeTruthy(); }); onlyInIvy('only ivy allows for multiple styles/classes to be balanced across directives') .it('should allow various duplicate properties to be defined in various styling maps within the template and directive styling bindings', () => { @Component({ template: `
` }) class Cmp { h = '100px'; w = '100px'; s1: any = {border: '10px solid black', width: '200px'}; s2: any = {border: '10px solid red', width: '300px'}; } @Directive({selector: '[dir-with-styling]'}) class DirectiveExpectingStyling { @Input('dir-with-styling') @HostBinding('style') public styles: any = null; } TestBed.configureTestingModule({declarations: [Cmp, DirectiveExpectingStyling]}); const fixture = TestBed.createComponent(Cmp); fixture.detectChanges(); const element = fixture.nativeElement.querySelector('div'); expect(element.style.border).toEqual('10px solid black'); expect(element.style.width).toEqual('100px'); expect(element.style.height).toEqual('100px'); fixture.componentInstance.s1 = null; fixture.detectChanges(); expect(element.style.border).toEqual('10px solid red'); expect(element.style.width).toEqual('100px'); expect(element.style.height).toEqual('100px'); }); it('should retrieve styles set via Renderer2', () => { let dirInstance: any; @Directive({ selector: '[dir]', }) class Dir { constructor(public elementRef: ElementRef, public renderer: Renderer2) { dirInstance = this; } setStyles() { const nativeEl = this.elementRef.nativeElement; this.renderer.setStyle(nativeEl, 'transform', 'translate3d(0px, 0px, 0px)'); this.renderer.addClass(nativeEl, 'my-class'); } } @Component({template: `
`}) class App { } TestBed.configureTestingModule({ declarations: [App, Dir], }); const fixture = TestBed.createComponent(App); fixture.detectChanges(); dirInstance.setStyles(); const div = fixture.debugElement.children[0]; expect(div.styles.transform).toMatch(/translate3d\(0px\s*,\s*0px\s*,\s*0px\)/); expect(div.classes['my-class']).toBe(true); }); it('should not set classes when falsy value is passed while a sanitizer is present', () => { @Component({ // Note that we use `background` here because it needs to be sanitized. template: `
`, }) class AppComponent { isDisabled = false; background = 'orange'; } TestBed.configureTestingModule({declarations: [AppComponent]}); const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const span = fixture.nativeElement.querySelector('span'); expect(span.classList).not.toContain('disabled'); // The issue we're testing for happens after the second change detection. fixture.detectChanges(); expect(span.classList).not.toContain('disabled'); }); it('should not set classes when falsy value is passed while a sanitizer from host bindings is present', () => { @Directive({selector: '[blockStyles]'}) class StylesDirective { @HostBinding('style.border') border = '1px solid red'; @HostBinding('style.background') background = 'white'; } @Component({ template: `
`, }) class AppComponent { isDisabled = false; } TestBed.configureTestingModule({declarations: [AppComponent, StylesDirective]}); const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div'); expect(div.classList.contains('disabled')).toBe(false); // The issue we're testing for happens after the second change detection. fixture.detectChanges(); expect(div.classList.contains('disabled')).toBe(false); }); it('should throw an error if a prop-based style/class binding value is changed during checkNoChanges', () => { @Component({ template: `
` }) class Cmp { color = 'red'; fooClass = true; ngAfterViewInit() { this.color = 'blue'; this.fooClass = false; } } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); expect(() => { fixture.detectChanges(); }).toThrowError(/ExpressionChangedAfterItHasBeenCheckedError/); }); onlyInIvy('only ivy allows for map-based style AND class bindings') .it('should throw an error if a map-based style/class binding value is changed during checkNoChanges', () => { @Component({ template: `
` }) class Cmp { style: any = 'width: 100px'; klass: any = 'foo'; ngAfterViewInit() { this.style = 'height: 200px'; this.klass = 'bar'; } } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); expect(() => { fixture.detectChanges(); }).toThrowError(/ExpressionChangedAfterItHasBeenCheckedError/); }); it('should properly merge class interpolation with class-based directives', () => { @Component( {template: `
`}) class MyComp { one = 'one'; } const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp); fixture.detectChanges(); expect(fixture.debugElement.nativeElement.innerHTML).toContain('zero'); expect(fixture.debugElement.nativeElement.innerHTML).toContain('one'); expect(fixture.debugElement.nativeElement.innerHTML).toContain('two'); expect(fixture.debugElement.nativeElement.innerHTML).toContain('three'); }); it('should allow to reset style property value defined using [style.prop.px] binding', () => { @Component({ template: '
', }) class MyComp { left = ''; } TestBed.configureTestingModule({declarations: [MyComp]}); const fixture = TestBed.createComponent(MyComp); fixture.detectChanges(); const checks = [ ['15', '15px'], [undefined, ''], [null, ''], ['', ''], ['0', '0px'], ]; const div = fixture.nativeElement.querySelector('div'); checks.forEach((check: any[]) => { const [fieldValue, expectedValue] = check; fixture.componentInstance.left = fieldValue; fixture.detectChanges(); expect(div.style.left).toBe(expectedValue); }); }); onlyInIvy('only ivy treats [class] in concert with other class bindings') .it('should retain classes added externally', () => { @Component({template: `
`}) class MyComp { exp = ''; } const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp); fixture.detectChanges(); const div = fixture.nativeElement.querySelector('div') !; div.className += ' abc'; expect(splitSortJoin(div.className)).toEqual('abc'); fixture.componentInstance.exp = '1 2 3'; fixture.detectChanges(); expect(splitSortJoin(div.className)).toEqual('1 2 3 abc'); fixture.componentInstance.exp = '4 5 6 7'; fixture.detectChanges(); expect(splitSortJoin(div.className)).toEqual('4 5 6 7 abc'); function splitSortJoin(s: string) { return s.split(/\s+/).sort().join(' ').trim(); } }); describe('ExpressionChangedAfterItHasBeenCheckedError', () => { it('should not throw when bound to SafeValue', () => { @Component({template: `
`}) class MyComp { icon = 'https://i.imgur.com/4AiXzf8.jpg'; get iconSafe() { return this.sanitizer.bypassSecurityTrustStyle(`url("${this.icon}")`); } constructor(private sanitizer: DomSanitizer) {} } const fixture = TestBed.configureTestingModule({declarations: [MyComp]}).createComponent(MyComp); fixture.detectChanges(true /* Verify that check no changes does not cause an exception */); const div: HTMLElement = fixture.nativeElement.querySelector('div'); expect(div.style.getPropertyValue('background-image')) .toEqual('url("https://i.imgur.com/4AiXzf8.jpg")'); }); }); isBrowser && it('should process
`, styles: [ 'div { width: 100px; }', ] }) class MyComp { } TestBed.configureTestingModule({ declarations: [MyComp], }); const fixture = TestBed.createComponent(MyComp); fixture.detectChanges(); // `styles` array values are applied first, styles from