chore: Refactoring, fixed skeleton test

Author: georgylobko

src/app-layout/__tests__/skeleton.test.tsx

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 
 import AppLayout from '../../../lib/components/app-layout';
 import BreadcrumbGroup from '../../../lib/components/breadcrumb-group';
@@ -26,7 +27,7 @@ jest.mock('../../../lib/components/internal/widgets', () => ({
 }));
 
 describeEachAppLayout({ themes: ['refresh-toolbar'], skipInitialTest: true }, () => {
-  it('renders complete component by default', () => {
+  it('renders complete component by default', async () => {
     const { wrapper } = renderComponent(
       <AppLayout
         navigation="test nav"
@@ -39,7 +40,9 @@ describeEachAppLayout({ themes: ['refresh-toolbar'], skipInitialTest: true }, ()
     expect(wrapper.findNavigation()).toBeTruthy();
     expect(wrapper.findBreadcrumbs()).toBeTruthy();
     expect(wrapper.findNotifications()).toBeTruthy();
-    expect(wrapper.findTools()).toBeTruthy();
+    await waitFor(() => {
+      expect(wrapper.findTools()).toBeTruthy();
+    });
     expect(wrapper.findContentRegion()).toBeTruthy();
   });
 

src/app-layout/visual-refresh-toolbar/app-layout-state.tsx

@@ -11,10 +11,6 @@ import { useAppLayout } from './use-app-layout';
 export interface AppLayoutStateProps {
   props: AppLayoutInternalProps;
   forwardRef: ForwardedRef<AppLayoutProps.Ref>;
-  // onChange: (
-  //   appLayoutState: ReturnType<typeof useAppLayout>,
-  //   skeletonAttributes: ReturnType<typeof useSkeletonSlotsAttributes> | null
-  // ) => void;
   stateManager: any;
 }
 

src/app-layout/visual-refresh-toolbar/index.tsx

@@ -15,7 +15,6 @@ const AppLayoutStateProvider: FC<{
     appLayoutState: ReturnType<typeof useAppLayout> | null,
     skeletonSlotsAttributes: ReturnType<typeof useSkeletonSlotsAttributes> | null
   ) => React.ReactNode;
-  // appLayoutStateChangeId: string;
   stateManager: any;
 }> = ({ stateManager, children }) => {
   const [appLayoutState, setAppLayoutState] = useState(null);
@@ -26,28 +25,18 @@ const AppLayoutStateProvider: FC<{
       setAppLayoutState(appLayoutState);
       setSkeletonAttributes(skeletonAttributes);
     };
-    // addEventListener(appLayoutStateChangeId, event => {
-    //   unstable_batchedUpdates(() => {
-    //     setAppLayoutState((event as any).detail.appLayoutState);
-    //     setSkeletonAttributes((event as any).detail.skeletonAttributes);
-    //   });
-    // });
   }, [stateManager]);
   return <>{children(appLayoutState, skeletonAttributes)}</>;
 };
 
 const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutInternalProps>(
   (props, forwardRef) => {
-    // const appLayoutStateChangeId = useUniqueId('app-layout-state-change-');
     const stateManager = useRef<any>({});
 
     return (
       <>
         <AppLayoutWidgetizedState props={props} forwardRef={forwardRef} stateManager={stateManager} />
-        <AppLayoutStateProvider
-          stateManager={stateManager}
-          // appLayoutStateChangeId={appLayoutStateChangeId}
-        >
+        <AppLayoutStateProvider stateManager={stateManager}>
           {(appLayoutState, skeletonSlotsAttributes) => {
             return (
               <AppLayoutVisibilityContext.Provider value={appLayoutState?.isIntersecting ?? true}>

src/app-layout/visual-refresh-toolbar/notifications/index.tsx

@@ -29,12 +29,12 @@ export function AppLayoutNotificationsImplementation({
 
   useResizeObserver(rootRef, entry => {
     const hasContent = entry.contentBoxHeight > 0;
-    setNotificationsHeight(hasContent ? entry.borderBoxHeight : 0);
+    setNotificationsHeight?.(hasContent ? entry.borderBoxHeight : 0);
     setHasNotificationsContent(hasContent);
   });
   useEffect(() => {
     return () => {
-      setNotificationsHeight(0);
+      setNotificationsHeight?.(0);
     };
     // unmount effect only
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/app-layout/visual-refresh-toolbar/skeleton/index.tsx

@@ -124,6 +124,7 @@ export const SkeletonLayout = (props: RootSkeletonLayoutProps) => {
         verticalOffsets,
         placement,
         navigationOpen: resolvedNavigationOpen,
+        breadcrumbs,
       },
       toolbarProps,
       registered,