chore: Add a test on split panel programmatic focus (#3733)

Author: just-boris

pages/app-layout/dashboard-content-type.page.tsx

@@ -1,8 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
-import AppLayout from '~components/app-layout';
+import AppLayout, { AppLayoutProps } from '~components/app-layout';
 import Button from '~components/button';
 import Header from '~components/header';
 import SpaceBetween from '~components/space-between';
@@ -16,9 +16,18 @@ import * as toolsContent from './utils/tools-content';
 
 export default function () {
   const [splitPanelOpen, setSplitPanelOpen] = useState(false);
+  const appLayoutRef = useRef<AppLayoutProps.Ref>(null);
+
+  useEffect(() => {
+    if (splitPanelOpen) {
+      appLayoutRef.current!.focusSplitPanel();
+    }
+  }, [splitPanelOpen]);
+
   return (
     <ScreenshotArea gutters={false}>
       <AppLayout
+        ref={appLayoutRef}
         contentType="dashboard"
         ariaLabels={labels}
         breadcrumbs={<Breadcrumbs />}
@@ -33,6 +42,7 @@ export default function () {
           </SpaceBetween>
         }
         splitPanelPreferences={{ position: 'side' }}
+        onSplitPanelPreferencesChange={() => {}}
         splitPanelOpen={splitPanelOpen}
         splitPanel={
           <SplitPanel

src/app-layout/__integ__/app-layout-split-panel.test.ts

@@ -65,6 +65,14 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme =>
     })
   );
 
+  test(
+    'can focus split panel programmatically after opening',
+    setupTest(async page => {
+      await page.click('button=Add widget');
+      await expect(page.isFocused(wrapper.findSplitPanel().findSlider().toSelector())).resolves.toBe(true);
+    }, '#/light/app-layout/dashboard-content-type')
+  );
+
   (theme === 'classic' ? test : test.skip).each([
     { position: 'side', repeatKey: 'ArrowLeft', expectedValue: 0 },
     { position: 'side', repeatKey: 'ArrowRight', expectedValue: 100 },