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:
parent
e1fc44f5d6
commit
00f13cc074
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in New Issue