test: fix reactivity tests
This commit is contained in:
parent
0519e10518
commit
aacad85058
@ -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`.
|
||||||
|
@ -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()
|
||||||
|
@ -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()
|
||||||
|
@ -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()
|
||||||
|
@ -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()
|
||||||
|
@ -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)
|
||||||
|
@ -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]
|
||||||
|
@ -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
|
@ -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)
|
||||||
|
@ -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)
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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'
|
||||||
|
Loading…
Reference in New Issue
Block a user