From b4c92ccf6bd9a88d428bb94a0e956b549d1408c4 Mon Sep 17 00:00:00 2001 From: Evan You Date: Thu, 29 Apr 2021 16:58:14 -0400 Subject: [PATCH] wip: move compat test cases + filter tests --- .../src/compat/transformFilter.ts | 15 +- .../__tests__/componentAsync.spec.ts | 2 +- .../__tests__/componentFunctional.spec.ts | 2 +- .../__tests__/componentVModel.spec.ts | 6 +- packages/vue-compat/__tests__/filters.spec.ts | 237 ++++++++++++++++++ .../__tests__/global.spec.ts | 2 +- .../__tests__/globalConfig.spec.ts | 2 +- .../__tests__/instance.spec.ts | 8 +- .../__tests__/misc.spec.ts | 4 +- .../__tests__/options.spec.ts | 4 +- .../__tests__/renderFn.spec.ts | 53 +++- .../compat => vue-compat}/__tests__/utils.ts | 0 12 files changed, 306 insertions(+), 29 deletions(-) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/componentAsync.spec.ts (96%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/componentFunctional.spec.ts (96%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/componentVModel.spec.ts (91%) create mode 100644 packages/vue-compat/__tests__/filters.spec.ts rename packages/{runtime-core/src/compat => vue-compat}/__tests__/global.spec.ts (99%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/globalConfig.spec.ts (94%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/instance.spec.ts (96%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/misc.spec.ts (97%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/options.spec.ts (94%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/renderFn.spec.ts (73%) rename packages/{runtime-core/src/compat => vue-compat}/__tests__/utils.ts (100%) diff --git a/packages/compiler-core/src/compat/transformFilter.ts b/packages/compiler-core/src/compat/transformFilter.ts index bd6fd3844..8eaa81eb3 100644 --- a/packages/compiler-core/src/compat/transformFilter.ts +++ b/packages/compiler-core/src/compat/transformFilter.ts @@ -158,14 +158,13 @@ function parseFilter(node: SimpleExpressionNode, context: TransformContext) { lastFilterIndex = i + 1 } - if ( - filters.length && - warnDeprecation( - CompilerDeprecationTypes.COMPILER_FILTERS, - context, - node.loc - ) - ) { + if (filters.length) { + __DEV__ && + warnDeprecation( + CompilerDeprecationTypes.COMPILER_FILTERS, + context, + node.loc + ) for (i = 0; i < filters.length; i++) { expression = wrapFilter(expression, filters[i], context) } diff --git a/packages/runtime-core/src/compat/__tests__/componentAsync.spec.ts b/packages/vue-compat/__tests__/componentAsync.spec.ts similarity index 96% rename from packages/runtime-core/src/compat/__tests__/componentAsync.spec.ts rename to packages/vue-compat/__tests__/componentAsync.spec.ts index 1f6303332..c7d2a7899 100644 --- a/packages/runtime-core/src/compat/__tests__/componentAsync.spec.ts +++ b/packages/vue-compat/__tests__/componentAsync.spec.ts @@ -3,7 +3,7 @@ import { DeprecationTypes, deprecationData, toggleDeprecationWarning -} from '../compatConfig' +} from '../../runtime-core/src/compat/compatConfig' beforeEach(() => { toggleDeprecationWarning(true) diff --git a/packages/runtime-core/src/compat/__tests__/componentFunctional.spec.ts b/packages/vue-compat/__tests__/componentFunctional.spec.ts similarity index 96% rename from packages/runtime-core/src/compat/__tests__/componentFunctional.spec.ts rename to packages/vue-compat/__tests__/componentFunctional.spec.ts index 5eceaa1d1..3d272c586 100644 --- a/packages/runtime-core/src/compat/__tests__/componentFunctional.spec.ts +++ b/packages/vue-compat/__tests__/componentFunctional.spec.ts @@ -3,7 +3,7 @@ import { DeprecationTypes, deprecationData, toggleDeprecationWarning -} from '../compatConfig' +} from '../../runtime-core/src/compat/compatConfig' beforeEach(() => { toggleDeprecationWarning(true) diff --git a/packages/runtime-core/src/compat/__tests__/componentVModel.spec.ts b/packages/vue-compat/__tests__/componentVModel.spec.ts similarity index 91% rename from packages/runtime-core/src/compat/__tests__/componentVModel.spec.ts rename to packages/vue-compat/__tests__/componentVModel.spec.ts index ed8dc418b..05043b018 100644 --- a/packages/runtime-core/src/compat/__tests__/componentVModel.spec.ts +++ b/packages/vue-compat/__tests__/componentVModel.spec.ts @@ -1,11 +1,11 @@ import Vue from '@vue/compat' -import { ComponentOptions } from '../../component' -import { nextTick } from '../../scheduler' +import { ComponentOptions } from '../../runtime-core/src/component' +import { nextTick } from '../../runtime-core/src/scheduler' import { DeprecationTypes, deprecationData, toggleDeprecationWarning -} from '../compatConfig' +} from '../../runtime-core/src/compat/compatConfig' import { triggerEvent } from './utils' beforeEach(() => { diff --git a/packages/vue-compat/__tests__/filters.spec.ts b/packages/vue-compat/__tests__/filters.spec.ts new file mode 100644 index 000000000..6730db141 --- /dev/null +++ b/packages/vue-compat/__tests__/filters.spec.ts @@ -0,0 +1,237 @@ +import Vue from '@vue/compat' +import { CompilerDeprecationTypes } from '../../compiler-core/src' +import { toggleDeprecationWarning } from '../../runtime-core/src/compat/compatConfig' + +beforeEach(() => { + toggleDeprecationWarning(false) + Vue.configureCompat({ MODE: 2 }) +}) + +afterEach(() => { + Vue.configureCompat({ MODE: 3 }) + toggleDeprecationWarning(false) +}) + +describe('FILTERS', () => { + function upper(v: string) { + return v.toUpperCase() + } + + function lower(v: string) { + return v.toLowerCase() + } + + function reverse(v: string) { + return v + .split('') + .reverse() + .join('') + } + + function double(v: number) { + return v * 2 + } + + it('basic usage', () => { + const vm = new Vue({ + template: '
{{ msg | upper }}
', + data: () => ({ + msg: 'hi' + }), + filters: { + upper + } + }).$mount() + expect(vm.$el.textContent).toBe('HI') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('chained usage', () => { + const vm = new Vue({ + template: '
{{ msg | upper | reverse }}
', + data: () => ({ + msg: 'hi' + }), + filters: { + upper, + reverse + } + }).$mount() + expect(vm.$el.textContent).toBe('IH') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('in v-bind', () => { + const vm = new Vue({ + template: ` +
+
+ `, + filters: { + upper, + reverse, + lower + }, + data: () => ({ + id: 'abc', + cls: 'foo', + ref: 'BAR' + }) + }).$mount() + expect(vm.$el.id).toBe('CBA') + expect(vm.$el.className).toBe('oof') + expect(vm.$refs.bar).toBe(vm.$el) + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('handle regex with pipe', () => { + const vm = new Vue({ + template: ``, + filters: { identity: (v: any) => v }, + components: { + test: { + props: ['pattern'], + template: '
' + } + } + }).$mount() as any + expect(vm.$refs.test.pattern instanceof RegExp).toBe(true) + expect(vm.$refs.test.pattern.toString()).toBe('/a|b\\//') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('handle division', () => { + const vm = new Vue({ + data: () => ({ a: 2 }), + template: `
{{ 1/a / 4 | double }}
`, + filters: { double } + }).$mount() + expect(vm.$el.textContent).toBe(String(1 / 4)) + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('handle division with parenthesis', () => { + const vm = new Vue({ + data: () => ({ a: 20 }), + template: `
{{ (a*2) / 5 | double }}
`, + filters: { double } + }).$mount() + expect(vm.$el.textContent).toBe(String(16)) + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('handle division with dot', () => { + const vm = new Vue({ + template: `
{{ 20. / 5 | double }}
`, + filters: { double } + }).$mount() + expect(vm.$el.textContent).toBe(String(8)) + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('handle division with array values', () => { + const vm = new Vue({ + data: () => ({ a: [20] }), + template: `
{{ a[0] / 5 | double }}
`, + filters: { double } + }).$mount() + expect(vm.$el.textContent).toBe(String(8)) + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('handle division with hash values', () => { + const vm = new Vue({ + data: () => ({ a: { n: 20 } }), + template: `
{{ a['n'] / 5 | double }}
`, + filters: { double } + }).$mount() + expect(vm.$el.textContent).toBe(String(8)) + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('handle division with variable_', () => { + const vm = new Vue({ + data: () => ({ a_: 8 }), + template: `
{{ a_ / 2 | double }}
`, + filters: { double } + }).$mount() + expect(vm.$el.textContent).toBe(String(8)) + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('arguments', () => { + const vm = new Vue({ + template: `
{{ msg | add(a, 3) }}
`, + data: () => ({ + msg: 1, + a: 2 + }), + filters: { + add: (v: number, arg1: number, arg2: number) => v + arg1 + arg2 + } + }).$mount() + expect(vm.$el.textContent).toBe('6') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('quotes', () => { + const vm = new Vue({ + template: `
{{ msg + "b | c" + 'd' | upper }}
`, + data: () => ({ + msg: 'a' + }), + filters: { + upper + } + }).$mount() + expect(vm.$el.textContent).toBe('AB | CD') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('double pipe', () => { + const vm = new Vue({ + template: `
{{ b || msg | upper }}
`, + data: () => ({ + b: false, + msg: 'a' + }), + filters: { + upper + } + }).$mount() + expect(vm.$el.textContent).toBe('A') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('object literal', () => { + const vm = new Vue({ + template: `
{{ { a: 123 } | pick('a') }}
`, + filters: { + pick: (v: any, key: string) => v[key] + } + }).$mount() + expect(vm.$el.textContent).toBe('123') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('array literal', () => { + const vm = new Vue({ + template: `
{{ [1, 2, 3] | reverse }}
`, + filters: { + reverse: (arr: any[]) => arr.reverse().join(',') + } + }).$mount() + expect(vm.$el.textContent).toBe('3,2,1') + expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned() + }) + + it('bigint support', () => { + const vm = new Vue({ + template: `
{{ BigInt(BigInt(10000000)) + BigInt(2000000000n) * 3000000n }}
` + }).$mount() + expect(vm.$el.textContent).toBe('6000000010000000') + }) +}) diff --git a/packages/runtime-core/src/compat/__tests__/global.spec.ts b/packages/vue-compat/__tests__/global.spec.ts similarity index 99% rename from packages/runtime-core/src/compat/__tests__/global.spec.ts rename to packages/vue-compat/__tests__/global.spec.ts index cf1bb5143..8b8b066e1 100644 --- a/packages/runtime-core/src/compat/__tests__/global.spec.ts +++ b/packages/vue-compat/__tests__/global.spec.ts @@ -4,7 +4,7 @@ import { DeprecationTypes, deprecationData, toggleDeprecationWarning -} from '../compatConfig' +} from '../../runtime-core/src/compat/compatConfig' beforeEach(() => { toggleDeprecationWarning(false) diff --git a/packages/runtime-core/src/compat/__tests__/globalConfig.spec.ts b/packages/vue-compat/__tests__/globalConfig.spec.ts similarity index 94% rename from packages/runtime-core/src/compat/__tests__/globalConfig.spec.ts rename to packages/vue-compat/__tests__/globalConfig.spec.ts index c5084d505..b51b30da2 100644 --- a/packages/runtime-core/src/compat/__tests__/globalConfig.spec.ts +++ b/packages/vue-compat/__tests__/globalConfig.spec.ts @@ -1,5 +1,5 @@ import Vue from '@vue/compat' -import { toggleDeprecationWarning } from '../compatConfig' +import { toggleDeprecationWarning } from '../../runtime-core/src/compat/compatConfig' import { triggerEvent } from './utils' beforeEach(() => { diff --git a/packages/runtime-core/src/compat/__tests__/instance.spec.ts b/packages/vue-compat/__tests__/instance.spec.ts similarity index 96% rename from packages/runtime-core/src/compat/__tests__/instance.spec.ts rename to packages/vue-compat/__tests__/instance.spec.ts index bddc77e25..74e77225c 100644 --- a/packages/runtime-core/src/compat/__tests__/instance.spec.ts +++ b/packages/vue-compat/__tests__/instance.spec.ts @@ -1,12 +1,12 @@ import Vue from '@vue/compat' -import { Slots } from '../../componentSlots' -import { Text } from '../../vnode' +import { Slots } from '../../runtime-core/src/componentSlots' +import { Text } from '../../runtime-core/src/vnode' import { DeprecationTypes, deprecationData, toggleDeprecationWarning -} from '../compatConfig' -import { LegacyPublicInstance } from '../instance' +} from '../../runtime-core/src/compat/compatConfig' +import { LegacyPublicInstance } from '../../runtime-core/src/compat/instance' beforeEach(() => { toggleDeprecationWarning(true) diff --git a/packages/runtime-core/src/compat/__tests__/misc.spec.ts b/packages/vue-compat/__tests__/misc.spec.ts similarity index 97% rename from packages/runtime-core/src/compat/__tests__/misc.spec.ts rename to packages/vue-compat/__tests__/misc.spec.ts index 8b10c121f..8dc5762c0 100644 --- a/packages/runtime-core/src/compat/__tests__/misc.spec.ts +++ b/packages/vue-compat/__tests__/misc.spec.ts @@ -1,10 +1,10 @@ import Vue from '@vue/compat' -import { nextTick } from '../../scheduler' +import { nextTick } from '../../runtime-core/src/scheduler' import { DeprecationTypes, deprecationData, toggleDeprecationWarning -} from '../compatConfig' +} from '../../runtime-core/src/compat/compatConfig' import { triggerEvent } from './utils' beforeEach(() => { diff --git a/packages/runtime-core/src/compat/__tests__/options.spec.ts b/packages/vue-compat/__tests__/options.spec.ts similarity index 94% rename from packages/runtime-core/src/compat/__tests__/options.spec.ts rename to packages/vue-compat/__tests__/options.spec.ts index a10d35770..ca8ea8073 100644 --- a/packages/runtime-core/src/compat/__tests__/options.spec.ts +++ b/packages/vue-compat/__tests__/options.spec.ts @@ -1,10 +1,10 @@ import Vue from '@vue/compat' -import { nextTick } from '../../scheduler' +import { nextTick } from '../../runtime-core/src/scheduler' import { DeprecationTypes, deprecationData, toggleDeprecationWarning -} from '../compatConfig' +} from '../../runtime-core/src/compat/compatConfig' beforeEach(() => { toggleDeprecationWarning(true) diff --git a/packages/runtime-core/src/compat/__tests__/renderFn.spec.ts b/packages/vue-compat/__tests__/renderFn.spec.ts similarity index 73% rename from packages/runtime-core/src/compat/__tests__/renderFn.spec.ts rename to packages/vue-compat/__tests__/renderFn.spec.ts index 7c2059d7f..00ad4c239 100644 --- a/packages/runtime-core/src/compat/__tests__/renderFn.spec.ts +++ b/packages/vue-compat/__tests__/renderFn.spec.ts @@ -1,9 +1,28 @@ -import { ShapeFlags } from '@vue/shared/src' -import { createComponentInstance } from '../../component' -import { setCurrentRenderingInstance } from '../../componentRenderContext' -import { DirectiveBinding } from '../../directives' -import { createVNode } from '../../vnode' -import { compatH as h } from '../renderFn' +import { ShapeFlags } from '@vue/shared' +import Vue from '@vue/compat' +import { createComponentInstance } from '../../runtime-core/src/component' +import { setCurrentRenderingInstance } from '../../runtime-core/src/componentRenderContext' +import { DirectiveBinding } from '../../runtime-core/src/directives' +import { createVNode } from '../../runtime-core/src/vnode' +import { + deprecationData, + DeprecationTypes, + toggleDeprecationWarning +} from '../../runtime-core/src/compat/compatConfig' +import { compatH as h } from '../../runtime-core/src/compat/renderFn' + +beforeEach(() => { + toggleDeprecationWarning(false) + Vue.configureCompat({ + MODE: 2, + GLOBAL_MOUNT: 'suppress-warning' + }) +}) + +afterEach(() => { + toggleDeprecationWarning(false) + Vue.configureCompat({ MODE: 3 }) +}) describe('compat: render function', () => { const mockDir = {} @@ -175,4 +194,26 @@ describe('compat: render function', () => { ]) expect(slots.bar()).toMatchObject([{ children: 'two' }]) }) + + test('in component usage', () => { + toggleDeprecationWarning(true) + + const vm = new Vue({ + render(h: any) { + return h( + 'div', + { + class: 'foo', + attrs: { id: 'bar' } + }, + 'hello' + ) + } + }).$mount() + + expect(vm.$el.outerHTML).toBe(`
hello
`) + expect( + deprecationData[DeprecationTypes.RENDER_FUNCTION].message + ).toHaveBeenWarned() + }) }) diff --git a/packages/runtime-core/src/compat/__tests__/utils.ts b/packages/vue-compat/__tests__/utils.ts similarity index 100% rename from packages/runtime-core/src/compat/__tests__/utils.ts rename to packages/vue-compat/__tests__/utils.ts