fix(ivy): DebugNode.classes not working on SVG elements (#34872)

Fixes Ivy throwing an error when trying to access the `DebugNode.classes` of an SVG element. The problem is that the `className` of an SVG element is an `SVGAnimatedString`, rather than a plain string.

Fixes #34868.

PR Close #34872
This commit is contained in:
Kristiyan Kostadinov 2020-01-20 21:22:38 +01:00 committed by Andrew Kushnir
parent e1fc44f5d6
commit 00f13cc074
2 changed files with 23 additions and 3 deletions

View File

@ -352,10 +352,14 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme
get classes(): {[key: string]: boolean;} {
const result: {[key: string]: boolean;} = {};
const element = this.nativeElement as HTMLElement;
const classNames = element.className.split(' ');
const element = this.nativeElement as HTMLElement | SVGElement;
classNames.forEach((value: string) => result[value] = true);
// SVG elements return an `SVGAnimatedString` instead of a plain string for the `className`.
const className = element.className as string | SVGAnimatedString;
const classes = className && typeof className !== 'string' ? className.baseVal.split(' ') :
className.split(' ');
classes.forEach((value: string) => result[value] = true);
return result;
}

View File

@ -368,6 +368,22 @@ class TestCmptWithPropInterpolation {
.toBeFalsy('Expected bound host CSS class "absent-class" to be absent');
});
it('should list classes on SVG nodes', () => {
// Class bindings on SVG elements require a polyfill
// on IE which we don't include when running tests.
if (typeof SVGElement !== 'undefined' && !('classList' in SVGElement.prototype)) {
return;
}
TestBed.overrideTemplate(TestApp, `<svg [class.foo]="true" [class.bar]="true"></svg>`);
fixture = TestBed.createComponent(TestApp);
fixture.detectChanges();
const classes = fixture.debugElement.children[0].classes;
expect(classes['foo']).toBe(true);
expect(classes['bar']).toBe(true);
});
it('should list element styles', () => {
fixture = TestBed.createComponent(TestApp);
fixture.detectChanges();