diff --git a/src/mixed-line-bar-chart/__tests__/test-chart-series-details.tsx b/src/mixed-line-bar-chart/__tests__/test-chart-series-details.tsx index ffc2ee2a11..3aca7c690f 100644 --- a/src/mixed-line-bar-chart/__tests__/test-chart-series-details.tsx +++ b/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); diff --git a/src/tag-editor/__integ__/page/tag-editor-page.ts b/src/tag-editor/__integ__/page/tag-editor-page.ts index ccc63f6989..a43dcb7e40 100644 --- a/src/tag-editor/__integ__/page/tag-editor-page.ts +++ b/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) { diff --git a/src/tag-editor/__tests__/tag-editor.test.tsx b/src/tag-editor/__tests__/tag-editor.test.tsx index 811255aa37..365c7d75da 100644 --- a/src/tag-editor/__tests__/tag-editor.test.tsx +++ b/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(); }); diff --git a/src/test-utils/dom/anchor-navigation/index.ts b/src/test-utils/dom/anchor-navigation/index.ts index 224c7a1c24..a56495543d 100644 --- a/src/test-utils/dom/anchor-navigation/index.ts +++ b/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 | null { return this.findByClassName(testUtilStyles['anchor-link']); } diff --git a/src/test-utils/dom/attribute-editor/index.ts b/src/test-utils/dom/attribute-editor/index.ts index 2b33f653d2..201019937f 100644 --- a/src/test-utils/dom/attribute-editor/index.ts +++ b/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. */ diff --git a/src/test-utils/dom/date-range-picker/index.ts b/src/test-utils/dom/date-range-picker/index.ts index 7f090d35fe..d99034e6e5 100644 --- a/src/test-utils/dom/date-range-picker/index.ts +++ b/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. * diff --git a/src/test-utils/dom/internal/abstract-switch.ts b/src/test-utils/dom/internal/abstract-switch.ts index df28921cb3..62634b958a 100644 --- a/src/test-utils/dom/internal/abstract-switch.ts +++ b/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 { diff --git a/src/test-utils/dom/internal/chart-popover.ts b/src/test-utils/dom/internal/chart-popover.ts index 02e399a53b..9671d1b73d 100644 --- a/src/test-utils/dom/internal/chart-popover.ts +++ b/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']) || diff --git a/src/test-utils/dom/radio-group/radio-button.ts b/src/test-utils/dom/radio-group/radio-button.ts index 6336b90419..bd88fb19ba 100644 --- a/src/test-utils/dom/radio-group/radio-button.ts +++ b/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()); } diff --git a/src/test-utils/dom/side-navigation/index.ts b/src/test-utils/dom/side-navigation/index.ts index 73347c4979..ede19f716d 100644 --- a/src/test-utils/dom/side-navigation/index.ts +++ b/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); } diff --git a/src/test-utils/dom/tiles/tile.ts b/src/test-utils/dom/tiles/tile.ts index ef190519e8..7320da5262 100644 --- a/src/test-utils/dom/tiles/tile.ts +++ b/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 {