From f0e69578051d034f164bde7c9a173db52c6bfc31 Mon Sep 17 00:00:00 2001 From: Omar H Date: Fri, 11 Jul 2025 01:24:19 -0400 Subject: [PATCH 1/4] Add tests for IModelTile component and enhance accessibility with data-testid attributes --- .../src/imodel-browser/IModelTile.stories.tsx | 1 - .../iModelTiles/IModelTile.test.tsx | 65 +++++++++++++++++++ .../src/containers/iModelTiles/IModelTile.tsx | 9 ++- 3 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.test.tsx diff --git a/packages/apps/storybook/src/imodel-browser/IModelTile.stories.tsx b/packages/apps/storybook/src/imodel-browser/IModelTile.stories.tsx index 7d26d841..52d304b2 100644 --- a/packages/apps/storybook/src/imodel-browser/IModelTile.stories.tsx +++ b/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"; diff --git a/packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.test.tsx b/packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.test.tsx new file mode 100644 index 00000000..b2ea9c08 --- /dev/null +++ b/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( + 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( + New iModel Name, + }} + /> + ); + + // check if you can click on the name + const name = getByTestId(`iModel-tile-${iModel.id}-name-label`); + name.click(); + expect(onThumbnailClick).toHaveBeenCalledWith(iModel); + }); +}); diff --git a/packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.tsx b/packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.tsx index 5eebc5c6..a46a1e03 100644 --- a/packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.tsx +++ b/packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.tsx @@ -96,6 +96,7 @@ export const IModelTile = ({ onClick?.(e) ?? onThumbnailClick?.(iModel)} aria-disabled={isDisabled} + data-testid={`iModel-tile-${iModel.id}-name-label`} > {name ?? iModel.displayName} @@ -122,12 +123,16 @@ export const IModelTile = ({ onClick?.(e) ?? onThumbnailClick?.(iModel)} aria-disabled={isDisabled} - data-testid={`iModel-tile-${iModel.id}`} + data-testid={`iModel-tile-${iModel.id}-action`} > {iModel?.description ?? ""} {(moreOptions || moreOptionsBuilt) && ( - {moreOptions ?? moreOptionsBuilt} + + {moreOptions ?? moreOptionsBuilt} + )} {buttons && {buttons}} From 19a689208f6d81ecbb27df7440aa0a39ad9ab52b Mon Sep 17 00:00:00 2001 From: Omar H Date: Fri, 11 Jul 2025 01:51:01 -0400 Subject: [PATCH 2/4] fix eslint error in storybook --- packages/apps/storybook/tsconfig.eslint.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/apps/storybook/tsconfig.eslint.json b/packages/apps/storybook/tsconfig.eslint.json index d395a21d..1e483cfb 100644 --- a/packages/apps/storybook/tsconfig.eslint.json +++ b/packages/apps/storybook/tsconfig.eslint.json @@ -1,4 +1,7 @@ { + "compilerOptions": { + "strictNullChecks": true + }, "include": [ "**/*.ts*", "**/*.js*", From c8154a47ce0371b3d6159d9eac8ace931f3efc99 Mon Sep 17 00:00:00 2001 From: Omar H Date: Fri, 11 Jul 2025 13:33:49 -0400 Subject: [PATCH 3/4] Add tests for iModel tile in @itwin/imodel-browser-react --- .../omar-tests-for-imodel-tile_2025-07-11-17-33.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json diff --git a/common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json b/common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json new file mode 100644 index 00000000..a8efbd81 --- /dev/null +++ b/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": "tests for iModel tile", + "type": "none" + } + ], + "packageName": "@itwin/imodel-browser-react" +} \ No newline at end of file From 4910029e5dd3e51d37a364481a14bacfe1a6dabc Mon Sep 17 00:00:00 2001 From: Arun George <11051042+aruniverse@users.noreply.github.com> Date: Fri, 11 Jul 2025 13:34:29 -0400 Subject: [PATCH 4/4] Update common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json --- .../omar-tests-for-imodel-tile_2025-07-11-17-33.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json b/common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json index a8efbd81..2fe3fa0e 100644 --- a/common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json +++ b/common/changes/@itwin/imodel-browser-react/omar-tests-for-imodel-tile_2025-07-11-17-33.json @@ -2,7 +2,7 @@ "changes": [ { "packageName": "@itwin/imodel-browser-react", - "comment": "tests for iModel tile", + "comment": "", "type": "none" } ],