diff --git a/src/renderer/components/virtual-list/__snapshots__/virtual-list.test.tsx.snap b/src/renderer/components/virtual-list/__snapshots__/virtual-list.test.tsx.snap new file mode 100644 index 0000000000..93fcd4849a --- /dev/null +++ b/src/renderer/components/virtual-list/__snapshots__/virtual-list.test.tsx.snap @@ -0,0 +1,355 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`VirtualList renders 1`] = ` + +
+
+
+
+
+ some-id-0 +
+
+ some-id-1 +
+
+ some-id-2 +
+
+ some-id-3 +
+
+ some-id-4 +
+
+ some-id-5 +
+
+ some-id-6 +
+
+ some-id-7 +
+
+ some-id-8 +
+
+ some-id-9 +
+
+ some-id-10 +
+
+ some-id-11 +
+
+ some-id-12 +
+
+
+
+
+ +`; + +exports[`VirtualList when non-visable item is selected renders 1`] = ` + +
+
+
+
+
+ some-id-19 +
+
+ some-id-20 +
+
+ some-id-21 +
+
+ some-id-22 +
+
+ some-id-23 +
+
+ some-id-24 +
+
+ some-id-25 +
+
+ some-id-26 +
+
+ some-id-27 +
+
+ some-id-28 +
+
+ some-id-29 +
+
+ some-id-30 +
+
+ some-id-31 +
+
+ some-id-32 +
+
+ some-id-33 +
+
+ some-id-34 +
+
+ some-id-35 +
+
+ some-id-36 +
+
+ some-id-37 +
+
+ some-id-38 +
+
+ some-id-39 +
+
+ some-id-40 +
+
+ some-id-41 +
+
+
+
+
+ +`; + +exports[`VirtualList when visible item is selected renders 1`] = ` + +
+
+
+
+
+ some-id-0 +
+
+ some-id-1 +
+
+ some-id-2 +
+
+ some-id-3 +
+
+ some-id-4 +
+
+ some-id-5 +
+
+ some-id-6 +
+
+ some-id-7 +
+
+ some-id-8 +
+
+ some-id-9 +
+
+ some-id-10 +
+
+ some-id-11 +
+
+ some-id-12 +
+
+
+
+
+ +`; diff --git a/src/renderer/components/virtual-list/virtual-list.test.tsx b/src/renderer/components/virtual-list/virtual-list.test.tsx new file mode 100644 index 0000000000..f9446589f2 --- /dev/null +++ b/src/renderer/components/virtual-list/virtual-list.test.tsx @@ -0,0 +1,81 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import type { RenderResult } from "@testing-library/react"; +import { render } from "@testing-library/react"; +import React from "react"; +import { VirtualList } from "./virtual-list"; + +const generateListOfIdObjects = (count: number) => [...new Array(count)].map((v, index) => ({ + getId() { + return `some-id-${index}`; + }, +})); +const generateListOfRowHeights = (count: number, size: number) => [...new Array(count)].map(() => size); +const renderList = (selectedId?: string) => ( +
{id}
} + /> +); + +describe("VirtualList", () => { + let result: RenderResult; + + beforeEach(() => { + result = render(renderList()); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows the first item", () => { + expect(result.queryByTestId("some-id-0")).toBeInTheDocument(); + }); + + it("shows the second item", () => { + expect(result.queryByTestId("some-id-1")).toBeInTheDocument(); + }); + + it("shows the third item", () => { + expect(result.queryByTestId("some-id-2")).toBeInTheDocument(); + }); + + describe("when non-visable item is selected", () => { + beforeEach(() => { + result.rerender(renderList("some-id-30")); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows selected item", () => { + expect(result.queryByTestId("some-id-30")).toBeInTheDocument(); + }); + + it("does not show the first item", () => { + expect(result.queryByTestId("some-id-0")).not.toBeInTheDocument(); + }); + }); + + describe("when visible item is selected", () => { + beforeEach(() => { + result.rerender(renderList("some-id-2")); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows selected item", () => { + expect(result.queryByTestId("some-id-2")).toBeInTheDocument(); + }); + }); +}); diff --git a/src/renderer/components/virtual-list/virtual-list.tsx b/src/renderer/components/virtual-list/virtual-list.tsx index 1045cc5d22..3f318b5e9f 100644 --- a/src/renderer/components/virtual-list/virtual-list.tsx +++ b/src/renderer/components/virtual-list/virtual-list.tsx @@ -14,7 +14,6 @@ import type { Align, ListChildComponentProps, ListOnScrollProps } from "react-wi import { VariableSizeList } from "react-window"; import { cssNames, noop } from "../../utils"; import type { TableRowProps } from "../table/table-row"; -import debounce from "lodash/debounce"; import isEqual from "lodash/isEqual"; import AutoSizer from "react-virtualized-auto-sizer"; @@ -59,7 +58,7 @@ function VirtualListInner({ const listRef = createRef(); const prevItems = useRef(items); const prevRowHeights = useRef(rowHeights); - const scrollToSelectedItem = useCallback(debounce(() => { + const scrollToSelectedItem = useCallback(() => { if (!selectedItemId) { return; } @@ -71,9 +70,9 @@ function VirtualListInner({ )); if (index >= 0) { - listRef.current?.scrollToItem(index, "start"); + listRef.current?.scrollToItem(index, "smart"); } - }), [selectedItemId, [items]]); + }, [selectedItemId, [items]]); const getItemSize = (index: number) => rowHeights[index]; useImperativeHandle(forwardedRef, () => ({