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

417 lines
13 KiB
TypeScript
Raw Normal View History

import {
2019-08-16 21:42:46 +08:00
reactive,
2019-08-23 21:38:32 +08:00
readonly,
toRaw,
2019-08-16 21:42:46 +08:00
isReactive,
2019-08-23 21:38:32 +08:00
isReadonly,
markRaw,
2019-08-22 00:03:35 +08:00
effect,
ref,
shallowReadonly,
isProxy
} from '../src'
/**
* @see https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html
*/
type Writable<T> = { -readonly [P in keyof T]: T[P] }
2019-08-23 21:38:32 +08:00
describe('reactivity/readonly', () => {
describe('Object', () => {
2019-08-23 21:38:32 +08:00
it('should make nested values readonly', () => {
const original = { foo: 1, bar: { baz: 2 } }
const wrapped = readonly(original)
expect(wrapped).not.toBe(original)
expect(isProxy(wrapped)).toBe(true)
expect(isReactive(wrapped)).toBe(false)
expect(isReadonly(wrapped)).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(original)).toBe(false)
2019-08-23 21:38:32 +08:00
expect(isReadonly(original)).toBe(false)
expect(isReactive(wrapped.bar)).toBe(false)
expect(isReadonly(wrapped.bar)).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(original.bar)).toBe(false)
2019-08-23 21:38:32 +08:00
expect(isReadonly(original.bar)).toBe(false)
// get
expect(wrapped.foo).toBe(1)
// has
expect('foo' in wrapped).toBe(true)
// ownKeys
expect(Object.keys(wrapped)).toEqual(['foo', 'bar'])
})
it('should not allow mutation', () => {
const qux = Symbol('qux')
const original = {
foo: 1,
bar: {
baz: 2
},
[qux]: 3
}
const wrapped: Writable<typeof original> = readonly(original)
wrapped.foo = 2
expect(wrapped.foo).toBe(1)
2019-08-27 04:08:23 +08:00
expect(
`Set operation on key "foo" failed: target is readonly.`
).toHaveBeenWarnedLast()
wrapped.bar.baz = 3
expect(wrapped.bar.baz).toBe(2)
2019-08-27 04:08:23 +08:00
expect(
`Set operation on key "baz" failed: target is readonly.`
).toHaveBeenWarnedLast()
wrapped[qux] = 4
expect(wrapped[qux]).toBe(3)
expect(
`Set operation on key "Symbol(qux)" failed: target is readonly.`
).toHaveBeenWarnedLast()
delete wrapped.foo
expect(wrapped.foo).toBe(1)
2019-08-27 04:08:23 +08:00
expect(
`Delete operation on key "foo" failed: target is readonly.`
).toHaveBeenWarnedLast()
delete wrapped.bar.baz
expect(wrapped.bar.baz).toBe(2)
2019-08-27 04:08:23 +08:00
expect(
`Delete operation on key "baz" failed: target is readonly.`
).toHaveBeenWarnedLast()
delete wrapped[qux]
expect(wrapped[qux]).toBe(3)
expect(
`Delete operation on key "Symbol(qux)" failed: target is readonly.`
).toHaveBeenWarnedLast()
})
it('should not trigger effects', () => {
const wrapped: any = readonly({ a: 1 })
let dummy
2018-11-14 00:03:35 +08:00
effect(() => {
dummy = wrapped.a
})
expect(dummy).toBe(1)
wrapped.a = 2
expect(wrapped.a).toBe(1)
expect(dummy).toBe(1)
2019-09-04 06:11:04 +08:00
expect(`target is readonly`).toHaveBeenWarned()
})
})
describe('Array', () => {
2019-08-23 21:38:32 +08:00
it('should make nested values readonly', () => {
const original = [{ foo: 1 }]
const wrapped = readonly(original)
expect(wrapped).not.toBe(original)
expect(isProxy(wrapped)).toBe(true)
expect(isReactive(wrapped)).toBe(false)
expect(isReadonly(wrapped)).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(original)).toBe(false)
2019-08-23 21:38:32 +08:00
expect(isReadonly(original)).toBe(false)
expect(isReactive(wrapped[0])).toBe(false)
expect(isReadonly(wrapped[0])).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(original[0])).toBe(false)
2019-08-23 21:38:32 +08:00
expect(isReadonly(original[0])).toBe(false)
// get
expect(wrapped[0].foo).toBe(1)
// has
expect(0 in wrapped).toBe(true)
// ownKeys
expect(Object.keys(wrapped)).toEqual(['0'])
})
it('should not allow mutation', () => {
const wrapped: any = readonly([{ foo: 1 }])
wrapped[0] = 1
expect(wrapped[0]).not.toBe(1)
2019-08-27 04:08:23 +08:00
expect(
`Set operation on key "0" failed: target is readonly.`
).toHaveBeenWarned()
wrapped[0].foo = 2
expect(wrapped[0].foo).toBe(1)
2019-08-27 04:08:23 +08:00
expect(
`Set operation on key "foo" failed: target is readonly.`
).toHaveBeenWarned()
// should block length mutation
wrapped.length = 0
expect(wrapped.length).toBe(1)
expect(wrapped[0].foo).toBe(1)
2019-08-27 04:08:23 +08:00
expect(
`Set operation on key "length" failed: target is readonly.`
).toHaveBeenWarned()
// mutation methods invoke set/length internally and thus are blocked as well
wrapped.push(2)
expect(wrapped.length).toBe(1)
// push triggers two warnings on [1] and .length
2019-08-27 04:08:23 +08:00
expect(`target is readonly.`).toHaveBeenWarnedTimes(5)
})
it('should not trigger effects', () => {
const wrapped: any = readonly([{ a: 1 }])
let dummy
2018-11-14 00:03:35 +08:00
effect(() => {
dummy = wrapped[0].a
})
expect(dummy).toBe(1)
wrapped[0].a = 2
expect(wrapped[0].a).toBe(1)
expect(dummy).toBe(1)
2019-09-04 06:11:04 +08:00
expect(`target is readonly`).toHaveBeenWarnedTimes(1)
wrapped[0] = { a: 2 }
expect(wrapped[0].a).toBe(1)
expect(dummy).toBe(1)
2019-09-04 06:11:04 +08:00
expect(`target is readonly`).toHaveBeenWarnedTimes(2)
})
})
2018-09-21 21:52:46 +08:00
const maps = [Map, WeakMap]
maps.forEach((Collection: any) => {
describe(Collection.name, () => {
2019-08-23 21:38:32 +08:00
test('should make nested values readonly', () => {
const key1 = {}
const key2 = {}
const original = new Collection([[key1, {}], [key2, {}]])
const wrapped = readonly(original)
expect(wrapped).not.toBe(original)
expect(isProxy(wrapped)).toBe(true)
expect(isReactive(wrapped)).toBe(false)
expect(isReadonly(wrapped)).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(original)).toBe(false)
2019-08-23 21:38:32 +08:00
expect(isReadonly(original)).toBe(false)
expect(isReactive(wrapped.get(key1))).toBe(false)
expect(isReadonly(wrapped.get(key1))).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(original.get(key1))).toBe(false)
2019-08-23 21:38:32 +08:00
expect(isReadonly(original.get(key1))).toBe(false)
})
2018-11-14 00:03:35 +08:00
test('should not allow mutation & not trigger effect', () => {
2019-08-23 21:38:32 +08:00
const map = readonly(new Collection())
const key = {}
let dummy
2018-11-14 00:03:35 +08:00
effect(() => {
dummy = map.get(key)
})
expect(dummy).toBeUndefined()
map.set(key, 1)
expect(dummy).toBeUndefined()
expect(map.has(key)).toBe(false)
2019-08-27 04:08:23 +08:00
expect(
`Set operation on key "${key}" failed: target is readonly.`
).toHaveBeenWarned()
})
// #1772
test('readonly + reactive should make get() value also readonly + reactive', () => {
const map = reactive(new Collection())
const roMap = readonly(map)
const key = {}
map.set(key, {})
const item = map.get(key)
expect(isReactive(item)).toBe(true)
expect(isReadonly(item)).toBe(false)
const roItem = roMap.get(key)
expect(isReactive(roItem)).toBe(true)
expect(isReadonly(roItem)).toBe(true)
})
if (Collection === Map) {
2019-10-05 22:48:54 +08:00
test('should retrieve readonly values on iteration', () => {
const key1 = {}
const key2 = {}
const original = new Collection([[key1, {}], [key2, {}]])
const wrapped: any = readonly(original)
expect(wrapped.size).toBe(2)
for (const [key, value] of wrapped) {
2019-08-23 21:38:32 +08:00
expect(isReadonly(key)).toBe(true)
expect(isReadonly(value)).toBe(true)
}
wrapped.forEach((value: any) => {
2019-08-23 21:38:32 +08:00
expect(isReadonly(value)).toBe(true)
})
for (const value of wrapped.values()) {
2019-08-23 21:38:32 +08:00
expect(isReadonly(value)).toBe(true)
}
})
test('should retrieve reactive + readonly values on iteration', () => {
const key1 = {}
const key2 = {}
const original = reactive(new Collection([[key1, {}], [key2, {}]]))
const wrapped: any = readonly(original)
expect(wrapped.size).toBe(2)
for (const [key, value] of wrapped) {
expect(isReadonly(key)).toBe(true)
expect(isReadonly(value)).toBe(true)
expect(isReactive(key)).toBe(true)
expect(isReactive(value)).toBe(true)
}
wrapped.forEach((value: any) => {
expect(isReadonly(value)).toBe(true)
expect(isReactive(value)).toBe(true)
})
for (const value of wrapped.values()) {
expect(isReadonly(value)).toBe(true)
expect(isReactive(value)).toBe(true)
}
})
}
})
})
2018-09-21 21:52:46 +08:00
const sets = [Set, WeakSet]
sets.forEach((Collection: any) => {
describe(Collection.name, () => {
2019-08-23 21:38:32 +08:00
test('should make nested values readonly', () => {
const key1 = {}
const key2 = {}
const original = new Collection([key1, key2])
const wrapped = readonly(original)
expect(wrapped).not.toBe(original)
expect(isProxy(wrapped)).toBe(true)
expect(isReactive(wrapped)).toBe(false)
expect(isReadonly(wrapped)).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(original)).toBe(false)
2019-08-23 21:38:32 +08:00
expect(isReadonly(original)).toBe(false)
expect(wrapped.has(reactive(key1))).toBe(true)
2019-08-16 21:42:46 +08:00
expect(original.has(reactive(key1))).toBe(false)
})
2018-11-14 00:03:35 +08:00
test('should not allow mutation & not trigger effect', () => {
2019-08-23 21:38:32 +08:00
const set = readonly(new Collection())
const key = {}
let dummy
2018-11-14 00:03:35 +08:00
effect(() => {
dummy = set.has(key)
})
expect(dummy).toBe(false)
set.add(key)
expect(dummy).toBe(false)
expect(set.has(key)).toBe(false)
2019-08-27 04:08:23 +08:00
expect(
`Add operation on key "${key}" failed: target is readonly.`
).toHaveBeenWarned()
})
if (Collection === Set) {
2019-10-05 22:48:54 +08:00
test('should retrieve readonly values on iteration', () => {
const original = new Collection([{}, {}])
const wrapped: any = readonly(original)
expect(wrapped.size).toBe(2)
for (const value of wrapped) {
2019-08-23 21:38:32 +08:00
expect(isReadonly(value)).toBe(true)
}
wrapped.forEach((value: any) => {
2019-08-23 21:38:32 +08:00
expect(isReadonly(value)).toBe(true)
})
for (const value of wrapped.values()) {
2019-08-23 21:38:32 +08:00
expect(isReadonly(value)).toBe(true)
}
for (const [v1, v2] of wrapped.entries()) {
2019-08-23 21:38:32 +08:00
expect(isReadonly(v1)).toBe(true)
expect(isReadonly(v2)).toBe(true)
}
})
}
})
})
2019-08-23 21:38:32 +08:00
test('calling reactive on an readonly should return readonly', () => {
const a = readonly({})
2019-08-16 21:42:46 +08:00
const b = reactive(a)
2019-08-23 21:38:32 +08:00
expect(isReadonly(b)).toBe(true)
// should point to same original
expect(toRaw(a)).toBe(toRaw(b))
})
2019-08-23 21:38:32 +08:00
test('calling readonly on a reactive object should return readonly', () => {
2019-08-20 21:58:10 +08:00
const a = reactive({})
2019-08-23 21:38:32 +08:00
const b = readonly(a)
expect(isReadonly(b)).toBe(true)
// should point to same original
expect(toRaw(a)).toBe(toRaw(b))
})
test('readonly should track and trigger if wrapping reactive original', () => {
const a = reactive({ n: 1 })
const b = readonly(a)
// should return true since it's wrapping a reactive source
expect(isReactive(b)).toBe(true)
let dummy
effect(() => {
dummy = b.n
})
expect(dummy).toBe(1)
a.n++
expect(b.n).toBe(2)
expect(dummy).toBe(2)
})
test('wrapping already wrapped value should return same Proxy', () => {
const original = { foo: 1 }
const wrapped = readonly(original)
const wrapped2 = readonly(wrapped)
expect(wrapped2).toBe(wrapped)
})
test('wrapping the same value multiple times should return same Proxy', () => {
const original = { foo: 1 }
const wrapped = readonly(original)
const wrapped2 = readonly(original)
expect(wrapped2).toBe(wrapped)
})
test('markRaw', () => {
2019-08-23 21:38:32 +08:00
const obj = readonly({
foo: { a: 1 },
bar: markRaw({ b: 2 })
})
expect(isReadonly(obj.foo)).toBe(true)
2019-08-16 21:42:46 +08:00
expect(isReactive(obj.bar)).toBe(false)
})
2019-08-23 21:38:32 +08:00
test('should make ref readonly', () => {
const n: any = readonly(ref(1))
2019-08-22 00:03:35 +08:00
n.value = 2
expect(n.value).toBe(1)
2019-08-27 04:08:23 +08:00
expect(
`Set operation on key "value" failed: target is readonly.`
).toHaveBeenWarned()
2019-08-22 00:03:35 +08:00
})
describe('shallowReadonly', () => {
test('should not make non-reactive properties reactive', () => {
const props = shallowReadonly({ n: { foo: 1 } })
expect(isReactive(props.n)).toBe(false)
})
test('should make root level properties readonly', () => {
const props = shallowReadonly({ n: 1 })
// @ts-ignore
props.n = 2
expect(props.n).toBe(1)
expect(
`Set operation on key "n" failed: target is readonly.`
).toHaveBeenWarned()
})
// to retain 2.x behavior.
test('should NOT make nested properties readonly', () => {
const props = shallowReadonly({ n: { foo: 1 } })
// @ts-ignore
props.n.foo = 2
expect(props.n.foo).toBe(2)
expect(
`Set operation on key "foo" failed: target is readonly.`
).not.toHaveBeenWarned()
})
})
})