revert: "fix: Ensure toggle button test utils only find toggle buttons (#3868)" (#3938)

gethinwebster · web-flow · commit 627449bac581 · 2025-10-15T17:49:11.000Z
diff --git a/pages/button/legacy-button.page.tsx b/pages/button/legacy-button.page.tsx
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -84,10 +84,10 @@ exports[`test-utils selectors 1`] = `
     "awsui_item_d19fg",
   ],
   "button": [
+    "awsui_button_vjswe",
     "awsui_content_vjswe",
     "awsui_disabled-reason-tooltip_1ueyk",
     "awsui_icon-left_vjswe",
-    "awsui_root_1ueyk",
   ],
   "button-dropdown": [
     "awsui_button-dropdown_sne0l",
@@ -652,9 +652,6 @@ exports[`test-utils selectors 1`] = `
   "toggle": [
     "awsui_root_4yi2u",
   ],
-  "toggle-button": [
-    "awsui_root_1qd09",
-  ],
   "token": [
     "awsui_dismiss-button_1epxo",
     "awsui_root_1epxo",
diff --git a/src/button/__integ__/button.test.ts b/src/button/__integ__/button.test.ts
@@ -69,15 +69,3 @@ describe('Button Style API', () => {
     })
   );
 });
-
-describe('legacy selectors', () => {
-  test(
-    'finds legacy and new buttons',
-    useBrowser(async browser => {
-      await browser.url('#/light/button/legacy-button');
-      const page = new ButtonPageObject(browser);
-      await expect(page.getText(wrapper.findButton().toSelector())).resolves.toBe('Legacy button');
-      await expect(browser.$$(wrapper.findAllButtons().toSelector())).resolves.toHaveLength(3);
-    })
-  );
-});
diff --git a/src/button/__tests__/button.test.tsx b/src/button/__tests__/button.test.tsx
@@ -926,15 +926,4 @@ describe('Style API', () => {
       '0 0 8px green'
     );
   });
-
-  test('finds legacy buttons', () => {
-    const renderResult = render(
-      <div>
-        <Button>Button</Button>
-        <button className="awsui_button_vjswe_t8nlg_157">Legacy button</button>
-      </div>
-    );
-    const wrapper = createWrapper(renderResult.container);
-    expect(wrapper.findAllButtons()).toHaveLength(2);
-  });
 });
diff --git a/src/button/__tests__/native-attributes.test.tsx b/src/button/__tests__/native-attributes.test.tsx
@@ -75,7 +75,7 @@ describe('Button native attributes', () => {
     const wrapper = createWrapper(container).findButton()!;
 
     expect(wrapper.getElement()).toHaveClass('my-additional-class');
-    expect(wrapper.getElement()).toHaveClass(styles.root);
+    expect(wrapper.getElement()).toHaveClass(styles.button);
   });
 
   test('events get chained', () => {
diff --git a/src/button/internal.tsx b/src/button/internal.tsx
@@ -56,7 +56,6 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
   __title?: string;
   __emitPerformanceMarks?: boolean;
   __skipNativeAttributesWarnings?: boolean;
-  __hideFromTestUtils?: boolean;
 } & InternalBaseComponentProps;
 
 export const InternalButton = React.forwardRef(
@@ -99,7 +98,6 @@ export const InternalButton = React.forwardRef(
       __title,
       __emitPerformanceMarks = true,
       __skipNativeAttributesWarnings,
-      __hideFromTestUtils = false,
       analyticsAction = 'click',
       ...props
     }: InternalButtonProps,
@@ -180,8 +178,7 @@ export const InternalButton = React.forwardRef(
       buttonContext.onClick({ variant });
     };
 
-    const buttonClass = clsx(props.className, styles.root, styles[`variant-${variant}`], {
-      [testUtilStyles.root]: !__hideFromTestUtils,
+    const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {
       [styles.disabled]: isNotInteractive,
       [styles['disabled-with-reason']]: isDisabledWithReason,
       [styles['button-no-wrap']]: !wrapText,
diff --git a/src/button/styles.scss b/src/button/styles.scss
@@ -53,7 +53,7 @@
   /* used in test-utils */
 }
 
-.root {
+.button {
   @include styles.styles-reset;
   @include styles.text-wrapping;
   @include styles.font-button;
diff --git a/src/button/test-classes/styles.scss b/src/button/test-classes/styles.scss
@@ -3,8 +3,10 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-.disabled-reason-tooltip,
-.external-icon,
-.root {
+.disabled-reason-tooltip {
+  /* used in test-utils or tests */
+}
+
+.external-icon {
   /* used in test-utils or tests */
 }
diff --git a/src/table/internal.tsx b/src/table/internal.tsx
@@ -201,7 +201,7 @@ const InternalTable = React.forwardRef(
         ?.innerText ?? toolsHeaderPerformanceMarkRef.current?.innerText;
     const getPatternIdentifier = () => {
       const hasActions = !!toolsHeaderPerformanceMarkRef.current?.querySelector<HTMLElement>(
-        `.${headerStyles.actions} .${buttonStyles.root}`
+        `.${headerStyles.actions} .${buttonStyles.button}`
       );
 
       if (hasActions) {
diff --git a/src/test-utils/dom/button-dropdown/index.ts b/src/test-utils/dom/button-dropdown/index.ts
@@ -5,6 +5,7 @@ import { act } from '@cloudscape-design/test-utils-core/utils-dom';
 
 import ButtonWrapper from '../button/index.js';
 
+import buttonStyles from '../../../button/styles.selectors.js';
 import categoryStyles from '../../../button-dropdown/category-elements/styles.selectors.js';
 import itemStyles from '../../../button-dropdown/item-element/styles.selectors.js';
 import styles from '../../../button-dropdown/styles.selectors.js';
@@ -20,11 +21,15 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
   }
 
   findTriggerButton(): ButtonWrapper | null {
-    return this.findByClassName(styles['dropdown-trigger'])?.findButton() ?? null;
+    return (
+      this.findByClassName(styles['dropdown-trigger'])?.findComponent(`.${buttonStyles.button}`, ButtonWrapper) ?? null
+    );
   }
 
   findMainAction(): null | ButtonWrapper {
-    return this.findByClassName(styles['split-trigger'])?.findButton() ?? null;
+    return (
+      this.findByClassName(styles['split-trigger'])?.findComponent(`.${buttonStyles.button}`, ButtonWrapper) ?? null
+    );
   }
 
   findOpenDropdown(): ElementWrapper | null {
diff --git a/src/test-utils/dom/button/index.ts b/src/test-utils/dom/button/index.ts
@@ -7,8 +7,7 @@ import buttonTestUtilsStyles from '../../../button/test-classes/styles.selectors
 import spinnerStyles from '../../../spinner/styles.selectors.js';
 
 export default class ButtonWrapper extends ComponentWrapper<HTMLButtonElement> {
-  static rootSelector: string = buttonTestUtilsStyles.root;
-  static legacyRootSelector: string = 'awsui_button_vjswe_t8nlg_157';
+  static rootSelector: string = styles.button;
 
   findLoadingIndicator(): ElementWrapper | null {
     return this.find(`.${styles['icon-left']}.${spinnerStyles.root}`);
diff --git a/src/test-utils/dom/toggle-button/index.ts b/src/test-utils/dom/toggle-button/index.ts
@@ -4,14 +4,14 @@ import { usesDom } from '@cloudscape-design/test-utils-core/dom';
 
 import ButtonWrapper from '../button';
 
-import testStyles from '../../../toggle-button/test-classes/styles.selectors.js';
+import buttonStyles from '../../../button/styles.selectors.js';
+import styles from '../../../toggle-button/styles.selectors.js';
 
 export default class ToggleButtonWrapper extends ButtonWrapper {
-  static rootSelector: string = testStyles.root;
-  static legacyRootSelector: string = '';
+  static rootSelector: string = buttonStyles.button;
 
   @usesDom
   isPressed(): boolean {
-    return this.element.classList.contains(testStyles.pressed);
+    return this.element.classList.contains(styles.pressed);
   }
 }
diff --git a/src/toggle-button/__tests__/toggle-button.test.tsx b/src/toggle-button/__tests__/toggle-button.test.tsx
@@ -5,12 +5,11 @@ import { render } from '@testing-library/react';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
-import Button from '../../../lib/components/button';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import ToggleButton, { ToggleButtonProps } from '../../../lib/components/toggle-button';
 import { getToggleIcon } from '../../../lib/components/toggle-button/util';
 
-import testStyles from '../../../lib/components/toggle-button/test-classes/styles.css.js';
+import styles from '../../../lib/components/button/styles.css.js';
 
 jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
@@ -149,32 +148,8 @@ describe('ToggleButton Component', () => {
       const { container } = render(
         <ToggleButton pressed={true} nativeButtonAttributes={{ className: 'additional-class' }} />
       );
-      expect(container.firstChild).toHaveClass(testStyles.root);
+      expect(container.firstChild).toHaveClass(styles.button);
       expect(container.firstChild).toHaveClass('additional-class');
     });
   });
 });
-
-describe('button and toggle button', () => {
-  it('findAllButtons should only find buttons', () => {
-    const { container } = render(
-      <>
-        <Button>Button</Button>
-        <ToggleButton pressed={true} />
-      </>
-    );
-    const wrapper = createWrapper(container);
-    expect(wrapper.findAllButtons()).toHaveLength(1);
-  });
-  it('findAllToggleButtons should only find toggle buttons', () => {
-    const { container } = render(
-      <>
-        <Button>Button</Button>
-        <button className="awsui_button_vjswe_t8nlg_157">Legacy button</button>
-        <ToggleButton pressed={true} />
-      </>
-    );
-    const wrapper = createWrapper(container);
-    expect(wrapper.findAllToggleButtons()).toHaveLength(1);
-  });
-});
diff --git a/src/toggle-button/internal.tsx b/src/toggle-button/internal.tsx
@@ -12,7 +12,6 @@ import { ToggleButtonProps } from './interfaces';
 import { getToggleIcon } from './util';
 
 import styles from './styles.css.js';
-import testStyles from './test-classes/styles.css.js';
 
 export const InternalToggleButton = React.forwardRef(
   (
@@ -48,12 +47,7 @@ export const InternalToggleButton = React.forwardRef(
 
     return (
       <InternalButton
-        className={clsx(
-          className,
-          testStyles.root,
-          styles[`variant-${variant}`],
-          pressed && [styles.pressed, testStyles.pressed]
-        )}
+        className={clsx(className, styles[`variant-${variant}`], { [styles.pressed]: pressed })}
         variant={variant}
         formAction="none"
         iconName={getToggleIcon(pressed, defaultIconName, pressedIconName)}
@@ -68,7 +62,6 @@ export const InternalToggleButton = React.forwardRef(
         {...rest}
         ref={ref}
         nativeButtonAttributes={nativeButtonAttributes}
-        __hideFromTestUtils={true}
       />
     );
   }
diff --git a/src/toggle-button/test-classes/styles.scss b/src/toggle-button/test-classes/styles.scss

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@`
`53`	`53`	`/* used in test-utils */`
`54`	`54`	`}`
`55`	`55`
`56`		`-.root {`
	`56`	`+.button {`
`57`	`57`	`@include styles.styles-reset;`
`58`	`58`	`@include styles.text-wrapping;`
`59`	`59`	`@include styles.font-button;`