Set.spec.ts 13 KB

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