tombl.dev / dhtml
a post-component library for building user-interfaces on the web.
fork atom

test: tidy list tests (#26)

authored by tombl.dev and committed by

GitHub c4d229c4 5604a5d1

+33 -34
+33 -34
test/lists.test.ts
··· 163 163 164 164 root.render([a(), b()]) 165 165 expect(el.innerHTML).toBe('<h1>Item 1</h1><h2>Item 2</h2>') 166 - expect(el.children[0].tagName).toBe('H1') 167 - expect(el.children[1].tagName).toBe('H2') 168 - const original = [...el.children] 166 + 167 + const [h1, h2] = el.children 168 + expect(h1.tagName).toBe('H1') 169 + expect(h2.tagName).toBe('H2') 169 170 170 171 root.render([b(), a()]) 171 172 expect(el.innerHTML).toBe('<h2>Item 2</h2><h1>Item 1</h1>') 172 - expect(el.children[0].tagName).toBe('H2') 173 - expect(el.children[1].tagName).toBe('H1') 174 173 175 - expect(el.children[0]).not.toBe(original[1]) 176 - expect(el.children[1]).not.toBe(original[0]) 174 + expect(el.children[0]).toBe(h2) 175 + expect(el.children[1]).toBe(h1) 177 176 }) 178 177 179 178 it('explicit keyed', () => { ··· 184 183 185 184 root.render([a(), b()]) 186 185 expect(el.innerHTML).toBe('<h1>Item 1</h1><h2>Item 2</h2>') 187 - expect(el.children[0].tagName).toBe('H1') 188 - expect(el.children[1].tagName).toBe('H2') 189 - const original = [...el.children] 186 + 187 + const [h1, h2] = el.children 188 + expect(h1.tagName).toBe('H1') 189 + expect(h2.tagName).toBe('H2') 190 190 191 191 root.render([b(), a()]) 192 192 expect(el.innerHTML).toBe('<h2>Item 2</h2><h1>Item 1</h1>') 193 - expect(el.children[0].tagName).toBe('H2') 194 - expect(el.children[1].tagName).toBe('H1') 195 193 196 - expect(el.children[0]).toBe(original[1]) 197 - expect(el.children[1]).toBe(original[0]) 194 + expect(el.children[0]).toBe(h2) 195 + expect(el.children[1]).toBe(h1) 198 196 }) 199 197 200 198 it('implicit keyed', () => { ··· 204 202 205 203 root.render(items) 206 204 expect(el.innerHTML).toBe('<h1>Item 1</h1><h2>Item 2</h2>') 207 - expect(el.children[0].tagName).toBe('H1') 208 - expect(el.children[1].tagName).toBe('H2') 209 - const original = [...el.children] 210 205 206 + const [h1, h2] = el.children 207 + expect(h1.tagName).toBe('H1') 208 + expect(h2.tagName).toBe('H2') 211 209 ;[items[0], items[1]] = [items[1], items[0]] 212 210 213 211 root.render(items) ··· 215 213 expect(el.children[0].tagName).toBe('H2') 216 214 expect(el.children[1].tagName).toBe('H1') 217 215 218 - expect(el.children[0]).toBe(original[1]) 219 - expect(el.children[1]).toBe(original[0]) 216 + expect(el.children[0]).toBe(h2) 217 + expect(el.children[1]).toBe(h1) 220 218 }) 221 219 222 220 it('implicit keyed resize', () => { ··· 232 230 233 231 root.render(items) 234 232 expect(el.innerHTML.replace(/\s+/g, ' ')).toBe('<h1>Item 1</h1> <h2>Item 2</h2> <p>Body content</p> ') 235 - expect(el.children[0].tagName).toBe('H1') 236 - expect(el.children[1].tagName).toBe('H2') 237 - expect(el.children[2].tagName).toBe('P') 238 - const original = [...el.children] 233 + 234 + const [h1, h2, p] = el.children 235 + expect(h1.tagName).toBe('H1') 236 + expect(h2.tagName).toBe('H2') 237 + expect(p.tagName).toBe('P') 239 238 240 239 // Swap 241 240 ;[items[0], items[1]] = [items[1], items[0]] ··· 245 244 expect(el.children[1].tagName).toBe('P') 246 245 expect(el.children[2].tagName).toBe('H1') 247 246 248 - expect(el.children[0]).toBe(original[1]) 249 - expect(el.children[1]).toBe(original[2]) 250 - expect(el.children[2]).toBe(original[0]) 247 + expect(el.children[0]).toBe(h2) 248 + expect(el.children[1]).toBe(p) 249 + expect(el.children[2]).toBe(h1) 251 250 252 251 // Swap back 253 252 ;[items[0], items[1]] = [items[1], items[0]] ··· 256 255 expect(el.children[0].tagName).toBe('H1') 257 256 expect(el.children[1].tagName).toBe('H2') 258 257 expect(el.children[2].tagName).toBe('P') 259 - expect(el.children[0]).toBe(original[0]) 260 - expect(el.children[1]).toBe(original[1]) 261 - expect(el.children[2]).toBe(original[2]) 258 + expect(el.children[0]).toBe(h1) 259 + expect(el.children[1]).toBe(h2) 260 + expect(el.children[2]).toBe(p) 262 261 }) 263 262 264 263 it('implicit keyed renderable', () => { ··· 268 267 269 268 root.render(items) 270 269 expect(el.innerHTML).toBe('<h1>Item 1</h1><h2>Item 2</h2>') 271 - expect(el.children[0].tagName).toBe('H1') 272 - expect(el.children[1].tagName).toBe('H2') 273 - const original = [...el.children] 274 270 271 + const [h1, h2] = el.children 272 + expect(h1.tagName).toBe('H1') 273 + expect(h2.tagName).toBe('H2') 275 274 ;[items[0], items[1]] = [items[1], items[0]] 276 275 277 276 root.render(items) ··· 279 278 expect(el.children[0].tagName).toBe('H2') 280 279 expect(el.children[1].tagName).toBe('H1') 281 280 282 - expect(el.children[0]).toBe(original[1]) 283 - expect(el.children[1]).toBe(original[0]) 281 + expect(el.children[0]).toBe(h2) 282 + expect(el.children[1]).toBe(h1) 284 283 }) 285 284 286 285 it('reorders many items', () => {