new snapshot tests

Author: just-boris

src/app-layout/__tests__/__snapshots__/widget-contract-old.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Theme=refresh-toolbar, Size=desktop contract for default use-case 1`] = `
 Map {
-  [Function] => {
+  "BeforeMainSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -53,7 +53,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "TopContentSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -104,7 +104,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "BottomContentSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -155,7 +155,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "AfterMainSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -206,7 +206,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "AppLayoutStateProvider" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -249,7 +249,7 @@ Map {
 
 exports[`Theme=refresh-toolbar, Size=desktop contract with all slots provided 1`] = `
 Map {
-  [Function] => {
+  "BeforeMainSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -319,7 +319,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "TopContentSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -389,7 +389,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "BottomContentSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -459,7 +459,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "AfterMainSlotImplementation" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -529,7 +529,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "AppLayoutStateProvider" => {
     "appLayoutProps": {
       "ariaLabels": {
         "drawers": undefined,
@@ -590,7 +590,7 @@ Map {
 
 exports[`Theme=refresh-toolbar, Size=desktop contract with drawers 1`] = `
 Map {
-  [Function] => {
+  "BeforeMainSlotImplementation" => {
     "appLayoutProps": {
       "activeDrawerId": "security",
       "ariaLabels": {
@@ -660,7 +660,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "TopContentSlotImplementation" => {
     "appLayoutProps": {
       "activeDrawerId": "security",
       "ariaLabels": {
@@ -730,7 +730,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "BottomContentSlotImplementation" => {
     "appLayoutProps": {
       "activeDrawerId": "security",
       "ariaLabels": {
@@ -800,7 +800,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "AfterMainSlotImplementation" => {
     "appLayoutProps": {
       "activeDrawerId": "security",
       "ariaLabels": {
@@ -870,7 +870,7 @@ Map {
       "onNavigationToggle": undefined,
     },
   },
-  [Function] => {
+  "AppLayoutStateProvider" => {
     "appLayoutProps": {
       "activeDrawerId": "security",
       "ariaLabels": {

src/app-layout/__tests__/__snapshots__/widget-contract-split-panel-old.test.tsx.snap

@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import './widget-old-mocks'; // should be imported before components to activate mocks
+import AppLayout from '../../../lib/components/app-layout';
+import { describeEachAppLayout, testDrawer } from './utils';
+import { renderedProps } from './widget-old-mocks';
+
+jest.mock('@cloudscape-design/component-toolkit/internal', () => {
+  let counter = 0;
+  return {
+    ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+    useUniqueId: (prefix: string) => `${prefix}${++counter}`,
+  };
+});
+
+describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => {
+  beforeEach(() => {
+    renderedProps.clear();
+  });
+
+  test('contract for default use-case', () => {
+    render(<AppLayout />);
+    expect(renderedProps).toMatchSnapshot();
+  });
+
+  test('contract with all slots provided', () => {
+    render(
+      <AppLayout
+        breadcrumbs={<div>breadcrumbs</div>}
+        notifications={<div>notifications</div>}
+        navigation={<div>navigation</div>}
+        tools={<div>tools</div>}
+        content={<div>content</div>}
+        splitPanel={<div>split panel</div>}
+      />
+    );
+    expect(renderedProps).toMatchSnapshot();
+  });
+
+  test('contract with drawers', () => {
+    render(<AppLayout activeDrawerId={testDrawer.id} onDrawerChange={() => {}} drawers={[testDrawer]} />);
+    expect(renderedProps).toMatchSnapshot();
+  });
+});

src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap

@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable simple-import-sort/imports */
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import './widget-old-mocks'; // should be imported before components to activate mocks
+import { describeEachAppLayout } from './utils';
+import AppLayout from '../../../lib/components/app-layout';
+import SplitPanel from '../../../lib/components/split-panel';
+import createWrapper from '../../../lib/components/test-utils/selectors';
+import { renderedProps } from './widget-old-mocks';
+
+jest.mock('@cloudscape-design/component-toolkit/internal', () => {
+  let counter = 0;
+  return {
+    ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+    useUniqueId: (prefix: string) => `${prefix}${++counter}`,
+    useRandomId: (prefix: string) => `${prefix}${++counter}`,
+  };
+});
+
+describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => {
+  beforeEach(() => {
+    renderedProps.clear();
+  });
+
+  test('contract with split panel', async () => {
+    render(
+      <AppLayout
+        splitPanel={
+          <SplitPanel header="Split panel header">
+            <div>split panel content</div>
+          </SplitPanel>
+        }
+      />
+    );
+    await waitFor(() => {
+      expect(createWrapper().findSplitPanel()).toBeTruthy();
+    });
+    expect(renderedProps).toMatchSnapshot();
+  });
+
+  test('contract with split panel (trigger is hidden)', async () => {
+    render(
+      <AppLayout
+        splitPanel={
+          <SplitPanel header="Split panel header" closeBehavior="hide">
+            <div>split panel content</div>
+          </SplitPanel>
+        }
+      />
+    );
+    await waitFor(() => {
+      expect(createWrapper().findSplitPanel()).toBeTruthy();
+    });
+    expect(renderedProps).toMatchSnapshot();
+  });
+});

src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap

@@ -4,78 +4,13 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 
+import './widget-new-mocks'; // should be imported before components to activate mocks
 import { describeEachAppLayout } from './utils';
 import AppLayout from '../../../lib/components/app-layout';
 import SplitPanel from '../../../lib/components/split-panel';
 import createWrapper from '../../../lib/components/test-utils/selectors';
+import { renderedProps } from './widget-new-mocks';
 
-const isObject = (value: any) => Object.prototype.toString.call(value) === '[object Object]';
-
-// this string
-// awsui_root_7nfqu_jksfw_153 awsui_root_1fj9k_z5zo8_5 awsui_has-adaptive-widths-default_7nfqu_jksfw_197
-// becomes
-// awsui_root awsui_root awsui_has-adaptive-widths-default
-function skipHashInClassnames(classNames: string): string {
-  return classNames
-    .split(' ')
-    .map(className => className.replace(/_[a-z0-9]+_[a-z0-9]+_\d+$/i, ''))
-    .join(' ');
-}
-
-// --awsui-max-content-width-kcc2gu becomes --awsui-max-content-width
-function skipHashInGLobalStyle(style: string): string {
-  if (!style.startsWith('--awsui')) {
-    return style;
-  }
-
-  const parts = style.split('-');
-  parts.pop();
-  return parts.join('-');
-}
-
-function sanitizeProps(props: any): any {
-  if (!isObject(props)) {
-    return props;
-  }
-  if (React.isValidElement(props) || props?.current instanceof Element) {
-    return '__JSX__';
-  }
-  // Now that classNames and styles are provided by the widget API,
-  // they need to be included in the check.
-  // However, they're regenerated on every build, and the hash part makes the snapshot test flaky.
-  // To avoid this, we strip out the hash portion.
-  if (props.className) {
-    return {
-      ...props,
-      className: skipHashInClassnames(props.className),
-      ...(props.style && {
-        style: Object.keys(props.style).reduce(
-          (acc, key) => ({ ...acc, [skipHashInGLobalStyle(key)]: props.style[key] }),
-          {}
-        ),
-      }),
-    };
-  }
-  return Object.fromEntries(
-    Object.entries(props).map(([key, value]) => {
-      return [key, sanitizeProps(value)];
-    })
-  );
-}
-
-const renderedProps = new Map();
-function createWidgetizedComponentMock(Implementation: React.ComponentType) {
-  return () => {
-    return function Widgetized(props: any) {
-      renderedProps.set(Implementation, sanitizeProps(props));
-      return <Implementation {...(props as any)} />;
-    };
-  };
-}
-
-jest.mock('../../../lib/components/internal/widgets', () => ({
-  createWidgetizedComponent: createWidgetizedComponentMock,
-}));
 jest.mock('@cloudscape-design/component-toolkit/internal', () => {
   let counter = 0;
   return {

src/app-layout/__tests__/widget-contract-old.test.tsx

@@ -3,22 +3,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import './widget-new-mocks'; // should be imported before components to activate mocks
 import AppLayout from '../../../lib/components/app-layout';
 import { describeEachAppLayout, testDrawer } from './utils';
+import { renderedProps } from './widget-new-mocks';
 
-const renderedProps = new Map();
-function createWidgetizedComponentMock(Implementation: React.ComponentType) {
-  return () => {
-    return function Widgetized(props: any) {
-      renderedProps.set(Implementation, props);
-      return null;
-    };
-  };
-}
-
-jest.mock('../../../lib/components/internal/widgets', () => ({
-  createWidgetizedComponent: createWidgetizedComponentMock,
-}));
 jest.mock('@cloudscape-design/component-toolkit/internal', () => {
   let counter = 0;
   return {

src/app-layout/__tests__/widget-contract-split-panel-old.test.tsx

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+export const renderedProps = new Map();
+function createWidgetizedComponentMock(Implementation: React.ComponentType) {
+  return () => {
+    return function Widgetized(props: any) {
+      renderedProps.set(Implementation.name, props);
+      return null;
+    };
+  };
+}
+
+jest.mock('../../../lib/components/internal/widgets', () => ({
+  createWidgetizedComponent: createWidgetizedComponentMock,
+}));