Set default labels as index + 1 for canvas figures. (#232)

* Set default labels as index + 1 for canvas figures.

* Make canvas index relative of original items array.

src/components/Viewer/Media/Media.test.tsx

@@ -1,12 +1,53 @@
+import { render, screen } from "@testing-library/react";
+
+import { Canvas } from "@iiif/presentation-3";
 import Media from "src/components/Viewer/Media/Media";
 import React from "react";
-import { render, screen } from "@testing-library/react";
+
+const items = [
+  {
+    id: "https://example.org/manifest/1/canvas/1",
+    type: "Canvas",
+    height: 600,
+    width: 800,
+    label: { none: ["Canvas 1"] },
+    thumbnail: [
+      {
+        id: "https://example.org/item/1/default.jpg",
+        type: "Image",
+        height: 75,
+        width: 100,
+        format: "image/jpeg",
+      },
+    ],
+  },
+  {
+    id: "https://example.org/manifest/1/canvas/2",
+    type: "Canvas",
+    height: 600,
+    width: 800,
+    label: { none: ["Canvas 2"] },
+    thumbnail: [
+      {
+        id: "https://example.org/item/2/default.jpg",
+        type: "Image",
+        height: 75,
+        width: 100,
+        format: "image/jpeg",
+      },
+    ],
+  },
+] as unknown as Canvas[];
 
 describe("Media component", () => {
   it("renders", () => {
-    render(<Media items={[]} activeItem={0} />);
+    render(<Media items={items} activeItem={0} />);
     const media = screen.getByTestId("media");
     expect(media);
     expect(media.hasAttribute("aria-label")).toBe(true);
+    expect(media.getAttribute("data-active-canvas")).toBe(
+      "https://example.org/manifest/1/canvas/1",
+    );
+    expect(media.getAttribute("data-canvas-length")).toBe("2");
   });
 });

src/components/Viewer/Media/Media.tsx

@@ -95,25 +95,33 @@ const Media: React.FC<MediaProps> = ({ items }) => {
         handleFilter={handleFilter}
         handleCanvasToggle={handleCanvasToggle}
         activeIndex={activeIndex}
-        canvasLength={mediaItems.length}
+        canvasLength={items.length}
       />
       <Group
         aria-label={t("media.selectItem")}
         data-testid="media"
+        data-active-canvas={items[activeIndex].id}
+        data-canvas-length={items.length}
+        data-filter={filter}
         ref={scrollRef}
       >
         {mediaItems
-          .filter((item) => {
+          .filter((item, key) => {
+            if (!filter) return true;
+
             if (item.canvas?.label) {
               const label = getLabel(item.canvas.label);
               if (Array.isArray(label))
                 return label[0].toLowerCase().includes(filter.toLowerCase());
+            } else {
+              const label = (key + 1).toString();
+              return label.includes(filter);
             }
           })
           .map((item, index) => (
             <Thumbnail
               canvas={item.canvas as CanvasNormalized}
-              canvasIndex={index}
+              canvasIndex={mediaItems.findIndex((el) => el === item)}
               handleChange={handleChange}
               isActive={activeCanvas === item?.canvas?.id ? true : false}
               key={item?.canvas?.id}

src/components/Viewer/Media/Thumbnail.test.tsx

@@ -92,6 +92,20 @@ describe("Thumbnail component", () => {
     });
   });
 
+  describe("figure missing a label", () => {
+    const newProps = { ...props, canvas: { ...props.canvas, label: null } };
+
+    it("renders a fallback label for item index + 1", () => {
+      render(
+        <Group>
+          <Thumbnail {...newProps} />
+        </Group>,
+      );
+      expect(screen.getByTestId("fig-caption")).toHaveTextContent("2");
+      expect(screen.getByAltText("2"));
+    });
+  });
+
   describe("audio and video thumbnail types", () => {
     it("renders a duration value in the tag for audio type", () => {
       const newProps = { ...props, type: "Sound" };

src/components/Viewer/Media/Thumbnail.tsx

@@ -55,6 +55,10 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
   type,
   handleChange,
 }) => {
+  const label = canvas?.label
+    ? getLabel(canvas.label)
+    : (canvasIndex + 1).toString();
+
   return (
     <Item
       aria-checked={isActive}
@@ -65,12 +69,7 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
     >
       <figure>
         <div>
-          {thumbnail?.id && (
-            <img
-              src={thumbnail.id}
-              alt={canvas?.label ? (getLabel(canvas.label) as string) : ""}
-            />
-          )}
+          {thumbnail?.id && <img src={thumbnail.id} alt={label as string} />}
 
           <Type>
             <Tag isIcon data-testid="thumbnail-tag">
@@ -84,11 +83,13 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
             </Tag>
           </Type>
         </div>
-        {canvas?.label && (
-          <figcaption data-testid="fig-caption">
+        <figcaption data-testid="fig-caption">
+          {canvas.label ? (
             <Label label={canvas.label} />
-          </figcaption>
-        )}
+          ) : (
+            (canvasIndex + 1).toString()
+          )}
+        </figcaption>
       </figure>
     </Item>
   );