Set.spec.ts 12 KB

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