EPMGCIP-171: Implement UTs for "Home.tsx" component

Author: Dzmitry-Yaniuk

src/components/organisms/ImageGallery/ImageGallery.tsx

@@ -136,6 +136,7 @@ function ImageGallery({ images, isZoomEnabled, displayArrows, onClickImage }: Pr
         infinite={false}
         centerPadding="28px"
         slidesToShow={3}
+        className="image-gallery"
         arrows={displayArrows}
         prevArrow={<ImageGalleryArrow direction={ArrowDirection.Previous} />}
         nextArrow={<ImageGalleryArrow direction={ArrowDirection.Next} />}

src/components/pages/Home/Home.test.tsx

@@ -0,0 +1,56 @@
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+
+import { NextIntlClientProvider } from "next-intl";
+
+import messages from "../../../../messages/en.json";
+
+import Home from "./Home";
+
+import { topLatestExhibits } from "@/mocks/exhibit";
+import { ITopLatestExhibit } from "@/interfaces/ITopLatestExhibit";
+
+jest.mock("@/navigation", () => ({
+  useRouter: jest.fn().mockReturnValue({
+    replace: jest.fn(),
+  }),
+}));
+
+jest.mock("yet-another-react-lightbox", () => jest.fn());
+jest.mock("yet-another-react-lightbox/plugins/zoom", () => ({}));
+
+describe("Home component", () => {
+  const renderComponent = (exhibits: ITopLatestExhibit[]) =>
+    render(
+      <NextIntlClientProvider locale="en" messages={messages}>
+        <Home exhibits={exhibits} />
+      </NextIntlClientProvider>,
+    );
+
+  it("should render component", () => {
+    const { getByText } = renderComponent(topLatestExhibits);
+
+    expect(getByText("Welcome to our official webpage"));
+  });
+
+  it("should render component with image gallery", () => {
+    const { container } = renderComponent(topLatestExhibits);
+
+    const imageGalleryElement = container.querySelector(".image-gallery");
+
+    expect(imageGalleryElement).toBeInTheDocument();
+  });
+
+  it("should not render component with image gallery if no images are discovered", () => {
+    const exhibits = topLatestExhibits.map((exhibit) => ({
+      ...exhibit,
+      imagesCollection: { items: [] },
+    }));
+
+    const { container } = renderComponent(exhibits);
+
+    const imageGalleryElement = container.querySelector(".image-gallery");
+
+    expect(imageGalleryElement).toBeNull();
+  });
+});

src/components/pages/Home/Home.tsx

@@ -23,14 +23,16 @@ export default function Home(props: Props): React.ReactElement {
 
   const images: IImageGalleryImage[] = useMemo(
     () =>
-      props.exhibits.map((exhibit) => {
-        const firstImageItem = exhibit.imagesCollection.items[0];
+      props.exhibits
+        .filter((exhibit) => !!exhibit.imagesCollection.items.length)
+        .map((exhibit) => {
+          const firstImageItem = exhibit.imagesCollection.items[0];
 
-        return {
-          url: firstImageItem.url,
-          id: firstImageItem.sys.id,
-        };
-      }),
+          return {
+            url: firstImageItem.url,
+            id: firstImageItem.sys.id,
+          };
+        }),
     [props.exhibits],
   );
 

src/interfaces/ITopLatestExhibit.ts

@@ -8,13 +8,11 @@ export interface ITopLatestExhibit {
   nameUz?: string | null;
   nameKa?: string | null;
   imagesCollection: {
-    items: [
-      {
-        url: string;
-        sys: {
-          id: string;
-        };
-      },
-    ];
+    items: {
+      url: string;
+      sys: {
+        id: string;
+      };
+    }[];
   };
 }

src/mocks/exhibit.ts

@@ -1,4 +1,4 @@
-import { GetExhibitDocument } from "@/__generated__/graphql";
+import { ITopLatestExhibit } from "@/interfaces/ITopLatestExhibit";
 
 export const exhibitItem = {
   sys: {
@@ -87,3 +87,26 @@ export const exhibitMockAnotherLanguage = {
   nameUz: "Test Exhibit",
   nameKa: "Test Exhibit",
 };
+
+export const topLatestExhibits: ITopLatestExhibit[] = [
+  {
+    sys: {
+      id: "12345",
+    },
+    slug: "test-exhibit",
+    nameRu: "Test Exhibit",
+    nameUz: "Test Exhibit",
+    nameKa: "Test Exhibit",
+    nameEn: "Test Exhibit",
+    imagesCollection: {
+      items: [
+        {
+          url: "http://example.com",
+          sys: {
+            id: "1",
+          },
+        },
+      ],
+    },
+  },
+];