// Copyright 2025 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { act } from 'preact/test-utils';
import { describe, expect, vi } from 'vitest';
import { Component, useState } from '@lynx-js/react';
import { render } from '..';
import { __pendingListUpdates } from '../../../runtime/lib/snapshot/list/pendingListUpdates.js';
describe('list', () => {
it('basic', async () => {
expect(__pendingListUpdates.values).toMatchInlineSnapshot(`{}`);
const Comp = () => {
const [list, setList] = useState([0, 1, 2]);
return (
{list.map((item) => (
{item}
))}
);
};
const { container } = render();
expect(__pendingListUpdates.values).toMatchInlineSnapshot(`{}`);
expect(container).toMatchInlineSnapshot(`
`);
const list = container.firstChild;
expect(list.props).toMatchInlineSnapshot(`undefined`);
const uid0 = elementTree.enterListItemAtIndex(list, 0);
expect(__pendingListUpdates.values).toMatchInlineSnapshot(`{}`);
expect(container).toMatchInlineSnapshot(`
0
`);
const uid1 = elementTree.enterListItemAtIndex(list, 1);
expect(__pendingListUpdates.values).toMatchInlineSnapshot(`{}`);
expect(container).toMatchInlineSnapshot(`
0
1
`);
expect(uid0).toMatchInlineSnapshot(`2`);
expect(uid1).toMatchInlineSnapshot(`5`);
elementTree.leaveListItem(list, uid0);
expect(__pendingListUpdates.values).toMatchInlineSnapshot(`{}`);
expect(container).toMatchInlineSnapshot(`
0
1
`);
const uid2 = elementTree.enterListItemAtIndex(list, 2);
expect(__pendingListUpdates.values).toMatchInlineSnapshot(
`{}`,
);
expect(container).toMatchInlineSnapshot(`
2
1
`);
expect(uid2).toMatchInlineSnapshot(`2`);
expect(uid0).toBe(uid2);
});
it('should reuse removed list item', async () => {
let setListVal;
let initListVal = Array(6)
.fill(0)
.map((v, i) => i);
const A = () => {
return hello;
};
const Comp = () => {
const [listVal, _setListVal] = useState(initListVal);
setListVal = _setListVal;
const showMask = true;
return (
{
{listVal.map((v) => {
return (
{showMask ? {v} : null}
{showMask ? {v} : null}
{/* This will generate `__DynamicPartSlot` part for testing the hydration behavior of slot is as expected */}
);
})}
}
);
};
const { container } = render();
expect(container).toMatchInlineSnapshot(`
`);
const list = container.firstChild.firstChild;
const uid0 = elementTree.enterListItemAtIndex(list, 0);
const uid1 = elementTree.enterListItemAtIndex(list, 1);
const uid2 = elementTree.enterListItemAtIndex(list, 2);
const uid3 = elementTree.enterListItemAtIndex(list, 3);
const listItem3 = list.children[3];
expect(listItem3).toMatchInlineSnapshot(`
3
3
hello
`);
elementTree.leaveListItem(list, uid0);
const uid4 = elementTree.enterListItemAtIndex(list, 4);
expect(uid4).toBe(uid0);
elementTree.leaveListItem(list, uid1);
const uid5 = elementTree.enterListItemAtIndex(list, 5);
expect(uid5).toBe(uid1);
// Remove the element 3
act(() => {
setListVal(initListVal.filter((x) => x !== 3));
});
const __CreateElement = vi.spyOn(lynxTestingEnv.mainThread.globalThis, '__CreateElement');
const __SetAttribute = vi.spyOn(lynxTestingEnv.mainThread.globalThis, '__SetAttribute');
const __FlushElementTree = vi.spyOn(lynxTestingEnv.mainThread.globalThis, '__FlushElementTree');
// Remove action is generated
expect(JSON.parse(list.getAttribute('update-list-info'))[1].removeAction)
.toMatchInlineSnapshot(`
[
3,
]
`);
// Reuse the element 3
elementTree.leaveListItem(list, uid3);
elementTree.enterListItemAtIndex(list, 1);
expect(__CreateElement).toHaveBeenCalledTimes(0);
expect(__SetAttribute).toHaveBeenCalledTimes(4);
// The original FiberElement of element 3 is reused for
// element 1 now
expect(__SetAttribute.mock.calls[0][0]).toBe(listItem3);
expect(__SetAttribute.mock.calls[0][0].$$uiSign).toBe(uid3);
expect(listItem3).toMatchInlineSnapshot(`
1
1
hello
`);
expect(__SetAttribute.mock.calls).toMatchInlineSnapshot(`
[
[
1
1
hello
,
"item-key",
"1",
],
[
1
1
hello
,
"full-span",
true,
],
[
1,
"text",
1,
],
[
1,
"text",
1,
],
]
`);
expect(__FlushElementTree).toHaveBeenCalledTimes(1);
const [[flushedElement, flushInfo]] = __FlushElementTree.mock.calls;
expect(flushedElement).toMatchInlineSnapshot(`
1
1
hello
`);
expect(flushInfo).toMatchObject({
listID: 2,
operationID: undefined,
triggerLayout: true,
});
expect(flushInfo.elementID).toBeTypeOf('number');
expect(list).toMatchInlineSnapshot(`
4
4
hello
5
5
hello
2
2
hello
1
1
hello
`);
expect(list).toMatchInlineSnapshot(`
4
4
hello
5
5
hello
2
2
hello
1
1
hello
`);
});
it('should recursively destroy list', async () => {
let setHide;
const Comp = () => {
const [hide, _setHide] = useState(false);
setHide = _setHide;
if (hide) return null;
return (
{
{Array(6)
.fill(0)
.map((v, i) => i).map((v) => {
return (
{'Hello'}
);
})}
}
);
};
const { container } = render();
const list = container.firstChild.firstChild;
const uid0 = elementTree.enterListItemAtIndex(list, 0);
// Hide all
act(() => {
setHide(true);
});
});
});
describe('list - deferred should render as normal', () => {
it('basic', async () => {
function App() {
return (
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}
))}
);
}
const { container } = render();
expect(container).toMatchInlineSnapshot(`
`);
const list = container.firstChild;
const p = [
elementTree.enterListItemAtIndex(list, 0),
elementTree.enterListItemAtIndex(list, 1),
elementTree.enterListItemAtIndex(list, 2),
elementTree.enterListItemAtIndex(list, 3),
];
expect(p[0].then).toBeTypeOf('function');
expect(p[1].then).toBeTypeOf('function');
expect(p[2].then).toBeTypeOf('function');
expect(p[3].then).toBeTypeOf('function');
expect(container).toMatchInlineSnapshot(`
`);
await Promise.all(p);
expect(container).toMatchInlineSnapshot(`
Item
1
Item
2
Item
3
`);
});
it('switch from defer={false} to defer={true} and backwards', async () => {
let _setDefers;
class C extends Component {
componentWillUnmount() {
this.props.onUnmount?.();
}
render() {
this.props.onRender?.();
return null;
}
}
const unmounts = [vi.fn(), vi.fn(), vi.fn()];
const renders = [vi.fn(), vi.fn(), vi.fn()];
function App() {
const [defers, setDefers] = useState([true, true, false]);
_setDefers = setDefers;
return (
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}
))}
);
}
const { container } = render();
expect(container).toMatchInlineSnapshot(`
`);
expect(renders[2]).toHaveBeenCalledTimes(1);
act(() => {
_setDefers([true, true, true]);
});
expect(renders[0]).toHaveBeenCalledTimes(0);
expect(renders[2]).toHaveBeenCalledTimes(2);
expect(unmounts[2]).toHaveBeenCalledTimes(0); // should not unmount, because it will be a pure waste
act(() => {
_setDefers([false, true, true]);
});
expect(renders[0]).toHaveBeenCalledTimes(1); // change from defer={true} to defer={false} should render the component
});
it('should unmount when reused', async () => {
class U extends Component {
componentWillUnmount() {
this.props.onUnmount?.();
}
render() {
return null;
}
}
const unmounts = [vi.fn(), vi.fn(), vi.fn()];
function App() {
return (
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}
))}
);
}
const { container } = render();
expect(container).toMatchInlineSnapshot(`
`);
const list = container.firstChild;
const p = [
elementTree.enterListItemAtIndex(list, 0),
elementTree.enterListItemAtIndex(list, 1),
];
expect(p[0].then).toBeTypeOf('function');
expect(p[1].then).toBeTypeOf('function');
expect(container).toMatchInlineSnapshot(`
`);
await Promise.all(p);
elementTree.leaveListItem(list, await p[0]);
p[2] = elementTree.enterListItemAtIndex(list, 2);
await Promise.all(p);
expect(unmounts[0]).toHaveBeenCalledTimes(1);
expect(container).toMatchInlineSnapshot(`
Item
3
Item
2
`);
});
it('spread props inside list-item should not trigger redundant snapshot patch', () => {
vi.spyOn(lynxTestingEnv.backgroundThread.lynxCoreInject.tt, 'OnLifecycleEvent');
const onLifecycleEventCalls = lynxTestingEnv.backgroundThread.lynxCoreInject.tt.OnLifecycleEvent.mock.calls;
vi.spyOn(lynx.getNativeApp(), 'callLepusMethod');
const callLepusMethodCalls = lynx.getNativeApp().callLepusMethod.mock.calls;
const useThemeColor = () => 'red';
const ThemedView = (props) => {
const { style, ...otherProps } = props;
const { children, ...restProps } = otherProps;
const backgroundColor = useThemeColor();
return (
{children}
);
};
const Comp = () => {
const [list, setList] = useState([0, 1, 2]);
return (
{list.map((item) => (
{item}
))}
);
};
render(, {
enableMainThread: true,
enableBackgroundThread: true,
});
expect(onLifecycleEventCalls).toMatchInlineSnapshot(`
[
[
[
"rLynxFirstScreen",
{
"firstScreenEventIdSwap": {},
"root": "{"id":-1,"type":"root","children":[{"id":-2,"type":"__snapshot_d0c07_test_26","children":[{"id":-3,"type":"__snapshot_d0c07_test_27","values":[{"item-key":0}],"children":[{"id":-4,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-5,"type":"__snapshot_d0c07_test_28","children":[{"id":-6,"type":null,"values":[0]}]}]}],"__listItemPlatformInfo":{"item-key":0}},{"id":-7,"type":"__snapshot_d0c07_test_27","values":[{"item-key":1}],"children":[{"id":-8,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-9,"type":"__snapshot_d0c07_test_28","children":[{"id":-10,"type":null,"values":[1]}]}]}],"__listItemPlatformInfo":{"item-key":1}},{"id":-11,"type":"__snapshot_d0c07_test_27","values":[{"item-key":2}],"children":[{"id":-12,"type":"__snapshot_d0c07_test_25","values":[{"style":{"backgroundColor":"red","margin":"12px"}}],"children":[{"id":-13,"type":"__snapshot_d0c07_test_28","children":[{"id":-14,"type":null,"values":[2]}]}]}],"__listItemPlatformInfo":{"item-key":2}}]}]}",
},
],
],
]
`);
expect(onLifecycleEventCalls[0][0][0]).toBe('rLynxFirstScreen');
expect(onLifecycleEventCalls[0][0][1]['root'].includes('__spread')).toBe(false);
expect(callLepusMethodCalls).toMatchInlineSnapshot(`
[
[
"rLynxChange",
{
"data": "{"patchList":[{"snapshotPatch":[],"id":2}]}",
"patchOptions": {
"isHydration": true,
"pipelineOptions": {
"dsl": "reactLynx",
"needTimestamps": true,
"pipelineID": "pipelineID",
"pipelineOrigin": "reactLynxHydrate",
"stage": "hydrate",
},
"reloadVersion": 0,
},
},
[Function],
],
]
`);
expect(callLepusMethodCalls[0][0]).toBe('rLynxChange');
expect(JSON.parse(callLepusMethodCalls[0][1]['data']).patchList[0].snapshotPatch.length).toBe(0);
});
});
test('should replace a keyed list in a dynamic slot without corrupting the slot index', async () => {
// https://github.com/lynx-family/lynx-stack/issues/2273
let setListKey;
const Comp = () => {
const [listKey, _setListKey] = useState('before');
setListKey = _setListKey;
return (
header
{listKey}
footer
);
};
const { container } = render();
const initialList = container.querySelector('list');
expect(initialList).not.toBeNull();
expect(() => {
act(() => {
setListKey('after');
});
}).not.toThrow();
const nextList = container.querySelector('list');
expect(nextList).not.toBe(initialList);
const uid = elementTree.enterListItemAtIndex(nextList, 0);
await uid;
expect(container.querySelectorAll('view > wrapper > list')).toHaveLength(1);
expect(nextList.getAttribute('custom-list-name')).toBe('list-container');
expect(nextList.querySelector('list-item').getAttribute('item-key')).toBe('bottom');
expect(nextList.querySelector('list-item').getAttribute('estimated-height-px')).toBe('20');
expect(container.textContent).toBe('headerafterfooter');
});