Improve svg for xml parser

src/dom_components/model/ComponentSvg.js

@@ -1,11 +1,16 @@
 import Component from './Component';
+import { toLowerCase } from 'utils/mixins';
+
+const type = 'svg';
 
 export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,
-      resizable: { ratioDefault: 1 },
-      highlightable: 0
+      type,
+      tagName: type,
+      highlightable: 0,
+      resizable: { ratioDefault: 1 }
     },
 
     getName() {
@@ -16,13 +21,6 @@ export default Component.extend(
     }
   },
   {
-    isComponent(el) {
-      if (SVGElement && el instanceof SVGElement) {
-        return {
-          tagName: el.tagName,
-          type: 'svg'
-        };
-      }
-    }
+    isComponent: el => toLowerCase(el.tagName) === type
   }
 );

src/dom_components/model/ComponentSvgIn.js

@@ -13,13 +13,6 @@ export default Component.extend(
     }
   },
   {
-    isComponent(el) {
-      if (Component.isComponent(el) && el.tagName.toLowerCase() !== 'svg') {
-        return {
-          tagName: el.tagName,
-          type: 'svg-in'
-        };
-      }
-    }
+    isComponent: (el, opts = {}) => !!opts.inSvg
   }
 );

src/parser/model/ParserHtml.js

@@ -103,7 +103,7 @@ export default config => {
      * @param  {HTMLElement} el DOM element to traverse
      * @return {Array<Object>}
      */
-    parseNode(el) {
+    parseNode(el, opts = {}) {
       const result = [];
       const nodes = el.childNodes;
 
@@ -130,7 +130,7 @@ export default config => {
             // the first with a valid result will be that component
             for (let it = 0; it < ct.length; it++) {
               const compType = ct[it];
-              obj = compType.model.isComponent(node);
+              obj = compType.model.isComponent(node, opts);
 
               if (obj) {
                 if (typeof obj !== 'object') {
@@ -209,7 +209,10 @@ export default config => {
               content: firstChild.nodeValue
             };
           } else {
-            model.components = this.parseNode(node);
+            model.components = this.parseNode(node, {
+              inSvg: model.type === 'svg',
+              ...opts
+            });
           }
         }
 

test/specs/dom_components/model/ComponentTypes.js

@@ -82,11 +82,17 @@ describe('Component Types', () => {
     );
   });
 
-  test.skip('<svg> is correctly recognized', () => {
+  test('<svg> is correctly recognized', () => {
     const cmp = wrapper.append(`<svg viewBox="0 0 24 24" height="30px">
             <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z"></path></svg>
         `)[0];
     expect(wrapper.components().length).toBe(1);
     expect(cmp.is('svg')).toBe(true);
+    expect(
+      cmp
+        .components()
+        .at(0)
+        .is('svg-in')
+    ).toBe(true);
   });
 });