fix: Makes board item test utils wrappers chainable

cloudscape-design · Oct 8, 2024 · 37e7506 · 37e7506
1 parent 2a12041
commit 37e7506
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/src/board-item/__tests__/board-item.test.tsx b/src/board-item/__tests__/board-item.test.tsx
@@ -1,11 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import { ReactElement } from "react";
 import { cleanup, render as libRender } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
 
+import Button from "@cloudscape-design/components/button";
 import Container from "@cloudscape-design/components/container";
+import ExpandableSection from "@cloudscape-design/components/expandable-section";
+import Header from "@cloudscape-design/components/header";
 
+import "@cloudscape-design/components/test-utils/dom";
 import BoardItem from "../../../lib/components/board-item";
 import createWrapper from "../../../lib/components/test-utils/dom";
 import { ItemContextWrapper } from "./board-item-wrapper";
@@ -32,16 +37,22 @@ describe("WidgetContainer", () => {
         <Container header="Container header" footer="Container footer">
           Container content
         </Container>
-        <BoardItem header="Header" footer="Footer" settings="Settings" i18nStrings={i18nStrings}>
-          Content
+        <BoardItem
+          header={<Header>Header</Header>}
+          footer={<ExpandableSection headerText="Footer">Footer expandable content</ExpandableSection>}
+          settings={<Button iconName="settings" ariaLabel="Settings" />}
+          i18nStrings={i18nStrings}
+        >
+          Content <Button>Action</Button>
         </BoardItem>
       </div>,
     );
+
     const itemWrapper = createWrapper().findBoardItem()!;
-    expect(itemWrapper.findHeader()!.getElement().textContent).toBe("Header");
-    expect(itemWrapper.findContent().getElement().textContent).toBe("Content");
-    expect(itemWrapper.findFooter()!.getElement().textContent).toBe("Footer");
-    expect(itemWrapper.findSettings()!.getElement().textContent).toBe("Settings");
+    expect(itemWrapper.findHeader()!.findHeader()!.getElement()).toHaveTextContent("Header");
+    expect(itemWrapper.findContent()!.findButton()!.getElement()).toHaveTextContent("Action");
+    expect(itemWrapper.findFooter()!.findExpandableSection()!.findHeader()!.getElement()).toHaveTextContent("Footer");
+    expect(itemWrapper.findSettings()!.findButton()!.getElement()).toHaveAccessibleName("Settings");
   });
 
   test("renders handle aria labels", () => {

diff --git a/src/test-utils/dom/board-item/index.ts b/src/test-utils/dom/board-item/index.ts
@@ -1,7 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import componentsWrapper from "@cloudscape-design/components/test-utils/dom";
-import { ComponentWrapper } from "@cloudscape-design/test-utils-core/dom";
+import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/dom";
 
 import itemStyles from "../../../board-item/styles.selectors.js";
 import dragHandleStyles from "../../../internal/drag-handle/styles.selectors.js";
@@ -18,21 +19,21 @@ export default class BoardItemWrapper extends ComponentWrapper {
     return this.findByClassName(resizeHandleStyles.handle)!;
   }
 
-  findSettings(): null | ComponentWrapper {
+  findSettings(): null | ElementWrapper {
     return this.findByClassName(itemStyles.settings);
   }
 
   // @cloudscape-design/components/container methods
 
-  findHeader(): null | ComponentWrapper {
+  findHeader(): null | ElementWrapper {
     return this.findByClassName(itemStyles["header-content"]);
   }
 
-  findContent(): ComponentWrapper {
+  findContent(): ElementWrapper {
     return componentsWrapper(this.getElement()).findContainer()!.findContent();
   }
 
-  findFooter(): null | ComponentWrapper {
+  findFooter(): null | ElementWrapper {
     return componentsWrapper(this.getElement()).findContainer()!.findFooter();
   }
 }