fix: Fix test-utils wrappers inheritance

src/mixed-line-bar-chart/__tests__/test-chart-series-details.tsx

@@ -9,7 +9,7 @@ import { BarChartProps } from '../../../lib/components/bar-chart/interfaces.js';
 import { LineChartProps } from '../../../lib/components/line-chart/interfaces.js';
 import Link from '../../../lib/components/link';
 import { MixedLineBarChartProps } from '../../../lib/components/mixed-line-bar-chart';
-import { BarChartWrapper, LineChartWrapper } from '../../../lib/components/test-utils/dom';
+import createWrapper, { BarChartWrapper, LineChartWrapper } from '../../../lib/components/test-utils/dom';
 import { MixedLineBarChartWrapper } from '../../../lib/components/test-utils/dom/index.js';
 
 import chartSeriesDetailsStyles from '../../../lib/components/internal/components/chart-series-details/styles.css.js';
@@ -121,7 +121,9 @@ export default function testChartSeriesDetails({
           }),
         });
 
-        const findExpandableSection = () => wrapper.findDetailPopover()!.findSeries()![0].findExpandableSection()!;
+        // access to expandable section which is an implementation detail, not exposed via public test-utils API
+        const findExpandableSection = () =>
+          createWrapper(wrapper.findDetailPopover()!.findSeries()![0].getElement()).findExpandableSection()!;
         const toggleState = () => findExpandableSection().findExpandButton().click();
         const expectExpanded = (expectedState: boolean) => {
           expect(!!findExpandableSection().findExpandedContent()).toBe(expectedState);

src/tag-editor/__integ__/page/tag-editor-page.ts

@@ -150,7 +150,9 @@ export default class TagEditorPage extends BasePageObject {
   }
 
   getRowHeaders(row: number) {
-    return this.getElementsText(tagEditorWrapper.findRow(row).findFormField().findLabel().toSelector());
+    return this.getElementsText(
+      createWrapper(tagEditorWrapper.findRow(row).getElement()).findFormField().findLabel().toSelector()
+    );
   }
 
   hasKeyError(row: number) {

src/tag-editor/__tests__/tag-editor.test.tsx

@@ -526,7 +526,9 @@ describe('Tag Editor component', () => {
 
       wrapper.findAddButton().click();
       rerender();
-      expect(wrapper.findRow(2)!.findAutosuggest()!.findNativeInput().getElement()).toHaveFocus();
+      expect(
+        wrapper.findRow(2)!.findField(1)!.findControl()!.findAutosuggest()!.findNativeInput().getElement()
+      ).toHaveFocus();
     });
 
     test('should focus undo button when removing an existing tag', () => {
@@ -569,7 +571,13 @@ describe('Tag Editor component', () => {
 
       wrapper.findRow(1)!.findRemoveButton()!.click();
       rerender();
-      const nextInput = wrapper.findRow(1)!.findAutosuggest()!.findNativeInput().getElement();
+      const nextInput = wrapper
+        .findRow(1)!
+        .findField(1)!
+        .findControl()!
+        .findAutosuggest()!
+        .findNativeInput()
+        .getElement();
       expect(nextInput).toHaveValue('key2');
       expect(nextInput).toHaveFocus();
     });
@@ -584,7 +592,13 @@ describe('Tag Editor component', () => {
 
       wrapper.findRow(2)!.findRemoveButton()!.click();
       rerender();
-      const nextInput = wrapper.findRow(1)!.findAutosuggest()!.findNativeInput().getElement();
+      const nextInput = wrapper
+        .findRow(1)!
+        .findField(1)!
+        .findControl()!
+        .findAutosuggest()!
+        .findNativeInput()
+        .getElement();
       expect(nextInput).toHaveValue('key');
       expect(nextInput).toHaveFocus();
     });

src/test-utils/dom/anchor-navigation/index.ts

@@ -34,7 +34,7 @@ export default class AnchorNavigationWrapper extends ComponentWrapper {
   }
 }
 
-class AnchorItemWrapper extends ElementWrapper {
+class AnchorItemWrapper extends ComponentWrapper {
   findLink(): ElementWrapper<HTMLAnchorElement> | null {
     return this.findByClassName(testUtilStyles['anchor-link']);
   }

src/test-utils/dom/attribute-editor/index.ts

@@ -7,7 +7,7 @@ import FormFieldWrapper from '../form-field';
 
 import styles from '../../../attribute-editor/styles.selectors.js';
 
-export class AttributeEditorRowWrapper extends ElementWrapper {
+export class AttributeEditorRowWrapper extends ComponentWrapper {
   /**
    * Returns all fields. Fields are supplied in the `definition` property of the component.
    */

src/test-utils/dom/date-range-picker/index.ts

@@ -50,7 +50,7 @@ export default class DateRangePickerWrapper extends ComponentWrapper {
   }
 }
 
-export class SelectionModeSwitchWrapper extends ElementWrapper {
+export class SelectionModeSwitchWrapper extends ComponentWrapper {
   /**
    * Returns the mode selector as a SegmentedControl wrapper.
    *

src/test-utils/dom/internal/abstract-switch.ts

@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
 
 import styles from '../../../internal/components/abstract-switch/styles.selectors.js';
 
-export default class AbstractSwitchWrapper extends ElementWrapper {
+export default class AbstractSwitchWrapper extends ComponentWrapper {
   static rootSelector = styles.wrapper;
 
   findLabel(): ElementWrapper {

src/test-utils/dom/internal/chart-popover.ts

@@ -9,7 +9,7 @@ import styles from '../../../internal/components/chart-popover/styles.selectors.
 import chartSeriesDetailsStyles from '../../../internal/components/chart-series-details/styles.selectors.js';
 import popoverStyles from '../../../popover/styles.selectors.js';
 
-export class ChartPopoverSeriesItemWrapper extends ElementWrapper {
+export class ChartPopoverSeriesItemWrapper extends ComponentWrapper {
   findKey(): ElementWrapper {
     // If a series has sub-items and is expandable, the key will be inside the header of an expandable section.
     return (this.findByClassName(expandableSectionHeaderStyles['header-text']) ||

src/test-utils/dom/radio-group/radio-button.ts

@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
 
 import AbstractSwitchWrapper from '../internal/abstract-switch';
 
-export default class RadioButtonWrapper extends ElementWrapper {
+export default class RadioButtonWrapper extends ComponentWrapper {
   private findAbstractSwitch(): AbstractSwitchWrapper {
     return new AbstractSwitchWrapper(this.getElement());
   }

src/test-utils/dom/side-navigation/index.ts

@@ -37,7 +37,7 @@ export default class SideNavigationWrapper extends ComponentWrapper {
   }
 }
 
-export class SideNavigationItemWrapper extends ElementWrapper {
+export class SideNavigationItemWrapper extends ComponentWrapper {
   findSection(): ExpandableSectionWrapper | null {
     return this.findComponent(`.${styles.section}`, ExpandableSectionWrapper);
   }

src/test-utils/dom/tiles/tile.ts

@@ -1,12 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
 
 import RadioButtonWrapper from '../radio-group/radio-button';
 
 import styles from '../../../tiles/styles.selectors.js';
 
-export default class TileWrapper extends ElementWrapper {
+export default class TileWrapper extends ComponentWrapper {
   static rootSelector: string = styles['tile-container'];
 
   private findRadioButton(): RadioButtonWrapper {