wip: move compat test cases + filter tests

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)
     }

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)

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)

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(() => {

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: '<div>{{ msg | upper }}</div>',
+      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: '<div>{{ msg | upper | reverse }}</div>',
+      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: `
+        <div
+          v-bind:id="id | upper | reverse"
+          :class="cls | reverse"
+          :ref="ref | lower">
+        </div>
+      `,
+      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: `<test ref="test" :pattern="/a|b\\// | identity"></test>`,
+      filters: { identity: (v: any) => v },
+      components: {
+        test: {
+          props: ['pattern'],
+          template: '<div></div>'
+        }
+      }
+    }).$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: `<div>{{ 1/a / 4 | double }}</div>`,
+      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: `<div>{{ (a*2) / 5 | double }}</div>`,
+      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: `<div>{{ 20. / 5 | double }}</div>`,
+      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: `<div>{{ a[0] / 5 | double }}</div>`,
+      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: `<div>{{ a['n'] / 5 | double }}</div>`,
+      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: `<div>{{ a_ / 2 | double }}</div>`,
+      filters: { double }
+    }).$mount()
+    expect(vm.$el.textContent).toBe(String(8))
+    expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
+  })
+
+  it('arguments', () => {
+    const vm = new Vue({
+      template: `<div>{{ msg | add(a, 3) }}</div>`,
+      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: `<div>{{ msg + "b | c" + 'd' | upper }}</div>`,
+      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: `<div>{{ b || msg | upper }}</div>`,
+      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: `<div>{{ { a: 123 } | pick('a') }}</div>`,
+      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: `<div>{{ [1, 2, 3] | reverse }}</div>`,
+      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: `<div>{{ BigInt(BigInt(10000000)) + BigInt(2000000000n) * 3000000n }}</div>`
+    }).$mount()
+    expect(vm.$el.textContent).toBe('6000000010000000')
+  })
+})

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)

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(() => {

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)

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(() => {

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)

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(`<div class="foo" id="bar">hello</div>`)
+    expect(
+      deprecationData[DeprecationTypes.RENDER_FUNCTION].message
+    ).toHaveBeenWarned()
+  })
 })