From 8b7a60b33552c27fecf473de6c350ffcfd2fb60b Mon Sep 17 00:00:00 2001
From: Gethin Webster <gethinw@amazon.com>
Date: Fri, 18 Oct 2024 14:37:46 +0200
Subject: [PATCH] Add some further tests

---
 pages/alert/runtime-content.page.tsx          |  7 +++-
 src/alert/__integ__/runtime-content.test.ts   | 33 +++++++++++++++++++
 .../runtime-content-initial.test.tsx          |  2 ++
 .../runtime-content-initial.test.tsx          |  2 ++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/alert/__integ__/runtime-content.test.ts

diff --git a/pages/alert/runtime-content.page.tsx b/pages/alert/runtime-content.page.tsx
index 89e89014ee..a7b92860e5 100644
--- a/pages/alert/runtime-content.page.tsx
+++ b/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>
diff --git a/src/alert/__integ__/runtime-content.test.ts b/src/alert/__integ__/runtime-content.test.ts
new file mode 100644
index 0000000000..b8496c7ed2
--- /dev/null
+++ b/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'));
+  })
+);
diff --git a/src/alert/__tests__/runtime-content-initial.test.tsx b/src/alert/__tests__/runtime-content-initial.test.tsx
index 2cb26a86f9..89a90b0ce0 100644
--- a/src/alert/__tests__/runtime-content-initial.test.tsx
+++ b/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(() => {
diff --git a/src/flashbar/__tests__/runtime-content-initial.test.tsx b/src/flashbar/__tests__/runtime-content-initial.test.tsx
index d390b2f4e3..88b1b5e0f3 100644
--- a/src/flashbar/__tests__/runtime-content-initial.test.tsx
+++ b/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) =>