diff --git a/packages/core/components/FileList/test/LazilyRenderedThumbnail.test.tsx b/packages/core/components/FileList/test/LazilyRenderedThumbnail.test.tsx
new file mode 100644
index 000000000..e65917d40
--- /dev/null
+++ b/packages/core/components/FileList/test/LazilyRenderedThumbnail.test.tsx
@@ -0,0 +1,202 @@
+import { configureMockStore, mergeState } from "@aics/redux-utils";
+import { render } from "@testing-library/react";
+import { expect } from "chai";
+import * as React from "react";
+import { Provider } from "react-redux";
+import * as sinon from "sinon";
+
+import LazilyRenderedThumbnail from "../LazilyRenderedThumbnail";
+import { initialState } from "../../../state";
+import FileSet from "../../../entity/FileSet";
+
+describe("", () => {
+ function makeItemData() {
+ const fileSet = new FileSet();
+ sinon.stub(fileSet, "getFileByIndex").callsFake((index) => {
+ if (index === 0) {
+ return {
+ annotations: [],
+ file_id: "abc1230",
+ file_name: "my_image0.czi",
+ file_path: "some/path/to/my_image0.czi",
+ file_size: 1,
+ thumbnail: "some/path/to/my_image0.jpg",
+ uploaded: new Date().toISOString(),
+ };
+ }
+ if (index === 9) {
+ return {
+ annotations: [],
+ file_id: "abc1239",
+ file_name: "my_image9.jpg",
+ file_path: "some/path/to/my_image9.jpg",
+ file_size: 1,
+ thumbnail: "",
+ uploaded: new Date().toISOString(),
+ };
+ }
+ if (index === 25) {
+ return {
+ annotations: [],
+ file_id: "abc12325",
+ file_name: "my_image25.czi",
+ file_path: "some/path/to/my_image25.czi",
+ file_size: 1,
+ thumbnail: "",
+ uploaded: new Date().toISOString(),
+ };
+ }
+ });
+
+ return {
+ fileSet,
+ measuredWidth: 600,
+ itemCount: 100,
+ onContextMenu: sinon.spy(),
+ onSelect: sinon.spy(),
+ };
+ }
+
+ it("renders thumbnail when file has one specified", () => {
+ // Arrange
+ const state = mergeState(initialState, {});
+ const { store } = configureMockStore({ state });
+
+ // Act
+ const { getByText, getByRole } = render(
+
+
+
+ );
+
+ // Assert
+ // Also checking for proper row/col indexing
+ const thumbnail = getByRole("img");
+ expect(thumbnail.getAttribute("src")).to.include("some/path/to/my_image0.jpg");
+ expect(getByText("my_image0.czi")).to.not.equal(null);
+ });
+
+ it("renders file as thumbnail if file is renderable type", () => {
+ // Arrange
+ const { store } = configureMockStore({ state: initialState });
+
+ // Act
+ const { getByText, getByRole } = render(
+
+
+
+ );
+
+ // Assert
+ // Also confirms proper row/col indexing
+ const thumbnail = getByRole("img");
+ expect(thumbnail.getAttribute("src")).to.include("some/path/to/my_image9.jpg");
+ expect(getByText("my_image9.jpg")).to.not.equal(null);
+ });
+
+ it("renders svg as thumbnail if file has no renderable thumbnail", () => {
+ // Arrange
+ const { store } = configureMockStore({ state: initialState });
+
+ // Act
+ const { getByText, queryByRole } = render(
+
+
+
+ );
+
+ // Assert
+ // Also confirms proper row/col indexing
+ expect(".no-thumbnail").to.exist;
+ expect(".svg").to.exist;
+ expect(queryByRole("img")).not.to.exist;
+ expect(getByText("my_image25.czi")).to.not.equal(null);
+ });
+
+ it("renders a loading indicator when data is not available", () => {
+ // Arrange
+ const { store } = configureMockStore({ state: initialState });
+
+ // Act
+ const { queryByText } = render(
+
+
+
+ );
+
+ // Assert
+ expect(queryByText("my_image")).to.equal(null);
+ expect(queryByText("Loading...")).to.not.equal(null);
+ });
+
+ // We want to be able to render empty cells past the total item count in order to fill the grid
+ it("renders an empty cell if the index is past the total item count", () => {
+ // Arrange
+ const { store } = configureMockStore({ state: initialState });
+
+ // Act
+ const { queryByText } = render(
+
+
+
+ );
+
+ // Assert
+ expect(queryByText("my_image")).to.equal(null);
+ expect(queryByText("Loading...")).to.equal(null);
+ });
+
+ it("renders and indexes correctly with different number of columns", () => {
+ // Arrange
+ const state = {
+ ...initialState,
+ selection: {
+ ...initialState.selection,
+ fileGridColumnCount: 10,
+ },
+ };
+ const { store } = configureMockStore({ state });
+
+ // Act
+ const { getByText } = render(
+
+
+
+ );
+
+ // Assert
+ expect(".no-thumbnail").to.exist;
+ expect(".svg").to.exist;
+ expect(getByText("my_image25.czi")).to.not.equal(null);
+ });
+});