From 76de206deb5b1a37d44875d6dd34c71bb5070dc8 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Sun, 28 Jan 2024 22:46:41 +0900 Subject: [PATCH 01/20] test(runtime-vapor): component props --- .../__tests__/componentProps.spec.ts | 487 ++++++++++++++++++ 1 file changed, 487 insertions(+) create mode 100644 packages/runtime-vapor/__tests__/componentProps.spec.ts diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts new file mode 100644 index 000000000..a860d9ae6 --- /dev/null +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -0,0 +1,487 @@ +import { computed, defineComponent, ref, watchEffect } from 'vue' + +import { template } from '../src/template' +import { children, setText } from '../src/dom' +import { render as renderComponent } from '../src/render' +import { nextTick } from '../src/scheduler' +import { getCurrentInstance } from '../src/component' + +let host: HTMLElement + +const initHost = () => { + host = document.createElement('div') + host.setAttribute('id', 'host') + document.body.appendChild(host) +} +beforeEach(() => initHost()) +afterEach(() => host.remove()) + +describe('runtime: compoentn props', () => { + test('should render props value (string array spec)', () => { + const ChildComp = defineComponent({ + props: ['foo'], + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const instance = getCurrentInstance() + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance?.props.foo) + }) + return n0 + }, + }) + const Comp = defineComponent({ + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + get foo() { + return 'foo' + }, + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
foo
') + }) + + test('should render props value (object spec)', () => { + const ChildComp = defineComponent({ + props: { foo: {} }, + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const instance = getCurrentInstance() + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance?.props.foo) + }) + return n0 + }, + }) + const Comp = defineComponent({ + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + get foo() { + return 'foo' + }, + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
foo
') + }) + + test('should render props default value', () => { + const ChildComp = defineComponent({ + props: { + foo: { default: 'foo' }, // default value + }, + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const instance = getCurrentInstance() + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance?.props.foo) + }) + return n0 + }, + }) + const Comp = defineComponent({ + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + /** no props are provided */ + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
foo
') + }) + + test('should render props updates', async () => { + const ChildComp = defineComponent({ + props: { count: {} }, + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const instance = getCurrentInstance() + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance?.props.count) + }) + return n0 + }, + }) + const count = ref(0) // state (Comp) + const increment = () => count.value++ + const Comp = defineComponent({ + setup() { + const __returned__ = { count } + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render(_ctx: any) { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + get count() { + return _ctx.count + }, + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
0
') + increment() // update state + await nextTick() + expect(host.innerHTML).toBe('
1
') + }) + + test('should render inline computed props value', async () => { + const ChildComp = defineComponent({ + props: { double: {} }, + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const instance = getCurrentInstance() + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance?.props.double) + }) + return n0 + }, + }) + + const count = ref(0) // state (Comp) + const increment = () => count.value++ + const Comp = defineComponent({ + setup() { + const __returned__ = { count } + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + get double() { + // inline computed + return count.value * 2 + }, + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
0
') + increment() // update state + await nextTick() + expect(host.innerHTML).toBe('
2
') + }) + + test('should render props updates (fallback to default value)', async () => { + const ChildComp = defineComponent({ + props: { count: { default: 9999 } }, + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const instance = getCurrentInstance() + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance?.props.count) + }) + return n0 + }, + }) + + const count = ref(0) // state (Comp) + const increment = () => count.value++ + const Comp = defineComponent({ + setup() { + const __returned__ = { count } + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render(_ctx: any) { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + get count() { + // toggle the props value + return _ctx.count % 2 === 0 ? _ctx.count : void 0 + }, + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
0
') + increment() // update state (count === 1) + await nextTick() + expect(host.innerHTML).toBe('
9999
') + increment() // update state (count === 2) + await nextTick() + expect(host.innerHTML).toBe('
2
') + }) + + test('should not render props value (no props spec)', () => { + const ChildComp = defineComponent({ + // props: { foo: {} }, // no props specs + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render(_ctx: any) { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, _ctx.foo) + }) + return n0 + }, + }) + const Comp = defineComponent({ + setup() { + const __returned__ = {} + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render() { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + // but props are provided + get foo() { + return 'foo' + }, + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
') + }) + + test('should render computed props', async () => { + const ChildComp = defineComponent({ + props: { count: { type: Number, required: true } }, + setup(props) { + const double = computed(() => props.count * 2) + const __returned__ = { double } + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render(_ctx: any) { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, _ctx.double) + }) + return n0 + }, + }) + + const count = ref(0) // state (Comp) + const increment = () => count.value++ + const Comp = defineComponent({ + setup() { + const __returned__ = { count } + Object.defineProperty(__returned__, '__isScriptSetup', { + enumerable: false, + value: true, + }) + return __returned__ + }, + render(_ctx: any) { + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + renderComponent( + ChildComp as any, + { + get count() { + return _ctx.count + }, + }, + n1 as any, + ) + return n0 + }, + }) + renderComponent(Comp as any, {}, '#host') + expect(host.innerHTML).toBe('
0
') + increment() // update state + await nextTick() + expect(host.innerHTML).toBe('
2
') + }) +}) From da5c838b842908a51a35a061d543cb9028bcb604 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Sun, 28 Jan 2024 23:23:32 +0900 Subject: [PATCH 02/20] test(runtime-vapor): component props (stateful) --- .../__tests__/componentProps2.spec.ts | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 packages/runtime-vapor/__tests__/componentProps2.spec.ts diff --git a/packages/runtime-vapor/__tests__/componentProps2.spec.ts b/packages/runtime-vapor/__tests__/componentProps2.spec.ts new file mode 100644 index 000000000..00eea93f9 --- /dev/null +++ b/packages/runtime-vapor/__tests__/componentProps2.spec.ts @@ -0,0 +1,79 @@ +import { defineComponent } from 'vue' +import { getCurrentInstance } from '../src/component' +import { render } from '../src/render' + +let host: HTMLElement +const initHost = () => { + host = document.createElement('div') + host.setAttribute('id', 'host') + document.body.appendChild(host) +} +beforeEach(() => initHost()) +afterEach(() => host.remove()) + +describe('component props (vapor)', () => { + test('stateful', () => { + let props: any + // TODO: attrs + + const Comp = defineComponent({ + props: ['fooBar', 'barBaz'], + render() { + const instance = getCurrentInstance()! + props = instance.props + }, + }) + + render( + Comp as any, + { + get fooBar() { + return 1 + }, + }, + host, + ) + expect(props.fooBar).toEqual(1) + + // test passing kebab-case and resolving to camelCase + render( + Comp as any, + { + get ['foo-bar']() { + return 2 + }, + }, + host, + ) + expect(props.fooBar).toEqual(2) + + // test updating kebab-case should not delete it (#955) + render( + Comp as any, + { + get ['foo-bar']() { + return 3 + }, + get barBaz() { + return 5 + }, + }, + host, + ) + expect(props.fooBar).toEqual(3) + expect(props.barBaz).toEqual(5) + + render( + Comp as any, + { + get qux() { + return 5 + }, + }, + host, + ) + expect(props.fooBar).toBeUndefined() + expect(props.barBaz).toBeUndefined() + // expect(props.qux).toEqual(5) // TODO: attrs + }) +}) From 22c7964bdedaddd0dc3c9d10297e986a4c1606e6 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Sun, 28 Jan 2024 23:37:13 +0900 Subject: [PATCH 03/20] test(runtime-vapor): component props (functional) --- .../__tests__/componentProps2.spec.ts | 81 +++++++++++++++++-- 1 file changed, 76 insertions(+), 5 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps2.spec.ts b/packages/runtime-vapor/__tests__/componentProps2.spec.ts index 00eea93f9..0d1734ef3 100644 --- a/packages/runtime-vapor/__tests__/componentProps2.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps2.spec.ts @@ -1,4 +1,6 @@ import { defineComponent } from 'vue' + +import type { FunctionalComponent } from '../src/component' import { getCurrentInstance } from '../src/component' import { render } from '../src/render' @@ -63,17 +65,86 @@ describe('component props (vapor)', () => { expect(props.fooBar).toEqual(3) expect(props.barBaz).toEqual(5) + render(Comp as any, {}, host) + expect(props.fooBar).toBeUndefined() + expect(props.barBaz).toBeUndefined() + // expect(props.qux).toEqual(5) // TODO: attrs + }) + + test('stateful with setup', () => { + // FIXME: is it necessary? + }) + + test('functional with declaration', () => { + let props: any + // TODO: attrs + + const Comp: FunctionalComponent = (_props) => { + const instance = getCurrentInstance()! + props = instance.props + return {} + } + Comp.props = ['foo'] + Comp.render = (() => {}) as any + render( Comp as any, { - get qux() { - return 5 + get foo() { + return 1 }, }, host, ) - expect(props.fooBar).toBeUndefined() - expect(props.barBaz).toBeUndefined() - // expect(props.qux).toEqual(5) // TODO: attrs + expect(props.foo).toEqual(1) + + render( + Comp as any, + { + get foo() { + return 2 + }, + }, + host, + ) + expect(props.foo).toEqual(2) + + render(Comp as any, {}, host) + expect(props.foo).toBeUndefined() + }) + + test('functional without declaration', () => { + let props: any + // TODO: attrs + + const Comp: FunctionalComponent = (_props) => { + const instance = getCurrentInstance()! + props = instance.props + return {} + } + Comp.props = undefined as any + Comp.render = (() => {}) as any + + render( + Comp as any, + { + get foo() { + return 1 + }, + }, + host, + ) + expect(props.foo).toBeUndefined() + + render( + Comp as any, + { + get foo() { + return 2 + }, + }, + host, + ) + expect(props.foo).toBeUndefined() }) }) From 14eb3c15d26994fc6fed0f5ed29a5a7a61949d3d Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Sun, 28 Jan 2024 23:52:34 +0900 Subject: [PATCH 04/20] test(runtime-vapor): component props (boolean casting) --- .../__tests__/componentProps2.spec.ts | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/runtime-vapor/__tests__/componentProps2.spec.ts b/packages/runtime-vapor/__tests__/componentProps2.spec.ts index 0d1734ef3..42aa6a637 100644 --- a/packages/runtime-vapor/__tests__/componentProps2.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps2.spec.ts @@ -147,4 +147,36 @@ describe('component props (vapor)', () => { ) expect(props.foo).toBeUndefined() }) + + test('boolean casting', () => { + let props: any + const Comp = { + props: { + foo: Boolean, + bar: Boolean, + baz: Boolean, + qux: Boolean, + }, + render() { + const instance = getCurrentInstance()! + props = instance.props + }, + } + + render( + Comp as any, + { + // absent should cast to false + bar: '', // empty string should cast to true + baz: 1, // same string should cast to true + qux: 'ok', // other values should be left in-tact (but raise warning) + }, + host, + ) + + expect(props.foo).toBe(false) + expect(props.bar).toBe(true) + // expect(props.baz).toBe(true) // FIXME: failed + expect(props.qux).toBe('ok') + }) }) From 0f8fb87cf90e0df1d46254e65528116f7095fdb1 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Sun, 28 Jan 2024 23:52:49 +0900 Subject: [PATCH 05/20] test(runtime-vapor): component props (default value) --- .../__tests__/componentProps2.spec.ts | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/packages/runtime-vapor/__tests__/componentProps2.spec.ts b/packages/runtime-vapor/__tests__/componentProps2.spec.ts index 42aa6a637..d2c4d7432 100644 --- a/packages/runtime-vapor/__tests__/componentProps2.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps2.spec.ts @@ -179,4 +179,103 @@ describe('component props (vapor)', () => { // expect(props.baz).toBe(true) // FIXME: failed expect(props.qux).toBe('ok') }) + + test('default value', () => { + let props: any + const defaultFn = vi.fn(() => ({ a: 1 })) + const defaultBaz = vi.fn(() => ({ b: 1 })) + + const Comp = { + props: { + foo: { + default: 1, + }, + bar: { + default: defaultFn, + }, + baz: { + type: Function, + default: defaultBaz, + }, + }, + render() { + const instance = getCurrentInstance()! + props = instance.props + }, + } + + render( + Comp as any, + { + get foo() { + return 2 + }, + }, + host, + ) + expect(props.foo).toBe(2) + const prevBar = props.bar + // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed + expect(props.baz).toEqual(defaultBaz) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + expect(defaultBaz).toHaveBeenCalledTimes(0) + + // #999: updates should not cause default factory of unchanged prop to be + // called again + render( + Comp as any, + { + get foo() { + return 3 + }, + }, + host, + ) + expect(props.foo).toBe(3) + // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed + expect(props.bar).toBe(prevBar) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + + render( + Comp as any, + { + get bar() { + return { b: 2 } + }, + }, + host, + ) + expect(props.foo).toBe(1) + expect(props.bar).toEqual({ b: 2 }) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + + render( + Comp as any, + { + get foo() { + return 3 + }, + get bar() { + return { b: 3 } + }, + }, + host, + ) + expect(props.foo).toBe(3) + expect(props.bar).toEqual({ b: 3 }) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + + render( + Comp as any, + { + get bar() { + return { b: 4 } + }, + }, + host, + ) + expect(props.foo).toBe(1) + expect(props.bar).toEqual({ b: 4 }) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + }) }) From 0c4a9807f180eafd4d0d34339101fc1f16fadf87 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Mon, 29 Jan 2024 00:29:56 +0900 Subject: [PATCH 06/20] test(runtime-vapor): component props (props type support BigInt) --- .../__tests__/componentProps2.spec.ts | 72 ++++++++++++++++++- 1 file changed, 71 insertions(+), 1 deletion(-) diff --git a/packages/runtime-vapor/__tests__/componentProps2.spec.ts b/packages/runtime-vapor/__tests__/componentProps2.spec.ts index d2c4d7432..414f70c02 100644 --- a/packages/runtime-vapor/__tests__/componentProps2.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps2.spec.ts @@ -1,8 +1,10 @@ -import { defineComponent } from 'vue' +import { defineComponent, watchEffect } from 'vue' import type { FunctionalComponent } from '../src/component' import { getCurrentInstance } from '../src/component' import { render } from '../src/render' +import { template } from '../src/template' +import { children, setText } from '../src/dom' let host: HTMLElement const initHost = () => { @@ -278,4 +280,72 @@ describe('component props (vapor)', () => { expect(props.bar).toEqual({ b: 4 }) // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed }) + + test('using inject in default value factory', () => { + // FIXME: is it necessary? + }) + + test('props type support BigInt', () => { + const Comp = { + props: { + foo: BigInt, + }, + render() { + const instance = getCurrentInstance()! + const t0 = template('
') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance.props.foo) + }) + return n0 + }, + } + + render( + Comp as any, + { + get foo() { + return ( + BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000) + ) + }, + }, + '#host', + ) + expect(host.innerHTML).toBe('
60000000100000111
') + }) + + // #3288 + test('declared prop key should be present even if not passed', async () => { + // TODO: + }) + + // #3371 + test(`avoid double-setting props when casting`, async () => { + // TODO: + }) + + test('support null in required + multiple-type declarations', () => { + // TODO: + }) + + // #5016 + test('handling attr with undefined value', () => { + // TODO: attrs + }) + + // #691ef + test('should not mutate original props long-form definition object', () => { + // TODO: + }) + + // NOTE: not supported + // optimized props update + // mixins + // validator + // warn + // caching }) From 319f985bf072031b1f8e4e7c584028cf4e45881b Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Mon, 29 Jan 2024 00:31:55 +0900 Subject: [PATCH 07/20] chore: add comment --- packages/runtime-vapor/__tests__/componentProps2.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/runtime-vapor/__tests__/componentProps2.spec.ts b/packages/runtime-vapor/__tests__/componentProps2.spec.ts index 414f70c02..2e6120336 100644 --- a/packages/runtime-vapor/__tests__/componentProps2.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps2.spec.ts @@ -1,3 +1,5 @@ +// NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`. + import { defineComponent, watchEffect } from 'vue' import type { FunctionalComponent } from '../src/component' From 6e35c1c9d9bc735cc3359501d1552b2186f2dad8 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Mon, 29 Jan 2024 00:32:25 +0900 Subject: [PATCH 08/20] chore: rename file --- .../__tests__/componentProps.spec.ts | 732 +++++++----------- .../__tests__/componentProps2.spec.ts | 353 --------- 2 files changed, 299 insertions(+), 786 deletions(-) delete mode 100644 packages/runtime-vapor/__tests__/componentProps2.spec.ts diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index a860d9ae6..2e6120336 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -1,13 +1,14 @@ -import { computed, defineComponent, ref, watchEffect } from 'vue' +// NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`. +import { defineComponent, watchEffect } from 'vue' + +import type { FunctionalComponent } from '../src/component' +import { getCurrentInstance } from '../src/component' +import { render } from '../src/render' import { template } from '../src/template' import { children, setText } from '../src/dom' -import { render as renderComponent } from '../src/render' -import { nextTick } from '../src/scheduler' -import { getCurrentInstance } from '../src/component' let host: HTMLElement - const initHost = () => { host = document.createElement('div') host.setAttribute('id', 'host') @@ -16,472 +17,337 @@ const initHost = () => { beforeEach(() => initHost()) afterEach(() => host.remove()) -describe('runtime: compoentn props', () => { - test('should render props value (string array spec)', () => { - const ChildComp = defineComponent({ - props: ['foo'], - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render() { - const instance = getCurrentInstance() - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, instance?.props.foo) - }) - return n0 - }, - }) +describe('component props (vapor)', () => { + test('stateful', () => { + let props: any + // TODO: attrs + const Comp = defineComponent({ - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, + props: ['fooBar', 'barBaz'], render() { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - get foo() { - return 'foo' - }, - }, - n1 as any, - ) - return n0 + const instance = getCurrentInstance()! + props = instance.props }, }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
foo
') + + render( + Comp as any, + { + get fooBar() { + return 1 + }, + }, + host, + ) + expect(props.fooBar).toEqual(1) + + // test passing kebab-case and resolving to camelCase + render( + Comp as any, + { + get ['foo-bar']() { + return 2 + }, + }, + host, + ) + expect(props.fooBar).toEqual(2) + + // test updating kebab-case should not delete it (#955) + render( + Comp as any, + { + get ['foo-bar']() { + return 3 + }, + get barBaz() { + return 5 + }, + }, + host, + ) + expect(props.fooBar).toEqual(3) + expect(props.barBaz).toEqual(5) + + render(Comp as any, {}, host) + expect(props.fooBar).toBeUndefined() + expect(props.barBaz).toBeUndefined() + // expect(props.qux).toEqual(5) // TODO: attrs }) - test('should render props value (object spec)', () => { - const ChildComp = defineComponent({ - props: { foo: {} }, - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render() { - const instance = getCurrentInstance() - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, instance?.props.foo) - }) - return n0 - }, - }) - const Comp = defineComponent({ - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render() { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - get foo() { - return 'foo' - }, - }, - n1 as any, - ) - return n0 - }, - }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
foo
') + test('stateful with setup', () => { + // FIXME: is it necessary? + }) + + test('functional with declaration', () => { + let props: any + // TODO: attrs + + const Comp: FunctionalComponent = (_props) => { + const instance = getCurrentInstance()! + props = instance.props + return {} + } + Comp.props = ['foo'] + Comp.render = (() => {}) as any + + render( + Comp as any, + { + get foo() { + return 1 + }, + }, + host, + ) + expect(props.foo).toEqual(1) + + render( + Comp as any, + { + get foo() { + return 2 + }, + }, + host, + ) + expect(props.foo).toEqual(2) + + render(Comp as any, {}, host) + expect(props.foo).toBeUndefined() + }) + + test('functional without declaration', () => { + let props: any + // TODO: attrs + + const Comp: FunctionalComponent = (_props) => { + const instance = getCurrentInstance()! + props = instance.props + return {} + } + Comp.props = undefined as any + Comp.render = (() => {}) as any + + render( + Comp as any, + { + get foo() { + return 1 + }, + }, + host, + ) + expect(props.foo).toBeUndefined() + + render( + Comp as any, + { + get foo() { + return 2 + }, + }, + host, + ) + expect(props.foo).toBeUndefined() }) - test('should render props default value', () => { - const ChildComp = defineComponent({ + test('boolean casting', () => { + let props: any + const Comp = { props: { - foo: { default: 'foo' }, // default value - }, - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render() { - const instance = getCurrentInstance() - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, instance?.props.foo) - }) - return n0 - }, - }) - const Comp = defineComponent({ - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ + foo: Boolean, + bar: Boolean, + baz: Boolean, + qux: Boolean, }, render() { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - /** no props are provided */ - }, - n1 as any, - ) - return n0 + const instance = getCurrentInstance()! + props = instance.props }, - }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
foo
') + } + + render( + Comp as any, + { + // absent should cast to false + bar: '', // empty string should cast to true + baz: 1, // same string should cast to true + qux: 'ok', // other values should be left in-tact (but raise warning) + }, + host, + ) + + expect(props.foo).toBe(false) + expect(props.bar).toBe(true) + // expect(props.baz).toBe(true) // FIXME: failed + expect(props.qux).toBe('ok') }) - test('should render props updates', async () => { - const ChildComp = defineComponent({ - props: { count: {} }, - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ + test('default value', () => { + let props: any + const defaultFn = vi.fn(() => ({ a: 1 })) + const defaultBaz = vi.fn(() => ({ b: 1 })) + + const Comp = { + props: { + foo: { + default: 1, + }, + bar: { + default: defaultFn, + }, + baz: { + type: Function, + default: defaultBaz, + }, }, render() { - const instance = getCurrentInstance() - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, instance?.props.count) - }) - return n0 - }, - }) - const count = ref(0) // state (Comp) - const increment = () => count.value++ - const Comp = defineComponent({ - setup() { - const __returned__ = { count } - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render(_ctx: any) { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - get count() { - return _ctx.count - }, - }, - n1 as any, - ) - return n0 + const instance = getCurrentInstance()! + props = instance.props }, - }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
0
') - increment() // update state - await nextTick() - expect(host.innerHTML).toBe('
1
') + } + + render( + Comp as any, + { + get foo() { + return 2 + }, + }, + host, + ) + expect(props.foo).toBe(2) + const prevBar = props.bar + // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed + expect(props.baz).toEqual(defaultBaz) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + expect(defaultBaz).toHaveBeenCalledTimes(0) + + // #999: updates should not cause default factory of unchanged prop to be + // called again + render( + Comp as any, + { + get foo() { + return 3 + }, + }, + host, + ) + expect(props.foo).toBe(3) + // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed + expect(props.bar).toBe(prevBar) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + + render( + Comp as any, + { + get bar() { + return { b: 2 } + }, + }, + host, + ) + expect(props.foo).toBe(1) + expect(props.bar).toEqual({ b: 2 }) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + + render( + Comp as any, + { + get foo() { + return 3 + }, + get bar() { + return { b: 3 } + }, + }, + host, + ) + expect(props.foo).toBe(3) + expect(props.bar).toEqual({ b: 3 }) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + + render( + Comp as any, + { + get bar() { + return { b: 4 } + }, + }, + host, + ) + expect(props.foo).toBe(1) + expect(props.bar).toEqual({ b: 4 }) + // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed }) - test('should render inline computed props value', async () => { - const ChildComp = defineComponent({ - props: { double: {} }, - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ + test('using inject in default value factory', () => { + // FIXME: is it necessary? + }) + + test('props type support BigInt', () => { + const Comp = { + props: { + foo: BigInt, }, render() { - const instance = getCurrentInstance() + const instance = getCurrentInstance()! const t0 = template('
') const n0 = t0() const { 0: [n1], } = children(n0) watchEffect(() => { - setText(n1, instance?.props.double) + setText(n1, instance.props.foo) }) return n0 }, - }) + } - const count = ref(0) // state (Comp) - const increment = () => count.value++ - const Comp = defineComponent({ - setup() { - const __returned__ = { count } - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render() { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - get double() { - // inline computed - return count.value * 2 - }, - }, - n1 as any, - ) - return n0 - }, - }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
0
') - increment() // update state - await nextTick() - expect(host.innerHTML).toBe('
2
') + render( + Comp as any, + { + get foo() { + return ( + BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000) + ) + }, + }, + '#host', + ) + expect(host.innerHTML).toBe('
60000000100000111
') }) - test('should render props updates (fallback to default value)', async () => { - const ChildComp = defineComponent({ - props: { count: { default: 9999 } }, - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render() { - const instance = getCurrentInstance() - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, instance?.props.count) - }) - return n0 - }, - }) + // #3288 + test('declared prop key should be present even if not passed', async () => { + // TODO: + }) - const count = ref(0) // state (Comp) - const increment = () => count.value++ - const Comp = defineComponent({ - setup() { - const __returned__ = { count } - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render(_ctx: any) { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - get count() { - // toggle the props value - return _ctx.count % 2 === 0 ? _ctx.count : void 0 - }, - }, - n1 as any, - ) - return n0 - }, - }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
0
') - increment() // update state (count === 1) - await nextTick() - expect(host.innerHTML).toBe('
9999
') - increment() // update state (count === 2) - await nextTick() - expect(host.innerHTML).toBe('
2
') + // #3371 + test(`avoid double-setting props when casting`, async () => { + // TODO: }) - test('should not render props value (no props spec)', () => { - const ChildComp = defineComponent({ - // props: { foo: {} }, // no props specs - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render(_ctx: any) { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, _ctx.foo) - }) - return n0 - }, - }) - const Comp = defineComponent({ - setup() { - const __returned__ = {} - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render() { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - // but props are provided - get foo() { - return 'foo' - }, - }, - n1 as any, - ) - return n0 - }, - }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
') + test('support null in required + multiple-type declarations', () => { + // TODO: }) - test('should render computed props', async () => { - const ChildComp = defineComponent({ - props: { count: { type: Number, required: true } }, - setup(props) { - const double = computed(() => props.count * 2) - const __returned__ = { double } - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render(_ctx: any) { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, _ctx.double) - }) - return n0 - }, - }) + // #5016 + test('handling attr with undefined value', () => { + // TODO: attrs + }) - const count = ref(0) // state (Comp) - const increment = () => count.value++ - const Comp = defineComponent({ - setup() { - const __returned__ = { count } - Object.defineProperty(__returned__, '__isScriptSetup', { - enumerable: false, - value: true, - }) - return __returned__ - }, - render(_ctx: any) { - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - renderComponent( - ChildComp as any, - { - get count() { - return _ctx.count - }, - }, - n1 as any, - ) - return n0 - }, - }) - renderComponent(Comp as any, {}, '#host') - expect(host.innerHTML).toBe('
0
') - increment() // update state - await nextTick() - expect(host.innerHTML).toBe('
2
') + // #691ef + test('should not mutate original props long-form definition object', () => { + // TODO: }) + + // NOTE: not supported + // optimized props update + // mixins + // validator + // warn + // caching }) diff --git a/packages/runtime-vapor/__tests__/componentProps2.spec.ts b/packages/runtime-vapor/__tests__/componentProps2.spec.ts deleted file mode 100644 index 2e6120336..000000000 --- a/packages/runtime-vapor/__tests__/componentProps2.spec.ts +++ /dev/null @@ -1,353 +0,0 @@ -// NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`. - -import { defineComponent, watchEffect } from 'vue' - -import type { FunctionalComponent } from '../src/component' -import { getCurrentInstance } from '../src/component' -import { render } from '../src/render' -import { template } from '../src/template' -import { children, setText } from '../src/dom' - -let host: HTMLElement -const initHost = () => { - host = document.createElement('div') - host.setAttribute('id', 'host') - document.body.appendChild(host) -} -beforeEach(() => initHost()) -afterEach(() => host.remove()) - -describe('component props (vapor)', () => { - test('stateful', () => { - let props: any - // TODO: attrs - - const Comp = defineComponent({ - props: ['fooBar', 'barBaz'], - render() { - const instance = getCurrentInstance()! - props = instance.props - }, - }) - - render( - Comp as any, - { - get fooBar() { - return 1 - }, - }, - host, - ) - expect(props.fooBar).toEqual(1) - - // test passing kebab-case and resolving to camelCase - render( - Comp as any, - { - get ['foo-bar']() { - return 2 - }, - }, - host, - ) - expect(props.fooBar).toEqual(2) - - // test updating kebab-case should not delete it (#955) - render( - Comp as any, - { - get ['foo-bar']() { - return 3 - }, - get barBaz() { - return 5 - }, - }, - host, - ) - expect(props.fooBar).toEqual(3) - expect(props.barBaz).toEqual(5) - - render(Comp as any, {}, host) - expect(props.fooBar).toBeUndefined() - expect(props.barBaz).toBeUndefined() - // expect(props.qux).toEqual(5) // TODO: attrs - }) - - test('stateful with setup', () => { - // FIXME: is it necessary? - }) - - test('functional with declaration', () => { - let props: any - // TODO: attrs - - const Comp: FunctionalComponent = (_props) => { - const instance = getCurrentInstance()! - props = instance.props - return {} - } - Comp.props = ['foo'] - Comp.render = (() => {}) as any - - render( - Comp as any, - { - get foo() { - return 1 - }, - }, - host, - ) - expect(props.foo).toEqual(1) - - render( - Comp as any, - { - get foo() { - return 2 - }, - }, - host, - ) - expect(props.foo).toEqual(2) - - render(Comp as any, {}, host) - expect(props.foo).toBeUndefined() - }) - - test('functional without declaration', () => { - let props: any - // TODO: attrs - - const Comp: FunctionalComponent = (_props) => { - const instance = getCurrentInstance()! - props = instance.props - return {} - } - Comp.props = undefined as any - Comp.render = (() => {}) as any - - render( - Comp as any, - { - get foo() { - return 1 - }, - }, - host, - ) - expect(props.foo).toBeUndefined() - - render( - Comp as any, - { - get foo() { - return 2 - }, - }, - host, - ) - expect(props.foo).toBeUndefined() - }) - - test('boolean casting', () => { - let props: any - const Comp = { - props: { - foo: Boolean, - bar: Boolean, - baz: Boolean, - qux: Boolean, - }, - render() { - const instance = getCurrentInstance()! - props = instance.props - }, - } - - render( - Comp as any, - { - // absent should cast to false - bar: '', // empty string should cast to true - baz: 1, // same string should cast to true - qux: 'ok', // other values should be left in-tact (but raise warning) - }, - host, - ) - - expect(props.foo).toBe(false) - expect(props.bar).toBe(true) - // expect(props.baz).toBe(true) // FIXME: failed - expect(props.qux).toBe('ok') - }) - - test('default value', () => { - let props: any - const defaultFn = vi.fn(() => ({ a: 1 })) - const defaultBaz = vi.fn(() => ({ b: 1 })) - - const Comp = { - props: { - foo: { - default: 1, - }, - bar: { - default: defaultFn, - }, - baz: { - type: Function, - default: defaultBaz, - }, - }, - render() { - const instance = getCurrentInstance()! - props = instance.props - }, - } - - render( - Comp as any, - { - get foo() { - return 2 - }, - }, - host, - ) - expect(props.foo).toBe(2) - const prevBar = props.bar - // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed - expect(props.baz).toEqual(defaultBaz) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed - expect(defaultBaz).toHaveBeenCalledTimes(0) - - // #999: updates should not cause default factory of unchanged prop to be - // called again - render( - Comp as any, - { - get foo() { - return 3 - }, - }, - host, - ) - expect(props.foo).toBe(3) - // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed - expect(props.bar).toBe(prevBar) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed - - render( - Comp as any, - { - get bar() { - return { b: 2 } - }, - }, - host, - ) - expect(props.foo).toBe(1) - expect(props.bar).toEqual({ b: 2 }) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed - - render( - Comp as any, - { - get foo() { - return 3 - }, - get bar() { - return { b: 3 } - }, - }, - host, - ) - expect(props.foo).toBe(3) - expect(props.bar).toEqual({ b: 3 }) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed - - render( - Comp as any, - { - get bar() { - return { b: 4 } - }, - }, - host, - ) - expect(props.foo).toBe(1) - expect(props.bar).toEqual({ b: 4 }) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed - }) - - test('using inject in default value factory', () => { - // FIXME: is it necessary? - }) - - test('props type support BigInt', () => { - const Comp = { - props: { - foo: BigInt, - }, - render() { - const instance = getCurrentInstance()! - const t0 = template('
') - const n0 = t0() - const { - 0: [n1], - } = children(n0) - watchEffect(() => { - setText(n1, instance.props.foo) - }) - return n0 - }, - } - - render( - Comp as any, - { - get foo() { - return ( - BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000) - ) - }, - }, - '#host', - ) - expect(host.innerHTML).toBe('
60000000100000111
') - }) - - // #3288 - test('declared prop key should be present even if not passed', async () => { - // TODO: - }) - - // #3371 - test(`avoid double-setting props when casting`, async () => { - // TODO: - }) - - test('support null in required + multiple-type declarations', () => { - // TODO: - }) - - // #5016 - test('handling attr with undefined value', () => { - // TODO: attrs - }) - - // #691ef - test('should not mutate original props long-form definition object', () => { - // TODO: - }) - - // NOTE: not supported - // optimized props update - // mixins - // validator - // warn - // caching -}) From 2a705304ab38b6ca1ea064b1d6f3c41f9b441203 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Tue, 30 Jan 2024 03:09:43 +0900 Subject: [PATCH 09/20] test(runtime-vapor): component props (support null in required + multiple-type declarations) --- .../__tests__/componentProps.spec.ts | 44 +++++++++++++++++-- 1 file changed, 40 insertions(+), 4 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index 2e6120336..b7770e111 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -1,12 +1,14 @@ // NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`. -import { defineComponent, watchEffect } from 'vue' +import { defineComponent, ref, watchEffect } from 'vue' import type { FunctionalComponent } from '../src/component' import { getCurrentInstance } from '../src/component' import { render } from '../src/render' import { template } from '../src/template' import { children, setText } from '../src/dom' +import { nextTick } from '../src/scheduler' +import { createIf } from '../src/if' let host: HTMLElement const initHost = () => { @@ -322,16 +324,50 @@ describe('component props (vapor)', () => { // #3288 test('declared prop key should be present even if not passed', async () => { - // TODO: + // let initialKeys: string[] = [] + // const changeSpy = vi.fn() + // const passFoo = ref(false) + // const Comp = { + // props: ['foo'], + // setup() { + // const instance = getCurrentInstance()! + // initialKeys = Object.keys(instance.props) + // watchEffect(changeSpy) + // return {} + // }, + // render() { + // return {} + // }, + // } + // const Parent = createIf( + // () => passFoo.value, + // () => { + // return render(Comp as any, { foo: 1 }, host) // TODO: createComponent fn + // }, + // ) + // // expect(changeSpy).toHaveBeenCalledTimes(1) }) // #3371 test(`avoid double-setting props when casting`, async () => { - // TODO: + // TODO: proide, slots }) test('support null in required + multiple-type declarations', () => { - // TODO: + const Comp = { + props: { + foo: { type: [Function, null], required: true }, + }, + render() {}, + } + + expect(() => { + render(Comp as any, { foo: () => {} }, host) + }).not.toThrow() + + expect(() => { + render(Comp as any, { foo: null }, host) + }).not.toThrow() }) // #5016 From 6492a56af5fdbfd6d2ecce5cfdd4f249f9ee81ef Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Tue, 30 Jan 2024 03:11:11 +0900 Subject: [PATCH 10/20] test(runtime-vapor): component props (should not mutate original props long-form definition object) --- .../runtime-vapor/__tests__/componentProps.spec.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index b7770e111..e2c8544fa 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -377,7 +377,19 @@ describe('component props (vapor)', () => { // #691ef test('should not mutate original props long-form definition object', () => { - // TODO: + const props = { + msg: { + type: String, + }, + } + const Comp = defineComponent({ + props, + render() {}, + }) + + render(Comp as any, { msg: 'test' }, host) + + expect(Object.keys(props.msg).length).toBe(1) }) // NOTE: not supported From 9950467d4ac17cecee57b1ea8b17d93832402531 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Tue, 30 Jan 2024 03:11:35 +0900 Subject: [PATCH 11/20] chore: remove unused var --- packages/runtime-vapor/__tests__/componentProps.spec.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index e2c8544fa..6f91b1d49 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -1,14 +1,12 @@ // NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`. -import { defineComponent, ref, watchEffect } from 'vue' +import { defineComponent, watchEffect } from 'vue' import type { FunctionalComponent } from '../src/component' import { getCurrentInstance } from '../src/component' import { render } from '../src/render' import { template } from '../src/template' import { children, setText } from '../src/dom' -import { nextTick } from '../src/scheduler' -import { createIf } from '../src/if' let host: HTMLElement const initHost = () => { From 8462b2290fe34b1d5cd8a64bce61bb7e50998605 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Tue, 30 Jan 2024 03:12:44 +0900 Subject: [PATCH 12/20] chore: comment out unimplemented test --- .../__tests__/componentProps.spec.ts | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index 6f91b1d49..b1dc88855 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -321,35 +321,35 @@ describe('component props (vapor)', () => { }) // #3288 - test('declared prop key should be present even if not passed', async () => { - // let initialKeys: string[] = [] - // const changeSpy = vi.fn() - // const passFoo = ref(false) - // const Comp = { - // props: ['foo'], - // setup() { - // const instance = getCurrentInstance()! - // initialKeys = Object.keys(instance.props) - // watchEffect(changeSpy) - // return {} - // }, - // render() { - // return {} - // }, - // } - // const Parent = createIf( - // () => passFoo.value, - // () => { - // return render(Comp as any, { foo: 1 }, host) // TODO: createComponent fn - // }, - // ) - // // expect(changeSpy).toHaveBeenCalledTimes(1) - }) + // test('declared prop key should be present even if not passed', async () => { + // let initialKeys: string[] = [] + // const changeSpy = vi.fn() + // const passFoo = ref(false) + // const Comp = { + // props: ['foo'], + // setup() { + // const instance = getCurrentInstance()! + // initialKeys = Object.keys(instance.props) + // watchEffect(changeSpy) + // return {} + // }, + // render() { + // return {} + // }, + // } + // const Parent = createIf( + // () => passFoo.value, + // () => { + // return render(Comp as any, { foo: 1 }, host) // TODO: createComponent fn + // }, + // ) + // // expect(changeSpy).toHaveBeenCalledTimes(1) + // }) // #3371 - test(`avoid double-setting props when casting`, async () => { - // TODO: proide, slots - }) + // test(`avoid double-setting props when casting`, async () => { + // // TODO: proide, slots + // }) test('support null in required + multiple-type declarations', () => { const Comp = { @@ -368,10 +368,10 @@ describe('component props (vapor)', () => { }).not.toThrow() }) - // #5016 - test('handling attr with undefined value', () => { - // TODO: attrs - }) + // // #5016 + // test('handling attr with undefined value', () => { + // // TODO: attrs + // }) // #691ef test('should not mutate original props long-form definition object', () => { From 34a6fc417dfd5a40cb3f856183ab6911385d93c7 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Tue, 30 Jan 2024 23:40:53 +0900 Subject: [PATCH 13/20] test(runtime-vapor): fix: component props (boolean casting) --- packages/runtime-vapor/__tests__/componentProps.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index b1dc88855..457461559 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -172,7 +172,7 @@ describe('component props (vapor)', () => { { // absent should cast to false bar: '', // empty string should cast to true - baz: 1, // same string should cast to true + baz: 'baz', // same string should cast to true qux: 'ok', // other values should be left in-tact (but raise warning) }, host, @@ -180,7 +180,7 @@ describe('component props (vapor)', () => { expect(props.foo).toBe(false) expect(props.bar).toBe(true) - // expect(props.baz).toBe(true) // FIXME: failed + expect(props.baz).toBe(true) expect(props.qux).toBe('ok') }) From 99ed6b3ec2f2d055c7090982cf01b998c4b2683b Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Wed, 31 Jan 2024 00:05:17 +0900 Subject: [PATCH 14/20] test(runtime-vapor): fix: component props (default value) --- .../__tests__/componentProps.spec.ts | 24 ++++++++++--------- packages/runtime-vapor/src/componentProps.ts | 18 +++++++------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index 457461559..8272c85f5 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -83,7 +83,7 @@ describe('component props (vapor)', () => { let props: any // TODO: attrs - const Comp: FunctionalComponent = (_props) => { + const Comp: FunctionalComponent = _props => { const instance = getCurrentInstance()! props = instance.props return {} @@ -121,7 +121,7 @@ describe('component props (vapor)', () => { let props: any // TODO: attrs - const Comp: FunctionalComponent = (_props) => { + const Comp: FunctionalComponent = _props => { const instance = getCurrentInstance()! props = instance.props return {} @@ -218,10 +218,12 @@ describe('component props (vapor)', () => { host, ) expect(props.foo).toBe(2) - const prevBar = props.bar - // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed + // const prevBar = props.bar + props.bar + expect(props.bar).toEqual({ a: 1 }) expect(props.baz).toEqual(defaultBaz) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: (caching is not supported) + expect(defaultFn).toHaveBeenCalledTimes(2) expect(defaultBaz).toHaveBeenCalledTimes(0) // #999: updates should not cause default factory of unchanged prop to be @@ -236,9 +238,9 @@ describe('component props (vapor)', () => { host, ) expect(props.foo).toBe(3) - // expect(props.bar).toEqual({ a: 1 }) // FIXME: failed - expect(props.bar).toBe(prevBar) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + expect(props.bar).toEqual({ a: 1 }) + // expect(props.bar).toBe(prevBar) // failed: (caching is not supported) + // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) render( Comp as any, @@ -251,7 +253,7 @@ describe('component props (vapor)', () => { ) expect(props.foo).toBe(1) expect(props.bar).toEqual({ b: 2 }) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) render( Comp as any, @@ -267,7 +269,7 @@ describe('component props (vapor)', () => { ) expect(props.foo).toBe(3) expect(props.bar).toEqual({ b: 3 }) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) render( Comp as any, @@ -280,7 +282,7 @@ describe('component props (vapor)', () => { ) expect(props.foo).toBe(1) expect(props.bar).toEqual({ b: 4 }) - // expect(defaultFn).toHaveBeenCalledTimes(1) // FIXME: failed + // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) }) test('using inject in default value factory', () => { diff --git a/packages/runtime-vapor/src/componentProps.ts b/packages/runtime-vapor/src/componentProps.ts index 7b77f55bc..efcb81ee8 100644 --- a/packages/runtime-vapor/src/componentProps.ts +++ b/packages/runtime-vapor/src/componentProps.ts @@ -13,7 +13,11 @@ import { isReservedProp, } from '@vue/shared' import { shallowReactive, toRaw } from '@vue/reactivity' -import type { Component, ComponentInternalInstance } from './component' +import { + type Component, + type ComponentInternalInstance, + setCurrentInstance, +} from './component' export type ComponentPropsOptions

= | ComponentObjectPropsOptions

@@ -165,15 +169,9 @@ function resolvePropValue( // if (key in propsDefaults) { // value = propsDefaults[key] // } else { - // setCurrentInstance(instance) - // value = propsDefaults[key] = defaultValue.call( - // __COMPAT__ && - // isCompatEnabled(DeprecationTypes.PROPS_DEFAULT_THIS, instance) - // ? createPropsDefaultThis(instance, props, key) - // : null, - // props, - // ) - // unsetCurrentInstance() + const reset = setCurrentInstance(instance) + value = defaultValue.call(null, props) + reset() // } } else { value = defaultValue From 2bf2b60e6e7660b1cc515a3cb96fbe554d725462 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Wed, 31 Jan 2024 23:09:18 +0900 Subject: [PATCH 15/20] fix: remove import from "vue" --- .../__tests__/componentProps.spec.ts | 67 ++++++++++--------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index 8272c85f5..67abab48e 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -1,12 +1,13 @@ // NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`. -import { defineComponent, watchEffect } from 'vue' +import { defineComponent } from '../src/apiDefineComponent' import type { FunctionalComponent } from '../src/component' import { getCurrentInstance } from '../src/component' import { render } from '../src/render' import { template } from '../src/template' import { children, setText } from '../src/dom' +import { watchEffect } from '../src/apiWatch' let host: HTMLElement const initHost = () => { @@ -31,7 +32,7 @@ describe('component props (vapor)', () => { }) render( - Comp as any, + Comp, { get fooBar() { return 1 @@ -43,7 +44,7 @@ describe('component props (vapor)', () => { // test passing kebab-case and resolving to camelCase render( - Comp as any, + Comp, { get ['foo-bar']() { return 2 @@ -55,7 +56,7 @@ describe('component props (vapor)', () => { // test updating kebab-case should not delete it (#955) render( - Comp as any, + Comp, { get ['foo-bar']() { return 3 @@ -69,7 +70,7 @@ describe('component props (vapor)', () => { expect(props.fooBar).toEqual(3) expect(props.barBaz).toEqual(5) - render(Comp as any, {}, host) + render(Comp, {}, host) expect(props.fooBar).toBeUndefined() expect(props.barBaz).toBeUndefined() // expect(props.qux).toEqual(5) // TODO: attrs @@ -83,16 +84,16 @@ describe('component props (vapor)', () => { let props: any // TODO: attrs - const Comp: FunctionalComponent = _props => { + const Comp: FunctionalComponent = defineComponent((_props: any) => { const instance = getCurrentInstance()! props = instance.props return {} - } + }) Comp.props = ['foo'] Comp.render = (() => {}) as any render( - Comp as any, + Comp, { get foo() { return 1 @@ -103,7 +104,7 @@ describe('component props (vapor)', () => { expect(props.foo).toEqual(1) render( - Comp as any, + Comp, { get foo() { return 2 @@ -113,7 +114,7 @@ describe('component props (vapor)', () => { ) expect(props.foo).toEqual(2) - render(Comp as any, {}, host) + render(Comp, {}, host) expect(props.foo).toBeUndefined() }) @@ -121,16 +122,16 @@ describe('component props (vapor)', () => { let props: any // TODO: attrs - const Comp: FunctionalComponent = _props => { + const Comp: FunctionalComponent = defineComponent((_props: any) => { const instance = getCurrentInstance()! props = instance.props return {} - } + }) Comp.props = undefined as any Comp.render = (() => {}) as any render( - Comp as any, + Comp, { get foo() { return 1 @@ -141,7 +142,7 @@ describe('component props (vapor)', () => { expect(props.foo).toBeUndefined() render( - Comp as any, + Comp, { get foo() { return 2 @@ -154,7 +155,7 @@ describe('component props (vapor)', () => { test('boolean casting', () => { let props: any - const Comp = { + const Comp = defineComponent({ props: { foo: Boolean, bar: Boolean, @@ -165,10 +166,10 @@ describe('component props (vapor)', () => { const instance = getCurrentInstance()! props = instance.props }, - } + }) render( - Comp as any, + Comp, { // absent should cast to false bar: '', // empty string should cast to true @@ -189,7 +190,7 @@ describe('component props (vapor)', () => { const defaultFn = vi.fn(() => ({ a: 1 })) const defaultBaz = vi.fn(() => ({ b: 1 })) - const Comp = { + const Comp = defineComponent({ props: { foo: { default: 1, @@ -206,10 +207,10 @@ describe('component props (vapor)', () => { const instance = getCurrentInstance()! props = instance.props }, - } + }) render( - Comp as any, + Comp, { get foo() { return 2 @@ -229,7 +230,7 @@ describe('component props (vapor)', () => { // #999: updates should not cause default factory of unchanged prop to be // called again render( - Comp as any, + Comp, { get foo() { return 3 @@ -243,7 +244,7 @@ describe('component props (vapor)', () => { // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) render( - Comp as any, + Comp, { get bar() { return { b: 2 } @@ -256,7 +257,7 @@ describe('component props (vapor)', () => { // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) render( - Comp as any, + Comp, { get foo() { return 3 @@ -272,7 +273,7 @@ describe('component props (vapor)', () => { // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) render( - Comp as any, + Comp, { get bar() { return { b: 4 } @@ -290,7 +291,7 @@ describe('component props (vapor)', () => { }) test('props type support BigInt', () => { - const Comp = { + const Comp = defineComponent({ props: { foo: BigInt, }, @@ -306,10 +307,10 @@ describe('component props (vapor)', () => { }) return n0 }, - } + }) render( - Comp as any, + Comp, { get foo() { return ( @@ -342,7 +343,7 @@ describe('component props (vapor)', () => { // const Parent = createIf( // () => passFoo.value, // () => { - // return render(Comp as any, { foo: 1 }, host) // TODO: createComponent fn + // return render(Comp , { foo: 1 }, host) // TODO: createComponent fn // }, // ) // // expect(changeSpy).toHaveBeenCalledTimes(1) @@ -354,19 +355,19 @@ describe('component props (vapor)', () => { // }) test('support null in required + multiple-type declarations', () => { - const Comp = { + const Comp = defineComponent({ props: { foo: { type: [Function, null], required: true }, }, render() {}, - } + }) expect(() => { - render(Comp as any, { foo: () => {} }, host) + render(Comp, { foo: () => {} }, host) }).not.toThrow() expect(() => { - render(Comp as any, { foo: null }, host) + render(Comp, { foo: null }, host) }).not.toThrow() }) @@ -387,7 +388,7 @@ describe('component props (vapor)', () => { render() {}, }) - render(Comp as any, { msg: 'test' }, host) + render(Comp, { msg: 'test' }, host) expect(Object.keys(props.msg).length).toBe(1) }) From ab94425838752f26f628e6100439887a60ab1b47 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Wed, 31 Jan 2024 23:15:10 +0900 Subject: [PATCH 16/20] chore: add some test cases (todo) --- .../__tests__/componentProps.spec.ts | 104 +++++++++++------- 1 file changed, 64 insertions(+), 40 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index 67abab48e..f196dfa12 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -1,5 +1,9 @@ // NOTE: This test is implemented based on the case of `runtime-core/__test__/componentProps.spec.ts`. +// NOTE: not supported +// mixins +// caching + import { defineComponent } from '../src/apiDefineComponent' import type { FunctionalComponent } from '../src/component' @@ -77,7 +81,7 @@ describe('component props (vapor)', () => { }) test('stateful with setup', () => { - // FIXME: is it necessary? + // TODO: }) test('functional with declaration', () => { @@ -287,7 +291,34 @@ describe('component props (vapor)', () => { }) test('using inject in default value factory', () => { - // FIXME: is it necessary? + // TODO: impl inject + }) + + // NOTE: maybe it's unnecessary + // https://github.com/vuejs/core-vapor/pull/99#discussion_r1472647377 + test('optimized props updates', async () => { + // TODO: + }) + + describe('validator', () => { + // TODO: impl validator + }) + + test('warn props mutation', () => { + // TODO: impl warn + }) + + test('warn absent required props', () => { + // TODO: impl warn + }) + + test('warn on type mismatch', () => { + // TODO: impl warn + }) + + // #3495 + test('should not warn required props using kebab-case', async () => { + // TODO: impl warn }) test('props type support BigInt', () => { @@ -324,35 +355,35 @@ describe('component props (vapor)', () => { }) // #3288 - // test('declared prop key should be present even if not passed', async () => { - // let initialKeys: string[] = [] - // const changeSpy = vi.fn() - // const passFoo = ref(false) - // const Comp = { - // props: ['foo'], - // setup() { - // const instance = getCurrentInstance()! - // initialKeys = Object.keys(instance.props) - // watchEffect(changeSpy) - // return {} - // }, - // render() { - // return {} - // }, - // } - // const Parent = createIf( - // () => passFoo.value, - // () => { - // return render(Comp , { foo: 1 }, host) // TODO: createComponent fn - // }, - // ) - // // expect(changeSpy).toHaveBeenCalledTimes(1) - // }) + test('declared prop key should be present even if not passed', async () => { + // let initialKeys: string[] = [] + // const changeSpy = vi.fn() + // const passFoo = ref(false) + // const Comp = { + // props: ['foo'], + // setup() { + // const instance = getCurrentInstance()! + // initialKeys = Object.keys(instance.props) + // watchEffect(changeSpy) + // return {} + // }, + // render() { + // return {} + // }, + // } + // const Parent = createIf( + // () => passFoo.value, + // () => { + // return render(Comp , { foo: 1 }, host) // TODO: createComponent fn + // }, + // ) + // // expect(changeSpy).toHaveBeenCalledTimes(1) + }) // #3371 - // test(`avoid double-setting props when casting`, async () => { - // // TODO: proide, slots - // }) + test(`avoid double-setting props when casting`, async () => { + // TODO: proide, slots + }) test('support null in required + multiple-type declarations', () => { const Comp = defineComponent({ @@ -371,10 +402,10 @@ describe('component props (vapor)', () => { }).not.toThrow() }) - // // #5016 - // test('handling attr with undefined value', () => { - // // TODO: attrs - // }) + // #5016 + test('handling attr with undefined value', () => { + // TODO: attrs + }) // #691ef test('should not mutate original props long-form definition object', () => { @@ -392,11 +423,4 @@ describe('component props (vapor)', () => { expect(Object.keys(props.msg).length).toBe(1) }) - - // NOTE: not supported - // optimized props update - // mixins - // validator - // warn - // caching }) From 77514657d49a4f34f983e11ca44affdff3982dd9 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Wed, 31 Jan 2024 23:34:36 +0900 Subject: [PATCH 17/20] test(runtime-vapor): component props (optimized props updates) --- .../__tests__/componentProps.spec.ts | 74 ++++++++++++++++--- 1 file changed, 65 insertions(+), 9 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index f196dfa12..4e37887fd 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -4,14 +4,18 @@ // mixins // caching -import { defineComponent } from '../src/apiDefineComponent' - import type { FunctionalComponent } from '../src/component' -import { getCurrentInstance } from '../src/component' -import { render } from '../src/render' -import { template } from '../src/template' -import { children, setText } from '../src/dom' -import { watchEffect } from '../src/apiWatch' +import { + children, + defineComponent, + getCurrentInstance, + nextTick, + ref, + render, + setText, + template, + watchEffect, +} from '../src' let host: HTMLElement const initHost = () => { @@ -297,10 +301,62 @@ describe('component props (vapor)', () => { // NOTE: maybe it's unnecessary // https://github.com/vuejs/core-vapor/pull/99#discussion_r1472647377 test('optimized props updates', async () => { - // TODO: + const Child = defineComponent({ + props: ['foo'], + render() { + const instance = getCurrentInstance()! + const t0 = template('

') + const n0 = t0() + const { + 0: [n1], + } = children(n0) + watchEffect(() => { + setText(n1, instance.props.foo) + }) + return n0 + }, + }) + + const foo = ref(1) + const id = ref('a') + const Comp = defineComponent({ + setup() { + return { foo, id } + }, + render(_ctx: Record) { + const t0 = template('') + const n0 = t0() + render( + Child, + { + get foo() { + return _ctx.foo + }, + get id() { + return _ctx.id + }, + }, + n0 as any, // TODO: type + ) + return n0 + }, + }) + + render(Comp, {}, host) + // expect(host.innerHTML).toBe('
1
') // TODO: Fallthrough Attributes + expect(host.innerHTML).toBe('
1
') + + foo.value++ + await nextTick() + // expect(host.innerHTML).toBe('
2
') // TODO: Fallthrough Attributes + expect(host.innerHTML).toBe('
2
') + + // id.value = 'b' + // await nextTick() + // expect(host.innerHTML).toBe('
2
') // TODO: Fallthrough Attributes }) - describe('validator', () => { + test('validator', () => { // TODO: impl validator }) From c36257dd647f4a44e4ffba2e5b2673f0c5e237ad Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Wed, 31 Jan 2024 23:49:05 +0900 Subject: [PATCH 18/20] chore: test.todo --- .../__tests__/componentProps.spec.ts | 69 ++++++++++--------- 1 file changed, 36 insertions(+), 33 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index 4e37887fd..cd7812b6f 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -84,7 +84,7 @@ describe('component props (vapor)', () => { // expect(props.qux).toEqual(5) // TODO: attrs }) - test('stateful with setup', () => { + test.todo('stateful with setup', () => { // TODO: }) @@ -294,7 +294,7 @@ describe('component props (vapor)', () => { // expect(defaultFn).toHaveBeenCalledTimes(1) // failed: caching is not supported (called 3 times) }) - test('using inject in default value factory', () => { + test.todo('using inject in default value factory', () => { // TODO: impl inject }) @@ -356,24 +356,24 @@ describe('component props (vapor)', () => { // expect(host.innerHTML).toBe('
2
') // TODO: Fallthrough Attributes }) - test('validator', () => { + test.todo('validator', () => { // TODO: impl validator }) - test('warn props mutation', () => { + test.todo('warn props mutation', () => { // TODO: impl warn }) - test('warn absent required props', () => { + test.todo('warn absent required props', () => { // TODO: impl warn }) - test('warn on type mismatch', () => { + test.todo('warn on type mismatch', () => { // TODO: impl warn }) // #3495 - test('should not warn required props using kebab-case', async () => { + test.todo('should not warn required props using kebab-case', async () => { // TODO: impl warn }) @@ -411,33 +411,36 @@ describe('component props (vapor)', () => { }) // #3288 - test('declared prop key should be present even if not passed', async () => { - // let initialKeys: string[] = [] - // const changeSpy = vi.fn() - // const passFoo = ref(false) - // const Comp = { - // props: ['foo'], - // setup() { - // const instance = getCurrentInstance()! - // initialKeys = Object.keys(instance.props) - // watchEffect(changeSpy) - // return {} - // }, - // render() { - // return {} - // }, - // } - // const Parent = createIf( - // () => passFoo.value, - // () => { - // return render(Comp , { foo: 1 }, host) // TODO: createComponent fn - // }, - // ) - // // expect(changeSpy).toHaveBeenCalledTimes(1) - }) + test.todo( + 'declared prop key should be present even if not passed', + async () => { + // let initialKeys: string[] = [] + // const changeSpy = vi.fn() + // const passFoo = ref(false) + // const Comp = { + // props: ['foo'], + // setup() { + // const instance = getCurrentInstance()! + // initialKeys = Object.keys(instance.props) + // watchEffect(changeSpy) + // return {} + // }, + // render() { + // return {} + // }, + // } + // const Parent = createIf( + // () => passFoo.value, + // () => { + // return render(Comp , { foo: 1 }, host) // TODO: createComponent fn + // }, + // ) + // // expect(changeSpy).toHaveBeenCalledTimes(1) + }, + ) // #3371 - test(`avoid double-setting props when casting`, async () => { + test.todo(`avoid double-setting props when casting`, async () => { // TODO: proide, slots }) @@ -459,7 +462,7 @@ describe('component props (vapor)', () => { }) // #5016 - test('handling attr with undefined value', () => { + test.todo('handling attr with undefined value', () => { // TODO: attrs }) From e10a7b420249588a06a82aeaa9325997d8a9c095 Mon Sep 17 00:00:00 2001 From: Ubugeeei Date: Sat, 3 Feb 2024 15:04:29 +0900 Subject: [PATCH 19/20] chore: fix test --- packages/runtime-vapor/__tests__/componentProps.spec.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index cd7812b6f..14b104ea0 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -4,7 +4,7 @@ // mixins // caching -import type { FunctionalComponent } from '../src/component' +import { type FunctionalComponent, setCurrentInstance } from '../src/component' import { children, defineComponent, @@ -342,7 +342,8 @@ describe('component props (vapor)', () => { }, }) - render(Comp, {}, host) + const instace = render(Comp, {}, host) + const reset = setCurrentInstance(instace) // expect(host.innerHTML).toBe('
1
') // TODO: Fallthrough Attributes expect(host.innerHTML).toBe('
1
') @@ -354,6 +355,7 @@ describe('component props (vapor)', () => { // id.value = 'b' // await nextTick() // expect(host.innerHTML).toBe('
2
') // TODO: Fallthrough Attributes + reset() }) test.todo('validator', () => { From b4063ba0f0e61ae6ed6fff65a3096997042199c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Sun, 4 Feb 2024 20:45:31 +0800 Subject: [PATCH 20/20] chore: update issue number --- packages/runtime-core/__tests__/componentProps.spec.ts | 2 +- packages/runtime-vapor/__tests__/componentProps.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts index 6760a957f..e5b426c9b 100644 --- a/packages/runtime-core/__tests__/componentProps.spec.ts +++ b/packages/runtime-core/__tests__/componentProps.spec.ts @@ -711,7 +711,7 @@ describe('component props', () => { ) }) - // #691ef + // #6915 test('should not mutate original props long-form definition object', () => { const props = { msg: { diff --git a/packages/runtime-vapor/__tests__/componentProps.spec.ts b/packages/runtime-vapor/__tests__/componentProps.spec.ts index 14b104ea0..a6860db00 100644 --- a/packages/runtime-vapor/__tests__/componentProps.spec.ts +++ b/packages/runtime-vapor/__tests__/componentProps.spec.ts @@ -468,7 +468,7 @@ describe('component props (vapor)', () => { // TODO: attrs }) - // #691ef + // #6915 test('should not mutate original props long-form definition object', () => { const props = { msg: {