fix(addClass): fixing svg elements duplicate classNames

Author: afshinm

src/util/addClass.js

@@ -14,7 +14,10 @@ export default function addClass(element, className) {
     // svg
     const pre = element.getAttribute("class") || "";
 
-    element.setAttribute("class", `${pre} ${className}`);
+    if (!pre.match(className)) {
+      // check if element doesn't already have className
+      element.setAttribute("class", `${pre} ${className}`);
+    }
   } else {
     if (element.classList !== undefined) {
       // check for modern classList property

tests/util/addClass.test.js

@@ -17,21 +17,21 @@ describe("addClass", () => {
   });
 
   test("should append when element is SVG", () => {
-    const el = document.createElement("svg");
-    el.className = "firstClass";
+    const el = document.createElementNS('http://www.w3.org/2000/%3C/span%3Esvg%3Cspan%20class="x x-first">', 'svg');
+    el.setAttribute('class', "firstClass");
 
     addClass(el, "secondClass");
 
-    expect(el.className).toBe("firstClass secondClass");
+    expect(el.getAttribute('class')).toBe("firstClass secondClass");
   });
 
   test("should not append duplicate classNames to svg elements", () => {
-    const el = document.createElement("svg");
-    el.className = "firstClass";
+    const el = document.createElementNS('http://www.w3.org/2000/%3C/span%3Esvg%3Cspan%20class="x x-first">', 'svg');
+    el.setAttribute('class', "firstClass");
 
     addClass(el, "firstClass");
 
-    expect(el.className).toBe("firstClass");
+    expect(el.getAttribute('class')).toBe("firstClass");
   });
 
   test("should not append duplicate classNames to elements", () => {