Map.spec.ts 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. import { reactive, effect, toRaw, isReactive } from '../../src'
  2. describe('reactivity/collections', () => {
  3. describe('Map', () => {
  4. test('instanceof', () => {
  5. const original = new Map()
  6. const observed = reactive(original)
  7. expect(isReactive(observed)).toBe(true)
  8. expect(original instanceof Map).toBe(true)
  9. expect(observed instanceof Map).toBe(true)
  10. })
  11. it('should observe mutations', () => {
  12. let dummy
  13. const map = reactive(new Map())
  14. effect(() => {
  15. dummy = map.get('key')
  16. })
  17. expect(dummy).toBe(undefined)
  18. map.set('key', 'value')
  19. expect(dummy).toBe('value')
  20. map.set('key', 'value2')
  21. expect(dummy).toBe('value2')
  22. map.delete('key')
  23. expect(dummy).toBe(undefined)
  24. })
  25. it('should observe size mutations', () => {
  26. let dummy
  27. const map = reactive(new Map())
  28. effect(() => (dummy = map.size))
  29. expect(dummy).toBe(0)
  30. map.set('key1', 'value')
  31. map.set('key2', 'value2')
  32. expect(dummy).toBe(2)
  33. map.delete('key1')
  34. expect(dummy).toBe(1)
  35. map.clear()
  36. expect(dummy).toBe(0)
  37. })
  38. it('should observe for of iteration', () => {
  39. let dummy
  40. const map = reactive(new Map())
  41. effect(() => {
  42. dummy = 0
  43. // eslint-disable-next-line no-unused-vars
  44. for (let [key, num] of map) {
  45. key
  46. dummy += num
  47. }
  48. })
  49. expect(dummy).toBe(0)
  50. map.set('key1', 3)
  51. expect(dummy).toBe(3)
  52. map.set('key2', 2)
  53. expect(dummy).toBe(5)
  54. map.delete('key1')
  55. expect(dummy).toBe(2)
  56. map.clear()
  57. expect(dummy).toBe(0)
  58. })
  59. it('should observe forEach iteration', () => {
  60. let dummy: any
  61. const map = reactive(new Map())
  62. effect(() => {
  63. dummy = 0
  64. map.forEach((num: any) => (dummy += num))
  65. })
  66. expect(dummy).toBe(0)
  67. map.set('key1', 3)
  68. expect(dummy).toBe(3)
  69. map.set('key2', 2)
  70. expect(dummy).toBe(5)
  71. map.delete('key1')
  72. expect(dummy).toBe(2)
  73. map.clear()
  74. expect(dummy).toBe(0)
  75. })
  76. it('should observe keys iteration', () => {
  77. let dummy
  78. const map = reactive(new Map())
  79. effect(() => {
  80. dummy = 0
  81. for (let key of map.keys()) {
  82. dummy += key
  83. }
  84. })
  85. expect(dummy).toBe(0)
  86. map.set(3, 3)
  87. expect(dummy).toBe(3)
  88. map.set(2, 2)
  89. expect(dummy).toBe(5)
  90. map.delete(3)
  91. expect(dummy).toBe(2)
  92. map.clear()
  93. expect(dummy).toBe(0)
  94. })
  95. it('should observe values iteration', () => {
  96. let dummy
  97. const map = reactive(new Map())
  98. effect(() => {
  99. dummy = 0
  100. for (let num of map.values()) {
  101. dummy += num
  102. }
  103. })
  104. expect(dummy).toBe(0)
  105. map.set('key1', 3)
  106. expect(dummy).toBe(3)
  107. map.set('key2', 2)
  108. expect(dummy).toBe(5)
  109. map.delete('key1')
  110. expect(dummy).toBe(2)
  111. map.clear()
  112. expect(dummy).toBe(0)
  113. })
  114. it('should observe entries iteration', () => {
  115. let dummy
  116. let dummy2
  117. const map = reactive(new Map())
  118. effect(() => {
  119. dummy = ''
  120. dummy2 = 0
  121. // eslint-disable-next-line no-unused-vars
  122. for (let [key, num] of map.entries()) {
  123. dummy += key
  124. dummy2 += num
  125. }
  126. })
  127. expect(dummy).toBe('')
  128. expect(dummy2).toBe(0)
  129. map.set('key1', 3)
  130. expect(dummy).toBe('key1')
  131. expect(dummy2).toBe(3)
  132. map.set('key2', 2)
  133. expect(dummy).toBe('key1key2')
  134. expect(dummy2).toBe(5)
  135. map.delete('key1')
  136. expect(dummy).toBe('key2')
  137. expect(dummy2).toBe(2)
  138. map.clear()
  139. expect(dummy).toBe('')
  140. expect(dummy2).toBe(0)
  141. })
  142. it('should be triggered by clearing', () => {
  143. let dummy
  144. const map = reactive(new Map())
  145. effect(() => (dummy = map.get('key')))
  146. expect(dummy).toBe(undefined)
  147. map.set('key', 3)
  148. expect(dummy).toBe(3)
  149. map.clear()
  150. expect(dummy).toBe(undefined)
  151. })
  152. it('should not observe custom property mutations', () => {
  153. let dummy
  154. const map: any = reactive(new Map())
  155. effect(() => (dummy = map.customProp))
  156. expect(dummy).toBe(undefined)
  157. map.customProp = 'Hello World'
  158. expect(dummy).toBe(undefined)
  159. })
  160. it('should not observe non value changing mutations', () => {
  161. let dummy
  162. const map = reactive(new Map())
  163. const mapSpy = jest.fn(() => (dummy = map.get('key')))
  164. effect(mapSpy)
  165. expect(dummy).toBe(undefined)
  166. expect(mapSpy).toHaveBeenCalledTimes(1)
  167. map.set('key', 'value')
  168. expect(dummy).toBe('value')
  169. expect(mapSpy).toHaveBeenCalledTimes(2)
  170. map.set('key', 'value')
  171. expect(dummy).toBe('value')
  172. expect(mapSpy).toHaveBeenCalledTimes(2)
  173. map.delete('key')
  174. expect(dummy).toBe(undefined)
  175. expect(mapSpy).toHaveBeenCalledTimes(3)
  176. map.delete('key')
  177. expect(dummy).toBe(undefined)
  178. expect(mapSpy).toHaveBeenCalledTimes(3)
  179. map.clear()
  180. expect(dummy).toBe(undefined)
  181. expect(mapSpy).toHaveBeenCalledTimes(3)
  182. })
  183. it('should not observe raw data', () => {
  184. let dummy
  185. const map = reactive(new Map())
  186. effect(() => (dummy = toRaw(map).get('key')))
  187. expect(dummy).toBe(undefined)
  188. map.set('key', 'Hello')
  189. expect(dummy).toBe(undefined)
  190. map.delete('key')
  191. expect(dummy).toBe(undefined)
  192. })
  193. it('should not pollute original Map with Proxies', () => {
  194. const map = new Map()
  195. const observed = reactive(map)
  196. const value = reactive({})
  197. observed.set('key', value)
  198. expect(map.get('key')).not.toBe(value)
  199. expect(map.get('key')).toBe(toRaw(value))
  200. })
  201. it('should return observable versions of contained values', () => {
  202. const observed = reactive(new Map())
  203. const value = {}
  204. observed.set('key', value)
  205. const wrapped = observed.get('key')
  206. expect(isReactive(wrapped)).toBe(true)
  207. expect(toRaw(wrapped)).toBe(value)
  208. })
  209. it('should observed nested data', () => {
  210. const observed = reactive(new Map())
  211. observed.set('key', { a: 1 })
  212. let dummy
  213. effect(() => {
  214. dummy = observed.get('key').a
  215. })
  216. observed.get('key').a = 2
  217. expect(dummy).toBe(2)
  218. })
  219. it('should observe nested values in iterations (forEach)', () => {
  220. const map = reactive(new Map([[1, { foo: 1 }]]))
  221. let dummy: any
  222. effect(() => {
  223. dummy = 0
  224. map.forEach(value => {
  225. expect(isReactive(value)).toBe(true)
  226. dummy += value.foo
  227. })
  228. })
  229. expect(dummy).toBe(1)
  230. map.get(1)!.foo++
  231. expect(dummy).toBe(2)
  232. })
  233. it('should observe nested values in iterations (values)', () => {
  234. const map = reactive(new Map([[1, { foo: 1 }]]))
  235. let dummy: any
  236. effect(() => {
  237. dummy = 0
  238. for (const value of map.values()) {
  239. expect(isReactive(value)).toBe(true)
  240. dummy += value.foo
  241. }
  242. })
  243. expect(dummy).toBe(1)
  244. map.get(1)!.foo++
  245. expect(dummy).toBe(2)
  246. })
  247. it('should observe nested values in iterations (entries)', () => {
  248. const key = {}
  249. const map = reactive(new Map([[key, { foo: 1 }]]))
  250. let dummy: any
  251. effect(() => {
  252. dummy = 0
  253. for (const [key, value] of map.entries()) {
  254. key
  255. expect(isReactive(key)).toBe(true)
  256. expect(isReactive(value)).toBe(true)
  257. dummy += value.foo
  258. }
  259. })
  260. expect(dummy).toBe(1)
  261. map.get(key)!.foo++
  262. expect(dummy).toBe(2)
  263. })
  264. it('should observe nested values in iterations (for...of)', () => {
  265. const key = {}
  266. const map = reactive(new Map([[key, { foo: 1 }]]))
  267. let dummy: any
  268. effect(() => {
  269. dummy = 0
  270. for (const [key, value] of map) {
  271. key
  272. expect(isReactive(key)).toBe(true)
  273. expect(isReactive(value)).toBe(true)
  274. dummy += value.foo
  275. }
  276. })
  277. expect(dummy).toBe(1)
  278. map.get(key)!.foo++
  279. expect(dummy).toBe(2)
  280. })
  281. })
  282. })