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

crisbeto · AndrewKushnir · commit 00f13cc07460 · 2020-01-22T13:40:22.000-08:00
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 angular#34868. PR Close angular#34872
diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts
@@ -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;
   }
diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts
@@ -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();
