test: fix reactivity tests

This commit is contained in:
Evan You 2019-08-20 09:58:10 -04:00
parent 0519e10518
commit aacad85058
14 changed files with 36 additions and 38 deletions

View File

@ -1,4 +1,4 @@
# @vue/observer # @vue/reactivity
## Usage Note ## Usage Note
@ -9,10 +9,9 @@ This package is inlined into Global & Browser ESM builds of user-facing renderer
The implementation of this module is inspired by the following prior art in the JavaScript ecosystem: The implementation of this module is inspired by the following prior art in the JavaScript ecosystem:
- [Meteor Tracker](https://docs.meteor.com/api/tracker.html) - [Meteor Tracker](https://docs.meteor.com/api/tracker.html)
- [nx-js/observer-util](https://github.com/nx-js/observer-util) - [nx-js/reactivity-util](https://github.com/nx-js/reactivity-util)
- [salesforce/observable-membrane](https://github.com/salesforce/observable-membrane) - [salesforce/observable-membrane](https://github.com/salesforce/observable-membrane)
## Caveats ## Caveats
- Built-in objects are not observed except for `Map`, `WeakMap`, `Set` and `WeakSet`. - Built-in objects are not observed except for `Map`, `WeakMap`, `Set` and `WeakSet`.

View File

@ -1,6 +1,6 @@
import { reactive, effect, toRaw, isReactive } from '../../src' import { reactive, effect, toRaw, isReactive } from '../../src'
describe('observer/collections', () => { describe('reactivity/collections', () => {
describe('Map', () => { describe('Map', () => {
test('instanceof', () => { test('instanceof', () => {
const original = new Map() const original = new Map()

View File

@ -1,6 +1,6 @@
import { reactive, effect, isReactive, toRaw } from '../../src' import { reactive, effect, isReactive, toRaw } from '../../src'
describe('observer/collections', () => { describe('reactivity/collections', () => {
describe('Set', () => { describe('Set', () => {
it('instanceof', () => { it('instanceof', () => {
const original = new Set() const original = new Set()

View File

@ -1,6 +1,6 @@
import { reactive, effect, toRaw, isReactive } from '../../src' import { reactive, effect, toRaw, isReactive } from '../../src'
describe('observer/collections', () => { describe('reactivity/collections', () => {
describe('WeakMap', () => { describe('WeakMap', () => {
test('instanceof', () => { test('instanceof', () => {
const original = new WeakMap() const original = new WeakMap()

View File

@ -1,6 +1,6 @@
import { reactive, isReactive, effect, toRaw } from '../../src' import { reactive, isReactive, effect, toRaw } from '../../src'
describe('observer/collections', () => { describe('reactivity/collections', () => {
describe('WeakSet', () => { describe('WeakSet', () => {
it('instanceof', () => { it('instanceof', () => {
const original = new Set() const original = new Set()

View File

@ -1,6 +1,6 @@
import { computed, reactive, effect, stop } from '../src' import { computed, reactive, effect, stop } from '../src'
describe('observer/computed', () => { describe('reactivity/computed', () => {
it('should return updated value', () => { it('should return updated value', () => {
const value: any = reactive({}) const value: any = reactive({})
const cValue = computed(() => value.foo) const cValue = computed(() => value.foo)

View File

@ -9,7 +9,7 @@ import {
} from '../src/index' } from '../src/index'
import { ITERATE_KEY } from '../src/effect' import { ITERATE_KEY } from '../src/effect'
describe('observer/effect', () => { describe('reactivity/effect', () => {
it('should run the passed function once (wrapped by a effect)', () => { it('should run the passed function once (wrapped by a effect)', () => {
const fnSpy = jest.fn(() => {}) const fnSpy = jest.fn(() => {})
effect(fnSpy) effect(fnSpy)
@ -269,7 +269,7 @@ describe('observer/effect', () => {
it('should not observe raw mutations', () => { it('should not observe raw mutations', () => {
let dummy let dummy
const obj: any = reactive() const obj: any = reactive({})
effect(() => (dummy = toRaw(obj).prop)) effect(() => (dummy = toRaw(obj).prop))
expect(dummy).toBe(undefined) expect(dummy).toBe(undefined)
@ -279,7 +279,7 @@ describe('observer/effect', () => {
it('should not be triggered by raw mutations', () => { it('should not be triggered by raw mutations', () => {
let dummy let dummy
const obj: any = reactive() const obj: any = reactive({})
effect(() => (dummy = obj.prop)) effect(() => (dummy = obj.prop))
expect(dummy).toBe(undefined) expect(dummy).toBe(undefined)
@ -437,7 +437,7 @@ describe('observer/effect', () => {
it('should not run multiple times for a single mutation', () => { it('should not run multiple times for a single mutation', () => {
let dummy let dummy
const obj: any = reactive() const obj: any = reactive({})
const fnSpy = jest.fn(() => { const fnSpy = jest.fn(() => {
for (const key in obj) { for (const key in obj) {
dummy = obj[key] dummy = obj[key]

View File

@ -11,7 +11,7 @@ import {
effect effect
} from '../src' } from '../src'
describe('observer/immutable', () => { describe('reactivity/immutable', () => {
let warn: any let warn: any
beforeEach(() => { beforeEach(() => {
@ -341,16 +341,16 @@ describe('observer/immutable', () => {
}) })
}) })
test('calling observable on an immutable should return immutable', () => { test('calling reactive on an immutable should return immutable', () => {
const a = immutable() const a = immutable({})
const b = reactive(a) const b = reactive(a)
expect(isImmutable(b)).toBe(true) expect(isImmutable(b)).toBe(true)
// should point to same original // should point to same original
expect(toRaw(a)).toBe(toRaw(b)) expect(toRaw(a)).toBe(toRaw(b))
}) })
test('calling immutable on an observable should return immutable', () => { test('calling immutable on a reactive object should return immutable', () => {
const a = reactive() const a = reactive({})
const b = immutable(a) const b = immutable(a)
expect(isImmutable(b)).toBe(true) expect(isImmutable(b)).toBe(true)
// should point to same original // should point to same original

View File

@ -1,6 +1,6 @@
import { reactive, isReactive, toRaw, markNonReactive } from '../src/reactive' import { reactive, isReactive, toRaw, markNonReactive } from '../src/reactive'
describe('observer/observable', () => { describe('reactivity/reactive', () => {
test('Object', () => { test('Object', () => {
const original = { foo: 1 } const original = { foo: 1 }
const observed = reactive(original) const observed = reactive(original)
@ -30,7 +30,7 @@ describe('observer/observable', () => {
expect(Object.keys(observed)).toEqual(['0']) expect(Object.keys(observed)).toEqual(['0'])
}) })
test('cloned observable Array should point to observed values', () => { test('cloned reactive Array should point to observed values', () => {
const original = [{ foo: 1 }] const original = [{ foo: 1 }]
const observed = reactive(original) const observed = reactive(original)
const clone = observed.slice() const clone = observed.slice()
@ -39,7 +39,7 @@ describe('observer/observable', () => {
expect(clone[0]).toBe(observed[0]) expect(clone[0]).toBe(observed[0])
}) })
test('nested observables', () => { test('nested reactives', () => {
const original = { const original = {
nested: { nested: {
foo: 1 foo: 1
@ -70,9 +70,9 @@ describe('observer/observable', () => {
const observed = reactive(original) const observed = reactive(original)
// set // set
const value = { baz: 3 } const value = { baz: 3 }
const observableValue = reactive(value) const reactiveValue = reactive(value)
observed[0] = value observed[0] = value
expect(observed[0]).toBe(observableValue) expect(observed[0]).toBe(reactiveValue)
expect(original[0]).toBe(value) expect(original[0]).toBe(value)
// delete // delete
delete observed[0] delete observed[0]
@ -80,11 +80,11 @@ describe('observer/observable', () => {
expect(original[0]).toBeUndefined() expect(original[0]).toBeUndefined()
// mutating methods // mutating methods
observed.push(value) observed.push(value)
expect(observed[2]).toBe(observableValue) expect(observed[2]).toBe(reactiveValue)
expect(original[2]).toBe(value) expect(original[2]).toBe(value)
}) })
test('setting a property with an unobserved value should wrap with observable', () => { test('setting a property with an unobserved value should wrap with reactive', () => {
const observed: any = reactive({}) const observed: any = reactive({})
const raw = {} const raw = {}
observed.foo = raw observed.foo = raw
@ -123,14 +123,15 @@ describe('observer/observable', () => {
expect(toRaw(original)).toBe(original) expect(toRaw(original)).toBe(original)
}) })
test('unobservable values', () => { test('non-observable values', () => {
const warn = jest.spyOn(console, 'warn') const warn = jest.spyOn(console, 'warn')
let lastMsg: string let lastMsg: string
warn.mockImplementation(msg => { warn.mockImplementation(msg => {
lastMsg = msg lastMsg = msg
}) })
const getMsg = (value: any) => `value is not observable: ${String(value)}` const getMsg = (value: any) =>
`value cannot be made reactive: ${String(value)}`
const assertValue = (value: any) => { const assertValue = (value: any) => {
reactive(value) reactive(value)
expect(lastMsg).toMatch(getMsg(value)) expect(lastMsg).toMatch(getMsg(value))
@ -144,10 +145,8 @@ describe('observer/observable', () => {
assertValue(false) assertValue(false)
// null // null
assertValue(null) assertValue(null)
// undefined should work because it returns empty object observable // undefined
lastMsg = '' assertValue(undefined)
reactive(undefined)
expect(lastMsg).toBe('')
// symbol // symbol
const s = Symbol() const s = Symbol()
assertValue(s) assertValue(s)

View File

@ -1,6 +1,6 @@
import { ref, effect, reactive } from '../src/index' import { ref, effect, reactive } from '../src/index'
describe('observer/value', () => { describe('reactivity/value', () => {
it('should hold a value', () => { it('should hold a value', () => {
const a = ref(1) const a = ref(1)
expect(a.value).toBe(1) expect(a.value).toBe(1)

View File

@ -51,7 +51,7 @@ export const reactive = ((target: unknown): any => {
if (immutableValues.has(target)) { if (immutableValues.has(target)) {
return immutable(target) return immutable(target)
} }
return createObservable( return createReactiveObject(
target, target,
rawToObserved, rawToObserved,
observedToRaw, observedToRaw,
@ -66,7 +66,7 @@ export const immutable = ((target: unknown): any => {
if (observedToRaw.has(target)) { if (observedToRaw.has(target)) {
target = observedToRaw.get(target) target = observedToRaw.get(target)
} }
return createObservable( return createReactiveObject(
target, target,
rawToImmutable, rawToImmutable,
immutableToRaw, immutableToRaw,
@ -75,7 +75,7 @@ export const immutable = ((target: unknown): any => {
) )
}) as ObservableFactory }) as ObservableFactory
function createObservable( function createReactiveObject(
target: any, target: any,
toProxy: WeakMap<any, any>, toProxy: WeakMap<any, any>,
toRaw: WeakMap<any, any>, toRaw: WeakMap<any, any>,
@ -84,7 +84,7 @@ function createObservable(
) { ) {
if (!isObject(target)) { if (!isObject(target)) {
if (__DEV__) { if (__DEV__) {
console.warn(`value is not observable: ${String(target)}`) console.warn(`value cannot be made reactive: ${String(target)}`)
} }
return target return target
} }

View File

@ -20,6 +20,6 @@
}, },
"homepage": "https://github.com/vuejs/vue/tree/dev/packages/runtime-core#readme", "homepage": "https://github.com/vuejs/vue/tree/dev/packages/runtime-core#readme",
"dependencies": { "dependencies": {
"@vue/observer": "3.0.0-alpha.1" "@vue/reactivity": "3.0.0-alpha.1"
} }
} }

View File

@ -242,7 +242,7 @@ export function setupStatefulComponent(instance: ComponentInstance) {
} else { } else {
// setup returned bindings. // setup returned bindings.
// assuming a render function compiled from template is present. // assuming a render function compiled from template is present.
instance.data = reactive(setupResult) instance.data = reactive(setupResult || {})
if (__DEV__ && !Component.render) { if (__DEV__ && !Component.render) {
// TODO warn missing render fn // TODO warn missing render fn
} }

View File

@ -8,5 +8,5 @@ export const render = createRenderer({
}) as (vnode: VNode | null, container: HTMLElement) => VNode }) as (vnode: VNode | null, container: HTMLElement) => VNode
// re-export everything from core // re-export everything from core
// h, Component, observer API, nextTick, flags & types // h, Component, reactivity API, nextTick, flags & types
export * from '@vue/runtime-core' export * from '@vue/runtime-core'