tests for imodel tile

common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}

packages/apps/storybook/src/imodel-browser/IModelTile.stories.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { IModelTile as C, IModelTileProps } from "@itwin/imodel-browser-react";
-import { MiddleTextTruncation } from "@itwin/itwinui-react";
 import { Meta, Story } from "@storybook/react/types-6-0";
 import React from "react";
 

packages/apps/storybook/tsconfig.eslint.json

@@ -1,4 +1,7 @@
 {
+  "compilerOptions": {
+    "strictNullChecks": true
+  },
   "include": [
     "**/*.ts*",
     "**/*.js*",

packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.test.tsx

@@ -0,0 +1,65 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "@testing-library/jest-dom";
+
+import { render } from "@testing-library/react";
+import React from "react";
+
+import { IModelFull } from "../../types";
+import { IModelTile } from "./IModelTile";
+
+describe("IModelTile", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const onThumbnailClick = jest.fn();
+  const iModel: IModelFull = {
+    id: "iModel1",
+    displayName: "Test IModel",
+    name: "TestIModel",
+    description: "This is a test iModel",
+    state: "initialized",
+    createdDateTime: "2023-01-01T00:00:00Z",
+    iTwinId: "iTwin1",
+    thumbnail: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA",
+  };
+  it("should click the more options button without triggering the onThumbnailClick", () => {
+    const { getByTestId } = render(
+      <IModelTile
+        iModel={iModel}
+        onThumbnailClick={onThumbnailClick}
+        iModelOptions={[
+          {
+            children: "Option 1",
+            onClick: () => console.log("Option 1 clicked"),
+            key: "Option 1",
+          },
+        ]}
+      />
+    );
+
+    // check if you can click on the more options
+    const moreOptions = getByTestId(`iModel-tile-${iModel.id}-more-options`);
+    moreOptions.click();
+    expect(onThumbnailClick).not.toHaveBeenCalled();
+  });
+  it("should trigger onThumbnailClick when name is clicked", () => {
+    const { getByTestId } = render(
+      <IModelTile
+        iModel={iModel}
+        onThumbnailClick={onThumbnailClick}
+        tileProps={{
+          name: <div>New iModel Name</div>,
+        }}
+      />
+    );
+
+    // check if you can click on the name
+    const name = getByTestId(`iModel-tile-${iModel.id}-name-label`);
+    name.click();
+    expect(onThumbnailClick).toHaveBeenCalledWith(iModel);
+  });
+});

packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.tsx

@@ -96,6 +96,7 @@ export const IModelTile = ({
         <Tile.NameLabel
           onClick={(e) => onClick?.(e) ?? onThumbnailClick?.(iModel)}
           aria-disabled={isDisabled}
+          data-testid={`iModel-tile-${iModel.id}-name-label`}
         >
           {name ?? iModel.displayName}
         </Tile.NameLabel>
@@ -122,12 +123,16 @@ export const IModelTile = ({
         <Tile.Action
           onClick={(e) => onClick?.(e) ?? onThumbnailClick?.(iModel)}
           aria-disabled={isDisabled}
-          data-testid={`iModel-tile-${iModel.id}`}
+          data-testid={`iModel-tile-${iModel.id}-action`}
         >
           <Tile.Description>{iModel?.description ?? ""}</Tile.Description>
         </Tile.Action>
         {(moreOptions || moreOptionsBuilt) && (
-          <Tile.MoreOptions>{moreOptions ?? moreOptionsBuilt}</Tile.MoreOptions>
+          <Tile.MoreOptions
+            data-testid={`iModel-tile-${iModel.id}-more-options`}
+          >
+            {moreOptions ?? moreOptionsBuilt}
+          </Tile.MoreOptions>
         )}
       </Tile.ContentArea>
       {buttons && <Tile.Buttons>{buttons}</Tile.Buttons>}