Skip to content

Commit

Permalink
Format
Browse files Browse the repository at this point in the history
  • Loading branch information
@thetarnav @github-actions
thetarnav authored and github-actions[bot] committed Sep 9, 2024
1 parent 2e187b9 commit 057b655
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 91 deletions.
191 changes: 101 additions & 90 deletions packages/virtual/test/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,71 @@ import { describe, test, expect } from "vitest";
import { VirtualList } from "../src/index.jsx";
import { render } from "solid-js/web";

const TEST_LIST = Array.from({length: 1000}, (_, i) => i)
const TEST_LIST = Array.from({ length: 1000 }, (_, i) => i);

const SELECTOR_CLASS_NAME = "scroll-container-selector"
const SELECTOR_CLASS_NAME = "scroll-container-selector";

const SCROLL_EVENT = new Event('scroll')
const SCROLL_EVENT = new Event("scroll");

let root = document.createElement("div")
let root = document.createElement("div");

function get_scroll_continer() {
const scroll_container = root.querySelector("."+SELECTOR_CLASS_NAME)
const scroll_container = root.querySelector("." + SELECTOR_CLASS_NAME);
if (scroll_container == null) {
throw "."+SELECTOR_CLASS_NAME+" was not found"
throw "." + SELECTOR_CLASS_NAME + " was not found";
}
return scroll_container
return scroll_container;
}

describe("VirtualList", () => {

test("renders a subset of the items", () => {

let root = document.createElement("div")
const dispose = render(() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10}>
{item => <div id={"item-"+item} style={{ height: "100px" }}/>}
</VirtualList>
), root)
let root = document.createElement("div");
const dispose = render(
() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10}>
{item => <div id={"item-" + item} style={{ height: "100px" }} />}
</VirtualList>
),
root,
);

expect(root.querySelector("#item-0")).not.toBeNull();
expect(root.querySelector("#item-1")).not.toBeNull();
expect(root.querySelector("#item-2")).not.toBeNull();
expect(root.querySelector("#item-3")).toBeNull();

dispose()
dispose();
});

test("scrolling renders the correct subset of the items", () => {

const dispose = render(() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10} class={SELECTOR_CLASS_NAME}>
{item => <div id={"item-"+item} style={{ height: "100px" }}/>}
</VirtualList>
), root)
const scroll_container = get_scroll_continer()

scroll_container.dispatchEvent(SCROLL_EVENT)
const dispose = render(
() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10} class={SELECTOR_CLASS_NAME}>
{item => <div id={"item-" + item} style={{ height: "100px" }} />}
</VirtualList>
),
root,
);
const scroll_container = get_scroll_continer();

scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-0")).not.toBeNull();
expect(root.querySelector("#item-1")).not.toBeNull();
expect(root.querySelector("#item-2")).not.toBeNull();
expect(root.querySelector("#item-3")).toBeNull();

scroll_container.scrollTop += 10
scroll_container.dispatchEvent(SCROLL_EVENT)
scroll_container.scrollTop += 10;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-0")).not.toBeNull();
expect(root.querySelector("#item-1")).not.toBeNull();
expect(root.querySelector("#item-2")).not.toBeNull();
expect(root.querySelector("#item-3")).not.toBeNull();
expect(root.querySelector("#item-4")).toBeNull();

scroll_container.scrollTop += 10
scroll_container.dispatchEvent(SCROLL_EVENT)
scroll_container.scrollTop += 10;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-0")).toBeNull();
expect(root.querySelector("#item-1")).not.toBeNull();
Expand All @@ -72,64 +75,68 @@ describe("VirtualList", () => {
expect(root.querySelector("#item-4")).not.toBeNull();
expect(root.querySelector("#item-5")).toBeNull();

scroll_container.scrollTop -= 10
scroll_container.dispatchEvent(SCROLL_EVENT)
scroll_container.scrollTop -= 10;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-0")).not.toBeNull();
expect(root.querySelector("#item-1")).not.toBeNull();
expect(root.querySelector("#item-2")).not.toBeNull();
expect(root.querySelector("#item-3")).not.toBeNull();
expect(root.querySelector("#item-4")).toBeNull();

scroll_container.scrollTop -= 10
scroll_container.dispatchEvent(SCROLL_EVENT)
scroll_container.scrollTop -= 10;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-0")).not.toBeNull();
expect(root.querySelector("#item-1")).not.toBeNull();
expect(root.querySelector("#item-2")).not.toBeNull();
expect(root.querySelector("#item-3")).toBeNull();

dispose()
dispose();
});

test("renders the correct subset of the items for the end of the list", () => {

const dispose = render(() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10} class={SELECTOR_CLASS_NAME}>
{item => <div id={"item-"+item} style={{ height: "100px" }}/>}
</VirtualList>
), root)
const scroll_container = get_scroll_continer()

scroll_container.scrollTop += 9_980
scroll_container.dispatchEvent(SCROLL_EVENT)
const dispose = render(
() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10} class={SELECTOR_CLASS_NAME}>
{item => <div id={"item-" + item} style={{ height: "100px" }} />}
</VirtualList>
),
root,
);
const scroll_container = get_scroll_continer();

scroll_container.scrollTop += 9_980;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-996")).toBeNull();
expect(root.querySelector("#item-997")).not.toBeNull();
expect(root.querySelector("#item-998")).not.toBeNull();
expect(root.querySelector("#item-999")).not.toBeNull();
expect(root.querySelector("#item-1000")).toBeNull();

dispose()
dispose();
});

test("renders `overScan` rows above and below the visible rendered items", () => {

const dispose = render(() => (
<VirtualList
each={TEST_LIST}
rootHeight={20}
rowHeight={10}
overscanCount={2}
class={SELECTOR_CLASS_NAME}
>
{item => <div id={"item-"+item} style={{ height: "100px" }}/>}
</VirtualList>
), root)
const scroll_container = get_scroll_continer()

scroll_container.scrollTop += 100
scroll_container.dispatchEvent(SCROLL_EVENT)
const dispose = render(
() => (
<VirtualList
each={TEST_LIST}
rootHeight={20}
rowHeight={10}
overscanCount={2}
class={SELECTOR_CLASS_NAME}
>
{item => <div id={"item-" + item} style={{ height: "100px" }} />}
</VirtualList>
),
root,
);
const scroll_container = get_scroll_continer();

scroll_container.scrollTop += 100;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-7")).toBeNull();
expect(root.querySelector("#item-8")).not.toBeNull();
Expand All @@ -140,20 +147,22 @@ describe("VirtualList", () => {
expect(root.querySelector("#item-13")).not.toBeNull();
expect(root.querySelector("#item-14")).toBeNull();

dispose()
dispose();
});

test("overscanCount defaults to 1 if undefined", () => {

const dispose = render(() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10} class={SELECTOR_CLASS_NAME}>
{item => <div id={"item-"+item} style={{ height: "100px" }}/>}
</VirtualList>
), root)
const scroll_container = get_scroll_continer()

scroll_container.scrollTop += 100
scroll_container.dispatchEvent(SCROLL_EVENT)
const dispose = render(
() => (
<VirtualList each={TEST_LIST} rootHeight={20} rowHeight={10} class={SELECTOR_CLASS_NAME}>
{item => <div id={"item-" + item} style={{ height: "100px" }} />}
</VirtualList>
),
root,
);
const scroll_container = get_scroll_continer();

scroll_container.scrollTop += 100;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-8")).toBeNull();
expect(root.querySelector("#item-9")).not.toBeNull();
Expand All @@ -162,26 +171,28 @@ describe("VirtualList", () => {
expect(root.querySelector("#item-12")).not.toBeNull();
expect(root.querySelector("#item-13")).toBeNull();

dispose()
dispose();
});

test("overscanCount defaults to 1 if set to zero", () => {

const dispose = render(() => (
<VirtualList
each={TEST_LIST}
rootHeight={20}
rowHeight={10}
overscanCount={0}
class={SELECTOR_CLASS_NAME}
>
{item => <div id={"item-"+item} style={{ height: "100px" }}/>}
</VirtualList>
), root)
const scroll_container = get_scroll_continer()

scroll_container.scrollTop += 100
scroll_container.dispatchEvent(SCROLL_EVENT)
const dispose = render(
() => (
<VirtualList
each={TEST_LIST}
rootHeight={20}
rowHeight={10}
overscanCount={0}
class={SELECTOR_CLASS_NAME}
>
{item => <div id={"item-" + item} style={{ height: "100px" }} />}
</VirtualList>
),
root,
);
const scroll_container = get_scroll_continer();

scroll_container.scrollTop += 100;
scroll_container.dispatchEvent(SCROLL_EVENT);

expect(root.querySelector("#item-8")).toBeNull();
expect(root.querySelector("#item-9")).not.toBeNull();
Expand All @@ -190,6 +201,6 @@ describe("VirtualList", () => {
expect(root.querySelector("#item-12")).not.toBeNull();
expect(root.querySelector("#item-13")).toBeNull();

dispose()
dispose();
});
});
2 changes: 1 addition & 1 deletion packages/virtual/test/server.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { describe, test, expect } from "vitest";
import { renderToString } from "solid-js/web";
import { VirtualList } from "../src/index.jsx";

const TEST_LIST = Array.from({length: 1000}, (_, i) => i)
const TEST_LIST = Array.from({ length: 1000 }, (_, i) => i);

describe("VirtualList", () => {
test("doesn't break in SSR", () => {
Expand Down

0 comments on commit 057b655

Please sign in to comment.