Add unit test coverage

Author: jperals

src/split-panel/__tests__/common.tsx

@@ -0,0 +1,55 @@
+// 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 TestI18nProvider from '../../../lib/components/i18n/testing';
+import {
+  SplitPanelContextProps,
+  SplitPanelContextProvider,
+} from '../../../lib/components/internal/context/split-panel-context';
+import SplitPanel, { SplitPanelProps } from '../../../lib/components/split-panel';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import { defaultSplitPanelContextProps } from './helpers';
+
+const i18nStrings = {
+  closeButtonAriaLabel: 'closeButtonAriaLabel',
+  openButtonAriaLabel: 'openButtonAriaLabel',
+  preferencesTitle: 'preferencesTitle',
+  preferencesPositionLabel: 'preferencesPositionLabel',
+  preferencesPositionDescription: 'preferencesPositionDescription',
+  preferencesPositionSide: 'preferencesPositionSide',
+  preferencesPositionBottom: 'preferencesPositionBottom',
+  preferencesConfirm: 'preferencesConfirm',
+  preferencesCancel: 'preferencesCancel',
+  resizeHandleAriaLabel: 'resizeHandleAriaLabel',
+};
+
+export const defaultProps: SplitPanelProps = {
+  header: 'Split panel header',
+  children: <p>Split panel content</p>,
+  hidePreferencesButton: undefined,
+  i18nStrings,
+};
+
+export function renderSplitPanel({
+  props,
+  contextProps,
+  messages = {},
+  modalMessages = {},
+}: {
+  props?: Partial<SplitPanelProps>;
+  contextProps?: Partial<SplitPanelContextProps>;
+  messages?: Record<string, string>;
+  modalMessages?: Record<string, string>;
+} = {}) {
+  const { container } = render(
+    <TestI18nProvider messages={{ 'split-panel': messages, modal: modalMessages }}>
+      <SplitPanelContextProvider value={{ ...defaultSplitPanelContextProps, ...contextProps }}>
+        <SplitPanel {...defaultProps} {...props} />
+      </SplitPanelContextProvider>
+    </TestI18nProvider>
+  );
+  const wrapper = createWrapper(container).findSplitPanel();
+  return { wrapper };
+}

src/split-panel/__tests__/header.test.tsx

@@ -0,0 +1,50 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { describeEachAppLayout } from '../../app-layout/__tests__/utils';
+import { renderSplitPanel } from './common';
+
+describe('Split panel: Header slots', () => {
+  describeEachAppLayout({ sizes: ['desktop', 'mobile'] }, () => {
+    test('renders headerActions', () => {
+      const { wrapper } = renderSplitPanel({
+        props: { headerActions: <button>Action</button> },
+      });
+      expect(wrapper!.findHeaderActions()).not.toBeNull();
+      expect(wrapper!.findHeaderActions()!.getElement()).toHaveTextContent('Action');
+    });
+
+    test('renders headerBefore', () => {
+      const { wrapper } = renderSplitPanel({
+        props: { headerBefore: <span>Before</span> },
+      });
+      expect(wrapper!.findHeaderBefore()).not.toBeNull();
+      expect(wrapper!.findHeaderBefore()!.getElement()).toHaveTextContent('Before');
+    });
+
+    test('renders headerDescription', () => {
+      const { wrapper } = renderSplitPanel({
+        props: { headerDescription: 'Header description' },
+      });
+      expect(wrapper!.findHeaderDescription()).not.toBeNull();
+      expect(wrapper!.findHeaderDescription()!.getElement()).toHaveTextContent('Header description');
+    });
+
+    test('renders headerInfo', () => {
+      const { wrapper } = renderSplitPanel({
+        props: { headerInfo: <span>Info</span> },
+      });
+      expect(wrapper!.findHeaderInfo()).not.toBeNull();
+      expect(wrapper!.findHeaderInfo()!.getElement()).toHaveTextContent('Info');
+    });
+
+    test('does not render header properties when not provided', () => {
+      const { wrapper } = renderSplitPanel();
+      expect(wrapper!.findHeaderActions()).toBeNull();
+      expect(wrapper!.findHeaderBefore()).toBeNull();
+      expect(wrapper!.findHeaderDescription()).toBeNull();
+      expect(wrapper!.findHeaderInfo()).toBeNull();
+    });
+  });
+});

src/split-panel/__tests__/split-panel.test.tsx

@@ -5,15 +5,11 @@ import { fireEvent, render } from '@testing-library/react';
 
 import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
 
-import TestI18nProvider from '../../../lib/components/i18n/testing';
-import {
-  SplitPanelContextProps,
-  SplitPanelContextProvider,
-} from '../../../lib/components/internal/context/split-panel-context';
-import SplitPanel, { SplitPanelProps } from '../../../lib/components/split-panel';
+import SplitPanel from '../../../lib/components/split-panel';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import { testIf } from '../../__tests__/utils';
 import { describeEachAppLayout } from '../../app-layout/__tests__/utils';
+import { defaultProps, renderSplitPanel } from './common';
 import { defaultSplitPanelContextProps } from './helpers';
 
 import styles from '../../../lib/components/split-panel/styles.css.js';
@@ -29,48 +25,6 @@ jest.mock('../../../lib/components/app-layout/utils/use-pointer-events', () => (
   usePointerEvents: () => onSliderPointerDown,
 }));
 
-const i18nStrings = {
-  closeButtonAriaLabel: 'closeButtonAriaLabel',
-  openButtonAriaLabel: 'openButtonAriaLabel',
-  preferencesTitle: 'preferencesTitle',
-  preferencesPositionLabel: 'preferencesPositionLabel',
-  preferencesPositionDescription: 'preferencesPositionDescription',
-  preferencesPositionSide: 'preferencesPositionSide',
-  preferencesPositionBottom: 'preferencesPositionBottom',
-  preferencesConfirm: 'preferencesConfirm',
-  preferencesCancel: 'preferencesCancel',
-  resizeHandleAriaLabel: 'resizeHandleAriaLabel',
-};
-
-const defaultProps: SplitPanelProps = {
-  header: 'Split panel header',
-  children: <p>Split panel content</p>,
-  hidePreferencesButton: undefined,
-  i18nStrings,
-};
-
-function renderSplitPanel({
-  props,
-  contextProps,
-  messages = {},
-  modalMessages = {},
-}: {
-  props?: Partial<SplitPanelProps>;
-  contextProps?: Partial<SplitPanelContextProps>;
-  messages?: Record<string, string>;
-  modalMessages?: Record<string, string>;
-} = {}) {
-  const { container } = render(
-    <TestI18nProvider messages={{ 'split-panel': messages, modal: modalMessages }}>
-      <SplitPanelContextProvider value={{ ...defaultSplitPanelContextProps, ...contextProps }}>
-        <SplitPanel {...defaultProps} {...props} />
-      </SplitPanelContextProvider>
-    </TestI18nProvider>
-  );
-  const wrapper = createWrapper(container).findSplitPanel();
-  return { wrapper };
-}
-
 afterEach(() => {
   jest.clearAllMocks();
 });