tests

Author: wxiaoguang

web_src/js/svg.js

@@ -113,6 +113,24 @@ export function svg(name, size = 16, className = '') {
   return serializer.serializeToString(svgNode);
 }
 
+export function svgParseOuterInner(name) {
+  const svgStr = svgs[name];
+  if (!svgStr) throw new Error(`Unknown SVG icon: ${name}`);
+
+  // parse the SVG string to 2 parts
+  // * svgInnerHtml: the inner part of the SVG, will be used as the content of the <svg> VNode
+  // * svgOuter: the outer part of the SVG, including attributes
+  // the builtin SVG contents are clean, so it's safe to use `indexOf` to split the content:
+  // eg: <svg outer-attributes>${svgInnerHtml}</svg>
+  const p1 = svgStr.indexOf('>'), p2 = svgStr.lastIndexOf('<');
+  if (p1 === -1 || p2 === -1) throw new Error(`Invalid SVG icon: ${name}`);
+  const svgInnerHtml = svgStr.slice(p1 + 1, p2);
+  const svgOuterHtml = svgStr.slice(0, p1 + 1) + svgStr.slice(p2);
+  const svgDoc = parser.parseFromString(svgOuterHtml, 'image/svg+xml');
+  const svgOuter = svgDoc.firstChild;
+  return {svgOuter, svgInnerHtml};
+}
+
 export const SvgIcon = {
   name: 'SvgIcon',
   props: {
@@ -121,21 +139,7 @@ export const SvgIcon = {
     className: {type: String, default: ''},
   },
   render() {
-    const svgStr = svgs[this.name];
-    if (!svgStr) throw new Error(`Unknown SVG icon: ${this.name}`);
-
-    // parse the SVG string to 2 parts
-    // * svgInnerHtml: the inner part of the SVG, will be used as the content of the <svg> VNode
-    // * svgOuter: the outer part of the SVG, including attributes
-    // the builtin SVG contents are clean, so it's safe to use `indexOf` to split the content:
-    // eg: <svg outer-attributes>${svgInnerHtml}</svg>
-    const p1 = svgStr.indexOf('>'), p2 = svgStr.lastIndexOf('<');
-    if (p1 === -1 || p2 === -1) throw new Error(`Invalid SVG icon: ${this.name}`);
-    const svgInnerHtml = svgStr.slice(p1 + 1, p2);
-    const svgOuterHtml = svgStr.slice(0, p1 + 1) + svgStr.slice(p2);
-    const svgDoc = parser.parseFromString(svgOuterHtml, 'image/svg+xml');
-    const svgOuter = svgDoc.firstChild;
-
+    const {svgOuter, svgInnerHtml} = svgParseOuterInner(this.name);
     // https://vuejs.org/guide/extras/render-function.html#creating-vnodes
     // the `^` is used for attr, set SVG attributes like 'width', `aria-hidden`, `viewBox`, etc
     const attrs = {};
@@ -151,6 +155,7 @@ export const SvgIcon = {
     for (const cls of svgOuter.classList) {
       classes.push(cls);
     }
+    // TODO: drop the `className/class-name` prop in the future, only use "class" prop
     if (this.className) {
       classes.push(...this.className.split(/\s+/).filter(Boolean));
     }

web_src/js/svg.test.js

@@ -1,8 +1,15 @@
 import {expect, test} from 'vitest';
-import {svg} from './svg.js';
+import {svg, svgParseOuterInner} from './svg.js';
 
 test('svg', () => {
   expect(svg('octicon-repo')).toMatch(/^<svg/);
   expect(svg('octicon-repo', 16)).toContain('width="16"');
   expect(svg('octicon-repo', 32)).toContain('width="32"');
 });
+
+test('svgParseOuterInner', () => {
+  const {svgOuter, svgInnerHtml} = svgParseOuterInner('octicon-repo');
+  expect(svgOuter.nodeName).toMatch('svg');
+  expect(svgOuter.classList.contains('octicon-repo')).toBeTruthy();
+  expect(svgInnerHtml).toContain('<path');
+})