Map.spec.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  1. import { reactive, effect, toRaw, isReactive } from '../../src'
  2. describe('reactivity/collections', () => {
  3. function coverCollectionFn(collection: Map<any, any>, fnName: string) {
  4. const spy = jest.fn()
  5. let proxy = reactive(collection)
  6. ;(collection as any)[fnName] = spy
  7. return [proxy as any, spy]
  8. }
  9. describe('Map', () => {
  10. test('instanceof', () => {
  11. const original = new Map()
  12. const observed = reactive(original)
  13. expect(isReactive(observed)).toBe(true)
  14. expect(original instanceof Map).toBe(true)
  15. expect(observed instanceof Map).toBe(true)
  16. })
  17. it('should observe mutations', () => {
  18. let dummy
  19. const map = reactive(new Map())
  20. effect(() => {
  21. dummy = map.get('key')
  22. })
  23. expect(dummy).toBe(undefined)
  24. map.set('key', 'value')
  25. expect(dummy).toBe('value')
  26. map.set('key', 'value2')
  27. expect(dummy).toBe('value2')
  28. map.delete('key')
  29. expect(dummy).toBe(undefined)
  30. })
  31. it('should observe mutations with observed value as key', () => {
  32. let dummy
  33. const key = reactive({})
  34. const value = reactive({})
  35. const map = reactive(new Map())
  36. effect(() => {
  37. dummy = map.get(key)
  38. })
  39. expect(dummy).toBe(undefined)
  40. map.set(key, value)
  41. expect(dummy).toBe(value)
  42. map.delete(key)
  43. expect(dummy).toBe(undefined)
  44. })
  45. it('should observe size mutations', () => {
  46. let dummy
  47. const map = reactive(new Map())
  48. effect(() => (dummy = map.size))
  49. expect(dummy).toBe(0)
  50. map.set('key1', 'value')
  51. map.set('key2', 'value2')
  52. expect(dummy).toBe(2)
  53. map.delete('key1')
  54. expect(dummy).toBe(1)
  55. map.clear()
  56. expect(dummy).toBe(0)
  57. })
  58. it('should observe for of iteration', () => {
  59. let dummy
  60. const map = reactive(new Map())
  61. effect(() => {
  62. dummy = 0
  63. // eslint-disable-next-line no-unused-vars
  64. for (let [key, num] of map) {
  65. key
  66. dummy += num
  67. }
  68. })
  69. expect(dummy).toBe(0)
  70. map.set('key1', 3)
  71. expect(dummy).toBe(3)
  72. map.set('key2', 2)
  73. expect(dummy).toBe(5)
  74. // iteration should track mutation of existing entries (#709)
  75. map.set('key1', 4)
  76. expect(dummy).toBe(6)
  77. map.delete('key1')
  78. expect(dummy).toBe(2)
  79. map.clear()
  80. expect(dummy).toBe(0)
  81. })
  82. it('should observe forEach iteration', () => {
  83. let dummy: any
  84. const map = reactive(new Map())
  85. effect(() => {
  86. dummy = 0
  87. map.forEach((num: any) => (dummy += num))
  88. })
  89. expect(dummy).toBe(0)
  90. map.set('key1', 3)
  91. expect(dummy).toBe(3)
  92. map.set('key2', 2)
  93. expect(dummy).toBe(5)
  94. // iteration should track mutation of existing entries (#709)
  95. map.set('key1', 4)
  96. expect(dummy).toBe(6)
  97. map.delete('key1')
  98. expect(dummy).toBe(2)
  99. map.clear()
  100. expect(dummy).toBe(0)
  101. })
  102. it('should observe keys iteration', () => {
  103. let dummy
  104. const map = reactive(new Map())
  105. effect(() => {
  106. dummy = 0
  107. for (let key of map.keys()) {
  108. dummy += key
  109. }
  110. })
  111. expect(dummy).toBe(0)
  112. map.set(3, 3)
  113. expect(dummy).toBe(3)
  114. map.set(2, 2)
  115. expect(dummy).toBe(5)
  116. map.delete(3)
  117. expect(dummy).toBe(2)
  118. map.clear()
  119. expect(dummy).toBe(0)
  120. })
  121. it('should observe values iteration', () => {
  122. let dummy
  123. const map = reactive(new Map())
  124. effect(() => {
  125. dummy = 0
  126. for (let num of map.values()) {
  127. dummy += num
  128. }
  129. })
  130. expect(dummy).toBe(0)
  131. map.set('key1', 3)
  132. expect(dummy).toBe(3)
  133. map.set('key2', 2)
  134. expect(dummy).toBe(5)
  135. // iteration should track mutation of existing entries (#709)
  136. map.set('key1', 4)
  137. expect(dummy).toBe(6)
  138. map.delete('key1')
  139. expect(dummy).toBe(2)
  140. map.clear()
  141. expect(dummy).toBe(0)
  142. })
  143. it('should observe entries iteration', () => {
  144. let dummy
  145. let dummy2
  146. const map = reactive(new Map())
  147. effect(() => {
  148. dummy = ''
  149. dummy2 = 0
  150. // eslint-disable-next-line no-unused-vars
  151. for (let [key, num] of map.entries()) {
  152. dummy += key
  153. dummy2 += num
  154. }
  155. })
  156. expect(dummy).toBe('')
  157. expect(dummy2).toBe(0)
  158. map.set('key1', 3)
  159. expect(dummy).toBe('key1')
  160. expect(dummy2).toBe(3)
  161. map.set('key2', 2)
  162. expect(dummy).toBe('key1key2')
  163. expect(dummy2).toBe(5)
  164. // iteration should track mutation of existing entries (#709)
  165. map.set('key1', 4)
  166. expect(dummy).toBe('key1key2')
  167. expect(dummy2).toBe(6)
  168. map.delete('key1')
  169. expect(dummy).toBe('key2')
  170. expect(dummy2).toBe(2)
  171. map.clear()
  172. expect(dummy).toBe('')
  173. expect(dummy2).toBe(0)
  174. })
  175. it('should be triggered by clearing', () => {
  176. let dummy
  177. const map = reactive(new Map())
  178. effect(() => (dummy = map.get('key')))
  179. expect(dummy).toBe(undefined)
  180. map.set('key', 3)
  181. expect(dummy).toBe(3)
  182. map.clear()
  183. expect(dummy).toBe(undefined)
  184. })
  185. it('should not observe custom property mutations', () => {
  186. let dummy
  187. const map: any = reactive(new Map())
  188. effect(() => (dummy = map.customProp))
  189. expect(dummy).toBe(undefined)
  190. map.customProp = 'Hello World'
  191. expect(dummy).toBe(undefined)
  192. })
  193. it('should not observe non value changing mutations', () => {
  194. let dummy
  195. const map = reactive(new Map())
  196. const mapSpy = jest.fn(() => (dummy = map.get('key')))
  197. effect(mapSpy)
  198. expect(dummy).toBe(undefined)
  199. expect(mapSpy).toHaveBeenCalledTimes(1)
  200. map.set('key', undefined)
  201. expect(dummy).toBe(undefined)
  202. expect(mapSpy).toHaveBeenCalledTimes(2)
  203. map.set('key', 'value')
  204. expect(dummy).toBe('value')
  205. expect(mapSpy).toHaveBeenCalledTimes(3)
  206. map.set('key', 'value')
  207. expect(dummy).toBe('value')
  208. expect(mapSpy).toHaveBeenCalledTimes(3)
  209. map.delete('key')
  210. expect(dummy).toBe(undefined)
  211. expect(mapSpy).toHaveBeenCalledTimes(4)
  212. map.delete('key')
  213. expect(dummy).toBe(undefined)
  214. expect(mapSpy).toHaveBeenCalledTimes(4)
  215. map.clear()
  216. expect(dummy).toBe(undefined)
  217. expect(mapSpy).toHaveBeenCalledTimes(4)
  218. })
  219. it('should not observe raw data', () => {
  220. let dummy
  221. const map = reactive(new Map())
  222. effect(() => (dummy = toRaw(map).get('key')))
  223. expect(dummy).toBe(undefined)
  224. map.set('key', 'Hello')
  225. expect(dummy).toBe(undefined)
  226. map.delete('key')
  227. expect(dummy).toBe(undefined)
  228. })
  229. it('should not pollute original Map with Proxies', () => {
  230. const map = new Map()
  231. const observed = reactive(map)
  232. const value = reactive({})
  233. observed.set('key', value)
  234. expect(map.get('key')).not.toBe(value)
  235. expect(map.get('key')).toBe(toRaw(value))
  236. })
  237. it('should return observable versions of contained values', () => {
  238. const observed = reactive(new Map())
  239. const value = {}
  240. observed.set('key', value)
  241. const wrapped = observed.get('key')
  242. expect(isReactive(wrapped)).toBe(true)
  243. expect(toRaw(wrapped)).toBe(value)
  244. })
  245. it('should observed nested data', () => {
  246. const observed = reactive(new Map())
  247. observed.set('key', { a: 1 })
  248. let dummy
  249. effect(() => {
  250. dummy = observed.get('key').a
  251. })
  252. observed.get('key').a = 2
  253. expect(dummy).toBe(2)
  254. })
  255. it('should observe nested values in iterations (forEach)', () => {
  256. const map = reactive(new Map([[1, { foo: 1 }]]))
  257. let dummy: any
  258. effect(() => {
  259. dummy = 0
  260. map.forEach(value => {
  261. expect(isReactive(value)).toBe(true)
  262. dummy += value.foo
  263. })
  264. })
  265. expect(dummy).toBe(1)
  266. map.get(1)!.foo++
  267. expect(dummy).toBe(2)
  268. })
  269. it('should observe nested values in iterations (values)', () => {
  270. const map = reactive(new Map([[1, { foo: 1 }]]))
  271. let dummy: any
  272. effect(() => {
  273. dummy = 0
  274. for (const value of map.values()) {
  275. expect(isReactive(value)).toBe(true)
  276. dummy += value.foo
  277. }
  278. })
  279. expect(dummy).toBe(1)
  280. map.get(1)!.foo++
  281. expect(dummy).toBe(2)
  282. })
  283. it('should observe nested values in iterations (entries)', () => {
  284. const key = {}
  285. const map = reactive(new Map([[key, { foo: 1 }]]))
  286. let dummy: any
  287. effect(() => {
  288. dummy = 0
  289. for (const [key, value] of map.entries()) {
  290. key
  291. expect(isReactive(key)).toBe(true)
  292. expect(isReactive(value)).toBe(true)
  293. dummy += value.foo
  294. }
  295. })
  296. expect(dummy).toBe(1)
  297. map.get(key)!.foo++
  298. expect(dummy).toBe(2)
  299. })
  300. it('should observe nested values in iterations (for...of)', () => {
  301. const key = {}
  302. const map = reactive(new Map([[key, { foo: 1 }]]))
  303. let dummy: any
  304. effect(() => {
  305. dummy = 0
  306. for (const [key, value] of map) {
  307. key
  308. expect(isReactive(key)).toBe(true)
  309. expect(isReactive(value)).toBe(true)
  310. dummy += value.foo
  311. }
  312. })
  313. expect(dummy).toBe(1)
  314. map.get(key)!.foo++
  315. expect(dummy).toBe(2)
  316. })
  317. it('should not be trigger when the value and the old value both are NaN', () => {
  318. const map = reactive(new Map([['foo', NaN]]))
  319. const mapSpy = jest.fn(() => map.get('foo'))
  320. effect(mapSpy)
  321. map.set('foo', NaN)
  322. expect(mapSpy).toHaveBeenCalledTimes(1)
  323. })
  324. it('should work with reactive keys in raw map', () => {
  325. const raw = new Map()
  326. const key = reactive({})
  327. raw.set(key, 1)
  328. const map = reactive(raw)
  329. expect(map.has(key)).toBe(true)
  330. expect(map.get(key)).toBe(1)
  331. expect(map.delete(key)).toBe(true)
  332. expect(map.has(key)).toBe(false)
  333. expect(map.get(key)).toBeUndefined()
  334. })
  335. it('should track set of reactive keys in raw map', () => {
  336. const raw = new Map()
  337. const key = reactive({})
  338. raw.set(key, 1)
  339. const map = reactive(raw)
  340. let dummy
  341. effect(() => {
  342. dummy = map.get(key)
  343. })
  344. expect(dummy).toBe(1)
  345. map.set(key, 2)
  346. expect(dummy).toBe(2)
  347. })
  348. it('should track deletion of reactive keys in raw map', () => {
  349. const raw = new Map()
  350. const key = reactive({})
  351. raw.set(key, 1)
  352. const map = reactive(raw)
  353. let dummy
  354. effect(() => {
  355. dummy = map.has(key)
  356. })
  357. expect(dummy).toBe(true)
  358. map.delete(key)
  359. expect(dummy).toBe(false)
  360. })
  361. it('should warn when both raw and reactive versions of the same object is used as key', () => {
  362. const raw = new Map()
  363. const rawKey = {}
  364. const key = reactive(rawKey)
  365. raw.set(rawKey, 1)
  366. raw.set(key, 1)
  367. const map = reactive(raw)
  368. map.set(key, 2)
  369. expect(
  370. `Reactive Map contains both the raw and reactive`
  371. ).toHaveBeenWarned()
  372. })
  373. // #877
  374. it('should not trigger key iteration when setting existing keys', () => {
  375. const map = reactive(new Map())
  376. const spy = jest.fn()
  377. effect(() => {
  378. const keys = []
  379. for (const key of map.keys()) {
  380. keys.push(key)
  381. }
  382. spy(keys)
  383. })
  384. expect(spy).toHaveBeenCalledTimes(1)
  385. expect(spy.mock.calls[0][0]).toMatchObject([])
  386. map.set('a', 0)
  387. expect(spy).toHaveBeenCalledTimes(2)
  388. expect(spy.mock.calls[1][0]).toMatchObject(['a'])
  389. map.set('b', 0)
  390. expect(spy).toHaveBeenCalledTimes(3)
  391. expect(spy.mock.calls[2][0]).toMatchObject(['a', 'b'])
  392. // keys didn't change, should not trigger
  393. map.set('b', 1)
  394. expect(spy).toHaveBeenCalledTimes(3)
  395. })
  396. it('should trigger Map.has only once for non-reactive keys', () => {
  397. const [proxy, spy] = coverCollectionFn(new Map(), 'has')
  398. proxy.has('k')
  399. expect(spy).toBeCalledTimes(1)
  400. })
  401. it('should trigger Map.set only once for non-reactive keys', () => {
  402. const [proxy, spy] = coverCollectionFn(new Map(), 'set')
  403. proxy.set('k', 'v')
  404. expect(spy).toBeCalledTimes(1)
  405. })
  406. it('should trigger Map.delete only once for non-reactive keys', () => {
  407. const [proxy, spy] = coverCollectionFn(new Map(), 'delete')
  408. proxy.delete('foo')
  409. expect(spy).toBeCalledTimes(1)
  410. })
  411. it('should trigger Map.clear only once for non-reactive keys', () => {
  412. const [proxy, spy] = coverCollectionFn(new Map(), 'clear')
  413. proxy.clear()
  414. expect(spy).toBeCalledTimes(1)
  415. })
  416. it('should return proxy from Map.set call', () => {
  417. const map = reactive(new Map())
  418. const result = map.set('a', 'a')
  419. expect(result).toBe(map)
  420. })
  421. })
  422. })