DebugElement.classes does not work for SVG elements in Ivy

[euangoddard]

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Yes. Angular 8.x and before

Description

In unit tests when inspecting the classes property of a DebugElement which wraps an SVGElement, the error:

TypeError: element.className.split is not a function

is thrown.

I can reproduce this error in the web browser by selecting an arbitrary SVG element (e.g. document.querySelector('svg') and accessing svgElement.classList.split(' '); on this element.

The affected line of code is:

angular/packages/core/src/debug/debug_node.ts

Line 356 in 7d40185

const classNames = element.className.split(' ');

and this only happens with SVG elements

🔬 Minimal Reproduction

I can't get this to work in StackBlitz - it looks like Ivy isn't enabled there for some reason. I have made this repo with instructions in the README: https://github.com/euangoddard/svg-debug-element

🔥 Exception or Error

core.js:6406 ERROR TypeError: element.className.split is not a function
    at DebugElement__POST_R3__.get classes [as classes] (core.js:44232)
    at AppComponent.showClasses (app.component.ts:47)
    at AppComponent_Template_button_click_10_listener (app.component.ts:24)
    at executeListenerWithErrorHandling (core.js:24408)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:24450)
    at HTMLButtonElement. (platform-browser.js:928)
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:41740)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.9
Node: 12.14.1
OS: darwin x64

Angular: 9.0.0-rc.9
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.9
@angular-devkit/build-angular     0.900.0-rc.9
@angular-devkit/build-optimizer   0.900.0-rc.9
@angular-devkit/build-webpack     0.900.0-rc.9
@angular-devkit/core              9.0.0-rc.9
@angular-devkit/schematics        9.0.0-rc.9
@ngtools/webpack                  9.0.0-rc.9
@schematics/angular               9.0.0-rc.9
@schematics/update                0.900.0-rc.9
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

[euangoddard]

Looking at the documentation here, it would appear that svgElement.className returns SVGAnimatedString and not DOMString as htmlElement.className returns. I'm happy to make a PR for this, but am unsure of the best way to cater for this (e.g. using an instanceof check and reading the baseVal in the case of SVGAnimatedString

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}