From 2e187b96dfced9b6976768da96cc7a43dfe60c4d Mon Sep 17 00:00:00 2001 From: Damian Tarnawski Date: Mon, 9 Sep 2024 22:55:34 +0200 Subject: [PATCH 1/2] Attempt making virtual tests more stable by not using `@solidjs/testing-library` --- packages/virtual/test/helpers.tsx | 11 -- packages/virtual/test/index.test.tsx | 254 +++++++++++++++----------- packages/virtual/test/server.test.tsx | 6 +- 3 files changed, 148 insertions(+), 123 deletions(-) delete mode 100644 packages/virtual/test/helpers.tsx diff --git a/packages/virtual/test/helpers.tsx b/packages/virtual/test/helpers.tsx deleted file mode 100644 index 46728ea18..000000000 --- a/packages/virtual/test/helpers.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from "solid-js"; - -export const TEST_LIST = new Array(1_000).fill(undefined).map((_, i) => i); - -type VirtualListItemProps = { - item: number; -}; - -export const VirtualListItem: Component = props => ( -
{props.item}
-); diff --git a/packages/virtual/test/index.test.tsx b/packages/virtual/test/index.test.tsx index 6f29f6c5e..7979a9ebe 100644 --- a/packages/virtual/test/index.test.tsx +++ b/packages/virtual/test/index.test.tsx @@ -1,159 +1,195 @@ -import { describe, test, expect, beforeEach } from "vitest"; -import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library"; +import { describe, test, expect } from "vitest"; import { VirtualList } from "../src/index.jsx"; +import { render } from "solid-js/web"; -import { TEST_LIST, VirtualListItem } from "./helpers.jsx"; +const TEST_LIST = Array.from({length: 1000}, (_, i) => i) -describe("VirtualList", () => { - const SELECTOR_CLASS_NAME = "scroll-container-selector"; +const SELECTOR_CLASS_NAME = "scroll-container-selector" - const createScrollList = (container: HTMLElement) => (distance: number) => { - const scrollContainer = container.querySelector(`.${SELECTOR_CLASS_NAME}`); - expect(scrollContainer).not.toBeNull(); +const SCROLL_EVENT = new Event('scroll') - fireEvent.scroll(scrollContainer!, { - target: { scrollTop: scrollContainer!.scrollTop + distance }, - }); - }; +let root = document.createElement("div") - beforeEach(() => { - cleanup(); - }); +function get_scroll_continer() { + const scroll_container = root.querySelector("."+SELECTOR_CLASS_NAME) + if (scroll_container == null) { + throw "."+SELECTOR_CLASS_NAME+" was not found" + } + return scroll_container +} + +describe("VirtualList", () => { test("renders a subset of the items", () => { - render(() => ( + + let root = document.createElement("div") + const dispose = render(() => ( - {item => } + {item =>
} - )); + ), 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(); - expect(screen.getByText(0)).not.toBeNull(); - expect(screen.getByText(1)).not.toBeNull(); - expect(screen.getByText(2)).not.toBeNull(); - expect(screen.queryByText(3)).toBeNull(); + dispose() }); test("scrolling renders the correct subset of the items", () => { - const { container } = render(() => ( + + const dispose = render(() => ( - {item => } + {item =>
} - )); - - const scrollList = createScrollList(container); - - scrollList(0); - expect(screen.getByText(0)).not.toBeNull(); - expect(screen.getByText(1)).not.toBeNull(); - expect(screen.getByText(2)).not.toBeNull(); - expect(screen.queryByText(3)).toBeNull(); - - scrollList(10); - expect(screen.getByText(0)).not.toBeNull(); - expect(screen.getByText(1)).not.toBeNull(); - expect(screen.getByText(2)).not.toBeNull(); - expect(screen.getByText(3)).not.toBeNull(); - expect(screen.queryByText(4)).toBeNull(); - - scrollList(10); - expect(screen.queryByText(0)).toBeNull(); - expect(screen.getByText(1)).not.toBeNull(); - expect(screen.getByText(2)).not.toBeNull(); - expect(screen.getByText(3)).not.toBeNull(); - expect(screen.getByText(4)).not.toBeNull(); - expect(screen.queryByText(5)).toBeNull(); - - scrollList(-10); - expect(screen.getByText(0)).not.toBeNull(); - expect(screen.getByText(1)).not.toBeNull(); - expect(screen.getByText(2)).not.toBeNull(); - expect(screen.getByText(3)).not.toBeNull(); - expect(screen.queryByText(4)).toBeNull(); - - scrollList(-10); - expect(screen.getByText(0)).not.toBeNull(); - expect(screen.getByText(1)).not.toBeNull(); - expect(screen.getByText(2)).not.toBeNull(); - expect(screen.queryByText(3)).toBeNull(); + ), 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) + + 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) + + expect(root.querySelector("#item-0")).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")).not.toBeNull(); + expect(root.querySelector("#item-5")).toBeNull(); + + 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) + + 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() }); test("renders the correct subset of the items for the end of the list", () => { - const { container } = render(() => ( + + const dispose = render(() => ( - {item => } + {item =>
} - )); + ), root) + const scroll_container = get_scroll_continer() + + scroll_container.scrollTop += 9_980 + scroll_container.dispatchEvent(SCROLL_EVENT) - createScrollList(container)(9_980); + 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(); - expect(screen.queryByText(996)).toBeNull(); - expect(screen.getByText(997)).not.toBeNull(); - expect(screen.getByText(998)).not.toBeNull(); - expect(screen.getByText(999)).not.toBeNull(); + dispose() }); test("renders `overScan` rows above and below the visible rendered items", () => { - const { container } = render(() => ( - ( + - {item => } + {item =>
} - )); - - createScrollList(container)(100); - - expect(screen.queryByText(7)).toBeNull(); - expect(screen.getByText(8)).not.toBeNull(); - expect(screen.getByText(9)).not.toBeNull(); - expect(screen.getByText(10)).not.toBeNull(); - expect(screen.getByText(11)).not.toBeNull(); - expect(screen.getByText(12)).not.toBeNull(); - expect(screen.getByText(13)).not.toBeNull(); - expect(screen.queryByText(14)).toBeNull(); + ), 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(); + expect(root.querySelector("#item-9")).not.toBeNull(); + expect(root.querySelector("#item-10")).not.toBeNull(); + expect(root.querySelector("#item-11")).not.toBeNull(); + expect(root.querySelector("#item-12")).not.toBeNull(); + expect(root.querySelector("#item-13")).not.toBeNull(); + expect(root.querySelector("#item-14")).toBeNull(); + + dispose() }); test("overscanCount defaults to 1 if undefined", () => { - const { container } = render(() => ( + + const dispose = render(() => ( - {item => } + {item =>
} - )); - - createScrollList(container)(100); - - expect(screen.queryByText(8)).toBeNull(); - expect(screen.getByText(9)).not.toBeNull(); - expect(screen.getByText(10)).not.toBeNull(); - expect(screen.getByText(11)).not.toBeNull(); - expect(screen.getByText(12)).not.toBeNull(); - expect(screen.queryByText(13)).toBeNull(); + ), 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(); + expect(root.querySelector("#item-10")).not.toBeNull(); + expect(root.querySelector("#item-11")).not.toBeNull(); + expect(root.querySelector("#item-12")).not.toBeNull(); + expect(root.querySelector("#item-13")).toBeNull(); + + dispose() }); test("overscanCount defaults to 1 if set to zero", () => { - const { container } = render(() => ( - ( + - {item => } + {item =>
} - )); - - createScrollList(container)(100); - - expect(screen.queryByText(8)).toBeNull(); - expect(screen.getByText(9)).not.toBeNull(); - expect(screen.getByText(10)).not.toBeNull(); - expect(screen.getByText(11)).not.toBeNull(); - expect(screen.getByText(12)).not.toBeNull(); - expect(screen.queryByText(13)).toBeNull(); + ), 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(); + expect(root.querySelector("#item-10")).not.toBeNull(); + expect(root.querySelector("#item-11")).not.toBeNull(); + expect(root.querySelector("#item-12")).not.toBeNull(); + expect(root.querySelector("#item-13")).toBeNull(); + + dispose() }); }); diff --git a/packages/virtual/test/server.test.tsx b/packages/virtual/test/server.test.tsx index e49a52ec6..87240040f 100644 --- a/packages/virtual/test/server.test.tsx +++ b/packages/virtual/test/server.test.tsx @@ -1,8 +1,8 @@ import { describe, test, expect } from "vitest"; +import { renderToString } from "solid-js/web"; import { VirtualList } from "../src/index.jsx"; -import { TEST_LIST, VirtualListItem } from "./helpers.jsx"; -import { renderToString } from "solid-js/web"; +const TEST_LIST = Array.from({length: 1000}, (_, i) => i) describe("VirtualList", () => { test("doesn't break in SSR", () => { @@ -14,7 +14,7 @@ describe("VirtualList", () => { rowHeight={10} class="classString" > - {item => } + {item =>
{item}
} )); From 057b6557e7a3e479d0b8e8b3578d01987c9ec3d0 Mon Sep 17 00:00:00 2001 From: thetarnav Date: Mon, 9 Sep 2024 20:56:33 +0000 Subject: [PATCH 2/2] Format --- packages/virtual/test/index.test.tsx | 191 ++++++++++++++------------ packages/virtual/test/server.test.tsx | 2 +- 2 files changed, 102 insertions(+), 91 deletions(-) diff --git a/packages/virtual/test/index.test.tsx b/packages/virtual/test/index.test.tsx index 7979a9ebe..67f0aa4c0 100644 --- a/packages/virtual/test/index.test.tsx +++ b/packages/virtual/test/index.test.tsx @@ -2,59 +2,62 @@ 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(() => ( - - {item =>
} - - ), root) + let root = document.createElement("div"); + const dispose = render( + () => ( + + {item =>
} + + ), + 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(() => ( - - {item =>
} - - ), root) - const scroll_container = get_scroll_continer() - - scroll_container.dispatchEvent(SCROLL_EVENT) + const dispose = render( + () => ( + + {item =>
} + + ), + 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(); @@ -62,8 +65,8 @@ describe("VirtualList", () => { 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(); @@ -72,8 +75,8 @@ 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(); @@ -81,28 +84,30 @@ describe("VirtualList", () => { 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(() => ( - - {item =>
} - - ), root) - const scroll_container = get_scroll_continer() - - scroll_container.scrollTop += 9_980 - scroll_container.dispatchEvent(SCROLL_EVENT) + const dispose = render( + () => ( + + {item =>
} + + ), + 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(); @@ -110,26 +115,28 @@ describe("VirtualList", () => { 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(() => ( - - {item =>
} - - ), root) - const scroll_container = get_scroll_continer() - - scroll_container.scrollTop += 100 - scroll_container.dispatchEvent(SCROLL_EVENT) + const dispose = render( + () => ( + + {item =>
} + + ), + 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(); @@ -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(() => ( - - {item =>
} - - ), root) - const scroll_container = get_scroll_continer() - - scroll_container.scrollTop += 100 - scroll_container.dispatchEvent(SCROLL_EVENT) + const dispose = render( + () => ( + + {item =>
} + + ), + 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(); @@ -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(() => ( - - {item =>
} - - ), root) - const scroll_container = get_scroll_continer() - - scroll_container.scrollTop += 100 - scroll_container.dispatchEvent(SCROLL_EVENT) + const dispose = render( + () => ( + + {item =>
} + + ), + 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(); @@ -190,6 +201,6 @@ describe("VirtualList", () => { expect(root.querySelector("#item-12")).not.toBeNull(); expect(root.querySelector("#item-13")).toBeNull(); - dispose() + dispose(); }); }); diff --git a/packages/virtual/test/server.test.tsx b/packages/virtual/test/server.test.tsx index 87240040f..903be5a97 100644 --- a/packages/virtual/test/server.test.tsx +++ b/packages/virtual/test/server.test.tsx @@ -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", () => {