97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
// @vitest-environment jsdom
|
|
|
|
import { flushPromises, mount } from "@vue/test-utils";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import BuefyTree from "@/components/buefy/tree/BuefyTree.vue";
|
|
|
|
vi.mock("buefy", () => ({
|
|
BCheckbox: {
|
|
name: "BCheckbox",
|
|
props: {
|
|
modelValue: Boolean,
|
|
indeterminate: Boolean,
|
|
disabled: Boolean,
|
|
},
|
|
emits: ["update:modelValue"],
|
|
template: `
|
|
<button
|
|
class="b-checkbox-stub"
|
|
type="button"
|
|
:disabled="disabled"
|
|
:data-checked="modelValue"
|
|
:data-indeterminate="indeterminate"
|
|
@click="$emit('update:modelValue', !modelValue)"
|
|
></button>
|
|
`,
|
|
},
|
|
}));
|
|
|
|
describe("BuefyTree checkbox selection", () => {
|
|
it("uses non-selectable checkable categories as lazy select-all branch controllers", async () => {
|
|
const load = vi.fn(async () => [
|
|
{ id: "order:70128", label: "Ordre #70128", selectable: true, isLeaf: true },
|
|
{ id: "order:70129", label: "Ordre #70129", selectable: true, isLeaf: true },
|
|
]);
|
|
const wrapper = mount(BuefyTree, {
|
|
props: {
|
|
data: [
|
|
{
|
|
id: "category:orders",
|
|
label: "Orders",
|
|
selectable: false,
|
|
checkable: true,
|
|
isLeaf: false,
|
|
},
|
|
],
|
|
selectionMode: "checkbox",
|
|
lazy: true,
|
|
load,
|
|
},
|
|
});
|
|
|
|
await wrapper.find(".b-checkbox-stub").trigger("click");
|
|
await flushPromises();
|
|
|
|
expect(load).toHaveBeenCalledTimes(1);
|
|
expect(wrapper.emitted("update:checkedKeys")?.at(-1)?.[0]).toEqual(["order:70128", "order:70129"]);
|
|
|
|
await wrapper.find(".b-checkbox-stub").trigger("click");
|
|
await flushPromises();
|
|
|
|
expect(load).toHaveBeenCalledTimes(1);
|
|
expect(wrapper.emitted("update:checkedKeys")?.at(-1)?.[0]).toEqual([]);
|
|
});
|
|
|
|
it("renders progressive batches while selecting every logical child", async () => {
|
|
const children = Array.from({ length: 1000 }, (_, index) => ({
|
|
id: `order:${index + 1}`,
|
|
label: `Order ${index + 1}`,
|
|
selectable: true,
|
|
isLeaf: true,
|
|
}));
|
|
const wrapper = mount(BuefyTree, {
|
|
props: {
|
|
data: [{ id: "category:orders", label: "Orders", selectable: false, checkable: true, isLeaf: false }],
|
|
selectionMode: "checkbox",
|
|
lazy: true,
|
|
progressiveBatchSize: 50,
|
|
loadMoreLabel: "Show {count} more",
|
|
load: vi.fn(async () => children),
|
|
},
|
|
});
|
|
|
|
await wrapper.find(".b-tree-node-toggle").trigger("click");
|
|
await flushPromises();
|
|
expect(wrapper.findAll('[data-node-key^="order:"]')).toHaveLength(50);
|
|
expect(wrapper.get(".b-tree-load-more__button").text()).toContain("Show 50 more");
|
|
|
|
await wrapper.get(".b-tree-load-more__button").trigger("click");
|
|
expect(wrapper.findAll('[data-node-key^="order:"]')).toHaveLength(100);
|
|
|
|
await wrapper.find(".b-checkbox-stub").trigger("click");
|
|
await flushPromises();
|
|
expect(wrapper.emitted("update:checkedKeys")?.at(-1)?.[0]).toHaveLength(1000);
|
|
expect(wrapper.findAll('[data-node-key^="order:"]')).toHaveLength(100);
|
|
});
|
|
});
|