chore: Experiment wdiov9 isDisplayed on display:contents

cloudscape-design · Jan 23, 2025 · fa01645 · fa01645
1 parent 372abbd
commit fa01645
Show file tree

Hide file tree

Showing 23 changed files with 2,868 additions and 453 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "start:watch": "gulp watch",
     "start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.js",
     "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.js",
-    "prepare": "husky"
+    "prepare": "husky",
+    "postinstall": "node ./scripts/install-peer-dependency.js browser-test-tools:chore-webdriverio9"
   },
   "dependencies": {
     "@cloudscape-design/collection-hooks": "^1.0.0",
@@ -50,6 +51,9 @@
     "react-dom": "^16.8 || ^17 || ^18"
   },
   "devDependencies": {
+    "@wdio/globals": "^9.4.1",
+    "@wdio/types": "^9.2.2",
+    "webdriverio": "^9.4.1",
     "@babel/core": "^7.23.7",
     "@babel/plugin-syntax-typescript": "^7.23.3",
     "@cloudscape-design/browser-test-tools": "^3.0.0",

diff --git a/scripts/install-peer-dependency.js b/scripts/install-peer-dependency.js
@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Can be used in postinstall script like so:
+// "postinstall": "node ./scripts/install-peer-dependency.js collection-hooks:property-filter-token-groups"
+// where "collection-hooks" is the package to fetch and "property-filter-token-groups" is the branch name in GitHub.
+
+const { execSync } = require('child_process');
+const path = require('path');
+const os = require('os');
+
+const artifactPathMap = {
+  components: '/lib/components/*',
+  'board-components': '/lib/components/*',
+};
+
+const args = process.argv.slice(2);
+if (args.length < 1) {
+  console.error('Usage: install-peer-dependency.js <package-name>:<target-branch>');
+  process.exit(1);
+}
+const [packageName, targetBranch] = args[0].split(':');
+const targetRepository = `https://github.com/cloudscape-design/${packageName}.git`;
+const nodeModulesPackagePath = path.join(process.cwd(), 'node_modules', '@cloudscape-design', packageName);
+const tempDir = path.join(os.tmpdir(), `temp-${packageName}`);
+const artifactPath = artifactPathMap[packageName] ?? '/lib/*';
+
+// Clone the repository and checkout the branch
+console.log(`Cloning ${packageName}:${targetBranch}...`);
+execCommand(`git clone ${targetRepository} ${tempDir}`);
+process.chdir(tempDir);
+execCommand(`git checkout ${targetBranch}`);
+
+// Install dependencies and build
+console.log(`Installing dependencies and building ${packageName}...`);
+execCommand('npm install');
+execCommand('npm run build');
+
+// Remove existing peer dependency in node_modules
+console.log(`Removing existing ${packageName} from node_modules...`);
+execCommand(`rm -rf ${nodeModulesPackagePath}`);
+
+// Copy built peer dependency to node_modules
+console.log(`Copying build ${targetRepository} to node_modules...`);
+execCommand(`mkdir -p ${nodeModulesPackagePath}`);
+execCommand(`cp -R ${tempDir}${artifactPath} ${nodeModulesPackagePath}`);
+
+// Clean up
+console.log('Cleaning up...');
+execCommand(`rm -rf ${tempDir}`);
+
+console.log(`${packageName} has been successfully installed from branch ${targetBranch}!`);
+
+function execCommand(command, options = {}) {
+  try {
+    execSync(command, { stdio: 'inherit', ...options });
+  } catch (error) {
+    console.error(`Error executing command: ${command}`);
+    console.error(`Error message: ${error.message}`);
+    console.error(`Stdout: ${error.stdout && error.stdout.toString()}`);
+    console.error(`Stderr: ${error.stderr && error.stderr.toString()}`);
+    throw error;
+  }
+}
diff --git a/src/__a11y__/a11y-app-layout-toolbar.test.ts b/src/__a11y__/a11y-app-layout-toolbar.test.ts
@@ -22,7 +22,7 @@ describe('A11y checks for app layout toolbar', () => {
         useBrowser(async browser => {
           const page = new A11yPageObject(browser);
           await browser.url(url);
-          await page.waitForVisible('main');
+          await page.waitForVisible('h1');
           await page.assertNoAxeViolations();
         })
       );

diff --git a/src/__a11y__/misc.test.ts b/src/__a11y__/misc.test.ts
@@ -9,7 +9,7 @@ test(
   useBrowser(async browser => {
     const page = new A11yPageObject(browser);
     await browser.url('#/dark/undefined-texts');
-    await page.waitForVisible('main');
+    await page.waitForVisible('h1');
     await expect(page.getUndefinedTexts()).resolves.toEqual([
       'This page contains undefined strings',
       'aria-label: undefined button',

diff --git a/src/__a11y__/run-a11y-tests.ts b/src/__a11y__/run-a11y-tests.ts
@@ -13,7 +13,7 @@ function setupTest(url: string, testFn: (page: A11yPageObject) => Promise<void>)
   return useBrowser(async browser => {
     const page = new A11yPageObject(browser);
     await browser.url(url);
-    await page.waitForVisible('main');
+    await page.waitForVisible('h1');
     await testFn(page);
   });
 }

diff --git a/src/app-layout/__integ__/app-layout-drawers.test.ts b/src/app-layout/__integ__/app-layout-drawers.test.ts
@@ -108,7 +108,7 @@ const setupTest = (
       appLayoutToolbar: `${theme === 'refresh-toolbar'}`,
     }).toString();
     await browser.url(`#/light/app-layout/with-drawers?${params}`);
-    await page.waitForVisible(wrapper.findContentRegion().toSelector());
+    await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
     await testFn(page);
   });
 

diff --git a/src/app-layout/__integ__/app-layout-focus-delegation.test.ts b/src/app-layout/__integ__/app-layout-focus-delegation.test.ts
@@ -34,7 +34,7 @@ function setupTest(
     );
     await page.setWindowSize(mobile ? viewports.mobile : viewports.desktop);
     await browser.url(`#/light/app-layout/${pageName}?${params}`);
-    await page.waitForVisible(wrapper.findContentRegion().toSelector());
+    await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
     await testFn(page);
   });
 }

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
@@ -43,7 +43,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
       const page = new AppLayoutRefreshNotoficationsPage(browser);
       await page.setWindowSize({ ...viewports.desktop, width: viewportWidth });
       await browser.url(`#/light/app-layout/refresh-content-width/?${getUrlParams(theme)}`);
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }

diff --git a/src/app-layout/__integ__/app-layout-refresh-edge-controls.test.ts b/src/app-layout/__integ__/app-layout-refresh-edge-controls.test.ts
@@ -21,7 +21,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
       const page = new AppLayoutRefreshEdgeControlsPage(browser);
       await page.setWindowSize(viewports.desktop);
       await browser.url(`#/light/app-layout/disable-paddings-edge-controls/?${getUrlParams(theme)}`);
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }

diff --git a/src/app-layout/__integ__/app-layout-refresh-notifications.test.ts b/src/app-layout/__integ__/app-layout-refresh-notifications.test.ts
@@ -50,7 +50,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
       await browser.url(
         `#/light/app-layout/notifications-refresh/?${getUrlParams(theme)}${removeNotifications ? `&removeNotifications` : ''}`
       );
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }

diff --git a/src/app-layout/__integ__/app-layout-split-panel.test.ts b/src/app-layout/__integ__/app-layout-split-panel.test.ts
@@ -24,7 +24,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
         appLayoutToolbar: `${theme === 'refresh-toolbar'}`,
       });
       await browser.url(`${url}?${params.toString()}`);
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }
@@ -95,7 +95,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
       const page = new AppLayoutSplitViewPage(browser);
       await page.setWindowSize(viewports.desktop);
       await browser.url(`#/light/app-layout/with-split-panel?visualRefresh=false&splitPanelPosition=side`);
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await page.openPanel();
       await expect(page.getPanelPosition()).resolves.toEqual('side');
     })

diff --git a/src/app-layout/__integ__/app-layout-sticky-elements.test.ts b/src/app-layout/__integ__/app-layout-sticky-elements.test.ts
@@ -30,7 +30,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
       const page = new AppLayoutStickyPage(browser);
       await page.setWindowSize(viewport);
       await browser.url(url);
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }

diff --git a/src/app-layout/__integ__/awsui-applayout-sticky.test.ts b/src/app-layout/__integ__/awsui-applayout-sticky.test.ts
@@ -26,7 +26,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
       const page = new AppLayoutStickyPage(browser);
       await page.setWindowSize(viewport);
       await browser.url(`#/light/app-layout/with-sticky-notifications/?${getUrlParams(theme)}`);
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }

diff --git a/src/app-layout/__integ__/awsui-applayout.test.ts b/src/app-layout/__integ__/awsui-applayout.test.ts
@@ -15,7 +15,7 @@ const mobileSelector = `.${testutilStyles['mobile-bar']}`;
 class AppLayoutPage extends BasePageObject {
   async visit(url: string) {
     await this.browser.url(url);
-    await this.waitForVisible(wrapper.findContentRegion().toSelector());
+    await this.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
   }
 
   getNavPosition() {

diff --git a/src/app-layout/__integ__/global-breadcrumbs.test.ts b/src/app-layout/__integ__/global-breadcrumbs.test.ts
@@ -28,7 +28,7 @@ function setupTest({ url }: { url: string }, testFn: (page: GlobalBreadcrumbsPag
   return useBrowser(async browser => {
     const page = new GlobalBreadcrumbsPage(browser);
     await browser.url(url);
-    await page.waitForVisible(wrapper.findAppLayout().findContentRegion().toSelector());
+    await page.waitForVisible(wrapper.findAppLayout().findContentRegion().find('h1').toSelector());
     await testFn(page);
   });
 }

diff --git a/src/app-layout/__integ__/runtime-drawers.test.ts b/src/app-layout/__integ__/runtime-drawers.test.ts
@@ -30,7 +30,7 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
           splitPanelPosition: 'side',
         })}`
       );
-      await page.waitForVisible(wrapper.findContentRegion().toSelector());
+      await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }

diff --git a/src/app-layout/__integ__/utils.ts b/src/app-layout/__integ__/utils.ts
@@ -79,7 +79,7 @@ export const setupTest = (
       ...(splitPanelPosition ? { splitPanelPosition } : {}),
     }).toString();
     await browser.url(`#/light/app-layout/with-drawers?${params}`);
-    await page.waitForVisible(wrapper.findContentRegion().toSelector());
+    await page.waitForVisible(wrapper.findContentRegion().find('h1').toSelector());
     await testFn(page);
   });
 

diff --git a/src/container/__integ__/awsui-applayout-sticky.test.ts b/src/container/__integ__/awsui-applayout-sticky.test.ts
@@ -32,7 +32,7 @@ function setupTest({ viewport = viewports.desktop }, testFn: (page: AppLayoutSti
     const page = new AppLayoutStickyPage(browser);
     await page.setWindowSize(viewport);
     await browser.url('#/light/container/sticky-with-app-layout?visualRefresh=false');
-    await page.waitForVisible(appLayoutWrapper.findContentRegion().toSelector());
+    await page.waitForVisible(appLayoutWrapper.findContentRegion().find('h1').toSelector());
     await testFn(page);
   });
 }

diff --git a/src/container/__integ__/awsui-legacy-applayout-sticky.test.ts b/src/container/__integ__/awsui-legacy-applayout-sticky.test.ts
@@ -28,7 +28,7 @@ describe.each(['classic', 'visualRefresh'])('In %s', type => {
       await browser.url(
         `#/light/app-layout/legacy-table-sticky-notifications/?visualRefresh=${type === 'visualRefresh'}`
       );
-      await page.waitForVisible(appLayoutWrapper.findContentRegion().toSelector());
+      await page.waitForVisible(appLayoutWrapper.findContentRegion().find('h1').toSelector());
       await testFn(page);
     });
   }

diff --git a/src/property-filter/__a11y__/token-editor.test.ts b/src/property-filter/__a11y__/token-editor.test.ts
@@ -12,7 +12,7 @@ function setupTest(testFn: (page: A11yPageObject) => Promise<void>) {
   return useBrowser(async browser => {
     const page = new A11yPageObject(browser);
     await browser.url('#/light/property-filter/async-loading.integ?token=property');
-    await page.waitForVisible('main');
+    await page.waitForVisible('h1');
     await testFn(page);
   });
 }

diff --git a/src/property-filter/__integ__/async-loading.test.ts b/src/property-filter/__integ__/async-loading.test.ts
@@ -82,7 +82,7 @@ function setupTest(
   return useBrowser(async browser => {
     const page = new AsyncPropertyFilterPage(browser);
     await browser.url(`#/light/property-filter/async-loading.integ?asyncProperties=${asyncProperties}&token=${token}`);
-    await page.waitForVisible('main');
+    await page.waitForVisible('h1');
     await testFn(page);
   });
 }

diff --git a/src/tabs/__integ__/tabs-in-help-panel.test.ts b/src/tabs/__integ__/tabs-in-help-panel.test.ts
@@ -12,7 +12,7 @@ const setupTest = (visualRefresh = false, testFn: (page: BasePageObject) => Prom
   return useBrowser(async browser => {
     const page = new BasePageObject(browser);
     await browser.url(`#/light/tabs/in-app-layout-help-panel/?${visualRefresh ? 'visualRefresh=true' : ''}`);
-    await page.waitForVisible(appLayoutWrapper.findContentRegion().toSelector());
+    await page.waitForVisible(appLayoutWrapper.findContentRegion().find('h1').toSelector());
     await testFn(page);
   });
 };