Add some further tests

pages/alert/runtime-content.page.tsx

@@ -104,7 +104,11 @@ export default function () {
           <Checkbox onChange={e => setUrlParams({ loading: e.detail.checked })} checked={loading}>
             Content loading
           </Checkbox>
-          <Checkbox onChange={e => setUrlParams({ hidden: e.detail.checked })} checked={hidden}>
+          <Checkbox
+            onChange={e => setUrlParams({ hidden: e.detail.checked })}
+            checked={hidden}
+            data-testid="unmount-all"
+          >
             Unmount all
           </Checkbox>
           <Checkbox onChange={e => setUnrelatedState(e.detail.checked)} checked={unrelatedState}>
@@ -147,6 +151,7 @@ export default function () {
                 header="Header"
                 action={<Button>Action</Button>}
                 ref={alertRef}
+                data-testid="error-alert"
               >
                 {!contentSwapped ? content2 : content1}
               </Alert>

src/alert/__integ__/runtime-content.test.ts

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+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.keys(['Space']);
+  }
+}
+
+function setupTest(testFn: (page: RuntimeContentPage) => Promise<void>) {
+  return useBrowser(async browser => {
+    const page = new RuntimeContentPage(browser);
+    await browser.url('#/light/alert/runtime-content/?autofocus=true');
+    await page.waitForVisible('.screenshot-area');
+    await testFn(page);
+  });
+}
+
+test(
+  'should focus the alert',
+  setupTest(async page => {
+    await page.rerenderAlerts();
+
+    await expect(page.getFocusedElementText()).resolves.toEqual(expect.stringContaining('---REPLACEMENT---'));
+    // (make sure entire page isn't focused)
+    await expect(page.getFocusedElementText()).resolves.toEqual(expect.not.stringContaining('Header'));
+  })
+);

src/alert/__tests__/runtime-content-initial.test.tsx

@@ -16,6 +16,8 @@ afterEach(() => {
   jest.restoreAllMocks();
 });
 
+// In a separate file as mixing react-test-renderer and @testing-library/react in a single file can cause some issues.
+// We use react-test-renderer here as it works at a slightly lower level, so doesn't "hide" the first render cycle from tests.
 describe('initialCheck method', () => {
   let initialCheck: jest.Mock<boolean>;
   beforeEach(() => {

src/flashbar/__tests__/runtime-content-initial.test.tsx

@@ -16,6 +16,8 @@ afterEach(() => {
   jest.restoreAllMocks();
 });
 
+// In a separate file as mixing react-test-renderer and @testing-library/react in a single file can cause some issues.
+// We use react-test-renderer here as it works at a slightly lower level, so doesn't "hide" the first render cycle from tests.
 describe('initialCheck method', () => {
   let initialCheck: jest.Mock<boolean>;
   const getFirstFlash = (basicRender: ReactTestRenderer) =>