import { BindingTypes } from '@vue/compiler-core' import { compileSFCScript as compile, assertCode } from './utils' // this file only tests integration with SFC - main test case for the ref // transform can be found in /packages/reactivity-transform/__tests__ describe('sfc ref transform', () => { function compileWithReactivityTransform(src: string) { return compile(src, { reactivityTransform: true }) } test('$ unwrapping', () => { const { content, bindings } = compileWithReactivityTransform(``) expect(content).not.toMatch(`$(ref())`) expect(content).not.toMatch(`$(ref(1))`) expect(content).not.toMatch(`$(shallowRef({`) expect(content).toMatch(`let foo = (ref())`) expect(content).toMatch(`let a = (ref(1))`) expect(content).toMatch(` let b = (shallowRef({ count: 0 })) `) // normal declarations left untouched expect(content).toMatch(`let c = () => {}`) expect(content).toMatch(`let d`) expect(content).toMatch(`return { foo, a, b, c, d, ref, shallowRef }`) assertCode(content) expect(bindings).toStrictEqual({ foo: BindingTypes.SETUP_REF, a: BindingTypes.SETUP_REF, b: BindingTypes.SETUP_REF, c: BindingTypes.SETUP_LET, d: BindingTypes.SETUP_LET, ref: BindingTypes.SETUP_CONST, shallowRef: BindingTypes.SETUP_CONST }) }) test('$ref & $shallowRef declarations', () => { const { content, bindings } = compileWithReactivityTransform(``) expect(content).toMatch( `import { ref as _ref, shallowRef as _shallowRef } from 'vue'` ) expect(content).not.toMatch(`$ref()`) expect(content).not.toMatch(`$ref(1)`) expect(content).not.toMatch(`$shallowRef({`) expect(content).toMatch(`let foo = _ref()`) expect(content).toMatch(`let a = _ref(1)`) expect(content).toMatch(` let b = _shallowRef({ count: 0 }) `) // normal declarations left untouched expect(content).toMatch(`let c = () => {}`) expect(content).toMatch(`let d`) assertCode(content) expect(bindings).toStrictEqual({ foo: BindingTypes.SETUP_REF, a: BindingTypes.SETUP_REF, b: BindingTypes.SETUP_REF, c: BindingTypes.SETUP_LET, d: BindingTypes.SETUP_LET }) }) test('usage in normal `) expect(content).not.toMatch(`$ref(0)`) expect(content).toMatch(`import { ref as _ref } from 'vue'`) expect(content).toMatch(`let count = _ref(0)`) expect(content).toMatch(`count.value++`) expect(content).toMatch(`return ({ count })`) assertCode(content) }) test('usage /w typescript', () => { const { content } = compileWithReactivityTransform(` `) expect(content).toMatch(`import { ref as _ref`) expect(content).toMatch(`let msg = _ref('foo')`) expect(content).toMatch(`let bar = _ref ('bar')`) assertCode(content) }) test('usage with normal `) // should dedupe helper imports expect(content).toMatch(`import { ref as _ref } from 'vue'`) expect(content).toMatch(`let a = _ref(0)`) expect(content).toMatch(`let b = _ref(0)`) // root level ref binding declared in `) expect(content).toMatch(`console.log(data.value)`) assertCode(content) }) describe('errors', () => { test('defineProps/Emit() referencing ref declarations', () => { expect(() => compile( ``, { reactivityTransform: true } ) ).toThrow(`cannot reference locally declared variables`) expect(() => compile( ``, { reactivityTransform: true } ) ).toThrow(`cannot reference locally declared variables`) }) }) })