vue3-yuanma/packages/reactivity/__tests__/effect.spec.ts

796 lines
19 KiB
TypeScript
Raw Normal View History

2018-09-20 05:45:19 +08:00
import {
2019-08-16 21:42:46 +08:00
reactive,
2018-11-14 00:03:35 +08:00
effect,
2018-09-20 05:45:19 +08:00
stop,
toRaw,
TrackOpTypes,
TriggerOpTypes,
2018-09-20 05:45:19 +08:00
DebuggerEvent,
markRaw,
ref
2018-09-20 05:45:19 +08:00
} from '../src/index'
2018-11-14 00:03:35 +08:00
import { ITERATE_KEY } from '../src/effect'
2018-09-20 05:45:19 +08:00
2019-08-20 21:58:10 +08:00
describe('reactivity/effect', () => {
2018-11-14 00:03:35 +08:00
it('should run the passed function once (wrapped by a effect)', () => {
2018-09-20 05:45:19 +08:00
const fnSpy = jest.fn(() => {})
2018-11-14 00:03:35 +08:00
effect(fnSpy)
2018-09-20 05:45:19 +08:00
expect(fnSpy).toHaveBeenCalledTimes(1)
})
it('should observe basic properties', () => {
let dummy
2019-08-16 21:42:46 +08:00
const counter = reactive({ num: 0 })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = counter.num))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(0)
counter.num = 7
expect(dummy).toBe(7)
})
it('should observe multiple properties', () => {
let dummy
2019-08-16 21:42:46 +08:00
const counter = reactive({ num1: 0, num2: 0 })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = counter.num1 + counter.num1 + counter.num2))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(0)
counter.num1 = counter.num2 = 7
expect(dummy).toBe(21)
})
2018-11-14 00:03:35 +08:00
it('should handle multiple effects', () => {
2018-09-20 05:45:19 +08:00
let dummy1, dummy2
2019-08-16 21:42:46 +08:00
const counter = reactive({ num: 0 })
2018-11-14 00:03:35 +08:00
effect(() => (dummy1 = counter.num))
effect(() => (dummy2 = counter.num))
2018-09-20 05:45:19 +08:00
expect(dummy1).toBe(0)
expect(dummy2).toBe(0)
counter.num++
expect(dummy1).toBe(1)
expect(dummy2).toBe(1)
})
it('should observe nested properties', () => {
let dummy
2019-08-16 21:42:46 +08:00
const counter = reactive({ nested: { num: 0 } })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = counter.nested.num))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(0)
counter.nested.num = 8
expect(dummy).toBe(8)
})
it('should observe delete operations', () => {
let dummy
2019-08-16 21:42:46 +08:00
const obj = reactive({ prop: 'value' })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = obj.prop))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe('value')
delete obj.prop
expect(dummy).toBe(undefined)
})
it('should observe has operations', () => {
let dummy
const obj = reactive<{ prop: string | number }>({ prop: 'value' })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = 'prop' in obj))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(true)
delete obj.prop
expect(dummy).toBe(false)
obj.prop = 12
expect(dummy).toBe(true)
})
it('should observe properties on the prototype chain', () => {
let dummy
2019-08-16 21:42:46 +08:00
const counter = reactive({ num: 0 })
const parentCounter = reactive({ num: 2 })
2018-09-20 05:45:19 +08:00
Object.setPrototypeOf(counter, parentCounter)
2018-11-14 00:03:35 +08:00
effect(() => (dummy = counter.num))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(0)
delete counter.num
expect(dummy).toBe(2)
parentCounter.num = 4
expect(dummy).toBe(4)
counter.num = 3
expect(dummy).toBe(3)
})
it('should observe has operations on the prototype chain', () => {
let dummy
2019-08-16 21:42:46 +08:00
const counter = reactive({ num: 0 })
const parentCounter = reactive({ num: 2 })
2018-09-20 05:45:19 +08:00
Object.setPrototypeOf(counter, parentCounter)
2018-11-14 00:03:35 +08:00
effect(() => (dummy = 'num' in counter))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(true)
delete counter.num
expect(dummy).toBe(true)
delete parentCounter.num
expect(dummy).toBe(false)
counter.num = 3
expect(dummy).toBe(true)
})
it('should observe inherited property accessors', () => {
let dummy, parentDummy, hiddenValue: any
const obj = reactive<{ prop?: number }>({})
2019-08-16 21:42:46 +08:00
const parent = reactive({
2018-09-20 05:45:19 +08:00
set prop(value) {
hiddenValue = value
},
get prop() {
return hiddenValue
}
})
Object.setPrototypeOf(obj, parent)
2018-11-14 00:03:35 +08:00
effect(() => (dummy = obj.prop))
effect(() => (parentDummy = parent.prop))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(undefined)
expect(parentDummy).toBe(undefined)
obj.prop = 4
expect(dummy).toBe(4)
// this doesn't work, should it?
// expect(parentDummy).toBe(4)
parent.prop = 2
expect(dummy).toBe(2)
expect(parentDummy).toBe(2)
})
it('should observe function call chains', () => {
let dummy
2019-08-16 21:42:46 +08:00
const counter = reactive({ num: 0 })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = getNum()))
2018-09-20 05:45:19 +08:00
function getNum() {
return counter.num
}
expect(dummy).toBe(0)
counter.num = 2
expect(dummy).toBe(2)
})
it('should observe iteration', () => {
let dummy
2019-08-16 21:42:46 +08:00
const list = reactive(['Hello'])
2018-11-14 00:03:35 +08:00
effect(() => (dummy = list.join(' ')))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe('Hello')
list.push('World!')
expect(dummy).toBe('Hello World!')
list.shift()
expect(dummy).toBe('World!')
})
it('should observe implicit array length changes', () => {
let dummy
2019-08-16 21:42:46 +08:00
const list = reactive(['Hello'])
2018-11-14 00:03:35 +08:00
effect(() => (dummy = list.join(' ')))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe('Hello')
list[1] = 'World!'
expect(dummy).toBe('Hello World!')
list[3] = 'Hello!'
expect(dummy).toBe('Hello World! Hello!')
})
it('should observe sparse array mutations', () => {
let dummy
const list = reactive<string[]>([])
2018-09-20 05:45:19 +08:00
list[1] = 'World!'
2018-11-14 00:03:35 +08:00
effect(() => (dummy = list.join(' ')))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(' World!')
list[0] = 'Hello'
expect(dummy).toBe('Hello World!')
list.pop()
expect(dummy).toBe('Hello')
})
it('should observe enumeration', () => {
let dummy = 0
const numbers = reactive<Record<string, number>>({ num1: 3 })
2018-11-14 00:03:35 +08:00
effect(() => {
2018-09-20 05:45:19 +08:00
dummy = 0
for (let key in numbers) {
dummy += numbers[key]
}
})
expect(dummy).toBe(3)
numbers.num2 = 4
expect(dummy).toBe(7)
delete numbers.num1
expect(dummy).toBe(4)
})
it('should observe symbol keyed properties', () => {
const key = Symbol('symbol keyed prop')
let dummy, hasDummy
2019-08-16 21:42:46 +08:00
const obj = reactive({ [key]: 'value' })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = obj[key]))
effect(() => (hasDummy = key in obj))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe('value')
expect(hasDummy).toBe(true)
obj[key] = 'newValue'
expect(dummy).toBe('newValue')
delete obj[key]
expect(dummy).toBe(undefined)
expect(hasDummy).toBe(false)
})
it('should not observe well-known symbol keyed properties', () => {
const key = Symbol.isConcatSpreadable
let dummy
2019-08-16 21:42:46 +08:00
const array: any = reactive([])
2018-11-14 00:03:35 +08:00
effect(() => (dummy = array[key]))
2018-09-20 05:45:19 +08:00
expect(array[key]).toBe(undefined)
expect(dummy).toBe(undefined)
array[key] = true
expect(array[key]).toBe(true)
expect(dummy).toBe(undefined)
})
it('should observe function valued properties', () => {
const oldFunc = () => {}
const newFunc = () => {}
let dummy
2019-08-16 21:42:46 +08:00
const obj = reactive({ func: oldFunc })
2018-11-14 00:03:35 +08:00
effect(() => (dummy = obj.func))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(oldFunc)
obj.func = newFunc
expect(dummy).toBe(newFunc)
})
it('should observe chained getters relying on this', () => {
const obj = reactive({
a: 1,
get b() {
return this.a
}
})
let dummy
effect(() => (dummy = obj.b))
expect(dummy).toBe(1)
obj.a++
expect(dummy).toBe(2)
})
it('should observe methods relying on this', () => {
const obj = reactive({
a: 1,
b() {
return this.a
}
})
let dummy
effect(() => (dummy = obj.b()))
expect(dummy).toBe(1)
obj.a++
expect(dummy).toBe(2)
})
2018-09-20 05:45:19 +08:00
it('should not observe set operations without a value change', () => {
let hasDummy, getDummy
2019-08-16 21:42:46 +08:00
const obj = reactive({ prop: 'value' })
2018-09-20 05:45:19 +08:00
const getSpy = jest.fn(() => (getDummy = obj.prop))
const hasSpy = jest.fn(() => (hasDummy = 'prop' in obj))
2018-11-14 00:03:35 +08:00
effect(getSpy)
effect(hasSpy)
2018-09-20 05:45:19 +08:00
expect(getDummy).toBe('value')
expect(hasDummy).toBe(true)
obj.prop = 'value'
expect(getSpy).toHaveBeenCalledTimes(1)
expect(hasSpy).toHaveBeenCalledTimes(1)
expect(getDummy).toBe('value')
expect(hasDummy).toBe(true)
})
it('should not observe raw mutations', () => {
let dummy
const obj = reactive<{ prop?: string }>({})
effect(() => (dummy = toRaw(obj).prop))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(undefined)
obj.prop = 'value'
expect(dummy).toBe(undefined)
})
it('should not be triggered by raw mutations', () => {
let dummy
const obj = reactive<{ prop?: string }>({})
2018-11-14 00:03:35 +08:00
effect(() => (dummy = obj.prop))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(undefined)
toRaw(obj).prop = 'value'
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(undefined)
})
it('should not be triggered by inherited raw setters', () => {
let dummy, parentDummy, hiddenValue: any
const obj = reactive<{ prop?: number }>({})
2019-08-16 21:42:46 +08:00
const parent = reactive({
2018-09-20 05:45:19 +08:00
set prop(value) {
hiddenValue = value
},
get prop() {
return hiddenValue
}
})
Object.setPrototypeOf(obj, parent)
2018-11-14 00:03:35 +08:00
effect(() => (dummy = obj.prop))
effect(() => (parentDummy = parent.prop))
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(undefined)
expect(parentDummy).toBe(undefined)
toRaw(obj).prop = 4
2018-09-20 05:45:19 +08:00
expect(dummy).toBe(undefined)
expect(parentDummy).toBe(undefined)
})
it('should avoid implicit infinite recursive loops with itself', () => {
2019-08-16 21:42:46 +08:00
const counter = reactive({ num: 0 })
2018-09-20 05:45:19 +08:00
const counterSpy = jest.fn(() => counter.num++)
2018-11-14 00:03:35 +08:00
effect(counterSpy)
2018-09-20 05:45:19 +08:00
expect(counter.num).toBe(1)
expect(counterSpy).toHaveBeenCalledTimes(1)
counter.num = 4
expect(counter.num).toBe(5)
expect(counterSpy).toHaveBeenCalledTimes(2)
})
it('should allow explicitly recursive raw function loops', () => {
2019-08-16 21:42:46 +08:00
const counter = reactive({ num: 0 })
2018-09-20 05:45:19 +08:00
const numSpy = jest.fn(() => {
counter.num++
if (counter.num < 10) {
numSpy()
}
})
2018-11-14 00:03:35 +08:00
effect(numSpy)
2018-09-20 05:45:19 +08:00
expect(counter.num).toEqual(10)
expect(numSpy).toHaveBeenCalledTimes(10)
})
2018-11-14 00:03:35 +08:00
it('should avoid infinite loops with other effects', () => {
2019-08-16 21:42:46 +08:00
const nums = reactive({ num1: 0, num2: 1 })
2018-09-20 05:45:19 +08:00
const spy1 = jest.fn(() => (nums.num1 = nums.num2))
const spy2 = jest.fn(() => (nums.num2 = nums.num1))
2018-11-14 00:03:35 +08:00
effect(spy1)
effect(spy2)
2018-09-20 05:45:19 +08:00
expect(nums.num1).toBe(1)
expect(nums.num2).toBe(1)
expect(spy1).toHaveBeenCalledTimes(1)
expect(spy2).toHaveBeenCalledTimes(1)
nums.num2 = 4
expect(nums.num1).toBe(4)
expect(nums.num2).toBe(4)
expect(spy1).toHaveBeenCalledTimes(2)
expect(spy2).toHaveBeenCalledTimes(2)
nums.num1 = 10
expect(nums.num1).toBe(10)
expect(nums.num2).toBe(10)
expect(spy1).toHaveBeenCalledTimes(3)
expect(spy2).toHaveBeenCalledTimes(3)
})
it('should return a new reactive version of the function', () => {
function greet() {
return 'Hello World'
}
2018-11-14 00:03:35 +08:00
const effect1 = effect(greet)
const effect2 = effect(greet)
expect(typeof effect1).toBe('function')
expect(typeof effect2).toBe('function')
expect(effect1).not.toBe(greet)
expect(effect1).not.toBe(effect2)
2018-09-20 05:45:19 +08:00
})
it('should discover new branches while running automatically', () => {
let dummy
2019-08-16 21:42:46 +08:00
const obj = reactive({ prop: 'value', run: false })
2018-09-20 05:45:19 +08:00
const conditionalSpy = jest.fn(() => {
dummy = obj.run ? obj.prop : 'other'
})
2018-11-14 00:03:35 +08:00
effect(conditionalSpy)
2018-09-20 05:45:19 +08:00
expect(dummy).toBe('other')
expect(conditionalSpy).toHaveBeenCalledTimes(1)
obj.prop = 'Hi'
expect(dummy).toBe('other')
expect(conditionalSpy).toHaveBeenCalledTimes(1)
obj.run = true
expect(dummy).toBe('Hi')
expect(conditionalSpy).toHaveBeenCalledTimes(2)
obj.prop = 'World'
expect(dummy).toBe('World')
expect(conditionalSpy).toHaveBeenCalledTimes(3)
})
it('should discover new branches when running manually', () => {
let dummy
let run = false
2019-08-16 21:42:46 +08:00
const obj = reactive({ prop: 'value' })
2018-11-14 00:03:35 +08:00
const runner = effect(() => {
2018-09-20 05:45:19 +08:00
dummy = run ? obj.prop : 'other'
})
expect(dummy).toBe('other')
runner()
expect(dummy).toBe('other')
run = true
runner()
expect(dummy).toBe('value')
obj.prop = 'World'
expect(dummy).toBe('World')
})
it('should not be triggered by mutating a property, which is used in an inactive branch', () => {
let dummy
2019-08-16 21:42:46 +08:00
const obj = reactive({ prop: 'value', run: true })
2018-09-20 05:45:19 +08:00
const conditionalSpy = jest.fn(() => {
dummy = obj.run ? obj.prop : 'other'
})
2018-11-14 00:03:35 +08:00
effect(conditionalSpy)
2018-09-20 05:45:19 +08:00
expect(dummy).toBe('value')
expect(conditionalSpy).toHaveBeenCalledTimes(1)
obj.run = false
expect(dummy).toBe('other')
expect(conditionalSpy).toHaveBeenCalledTimes(2)
obj.prop = 'value2'
expect(dummy).toBe('other')
expect(conditionalSpy).toHaveBeenCalledTimes(2)
})
2018-11-14 00:03:35 +08:00
it('should not double wrap if the passed function is a effect', () => {
const runner = effect(() => {})
const otherRunner = effect(runner)
2018-09-20 05:45:19 +08:00
expect(runner).not.toBe(otherRunner)
expect(runner.raw).toBe(otherRunner.raw)
})
it('should not run multiple times for a single mutation', () => {
let dummy
const obj = reactive<Record<string, number>>({})
2018-09-20 05:45:19 +08:00
const fnSpy = jest.fn(() => {
for (const key in obj) {
dummy = obj[key]
}
dummy = obj.prop
})
2018-11-14 00:03:35 +08:00
effect(fnSpy)
2018-09-20 05:45:19 +08:00
expect(fnSpy).toHaveBeenCalledTimes(1)
obj.prop = 16
expect(dummy).toBe(16)
expect(fnSpy).toHaveBeenCalledTimes(2)
})
2018-11-14 00:03:35 +08:00
it('should allow nested effects', () => {
2019-08-16 21:42:46 +08:00
const nums = reactive({ num1: 0, num2: 1, num3: 2 })
2018-09-20 05:45:19 +08:00
const dummy: any = {}
const childSpy = jest.fn(() => (dummy.num1 = nums.num1))
2018-11-14 00:03:35 +08:00
const childeffect = effect(childSpy)
2018-09-20 05:45:19 +08:00
const parentSpy = jest.fn(() => {
dummy.num2 = nums.num2
2018-11-14 00:03:35 +08:00
childeffect()
2018-09-20 05:45:19 +08:00
dummy.num3 = nums.num3
})
2018-11-14 00:03:35 +08:00
effect(parentSpy)
2018-09-20 05:45:19 +08:00
expect(dummy).toEqual({ num1: 0, num2: 1, num3: 2 })
expect(parentSpy).toHaveBeenCalledTimes(1)
expect(childSpy).toHaveBeenCalledTimes(2)
2018-11-14 00:03:35 +08:00
// this should only call the childeffect
2018-09-20 05:45:19 +08:00
nums.num1 = 4
expect(dummy).toEqual({ num1: 4, num2: 1, num3: 2 })
expect(parentSpy).toHaveBeenCalledTimes(1)
expect(childSpy).toHaveBeenCalledTimes(3)
2018-11-14 00:03:35 +08:00
// this calls the parenteffect, which calls the childeffect once
2018-09-20 05:45:19 +08:00
nums.num2 = 10
expect(dummy).toEqual({ num1: 4, num2: 10, num3: 2 })
expect(parentSpy).toHaveBeenCalledTimes(2)
expect(childSpy).toHaveBeenCalledTimes(4)
2018-11-14 00:03:35 +08:00
// this calls the parenteffect, which calls the childeffect once
2018-09-20 05:45:19 +08:00
nums.num3 = 7
expect(dummy).toEqual({ num1: 4, num2: 10, num3: 7 })
expect(parentSpy).toHaveBeenCalledTimes(3)
expect(childSpy).toHaveBeenCalledTimes(5)
})
it('should observe json methods', () => {
let dummy = <Record<string, number>>{}
const obj = reactive<Record<string, number>>({})
effect(() => {
dummy = JSON.parse(JSON.stringify(obj))
})
obj.a = 1
expect(dummy.a).toBe(1)
})
2018-09-20 23:43:14 +08:00
it('should observe class method invocations', () => {
2018-09-20 05:45:19 +08:00
class Model {
count: number
constructor() {
this.count = 0
}
inc() {
this.count++
}
}
2019-08-16 21:42:46 +08:00
const model = reactive(new Model())
2018-09-20 05:45:19 +08:00
let dummy
2018-11-14 00:03:35 +08:00
effect(() => {
2018-09-20 05:45:19 +08:00
dummy = model.count
})
expect(dummy).toBe(0)
model.inc()
expect(dummy).toBe(1)
})
it('lazy', () => {
const obj = reactive({ foo: 1 })
let dummy
const runner = effect(() => (dummy = obj.foo), { lazy: true })
expect(dummy).toBe(undefined)
expect(runner()).toBe(1)
expect(dummy).toBe(1)
obj.foo = 2
expect(dummy).toBe(2)
})
2018-09-20 23:43:14 +08:00
it('scheduler', () => {
2018-09-20 05:45:19 +08:00
let runner: any, dummy
const scheduler = jest.fn(_runner => {
runner = _runner
})
2019-08-16 21:42:46 +08:00
const obj = reactive({ foo: 1 })
2018-11-14 00:03:35 +08:00
effect(
2018-09-20 05:45:19 +08:00
() => {
dummy = obj.foo
},
{ scheduler }
)
expect(scheduler).not.toHaveBeenCalled()
expect(dummy).toBe(1)
// should be called on first trigger
obj.foo++
expect(scheduler).toHaveBeenCalledTimes(1)
// should not run yet
expect(dummy).toBe(1)
// manually run
runner()
// should have run
expect(dummy).toBe(2)
})
2018-09-20 23:43:14 +08:00
it('events: onTrack', () => {
2019-08-27 23:35:22 +08:00
let events: DebuggerEvent[] = []
2018-09-20 05:45:19 +08:00
let dummy
const onTrack = jest.fn((e: DebuggerEvent) => {
events.push(e)
})
2019-08-16 21:42:46 +08:00
const obj = reactive({ foo: 1, bar: 2 })
2018-11-14 00:03:35 +08:00
const runner = effect(
2018-09-20 05:45:19 +08:00
() => {
dummy = obj.foo
dummy = 'bar' in obj
dummy = Object.keys(obj)
},
{ onTrack }
)
expect(dummy).toEqual(['foo', 'bar'])
expect(onTrack).toHaveBeenCalledTimes(3)
expect(events).toEqual([
{
2018-11-14 00:03:35 +08:00
effect: runner,
target: toRaw(obj),
type: TrackOpTypes.GET,
2018-09-20 05:45:19 +08:00
key: 'foo'
},
{
2018-11-14 00:03:35 +08:00
effect: runner,
target: toRaw(obj),
type: TrackOpTypes.HAS,
2018-09-20 05:45:19 +08:00
key: 'bar'
},
{
2018-11-14 00:03:35 +08:00
effect: runner,
target: toRaw(obj),
type: TrackOpTypes.ITERATE,
2018-09-20 05:45:19 +08:00
key: ITERATE_KEY
}
])
})
2018-09-20 23:43:14 +08:00
it('events: onTrigger', () => {
2019-08-28 02:42:05 +08:00
let events: DebuggerEvent[] = []
2018-09-20 05:45:19 +08:00
let dummy
const onTrigger = jest.fn((e: DebuggerEvent) => {
events.push(e)
})
2019-08-16 21:42:46 +08:00
const obj = reactive({ foo: 1 })
2018-11-14 00:03:35 +08:00
const runner = effect(
2018-09-20 05:45:19 +08:00
() => {
dummy = obj.foo
},
{ onTrigger }
)
obj.foo++
expect(dummy).toBe(2)
expect(onTrigger).toHaveBeenCalledTimes(1)
expect(events[0]).toEqual({
2018-11-14 00:03:35 +08:00
effect: runner,
target: toRaw(obj),
type: TriggerOpTypes.SET,
2018-09-20 05:45:19 +08:00
key: 'foo',
oldValue: 1,
newValue: 2
})
delete obj.foo
expect(dummy).toBeUndefined()
expect(onTrigger).toHaveBeenCalledTimes(2)
expect(events[1]).toEqual({
2018-11-14 00:03:35 +08:00
effect: runner,
target: toRaw(obj),
type: TriggerOpTypes.DELETE,
2018-09-20 05:45:19 +08:00
key: 'foo',
oldValue: 2
})
})
2018-09-20 23:43:14 +08:00
it('stop', () => {
2018-09-20 05:45:19 +08:00
let dummy
2019-08-16 21:42:46 +08:00
const obj = reactive({ prop: 1 })
2018-11-14 00:03:35 +08:00
const runner = effect(() => {
2018-09-20 05:45:19 +08:00
dummy = obj.prop
})
obj.prop = 2
expect(dummy).toBe(2)
stop(runner)
obj.prop = 3
expect(dummy).toBe(2)
2018-09-21 21:52:46 +08:00
2018-11-14 00:03:35 +08:00
// stopped effect should still be manually callable
2018-09-21 21:52:46 +08:00
runner()
expect(dummy).toBe(3)
2018-09-20 05:45:19 +08:00
})
it('stop with scheduler', () => {
let dummy
const obj = reactive({ prop: 1 })
const queue: (() => void)[] = []
const runner = effect(
() => {
dummy = obj.prop
},
{
scheduler: e => queue.push(e)
}
)
obj.prop = 2
expect(dummy).toBe(1)
expect(queue.length).toBe(1)
stop(runner)
// a scheduled effect should not execute anymore after stopped
queue.forEach(e => e())
expect(dummy).toBe(1)
})
2019-08-27 09:24:44 +08:00
it('events: onStop', () => {
const onStop = jest.fn()
2019-08-27 09:24:44 +08:00
const runner = effect(() => {}, {
onStop
2019-08-27 09:24:44 +08:00
})
stop(runner)
expect(onStop).toHaveBeenCalled()
2019-08-27 09:24:44 +08:00
})
it('stop: a stopped effect is nested in a normal effect', () => {
let dummy
const obj = reactive({ prop: 1 })
const runner = effect(() => {
dummy = obj.prop
})
stop(runner)
obj.prop = 2
expect(dummy).toBe(1)
// observed value in inner stopped effect
// will track outer effect as an dependency
effect(() => {
runner()
})
expect(dummy).toBe(2)
// notify outer effect to run
obj.prop = 3
expect(dummy).toBe(3)
})
it('markRaw', () => {
2019-08-16 21:42:46 +08:00
const obj = reactive({
foo: markRaw({
2018-09-20 05:45:19 +08:00
prop: 0
})
})
let dummy
2018-11-14 00:03:35 +08:00
effect(() => {
2018-09-20 05:45:19 +08:00
dummy = obj.foo.prop
})
expect(dummy).toBe(0)
obj.foo.prop++
expect(dummy).toBe(0)
obj.foo = { prop: 1 }
expect(dummy).toBe(1)
})
it('should not be trigger when the value and the old value both are NaN', () => {
const obj = reactive({
foo: NaN
})
const fnSpy = jest.fn(() => obj.foo)
effect(fnSpy)
obj.foo = NaN
expect(fnSpy).toHaveBeenCalledTimes(1)
})
it('should trigger all effects when array length is set to 0', () => {
const observed: any = reactive([1])
let dummy, record
effect(() => {
dummy = observed.length
})
effect(() => {
record = observed[0]
})
expect(dummy).toBe(1)
expect(record).toBe(1)
observed[1] = 2
expect(observed[1]).toBe(2)
observed.unshift(3)
expect(dummy).toBe(3)
expect(record).toBe(3)
observed.length = 0
expect(dummy).toBe(0)
expect(record).toBeUndefined()
})
it('should handle self dependency mutations', () => {
const count = ref(0)
effect(() => {
count.value++
})
expect(count.value).toBe(1)
count.value = 10
expect(count.value).toBe(11)
})
2018-09-20 05:45:19 +08:00
})