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

Author: gethinwebster

pages/button/legacy-button.page.tsx

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Button from '~components/button';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function ButtonsScenario() {
+  return (
+    <article>
+      <h1>Legacy buttons</h1>
+      <ScreenshotArea>
+        <button className="awsui_button_vjswe_t8nlg_157">Legacy button</button>
+        <button className="awsui_button_vjswe_1qz6m_157">Older legacy button</button>
+        <Button>Button</Button>
+      </ScreenshotArea>
+    </article>
+  );
+}

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,6 +652,9 @@ exports[`test-utils selectors 1`] = `
   "toggle": [
     "awsui_root_4yi2u",
   ],
+  "toggle-button": [
+    "awsui_root_1qd09",
+  ],
   "token": [
     "awsui_dismiss-button_1epxo",
     "awsui_root_1epxo",

src/button/__integ__/button.test.ts

@@ -69,3 +69,15 @@ 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);
+    })
+  );
+});

src/button/__tests__/button.test.tsx

@@ -926,4 +926,15 @@ 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);
+  });
 });

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.button);
+    expect(wrapper.getElement()).toHaveClass(styles.root);
   });
 
   test('events get chained', () => {

src/button/internal.tsx

@@ -56,6 +56,7 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
   __title?: string;
   __emitPerformanceMarks?: boolean;
   __skipNativeAttributesWarnings?: boolean;
+  __hideFromTestUtils?: boolean;
 } & InternalBaseComponentProps;
 
 export const InternalButton = React.forwardRef(
@@ -98,6 +99,7 @@ export const InternalButton = React.forwardRef(
       __title,
       __emitPerformanceMarks = true,
       __skipNativeAttributesWarnings,
+      __hideFromTestUtils = false,
       analyticsAction = 'click',
       ...props
     }: InternalButtonProps,
@@ -178,7 +180,8 @@ export const InternalButton = React.forwardRef(
       buttonContext.onClick({ variant });
     };
 
-    const buttonClass = clsx(props.className, styles.button, styles[`variant-${variant}`], {
+    const buttonClass = clsx(props.className, styles.root, styles[`variant-${variant}`], {
+      [testUtilStyles.root]: !__hideFromTestUtils,
       [styles.disabled]: isNotInteractive,
       [styles['disabled-with-reason']]: isDisabledWithReason,
       [styles['button-no-wrap']]: !wrapText,

src/button/styles.scss

@@ -53,7 +53,7 @@
   /* used in test-utils */
 }
 
-.button {
+.root {
   @include styles.styles-reset;
   @include styles.text-wrapping;
   @include styles.font-button;

src/button/test-classes/styles.scss

@@ -3,10 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-.disabled-reason-tooltip {
-  /* used in test-utils or tests */
-}
-
-.external-icon {
+.disabled-reason-tooltip,
+.external-icon,
+.root {
   /* used in test-utils or tests */
 }

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.button}`
+        `.${headerStyles.actions} .${buttonStyles.root}`
       );
 
       if (hasActions) {

src/test-utils/dom/button-dropdown/index.ts

@@ -5,7 +5,6 @@ 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';
@@ -21,15 +20,11 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
   }
 
   findTriggerButton(): ButtonWrapper | null {
-    return (
-      this.findByClassName(styles['dropdown-trigger'])?.findComponent(`.${buttonStyles.button}`, ButtonWrapper) ?? null
-    );
+    return this.findByClassName(styles['dropdown-trigger'])?.findButton() ?? null;
   }
 
   findMainAction(): null | ButtonWrapper {
-    return (
-      this.findByClassName(styles['split-trigger'])?.findComponent(`.${buttonStyles.button}`, ButtonWrapper) ?? null
-    );
+    return this.findByClassName(styles['split-trigger'])?.findButton() ?? null;
   }
 
   findOpenDropdown(): ElementWrapper | null {