From: daiwei Date: Fri, 25 Jul 2025 09:09:09 +0000 (+0800) Subject: wip: add tests X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=0d22bbc96b3e2b3da43689bf3e4c28ba3bf0cc21;p=thirdparty%2Fvuejs%2Fcore.git wip: add tests --- diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap index 7aa56aa9c2..5a3c13946b 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap @@ -1,5 +1,15 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`compiler: element transform > MathML 1`] = ` +"import { template as _template } from 'vue'; +const t0 = _template("x", true, 2) + +export function render(_ctx) { + const n0 = t0() + return n0 +}" +`; + exports[`compiler: element transform > component > cache v-on expression with unique handler name 1`] = ` "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue'; @@ -407,6 +417,16 @@ export function render(_ctx) { }" `; +exports[`compiler: element transform > svg 1`] = ` +"import { template as _template } from 'vue'; +const t0 = _template("", true, 1) + +export function render(_ctx) { + const n0 = t0() + return n0 +}" +`; + exports[`compiler: element transform > v-bind="obj" 1`] = ` "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue'; const t0 = _template("
", true) diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap index 4ea0db55fe..edac6aef96 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap @@ -465,6 +465,17 @@ export function render(_ctx) { }" `; +exports[`compiler v-bind > :class w/ svg elements 1`] = ` +"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue'; +const t0 = _template("", true, 1) + +export function render(_ctx) { + const n0 = t0() + _renderEffect(() => _setAttr(n0, "class", _ctx.cls)) + return n0 +}" +`; + exports[`compiler v-bind > :innerHTML 1`] = ` "import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue'; const t0 = _template("
", true) diff --git a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts index a693db4ad3..4c9e5c5c2e 100644 --- a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts @@ -956,4 +956,26 @@ describe('compiler: element transform', () => { expect(code).toMatchSnapshot() expect(code).contain('return null') }) + + test('svg', () => { + const t = `` + const { code, ir } = compileWithElementTransform(t) + expect(code).toMatchSnapshot() + expect(code).contains( + '_template("", true, 1)', + ) + expect(ir.template).toMatchObject([t]) + expect(ir.templateNS.get(t)).toBe(1) + }) + + test('MathML', () => { + const t = `x` + const { code, ir } = compileWithElementTransform(t) + expect(code).toMatchSnapshot() + expect(code).contains( + '_template("x", true, 2)', + ) + expect(ir.template).toMatchObject([t]) + expect(ir.templateNS.get(t)).toBe(2) + }) }) diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts index e96186c275..a36a76d838 100644 --- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts @@ -656,6 +656,14 @@ describe('compiler v-bind', () => { expect(code).contains('_setProp(n0, "value", _ctx.foo)') }) + test(':class w/ svg elements', () => { + const { code } = compileWithVBind(` + + `) + expect(code).matchSnapshot() + expect(code).contains('_setAttr(n0, "class", _ctx.cls))') + }) + test('number value', () => { const { code } = compileWithVBind(``) expect(code).matchSnapshot() diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts index 42f063331f..ef1ebba2ae 100644 --- a/packages/compiler-vapor/src/generators/prop.ts +++ b/packages/compiler-vapor/src/generators/prop.ts @@ -169,16 +169,17 @@ function getRuntimeHelper( modifier: '.' | '^' | undefined, ): HelperConfig { const tagName = tag.toUpperCase() + const isSVG = isSVGTag(tag) if (modifier) { if (modifier === '.') { - return getSpecialHelper(key, tagName) || helpers.setDOMProp + return getSpecialHelper(key, tagName, isSVG) || helpers.setDOMProp } else { return helpers.setAttr } } // 1. special handling for value / style / class / textContent / innerHTML - const helper = getSpecialHelper(key, tagName) + const helper = getSpecialHelper(key, tagName, isSVG) if (helper) { return helper } @@ -190,7 +191,7 @@ function getRuntimeHelper( } // 3. SVG: always attribute - if (isSVGTag(tag)) { + if (isSVG) { // TODO pass svg flag return helpers.setAttr } @@ -209,12 +210,13 @@ function getRuntimeHelper( function getSpecialHelper( keyName: string, tagName: string, + isSVG: boolean, ): HelperConfig | undefined { // special case for 'value' property if (keyName === 'value' && canSetValueDirectly(tagName)) { return helpers.setValue } else if (keyName === 'class') { - return helpers.setClass + return isSVG ? helpers.setAttr : helpers.setClass } else if (keyName === 'style') { return helpers.setStyle } else if (keyName === 'innerHTML') { diff --git a/packages/runtime-vapor/__tests__/dom/mathML.spec.ts b/packages/runtime-vapor/__tests__/dom/mathML.spec.ts new file mode 100644 index 0000000000..148d4c300b --- /dev/null +++ b/packages/runtime-vapor/__tests__/dom/mathML.spec.ts @@ -0,0 +1 @@ +describe.todo('MathML support', () => {}) diff --git a/packages/runtime-vapor/__tests__/dom/svg.spec.ts b/packages/runtime-vapor/__tests__/dom/svg.spec.ts new file mode 100644 index 0000000000..5f0f79d1ba --- /dev/null +++ b/packages/runtime-vapor/__tests__/dom/svg.spec.ts @@ -0,0 +1,65 @@ +import { makeRender } from '../_utils' +import { template } from '../../src/dom/template' +import { child } from '../../src/dom/node' +import { setAttr, setClass } from '../../src/dom/prop' +import { renderEffect } from '../../src' +import { nextTick, ref } from '@vue/runtime-dom' + +const define = makeRender() + +describe('SVG support', () => { + afterEach(() => { + document.body.innerHTML = '' + }) + + test('should mount elements with correct html namespace', () => { + define({ + setup() { + const t0 = template( + '
', + true, + ) + return t0() + }, + }).render() + + const e0 = document.getElementById('e0')! + expect(e0.namespaceURI).toMatch('xhtml') + expect(e0.querySelector('#e1')!.namespaceURI).toMatch('svg') + expect(e0.querySelector('#e2')!.namespaceURI).toMatch('svg') + expect(e0.querySelector('#e3')!.namespaceURI).toMatch('xhtml') + expect(e0.querySelector('#e4')!.namespaceURI).toMatch('svg') + expect(e0.querySelector('#e5')!.namespaceURI).toMatch('Math') + }) + + test('should patch elements with correct namespaces', async () => { + const cls = ref('foo') + define({ + setup() { + const t0 = template( + '
hi
', + true, + ) + const n2 = t0() as HTMLElement + const n1 = child(n2) as HTMLElement + const p0 = child(n1) as HTMLElement + const n0 = child(p0) as HTMLElement + renderEffect(() => { + const _cls = cls.value + setAttr(n1, 'class', _cls) + setClass(n0, _cls) + }) + return n2 + }, + }).render() + const f1 = document.querySelector('#f1')! + const f2 = document.querySelector('#f2')! + expect(f1.getAttribute('class')).toBe('foo') + expect(f2.className).toBe('foo') + + cls.value = 'bar' + await nextTick() + expect(f1.getAttribute('class')).toBe('bar') + expect(f2.className).toBe('bar') + }) +})