import { ref, isRef, reactive, isReactive, toRaw, markRaw, computed } from 'v3'
import { set } from 'core/observer'
import { effect } from 'v3/reactivity/effect'
describe('reactivity/reactive', () => {
test('Object', () => {
const original = { foo: 1 }
const observed = reactive(original)
expect(isReactive(observed)).toBe(true)
expect(observed.foo).toBe(1)
expect('foo' in observed).toBe(true)
expect(Object.keys(observed)).toEqual(['foo'])
})
test('proto', () => {
const obj = {}
const reactiveObj = reactive(obj)
expect(isReactive(reactiveObj)).toBe(true)
const prototype = reactiveObj['__proto__']
const otherObj = { data: ['a'] }
expect(isReactive(otherObj)).toBe(false)
const reactiveOther = reactive(otherObj)
expect(isReactive(reactiveOther)).toBe(true)
expect(reactiveOther.data[0]).toBe('a')
})
test('nested reactives', () => {
const original = {
nested: {
foo: 1
},
array: [{ bar: 2 }]
}
const observed = reactive(original)
expect(isReactive(observed.nested)).toBe(true)
expect(isReactive(observed.array)).toBe(true)
expect(isReactive(observed.array[0])).toBe(true)
})
test('observed value should proxy mutations to original (Object)', () => {
const original: any = { foo: 1 }
const observed = reactive(original)
observed.bar = 1
expect(observed.bar).toBe(1)
expect(original.bar).toBe(1)
delete observed.foo
expect('foo' in observed).toBe(false)
expect('foo' in original).toBe(false)
})
test('original value change should reflect in observed value (Object)', () => {
const original: any = { foo: 1 }
const observed = reactive(original)
original.bar = 1
expect(original.bar).toBe(1)
expect(observed.bar).toBe(1)
delete original.foo
expect('foo' in original).toBe(false)
expect('foo' in observed).toBe(false)
})
test('setting a property with an unobserved value should wrap with reactive', () => {
const observed = reactive<{ foo?: object }>({})
const raw = {}
set(observed, 'foo', raw)
expect(isReactive(observed.foo)).toBe(true)
})
test('observing already observed value should return same Proxy', () => {
const original = { foo: 1 }
const observed = reactive(original)
const observed2 = reactive(observed)
expect(observed2).toBe(observed)
})
test('observing the same value multiple times should return same Proxy', () => {
const original = { foo: 1 }
const observed = reactive(original)
const observed2 = reactive(original)
expect(observed2).toBe(observed)
})
test('should not pollute original object with Proxies', () => {
const original: any = { foo: 1 }
const original2 = { bar: 2 }
const observed = reactive(original)
const observed2 = reactive(original2)
observed.bar = observed2
expect(observed.bar).toBe(observed2)
expect(original.bar).toBe(original2)
})
test('toRaw', () => {
const original = { foo: 1 }
const observed = reactive(original)
expect(toRaw(observed)).toBe(original)
expect(toRaw(original)).toBe(original)
})
test('toRaw on object using reactive as prototype', () => {
const original = reactive({})
const obj = Object.create(original)
const raw = toRaw(obj)
expect(raw).toBe(obj)
expect(raw).not.toBe(toRaw(original))
})
test('should not unwrap Ref<T>', () => {
const observedNumberRef = reactive(ref(1))
const observedObjectRef = reactive(ref({ foo: 1 }))
expect(isRef(observedNumberRef)).toBe(true)
expect(isRef(observedObjectRef)).toBe(true)
})
test('should unwrap computed refs', () => {
const a = computed(() => 1)
const b = computed({
get: () => 1,
set: () => {}
})
const obj = reactive({ a, b })
obj.a + 1
obj.b + 1
expect(typeof obj.a).toBe(`number`)
expect(typeof obj.b).toBe(`number`)
})
test('should allow setting property from a ref to another ref', () => {
const foo = ref(0)
const bar = ref(1)
const observed = reactive({ a: foo })
let dummy
effect(() => {
dummy = observed.a
})
expect(dummy).toBe(0)
observed.a = bar
expect(dummy).toBe(1)
bar.value++
expect(dummy).toBe(2)
})
test('non-observable values', () => {
const assertValue = (value: any) => {
reactive(value)
expect(
`value cannot be made reactive: ${String(value)}`
).toHaveBeenWarnedLast()
}
assertValue(1)
assertValue('foo')
assertValue(false)
assertValue(null)
assertValue(undefined)
const s = Symbol()
assertValue(s)
const p = Promise.resolve()
expect(reactive(p)).toBe(p)
const r = new RegExp('')
expect(reactive(r)).toBe(r)
const d = new Date()
expect(reactive(d)).toBe(d)
})
test('markRaw', () => {
const obj = reactive({
foo: { a: 1 },
bar: markRaw({ b: 2 })
})
expect(isReactive(obj.foo)).toBe(true)
expect(isReactive(obj.bar)).toBe(false)
})
test('markRaw on non-extensible objects', () => {
const foo = Object.seal({})
markRaw(foo)
expect(isReactive(reactive(foo))).toBe(false)
})
test('should not observe non-extensible objects', () => {
const obj = reactive({
foo: Object.preventExtensions({ a: 1 }),
bar: Object.freeze({ a: 1 }),
baz: Object.seal({ a: 1 })
})
expect(isReactive(obj.foo)).toBe(false)
expect(isReactive(obj.bar)).toBe(false)
expect(isReactive(obj.baz)).toBe(false)
})
test('should not observe objects with __v_skip', () => {
const original = {
foo: 1,
__v_skip: true
}
const observed = reactive(original)
expect(isReactive(observed)).toBe(false)
})
test(`should not trigger if value didn't change`, () => {
const state = reactive({
foo: 1
})
const spy = vi.fn()
effect(() => {
state.foo
spy()
})
expect(spy).toHaveBeenCalledTimes(1)
state.foo = 1
expect(spy).toHaveBeenCalledTimes(1)
state.foo = NaN
expect(spy).toHaveBeenCalledTimes(2)
state.foo = NaN
expect(spy).toHaveBeenCalledTimes(2)
state.foo = 2
expect(spy).toHaveBeenCalledTimes(3)
})
})