Set.spec.ts 8.8 KB

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