Skip to content

Commit

Permalink
test: should optimize call frequency during list operations
Browse files Browse the repository at this point in the history
  • Loading branch information
@LittleSound
LittleSound committed Sep 27, 2024
1 parent c366948 commit fa6b759
Showing 1 changed file with 244 additions and 0 deletions.
244 changes: 244 additions & 0 deletions packages/runtime-vapor/__tests__/for.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
renderEffect,
shallowRef,
template,
triggerRef,
withDirectives,
} from '../src'
import { makeRender } from './_utils'
Expand Down Expand Up @@ -456,4 +457,247 @@ describe('createFor', () => {
await nextTick()
expect(host.innerHTML).toBe('<!--for-->')
})

test('should optimize call frequency during list operations', async () => {
let sourceCalledTimes = 0
let renderCalledTimes = 0
let effectLabelCalledTimes = 0
let effectIndexCalledTimes = 0

const resetCounter = () => {
sourceCalledTimes = 0
renderCalledTimes = 0
effectLabelCalledTimes = 0
effectIndexCalledTimes = 0
}
const expectCalledTimesToBe = (
message: string,
source: number,
render: number,
label: number,
index: number,
) => {
expect(
{
source: sourceCalledTimes,
render: renderCalledTimes,
label: effectLabelCalledTimes,
index: effectIndexCalledTimes,
},
message,
).toEqual({ source, render, label, index })
resetCounter()
}

const createItem = (
(id = 0) =>
(label = id) => ({ id: id++, label })
)()
const createItems = (length: number) =>
Array.from({ length }, (_, i) => createItem(i))
const list = ref(createItems(100))
const length = () => list.value.length

define(() => {
const n1 = createFor(
() => (++sourceCalledTimes, list.value),
([item, index]) => {
++renderCalledTimes
const span = document.createElement('li')
renderEffect(() => {
++effectLabelCalledTimes
item.value.label
})
renderEffect(() => {
++effectIndexCalledTimes
index.value
})
return span
},
item => item.id,
)
return n1
}).render()

// Create rows
expectCalledTimesToBe('Create rows', 1, length(), length(), length())

// Update every 10th row
for (let i = 0; i < length(); i += 10) {
list.value[i].label += 10000
}
await nextTick()
expectCalledTimesToBe('Update every 10th row', 0, 0, length() / 10, 0)

// Append rows
list.value.push(...createItems(100))
await nextTick()
expectCalledTimesToBe('Append rows', 1, 100, 100, 100)

// Inserts rows at the beginning
const tempLen = length()
list.value.unshift(...createItems(100))
await nextTick()
expectCalledTimesToBe(
'Inserts rows at the beginning',
1,
100,
100,
100 + tempLen,
)

// Inserts rows in the middle
const middleIdx = length() / 2
list.value.splice(middleIdx, 0, ...createItems(100))
await nextTick()
expectCalledTimesToBe(
'Inserts rows in the middle',
1,
100,
100,
100 + middleIdx,
)

// Swap rows
const temp = list.value[1]
list.value[1] = list.value[length() - 2]
list.value[length() - 2] = temp
await nextTick()
expectCalledTimesToBe('Swap rows', 1, 0, 0, 2)

// Remove rows
list.value.splice(1, 1)
list.value.splice(length() - 2, 1)
await nextTick()
expectCalledTimesToBe('Remove rows', 1, 0, 0, length() - 1)

// Clear rows
list.value = []
await nextTick()
expectCalledTimesToBe('Clear rows', 1, 0, 0, 0)
})

test('should optimize call frequency during list operations with shallowRef', async () => {
let sourceCalledTimes = 0
let renderCalledTimes = 0
let effectLabelCalledTimes = 0
let effectIndexCalledTimes = 0

const resetCounter = () => {
sourceCalledTimes = 0
renderCalledTimes = 0
effectLabelCalledTimes = 0
effectIndexCalledTimes = 0
}
const expectCalledTimesToBe = (
message: string,
source: number,
render: number,
label: number,
index: number,
) => {
expect(
{
source: sourceCalledTimes,
render: renderCalledTimes,
label: effectLabelCalledTimes,
index: effectIndexCalledTimes,
},
message,
).toEqual({ source, render, label, index })

Check failure on line 607 in packages/runtime-vapor/__tests__/for.spec.ts

View workflow job for this annotation

GitHub Actions / test / unit-test

packages/runtime-vapor/__tests__/for.spec.ts > createFor > should optimize call frequency during list operations with shallowRef 

AssertionError: Append rows: expected { source: 1, render: 100, …(2) } to deeply equal { source: 1, render: 100, …(2) }

- Expected
+ Received

  Object {
    "index": 100,
-   "label": 100,
+   "label": 200,
    "render": 100,
    "source": 1,
  }

 ❯ expectCalledTimesToBe packages/runtime-vapor/__tests__/for.spec.ts:607:9
 ❯ packages/runtime-vapor/__tests__/for.spec.ts:655:5
resetCounter()
}

const createItem = (
(id = 0) =>
(label = id) => ({ id: id++, label: shallowRef(label) })
)()
const createItems = (length: number) =>
Array.from({ length }, (_, i) => createItem(i))
const list = shallowRef(createItems(100))
const length = () => list.value.length

define(() => {
const n1 = createFor(
() => (++sourceCalledTimes, list.value),
([item, index]) => {
++renderCalledTimes
const span = document.createElement('li')
renderEffect(() => {
++effectLabelCalledTimes
item.value.label.value
})
renderEffect(() => {
++effectIndexCalledTimes
index.value
})
return span
},
item => item.id,
)
return n1
}).render()

// Create rows
expectCalledTimesToBe('Create rows', 1, length(), length(), length())

// Update every 10th row
for (let i = 0; i < length(); i += 10) {
list.value[i].label.value += 10000
}
await nextTick()
expectCalledTimesToBe('Update every 10th row', 0, 0, length() / 10, 0)

// Append rows
list.value.push(...createItems(100))
triggerRef(list)
await nextTick()
expectCalledTimesToBe('Append rows', 1, 100, 100, 100)

// Inserts rows at the beginning
const tempLen = length()
list.value.unshift(...createItems(100))
triggerRef(list)
await nextTick()
expectCalledTimesToBe(
'Inserts rows at the beginning',
1,
100,
100,
100 + tempLen,
)

// Inserts rows in the middle
const middleIdx = length() / 2
list.value.splice(middleIdx, 0, ...createItems(100))
triggerRef(list)
await nextTick()
expectCalledTimesToBe(
'Inserts rows in the middle',
1,
100,
100,
100 + middleIdx,
)

// Swap rows
const temp = list.value[1]
list.value[1] = list.value[length() - 2]
list.value[length() - 2] = temp
triggerRef(list)
await nextTick()
expectCalledTimesToBe('Swap rows', 1, 0, 0, 2)

// Remove rows
list.value.splice(1, 1)
list.value.splice(length() - 2, 1)
triggerRef(list)
await nextTick()
expectCalledTimesToBe('Remove rows', 1, 0, 0, length() - 1)

// Clear rows
list.value = []
await nextTick()
expectCalledTimesToBe('Clear rows', 1, 0, 0, 0)
})
})

0 comments on commit fa6b759

Please sign in to comment.