chore: removed unnecessary tests, added padding for itemsHeader

cloudscape-design · Sep 9, 2024 · 7e23170 · 7e23170
1 parent 1fa0b14
commit 7e23170
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 86 deletions.
diff --git a/pages/side-navigation/app-layout.page.tsx b/pages/side-navigation/app-layout.page.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import AppLayout from '~components/app-layout';
 import Badge from '~components/badge';
+import Select from '~components/select';
 import SideNavigation, { SideNavigationProps } from '~components/side-navigation';
 
 import labels from '../app-layout/utils/labels';
@@ -102,6 +103,17 @@ const items: SideNavigationProps.Item[] = [
   { type: 'link', text: 'Documentation', href: '#', external: true, externalIconAriaLabel: 'Opens in a new tab' },
 ];
 
+const itemsHeader = (
+  <Select
+    options={[
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ]}
+    selectedOption={{ value: 'option1', label: 'Option 1' }}
+    onChange={() => null}
+  />
+);
+
 export default function SideNavigationPage() {
   const [open, setOpen] = React.useState(true);
 
@@ -125,6 +137,7 @@ export default function SideNavigationPage() {
             },
           }}
           items={items}
+          itemsHeader={itemsHeader}
         />
       }
       content={

diff --git a/src/side-navigation/__integ__/side-navigation.test.ts b/src/side-navigation/__integ__/side-navigation.test.ts
@@ -39,16 +39,4 @@ describe('SideNavigation', () => {
       })
     );
   });
-
-  describe('Items Header', () => {
-    it(
-      'should be visible when items header is provided',
-      useBrowser(async browser => {
-        await browser.url('#/light/side-navigation/integration');
-        const page = new BasePageObject(browser);
-
-        expect(page.isExisting(wrapper.findItemsHeader().toSelector())).toBeTruthy();
-      })
-    );
-  });
 });
diff --git a/src/side-navigation/__tests__/side-navigation.test.tsx b/src/side-navigation/__tests__/side-navigation.test.tsx
@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
-import Multiselect from '../../../lib/components/multiselect';
 import Select from '../../../lib/components/select';
 import SideNavigation, { SideNavigationProps } from '../../../lib/components/side-navigation';
 import createWrapper from '../../../lib/components/test-utils/dom';
@@ -1223,84 +1222,16 @@ describe('SideNavigation', () => {
   });
 
   describe('Items Header', () => {
-    it('renders select component as items header', () => {
-      const options = [
-        { label: 'Option 1', value: '1', description: 'Description 1', tags: ['tag1', 'tag2'] },
-        { label: 'Option 2', value: '2', description: 'Description 2', tags: ['tag1', 'tag2'] },
-      ];
-      const selectedOption = { label: 'Option 1', value: '1', description: 'Description 1', tags: ['tag1', 'tag2'] };
-      const inlineLabelText = 'Label Text';
-      const triggerVariant = 'label';
-
-      const selectComponent = (
-        <Select
-          options={options}
-          selectedOption={selectedOption}
-          onChange={() => null}
-          inlineLabelText={inlineLabelText}
-          triggerVariant={triggerVariant}
-        />
-      );
+    it('renders select component when provided', () => {
       const wrapper = renderSideNavigation({
-        itemsHeader: selectComponent,
+        itemsHeader: <Select options={[]} selectedOption={{}} onChange={() => null} />,
       });
       expect(wrapper.findItemsHeader()!.getElement()).toBeInTheDocument();
-      expect(wrapper.findItemsHeader()!.getElement()).toHaveTextContent(inlineLabelText);
       expect(wrapper.findItemsHeader()!.findSelect()?.getElement()).toBeInTheDocument();
-      expect(wrapper.findItemsHeader()!.findSelect()?.getElement()).toHaveTextContent(selectedOption.label);
-      wrapper.findItemsHeader()!.findSelect()?.openDropdown();
-      expect(wrapper.findItemsHeader()!.findSelect()?.findDropdown().findOptions()).toHaveLength(options.length);
     });
-    it('renders multi select component as items header', () => {
-      const selectedOptions = [
-        {
-          label: 'Option 1',
-          value: '1',
-          description: 'This is a description',
-        },
-        { label: 'Option 5', value: '5' },
-      ];
-      const multiselectComponent = (
-        <Multiselect
-          selectedOptions={selectedOptions}
-          onChange={() => null}
-          options={[
-            {
-              label: 'Option 1',
-              value: '1',
-              description: 'This is a description',
-            },
-            {
-              label: 'Option 2',
-              value: '2',
-              iconName: 'unlocked',
-              labelTag: 'This is a label tag',
-            },
-            {
-              label: 'Option 3 (disabled)',
-              value: '3',
-              iconName: 'share',
-              tags: ['Tags go here', 'Tag1', 'Tag2'],
-              disabled: true,
-            },
-            {
-              label: 'Option 4',
-              value: '4',
-              filteringTags: ['filtering', 'tags', 'these are filtering tags'],
-            },
-            { label: 'Option 5', value: '5' },
-          ]}
-          placeholder="Choose options"
-        />
-      );
-      const wrapper = renderSideNavigation({
-        itemsHeader: multiselectComponent,
-      });
-      expect(wrapper.findItemsHeader()!.getElement()).toBeInTheDocument();
-      expect(wrapper.findItemsHeader()!.findMultiselect()?.getElement()).toBeInTheDocument();
-      wrapper.findItemsHeader()!.findMultiselect()?.openDropdown();
-      expect(wrapper.findItemsHeader()!.findMultiselect()?.findDropdown().findOptions()).toHaveLength(5);
-      expect(wrapper.findItemsHeader()!.findMultiselect()?.findDropdown().findSelectedOptions()).toHaveLength(2);
+    it('returns null when items header is not provided', () => {
+      const wrapper = renderSideNavigation({});
+      expect(wrapper.findItemsHeader()).toBeNull();
     });
   });
 });

diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss
@@ -54,6 +54,7 @@
 
 .items-header {
   margin-block-start: awsui.$space-panel-content-top;
+  padding-inline: awsui.$space-l;
 }
 
 .list-container {