refactor: replace ref() with shallowRef() in all test files
AGENTS.md requires shallowRef by default. All test state uses reassignment (not mutation), so shallowRef is correct. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { defineComponent, nextTick, ref } from "vue";
|
import { defineComponent, nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text } from "@vue-tui/runtime";
|
import { Box, Text } from "@vue-tui/runtime";
|
||||||
@@ -41,7 +41,7 @@ test("borderBottom:false suppresses bottom edge", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("reactive borderTop:false update removes top edge", async () => {
|
test("reactive borderTop:false update removes top edge", async () => {
|
||||||
const showTop = ref(true);
|
const showTop = shallowRef(true);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => <Box borderStyle="single" borderTop={showTop.value} width={6} height={3} />;
|
return () => <Box borderStyle="single" borderTop={showTop.value} width={6} height={3} />;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { defineComponent, nextTick, ref } from "vue";
|
import { defineComponent, nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text } from "@vue-tui/runtime";
|
import { Box, Text } from "@vue-tui/runtime";
|
||||||
|
|
||||||
test("v-if toggle preserves sibling order", async () => {
|
test("v-if toggle preserves sibling order", async () => {
|
||||||
const show = ref(true);
|
const show = shallowRef(true);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => (
|
return () => (
|
||||||
<Box flexDirection="column">
|
<Box flexDirection="column">
|
||||||
@@ -37,7 +37,7 @@ test("v-if toggle preserves sibling order", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("keyed v-for reorder renders in new order", async () => {
|
test("keyed v-for reorder renders in new order", async () => {
|
||||||
const items = ref([1, 2, 3]);
|
const items = shallowRef([1, 2, 3]);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => (
|
return () => (
|
||||||
<Box flexDirection="column">
|
<Box flexDirection="column">
|
||||||
@@ -63,7 +63,7 @@ test("keyed v-for reorder renders in new order", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("repeated list shuffles don't crash", async () => {
|
test("repeated list shuffles don't crash", async () => {
|
||||||
const items = ref([1, 2, 3, 4, 5]);
|
const items = shallowRef([1, 2, 3, 4, 5]);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => (
|
return () => (
|
||||||
<Box flexDirection="column">
|
<Box flexDirection="column">
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { PassThrough } from "node:stream";
|
import { PassThrough } from "node:stream";
|
||||||
import { defineComponent, nextTick, ref } from "vue";
|
import { defineComponent, nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text, Static, createApp } from "@vue-tui/runtime";
|
import { Box, Text, Static, createApp } from "@vue-tui/runtime";
|
||||||
|
|
||||||
test("Static appends new items above the dynamic frame", async () => {
|
test("Static appends new items above the dynamic frame", async () => {
|
||||||
const items = ref<string[]>([]);
|
const items = shallowRef<string[]>([]);
|
||||||
|
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => (
|
return () => (
|
||||||
@@ -34,8 +34,8 @@ test("Static appends new items above the dynamic frame", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("Static preserves prior items when new ones are added", async () => {
|
test("Static preserves prior items when new ones are added", async () => {
|
||||||
const logs = ref<string[]>([]);
|
const logs = shallowRef<string[]>([]);
|
||||||
const status = ref("idle");
|
const status = shallowRef("idle");
|
||||||
|
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => (
|
return () => (
|
||||||
@@ -89,7 +89,7 @@ test("Static flush clears the dynamic frame first (non-debug mode)", async () =>
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const items = ref<string[]>([]);
|
const items = shallowRef<string[]>([]);
|
||||||
const App = defineComponent(() => () => (
|
const App = defineComponent(() => () => (
|
||||||
<Box>
|
<Box>
|
||||||
<Static items={items.value}>
|
<Static items={items.value}>
|
||||||
@@ -177,7 +177,7 @@ test.todo(
|
|||||||
);
|
);
|
||||||
|
|
||||||
test("Static items do not add blank lines to the dynamic frame", async () => {
|
test("Static items do not add blank lines to the dynamic frame", async () => {
|
||||||
const items = ref<string[]>([]);
|
const items = shallowRef<string[]>([]);
|
||||||
|
|
||||||
const App = defineComponent(() => () => (
|
const App = defineComponent(() => () => (
|
||||||
<Box flexDirection="column">
|
<Box flexDirection="column">
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { defineComponent, ref } from "vue";
|
import { defineComponent, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Text, useInput, useStdout, type Key } from "@vue-tui/runtime";
|
import { Text, useInput, useStdout, type Key } from "@vue-tui/runtime";
|
||||||
@@ -29,7 +29,7 @@ test("useInput receives arrow keys", async () => {
|
|||||||
|
|
||||||
test("useInput respects isActive ref", async () => {
|
test("useInput respects isActive ref", async () => {
|
||||||
const calls: string[] = [];
|
const calls: string[] = [];
|
||||||
const active = ref(false);
|
const active = shallowRef(false);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
useInput((input) => calls.push(input), { isActive: active });
|
useInput((input) => calls.push(input), { isActive: active });
|
||||||
return () => <Text>x</Text>;
|
return () => <Text>x</Text>;
|
||||||
@@ -192,7 +192,7 @@ test("useInput - ignore input if not active (isActive: false)", async () => {
|
|||||||
|
|
||||||
test("useInput - ignore input if not active (isActive ref toggled)", async () => {
|
test("useInput - ignore input if not active (isActive ref toggled)", async () => {
|
||||||
const calls: string[] = [];
|
const calls: string[] = [];
|
||||||
const active = ref(false);
|
const active = shallowRef(false);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
useInput((input) => calls.push(input), { isActive: active });
|
useInput((input) => calls.push(input), { isActive: active });
|
||||||
return () => <Text>x</Text>;
|
return () => <Text>x</Text>;
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { defineComponent, ref } from "vue";
|
import { defineComponent, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text, useInput } from "@vue-tui/runtime";
|
import { Box, Text, useInput } from "@vue-tui/runtime";
|
||||||
|
|
||||||
test("counter responds to + and - keys", async () => {
|
test("counter responds to + and - keys", async () => {
|
||||||
const Counter = defineComponent(() => {
|
const Counter = defineComponent(() => {
|
||||||
const count = ref(0);
|
const count = shallowRef(0);
|
||||||
useInput((input) => {
|
useInput((input) => {
|
||||||
if (input === "+") count.value++;
|
if (input === "+") count.value++;
|
||||||
if (input === "-") count.value--;
|
if (input === "-") count.value--;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { defineComponent, nextTick, ref, shallowRef } from "vue";
|
import { defineComponent, nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text, useFocus, useFocusManager } from "@vue-tui/runtime";
|
import { Box, Text, useFocus, useFocusManager } from "@vue-tui/runtime";
|
||||||
@@ -41,7 +41,7 @@ test("focus(id) programmatically focuses another component", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("isActive=false prevents component from receiving focus", async () => {
|
test("isActive=false prevents component from receiving focus", async () => {
|
||||||
const active = ref(false);
|
const active = shallowRef(false);
|
||||||
|
|
||||||
const Item = defineComponent({
|
const Item = defineComponent({
|
||||||
props: { id: { type: String, required: true } },
|
props: { id: { type: String, required: true } },
|
||||||
@@ -76,7 +76,7 @@ test("isActive=false prevents component from receiving focus", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("autoFocus + isActive=false does not focus at mount", async () => {
|
test("autoFocus + isActive=false does not focus at mount", async () => {
|
||||||
const active = ref(false);
|
const active = shallowRef(false);
|
||||||
|
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
const { isFocused } = useFocus({ id: "item", autoFocus: true, isActive: active });
|
const { isFocused } = useFocus({ id: "item", autoFocus: true, isActive: active });
|
||||||
@@ -93,7 +93,7 @@ test("autoFocus + isActive=false does not focus at mount", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("flipping isActive to false on focused item blurs it", async () => {
|
test("flipping isActive to false on focused item blurs it", async () => {
|
||||||
const active = ref(true);
|
const active = shallowRef(true);
|
||||||
|
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
const { isFocused } = useFocus({ id: "item", autoFocus: true, isActive: active });
|
const { isFocused } = useFocus({ id: "item", autoFocus: true, isActive: active });
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { defineComponent, nextTick, ref } from "vue";
|
import { defineComponent, nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Text, useFocus } from "@vue-tui/runtime";
|
import { Text, useFocus } from "@vue-tui/runtime";
|
||||||
|
|
||||||
test("swapping focusable components never disables raw mode", async () => {
|
test("swapping focusable components never disables raw mode", async () => {
|
||||||
const showA = ref(true);
|
const showA = shallowRef(true);
|
||||||
|
|
||||||
const Item = defineComponent(() => {
|
const Item = defineComponent(() => {
|
||||||
useFocus();
|
useFocus();
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { defineComponent, nextTick, ref } from "vue";
|
import { defineComponent, nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Text, useExit } from "@vue-tui/runtime";
|
import { Text, useExit } from "@vue-tui/runtime";
|
||||||
@@ -11,7 +11,7 @@ test("setup() throw rejects render()", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("render-time throw does not prevent unmount", async () => {
|
test("render-time throw does not prevent unmount", async () => {
|
||||||
const trigger = ref(false);
|
const trigger = shallowRef(false);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => {
|
return () => {
|
||||||
if (trigger.value) throw new Error("render boom");
|
if (trigger.value) throw new Error("render boom");
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { defineComponent, nextTick, ref } from "vue";
|
import { defineComponent, nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text, useInput } from "@vue-tui/runtime";
|
import { Box, Text, useInput } from "@vue-tui/runtime";
|
||||||
@@ -33,7 +33,7 @@ test("100 render/unmount cycles leak zero yoga nodes", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("raw mode stays on when one of two useInput components unmounts", async () => {
|
test("raw mode stays on when one of two useInput components unmounts", async () => {
|
||||||
const showB = ref(true);
|
const showB = shallowRef(true);
|
||||||
|
|
||||||
const Listener = defineComponent(() => {
|
const Listener = defineComponent(() => {
|
||||||
useInput(() => {});
|
useInput(() => {});
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { defineComponent, ref } from "vue";
|
import { defineComponent, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text, useInput } from "@vue-tui/runtime";
|
import { Box, Text, useInput } from "@vue-tui/runtime";
|
||||||
|
|
||||||
test("README quickstart code runs to a Count: 0 frame", async () => {
|
test("README quickstart code runs to a Count: 0 frame", async () => {
|
||||||
const Counter = defineComponent(() => {
|
const Counter = defineComponent(() => {
|
||||||
const count = ref(0);
|
const count = shallowRef(0);
|
||||||
useInput((input) => {
|
useInput((input) => {
|
||||||
if (input === "+") count.value++;
|
if (input === "+") count.value++;
|
||||||
if (input === "-") count.value--;
|
if (input === "-") count.value--;
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { defineComponent, nextTick, ref, watch } from "vue";
|
import { defineComponent, nextTick, shallowRef, watch } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "@vue-tui/testing";
|
import { render } from "@vue-tui/testing";
|
||||||
import { Box, Text } from "@vue-tui/runtime";
|
import { Box, Text } from "@vue-tui/runtime";
|
||||||
|
|
||||||
test("multiple mutations in one tick produce at most 1 new frame", async () => {
|
test("multiple mutations in one tick produce at most 1 new frame", async () => {
|
||||||
const count = ref(0);
|
const count = shallowRef(0);
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
return () => <Text>{String(count.value)}</Text>;
|
return () => <Text>{String(count.value)}</Text>;
|
||||||
});
|
});
|
||||||
@@ -23,7 +23,7 @@ test("multiple mutations in one tick produce at most 1 new frame", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("post-flush watch sees the same value the commit paints", async () => {
|
test("post-flush watch sees the same value the commit paints", async () => {
|
||||||
const count = ref(0);
|
const count = shallowRef(0);
|
||||||
let observed = 0;
|
let observed = 0;
|
||||||
|
|
||||||
const App = defineComponent(() => {
|
const App = defineComponent(() => {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { nextTick, ref } from "vue";
|
import { nextTick, shallowRef } from "vue";
|
||||||
import { expect, test } from "vite-plus/test";
|
import { expect, test } from "vite-plus/test";
|
||||||
import { render } from "../src/index.ts";
|
import { render } from "../src/index.ts";
|
||||||
import { Text } from "@vue-tui/runtime";
|
import { Text } from "@vue-tui/runtime";
|
||||||
@@ -9,7 +9,7 @@ test("lastFrame captures rendered output", async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test("frames accumulate on reactive updates", async () => {
|
test("frames accumulate on reactive updates", async () => {
|
||||||
const message = ref("first");
|
const message = shallowRef("first");
|
||||||
const { lastFrame, frames } = await render(() => <Text>{message.value}</Text>);
|
const { lastFrame, frames } = await render(() => <Text>{message.value}</Text>);
|
||||||
const initialCount = frames.length;
|
const initialCount = frames.length;
|
||||||
expect(lastFrame()).toContain("first");
|
expect(lastFrame()).toContain("first");
|
||||||
|
|||||||
Reference in New Issue
Block a user