chore: Experiment test utils inheritanc

scripts/test-utils.js

@@ -1,10 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { execaSync } from "execa";
+import { globbySync } from "globby";
 import fs from "node:fs";
 import path from "node:path";
+
 import { default as convertToSelectorUtil } from "@cloudscape-design/test-utils-converter";
-import { execaSync } from "execa";
-import { globbySync } from "globby";
+
 import { pascalCase, writeSourceFile } from "./utils.js";
 
 const components = globbySync(["src/test-utils/dom/**/index.ts", "!src/test-utils/dom/index.ts"]).map((fileName) =>
@@ -48,6 +50,7 @@ function generateIndexFileContent({ testUtilType, buildFinderInterface }) {
   return [
     // language=TypeScript
     `import { ElementWrapper } from '@cloudscape-design/test-utils-core/${testUtilType}';`,
+    `import '@cloudscape-design/components/test-utils/${testUtilType}'`,
     `import { appendSelector } from '@cloudscape-design/test-utils-core/utils';`,
     `export { ElementWrapper };`,
     ...components.map((componentName) => {

src/board-item/__tests__/board-item.test.tsx

@@ -1,9 +1,11 @@
 // 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 BoardItem from "../../../lib/components/board-item";
@@ -33,13 +35,15 @@ describe("WidgetContainer", () => {
           Container content
         </Container>
         <BoardItem header="Header" footer="Footer" settings="Settings" i18nStrings={i18nStrings}>
-          Content
+          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.findContent().getElement().textContent).toBe("Content Action");
+    expect(itemWrapper.findContent()!.findButton()!.getElement().textContent).toBe("Action");
     expect(itemWrapper.findFooter()!.getElement().textContent).toBe("Footer");
     expect(itemWrapper.findSettings()!.getElement().textContent).toBe("Settings");
   });

src/test-utils/dom/board-item/index.ts

@@ -1,7 +1,10 @@
 // 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 "@cloudscape-design/components/test-utils/dom";
 
 import itemStyles from "../../../board-item/styles.selectors.js";
 import dragHandleStyles from "../../../internal/drag-handle/styles.selectors.js";
@@ -28,7 +31,7 @@ export default class BoardItemWrapper extends ComponentWrapper {
     return this.findByClassName(itemStyles["header-content"]);
   }
 
-  findContent(): ComponentWrapper {
+  findContent(): ElementWrapper {
     return componentsWrapper(this.getElement()).findContainer()!.findContent();
   }