Yunfei He
a7f7d9957d
21 test files covering components, composables, focus, lifecycle, and scheduler through the public render() API. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import { defineComponent, nextTick, ref } from "vue";
|
|
import { expect, test } from "vite-plus/test";
|
|
import { render } from "@vue-tui/testing";
|
|
import { Box, Text } from "@vue-tui/runtime";
|
|
|
|
test("v-if toggle preserves sibling order", async () => {
|
|
const show = ref(true);
|
|
const App = defineComponent(() => {
|
|
return () => (
|
|
<Box flexDirection="column">
|
|
<Text>A</Text>
|
|
{show.value ? <Text>B</Text> : null}
|
|
<Text>C</Text>
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
const { lastFrame } = await render(App, { columns: 10 });
|
|
expect(lastFrame()).toContain("A");
|
|
expect(lastFrame()).toContain("B");
|
|
expect(lastFrame()).toContain("C");
|
|
|
|
show.value = false;
|
|
await nextTick();
|
|
expect(lastFrame()).not.toContain("B");
|
|
expect(lastFrame()).toContain("A");
|
|
expect(lastFrame()).toContain("C");
|
|
|
|
show.value = true;
|
|
await nextTick();
|
|
const lines = lastFrame()!.split("\n").filter(Boolean);
|
|
const aIdx = lines.findIndex((l) => l.includes("A"));
|
|
const bIdx = lines.findIndex((l) => l.includes("B"));
|
|
const cIdx = lines.findIndex((l) => l.includes("C"));
|
|
expect(aIdx).toBeLessThan(bIdx);
|
|
expect(bIdx).toBeLessThan(cIdx);
|
|
});
|
|
|
|
test("keyed v-for reorder renders in new order", async () => {
|
|
const items = ref([1, 2, 3]);
|
|
const App = defineComponent(() => {
|
|
return () => (
|
|
<Box flexDirection="column">
|
|
{items.value.map((n) => (
|
|
<Text key={n}>item-{n}</Text>
|
|
))}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
const { lastFrame } = await render(App, { columns: 20 });
|
|
let lines = lastFrame()!.split("\n").filter(Boolean);
|
|
expect(lines[0]).toContain("item-1");
|
|
expect(lines[1]).toContain("item-2");
|
|
expect(lines[2]).toContain("item-3");
|
|
|
|
items.value = [3, 1, 2];
|
|
await nextTick();
|
|
lines = lastFrame()!.split("\n").filter(Boolean);
|
|
expect(lines[0]).toContain("item-3");
|
|
expect(lines[1]).toContain("item-1");
|
|
expect(lines[2]).toContain("item-2");
|
|
});
|
|
|
|
test("repeated list shuffles don't crash", async () => {
|
|
const items = ref([1, 2, 3, 4, 5]);
|
|
const App = defineComponent(() => {
|
|
return () => (
|
|
<Box flexDirection="column">
|
|
{items.value.map((n) => (
|
|
<Text key={n}>{String(n)}</Text>
|
|
))}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
const { lastFrame } = await render(App, { columns: 10 });
|
|
|
|
items.value = [5, 4, 3, 2, 1];
|
|
await nextTick();
|
|
items.value = [2, 4, 1, 5, 3];
|
|
await nextTick();
|
|
items.value = [1, 2, 3, 4, 5];
|
|
await nextTick();
|
|
|
|
expect(lastFrame()).toContain("1");
|
|
expect(lastFrame()).toContain("5");
|
|
});
|