chore: Uses the new selectors inside existing tests

cloudscape-design · Oct 30, 2024 · 4e1ecb0 · 4e1ecb0
1 parent f7fd88e
commit 4e1ecb0
Show file tree

Hide file tree

Showing 23 changed files with 82 additions and 98 deletions.
diff --git a/pages/app-layout/refresh-content-width.page.tsx b/pages/app-layout/refresh-content-width.page.tsx
@@ -32,75 +32,75 @@ export default function () {
         breadcrumbs={<Breadcrumbs />}
         maxContentWidth={maxContentWidth}
         content={
-          <div className={styles.highlightBorder} data-test-id="content">
+          <div className={styles.highlightBorder} data-testid="content">
             <Box variant="h1">Demo page for layout types in visual refresh</Box>
             <SpaceBetween size={'l'}>
               <Button
-                data-test-id="button_width-400"
+                data-testid="button_width-400"
                 onClick={() => {
                   setMaxContentWidth(400);
                 }}
               >
                 Set content width to 400
               </Button>
               <Button
-                data-test-id="button_width-number-max_value"
+                data-testid="button_width-number-max_value"
                 onClick={() => {
                   setMaxContentWidth(Number.MAX_VALUE);
                 }}
               >
                 Set content width to Number.MAX_VALUE
               </Button>
               <Button
-                data-test-id="button_width-undef"
+                data-testid="button_width-undef"
                 onClick={() => {
                   setMaxContentWidth(undefined);
                 }}
               >
                 Set content width to undef
               </Button>
               <Button
-                data-test-id="button_type-default"
+                data-testid="button_type-default"
                 onClick={() => {
                   setContentType('default');
                 }}
               >
                 Set content type to default
               </Button>
               <Button
-                data-test-id="button_type-cards"
+                data-testid="button_type-cards"
                 onClick={() => {
                   setContentType('cards');
                 }}
               >
                 Set content type to cards
               </Button>
               <Button
-                data-test-id="button_type-table"
+                data-testid="button_type-table"
                 onClick={() => {
                   setContentType('table');
                 }}
               >
                 Set content type to table
               </Button>
               <Button
-                data-test-id="button_type-form"
+                data-testid="button_type-form"
                 onClick={() => {
                   setContentType('form');
                 }}
               >
                 Set content type to form
               </Button>
               <Button
-                data-test-id="button_type-wizard"
+                data-testid="button_type-wizard"
                 onClick={() => {
                   setContentType('wizard');
                 }}
               >
                 Set content type to wizard
               </Button>
               <Button
-                data-test-id="button_set-drawers-open"
+                data-testid="button_set-drawers-open"
                 onClick={() => {
                   setDrawersOpen(true);
                 }}

diff --git a/pages/app-layout/with-drawers.page.tsx b/pages/app-layout/with-drawers.page.tsx
@@ -41,7 +41,7 @@ export default function WithDrawers() {
         breadcrumbs={<Breadcrumbs />}
         content={
           <ContentLayout
-            data-test-id="content"
+            data-testid="content"
             header={
               <SpaceBetween size="m">
                 <Header variant="h1" description="Sometimes you need custom drawers to get the job done.">

diff --git a/pages/app-layout/with-one-open-drawer.page.tsx b/pages/app-layout/with-one-open-drawer.page.tsx
@@ -23,7 +23,7 @@ export default function WithDrawers() {
         navigationHide={true}
         content={
           <ContentLayout
-            data-test-id="content"
+            data-testid="content"
             header={
               <Header variant="h1" description="Sometimes you need custom drawers to get the job done.">
                 One drawer opened

diff --git a/src/alert/__integ__/runtime-content.test.ts b/src/alert/__integ__/runtime-content.test.ts
@@ -7,7 +7,7 @@ import createWrapper from '../../../lib/components/test-utils/selectors';
 
 class RuntimeContentPage extends BasePageObject {
   async rerenderAlerts() {
-    await this.click(createWrapper().findCheckbox('[data-testid="unmount-all"]').findNativeInput().toSelector());
+    await this.click(createWrapper().findCheckboxByTestId('unmount-all').findNativeInput().toSelector());
     await this.keys(['Space']);
   }
 }

diff --git a/src/annotation-context/__integ__/annotation-scroll.test.ts b/src/annotation-context/__integ__/annotation-scroll.test.ts
@@ -20,7 +20,7 @@ test(
     await page.waitForVisible(nextButtonSelector);
 
     const hotspotOneBox = await page.getBoundingBox(
-      wrapper.findHotspot('[data-testid="hotspot-2"]').findTrigger().toSelector()
+      wrapper.findHotspotByTestId('hotspot-2').findTrigger().toSelector()
     );
     const footerBox = await page.getBoundingBox('[data-testid="footer"]');
 
@@ -29,7 +29,7 @@ test(
     await page.click(annotationWrapper.findPreviousButton().toSelector());
 
     const hotspotOneTwoBox = await page.getBoundingBox(
-      wrapper.findHotspot('[data-testid="hotspot-1"]').findTrigger().toSelector()
+      wrapper.findHotspotByTestId('hotspot-1').findTrigger().toSelector()
     );
     const headerBox = await page.getBoundingBox('[data-testid="header"]');
 

diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts
@@ -72,7 +72,9 @@ class AppLayoutDrawersPage extends BasePageObject {
   }
 
   async getMainContentWidth() {
-    const { width } = await this.getBoundingBox(wrapper.find('[data-test-id="content"]').toSelector());
+    const { width } = await this.getBoundingBox(
+      wrapper.findContentRegion().findContentLayoutByTestId('content').toSelector()
+    );
     return width;
   }
 

diff --git a/src/app-layout/__integ__/app-layout-focus-delegation.test.ts b/src/app-layout/__integ__/app-layout-focus-delegation.test.ts
@@ -201,7 +201,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           'moves focus to close button when panel is opened from info link',
           setupTest(
             async page => {
-              await page.click(wrapper.findContentRegion().findLink('[data-testid="info-link-1"]').toSelector());
+              await page.click(wrapper.findContentRegion().findLinkByTestId('info-link-1').toSelector());
               await expect(page.isFocused(wrapper.findToolsClose().toSelector())).resolves.toBe(true);
             },
             { pageName: 'with-fixed-header-footer', theme, mobile }
@@ -212,8 +212,8 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           'moves focus to close button when panel content is changed using second info link',
           setupTest(
             async page => {
-              await page.click(wrapper.findContentRegion().findLink('[data-testid="info-link-1"]').toSelector());
-              await page.click(wrapper.findContentRegion().findLink('[data-testid="info-link-2"]').toSelector());
+              await page.click(wrapper.findContentRegion().findLinkByTestId('info-link-1').toSelector());
+              await page.click(wrapper.findContentRegion().findLinkByTestId('info-link-2').toSelector());
               await expect(page.isFocused(wrapper.findToolsClose().toSelector())).resolves.toBe(true);
             },
             { pageName: 'with-fixed-header-footer', theme, mobile }
@@ -224,8 +224,8 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           'moves focus back to last opened info link when panel is closed',
           setupTest(
             async page => {
-              await page.click(wrapper.findContentRegion().findLink('[data-testid="info-link-1"]').toSelector());
-              const infoLink = wrapper.findContentRegion().findLink('[data-testid="info-link-2"]').toSelector();
+              await page.click(wrapper.findContentRegion().findLinkByTestId('info-link-1').toSelector());
+              const infoLink = wrapper.findContentRegion().findLinkByTestId('info-link-2').toSelector();
               await page.click(infoLink);
               await page.click(wrapper.findToolsClose().toSelector());
               await expect(page.isFocused(infoLink)).resolves.toBe(true);
@@ -238,7 +238,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           'does not move focus back to last opened info link when panel has lost focus - instead focuses tools toggle',
           setupTest(
             async page => {
-              const infoLink = wrapper.findContentRegion().findLink('[data-testid="info-link-2"]').toSelector();
+              const infoLink = wrapper.findContentRegion().findLinkByTestId('info-link-2').toSelector();
               await page.click(infoLink);
               await page.click(wrapper.findContentRegion().findContainer().toSelector());
               await page.click(wrapper.findToolsClose().toSelector());
@@ -255,15 +255,11 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           'moves focus to close button when panel is opened from button',
           setupTest(
             async page => {
-              await page.click(
-                wrapper.findContentRegion().findButton('[data-testid="open-drawer-button-2"]').toSelector()
-              );
+              await page.click(wrapper.findContentRegion().findButtonByTestId('open-drawer-button-2').toSelector());
               await expect(page.isFocused(wrapper.findActiveDrawerCloseButton().toSelector())).resolves.toBe(true);
               await page.keys('Enter');
               await expect(
-                page.isFocused(
-                  wrapper.findContentRegion().findButton('[data-testid="open-drawer-button-2"]').toSelector()
-                )
+                page.isFocused(wrapper.findContentRegion().findButtonByTestId('open-drawer-button-2').toSelector())
               ).resolves.toBe(true);
             },
             { pageName: 'with-drawers', theme, mobile }
@@ -275,12 +271,8 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           'moves focus to close button when panel content is changed using second button',
           setupTest(
             async page => {
-              await page.click(
-                wrapper.findContentRegion().findButton('[data-testid="open-drawer-button"]').toSelector()
-              );
-              await page.click(
-                wrapper.findContentRegion().findButton('[data-testid="open-drawer-button-2"]').toSelector()
-              );
+              await page.click(wrapper.findContentRegion().findButtonByTestId('open-drawer-button').toSelector());
+              await page.click(wrapper.findContentRegion().findButtonByTestId('open-drawer-button-2').toSelector());
               await page.keys('Tab');
               await expect(page.isFocused(wrapper.findActiveDrawerCloseButton().toSelector())).resolves.toBe(true);
             },
@@ -293,19 +285,13 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           setupTest(
             async page => {
               if (!mobile) {
-                await page.click(
-                  wrapper.findContentRegion().findButton('[data-testid="open-drawer-button"]').toSelector()
-                );
+                await page.click(wrapper.findContentRegion().findButtonByTestId('open-drawer-button').toSelector());
               }
-              await page.click(
-                wrapper.findContentRegion().findButton('[data-testid="open-drawer-button-2"]').toSelector()
-              );
+              await page.click(wrapper.findContentRegion().findButtonByTestId('open-drawer-button-2').toSelector());
 
               await page.click(wrapper.findActiveDrawerCloseButton().toSelector());
               await expect(
-                page.isFocused(
-                  wrapper.findContentRegion().findButton('[data-testid="open-drawer-button-2"]').toSelector()
-                )
+                page.isFocused(wrapper.findContentRegion().findButtonByTestId('open-drawer-button-2').toSelector())
               ).resolves.toBe(true);
             },
             { pageName: 'with-drawers', theme, mobile }
@@ -317,10 +303,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
           'does not move focus back to last opened button when panel has lost focus - instead focuses drawer trigger',
           setupTest(
             async page => {
-              const infoLink = wrapper
-                .findContentRegion()
-                .findButton('[data-testid="open-drawer-button-2"]')
-                .toSelector();
+              const infoLink = wrapper.findContentRegion().findButtonByTestId('open-drawer-button-2').toSelector();
               await page.click(infoLink);
               await page.click(wrapper.findContentRegion().findContainer().toSelector());
               await page.click(wrapper.findActiveDrawerCloseButton().toSelector());

diff --git a/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts b/src/app-layout/__integ__/app-layout-refresh-content-width.test.ts
@@ -11,19 +11,19 @@ const wrapper = createWrapper().findAppLayout();
 
 class AppLayoutRefreshNotoficationsPage extends BasePageObject {
   async setDrawersOpen() {
-    await this.click(createWrapper().findButton('[data-test-id="button_set-drawers-open"]').toSelector());
+    await this.click(createWrapper().findButtonByTestId('button_set-drawers-open').toSelector());
   }
   async setContentType(contentType: string) {
-    await this.click(createWrapper().findButton(`[data-test-id="button_type-${contentType}"]`).toSelector());
+    await this.click(createWrapper().findButtonByTestId(`button_type-${contentType}`).toSelector());
   }
   async setContentWidthTo400() {
-    await this.click(createWrapper().findButton('[data-test-id="button_width-400"]').toSelector());
+    await this.click(createWrapper().findButtonByTestId('button_width-400').toSelector());
   }
   async setContentWidthToMaxValue() {
-    await this.click(createWrapper().findButton('[data-test-id="button_width-number-max_value"]').toSelector());
+    await this.click(createWrapper().findButtonByTestId('button_width-number-max_value').toSelector());
   }
   async getContentWidth() {
-    const box = await this.getBoundingBox(wrapper.find('[data-test-id="content"]').toSelector());
+    const box = await this.getBoundingBox(wrapper.find('[data-testid="content"]').toSelector());
     return box.width;
   }
   async getNavigationWidth() {

diff --git a/src/app-layout/__integ__/app-layout-split-panel.test.ts b/src/app-layout/__integ__/app-layout-split-panel.test.ts
@@ -384,8 +384,8 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
       });
       await browser.url(`#/light/app-layout/with-split-panel?${params.toString()}`);
       await page.waitForVisible(content.toSelector());
-      await page.click(content.findContainer('[data-testid="container-1"]').findHeader().findButton().toSelector());
-      await page.click(content.findContainer('[data-testid="container-1"]').findHeader().findButton().toSelector());
+      await page.click(content.findContainerByTestId('container-1').findHeader().findButton().toSelector());
+      await page.click(content.findContainerByTestId('container-1').findHeader().findButton().toSelector());
 
       // Open split panel and ensure it is forced to the bottom.
       await page.click(wrapper.findSplitPanel().findOpenButton().toSelector());

diff --git a/src/app-layout/__integ__/app-layout-sticky-elements.test.ts b/src/app-layout/__integ__/app-layout-sticky-elements.test.ts
@@ -85,7 +85,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
         url: `#/light/app-layout/with-full-page-table-and-split-panel?${getUrlParams(theme)}&splitPanelPosition=side`,
       },
       async page => {
-        const popover = createWrapper().findPopover('[data-testid="split-panel"]');
+        const popover = createWrapper().findPopoverByTestId('split-panel');
         await page.click(popover.findTrigger().toSelector());
         await page.click(popover.findContent().findButton().toSelector());
         await expect(page.getAlertTextAndDismiss()).resolves.toEqual('It worked');
@@ -105,7 +105,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
         // open help panel
         await page.click(wrapper.findToolsToggle().toSelector());
         // do the test
-        const popover = createWrapper().findPopover('[data-testid="help-panel"]');
+        const popover = createWrapper().findPopoverByTestId('help-panel');
         await page.click(popover.findTrigger().toSelector());
         await page.click(popover.findContent().findButton().toSelector());
         await expect(page.getAlertTextAndDismiss()).resolves.toEqual('It worked');

diff --git a/src/app-layout/__integ__/runtime-drawers-with-updates.test.ts b/src/app-layout/__integ__/runtime-drawers-with-updates.test.ts
@@ -31,7 +31,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
       expect(await page.getElementProperty(wrapper.findActiveDrawer().toSelector(), 'clientWidth')).toEqual(320);
 
       await page.click(
-        createWrapper().findToggle('[data-testid="increase-drawer-size-toggle"]').findNativeInput().toSelector()
+        createWrapper().findToggleByTestId('increase-drawer-size-toggle').findNativeInput().toSelector()
       );
 
       expect(await page.getElementProperty(wrapper.findActiveDrawer().toSelector(), 'clientWidth')).toEqual(440);
@@ -52,9 +52,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
       await page.dragAndDrop(wrapper.findActiveDrawerResizeHandle().toSelector(), -200);
       await expect(page.getText('[data-testid="current-size"]')).resolves.toEqual('resized: true');
 
-      await page.click(
-        createWrapper().findToggle('[data-testid="turn-off-resize-toggle"]').findNativeInput().toSelector()
-      );
+      await page.click(createWrapper().findToggleByTestId('turn-off-resize-toggle').findNativeInput().toSelector());
 
       await expect(page.isExisting(wrapper.findActiveDrawerResizeHandle().toSelector())).resolves.toBe(false);
     })

diff --git a/src/autosuggest/__integ__/form-submit.test.ts b/src/autosuggest/__integ__/form-submit.test.ts
@@ -26,7 +26,7 @@ function setupTest(testFn: (page: FormSubmitPageObject) => Promise<void>) {
 test(
   'Should submit form on double enter key',
   setupTest(async page => {
-    const autosuggestNoKeydown = createWrapper().findAutosuggest('[data-testid="autosuggest-no-keydown"]');
+    const autosuggestNoKeydown = createWrapper().findAutosuggestByTestId('autosuggest-no-keydown');
     await page.click(autosuggestNoKeydown.findNativeInput().toSelector());
     await expect(page.isDropdownOpen(autosuggestNoKeydown)).resolves.toBe(true);
     await page.keys('Enter');
@@ -43,7 +43,7 @@ test(
 test(
   'Should allow preventing form submission',
   setupTest(async page => {
-    const autosuggestWithKeydown = createWrapper().findAutosuggest('[data-testid="autosuggest-with-keydown"]');
+    const autosuggestWithKeydown = createWrapper().findAutosuggestByTestId('autosuggest-with-keydown');
     await page.click(autosuggestWithKeydown.findNativeInput().toSelector());
     await expect(page.isDropdownOpen(autosuggestWithKeydown)).resolves.toBe(true);
     await page.keys('Enter');

diff --git a/src/button-dropdown/__integ__/button-dropdown-disabled-reason.test.ts b/src/button-dropdown/__integ__/button-dropdown-disabled-reason.test.ts
@@ -9,7 +9,7 @@ const wrapper = createWrapper();
 
 class ButtonDropdownDisabledReasonPage extends BasePageObject {
   findButtonDropdown() {
-    return wrapper.findButtonDropdown('[data-testid="buttonDropdown"]');
+    return wrapper.findButtonDropdownByTestId('buttonDropdown');
   }
   findDisabledReason() {
     return this.findButtonDropdown().findDisabledReason();

diff --git a/src/button-dropdown/__integ__/button-dropdown-events.test.ts b/src/button-dropdown/__integ__/button-dropdown-events.test.ts
@@ -81,7 +81,7 @@ describe('clicking on a ButtonDropdown item', () => {
   test(
     'main action can be pressed with Enter',
     useBrowser(async browser => {
-      const focusBefore = createWrapper().findButton('[data-testid="focus-before"]');
+      const focusBefore = createWrapper().findButtonByTestId('focus-before');
 
       const page = new BasePageObject(browser);
       await browser.url('#/light/button-dropdown/main-action');