Merge pull request #65 from LuisValgoi/issue-57

[ISSUE-57] Continuation - Popover Elements Tests

Author: lpohren

packages/ui5-webcomponents-react-seed/src/components/Popover/Info/PopoverInfo.js

@@ -8,10 +8,14 @@ import { spacing } from '@ui5/webcomponents-react-base';
 
 export default function PopoverInfo({ popoverRef, placementType, title, children }) {
   return (
-    <Popover ref={popoverRef} placementType={placementType && PlacementType.Bottom}>
+    <Popover data-testid="popoverInfo-wrapper" ref={popoverRef} placementType={placementType ? placementType : PlacementType.Bottom}>
       <FlexBox direction={FlexBoxDirection.Column}>
         <div className="popover-header">
-          <Title style={spacing.sapUiContentPadding}>{title}</Title>
+          {title && (
+            <Title data-testid="popoverInfo-title-wrapper" style={spacing.sapUiContentPadding}>
+              {title}
+            </Title>
+          )}
         </div>
         <div className="popover-content">{children}</div>
       </FlexBox>

packages/ui5-webcomponents-react-seed/src/components/Popover/Info/PopoverInfo.test.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../util/TestSetup';
+
+import PopoverInfo from './PopoverInfo';
+
+const popoverInfoRef = {
+  current: {
+    openBy: jest.fn(),
+  },
+};
+
+describe('PopoverInfo.js Test Suite', () => {
+  beforeEach(() => {
+    render(
+      <>
+        <p data-testid="opener-wrapper" onClick={(e) => popoverInfoRef.current.openBy(e.detail.targetRef)}>
+          Open Popover
+        </p>
+        <PopoverInfo popoverRef={popoverInfoRef} title="Some Title" />
+      </>,
+    );
+  });
+
+  test('should render once triggered to open', async () => {
+    const opener = screen.getByTestId('opener-wrapper');
+    await userEvent.click(opener);
+
+    const popoverInfo = screen.getByTestId('popoverInfo-wrapper');
+    expect(popoverInfo).toBeInTheDocument();
+  });
+
+  test('should render placed at bottom', async () => {
+    const opener = screen.getByTestId('opener-wrapper');
+    await userEvent.click(opener);
+
+    const popoverInfo = screen.getByTestId('popoverInfo-wrapper');
+    expect(popoverInfo).toBeInTheDocument();
+    expect(popoverInfo).toHaveProperty('placementType', 'Bottom');
+  });
+
+  test('should render with title if passed', async () => {
+    const opener = screen.getByTestId('opener-wrapper');
+    await userEvent.click(opener);
+
+    const popoverInfo = screen.getByTestId('popoverInfo-wrapper');
+    const title = screen.getByTestId('popoverInfo-title-wrapper');
+    expect(popoverInfo).toBeInTheDocument();
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent('Some Title');
+  });
+
+  test('should render without title if passed', async () => {
+    render(
+      <>
+        <p data-testid="opener-wrapper" onClick={(e) => popoverInfoRef.current.openBy(e.detail.targetRef)}>
+          Open Popover
+        </p>
+        <PopoverInfo popoverRef={popoverInfoRef} />
+      </>,
+    );
+
+    const opener = screen.getAllByTestId('opener-wrapper')[1];
+    await userEvent.click(opener);
+
+    const popoverInfo = screen.getAllByTestId('popoverInfo-wrapper')[1];
+    const title = screen.getAllByTestId('popoverInfo-title-wrapper')[1];
+    expect(popoverInfo).toBeInTheDocument();
+    expect(title).toBeUndefined();
+  });
+});

packages/ui5-webcomponents-react-seed/src/components/Popover/List/PopoverListItems.js

@@ -4,16 +4,18 @@ import PopoverInfo from '../Info/PopoverInfo';
 
 export default function PopoverListItems({ popoverRef, title, items }) {
   return (
-    <PopoverInfo popoverRef={popoverRef} title={title}>
-      <List>
-        {items.map((item, index) => {
-          return (
-            <StandardListItem key={index} selected={item.selected} info={item.info} icon={item.icon} description={item.description} onClick={item.onClick}>
-              {item.children}
-            </StandardListItem>
-          );
-        })}
-      </List>
-    </PopoverInfo>
+    <div data-testid="popoverListItems-wrapper">
+      <PopoverInfo popoverRef={popoverRef} title={title}>
+        <List data-testid="popoverListItems-listOfElements-wrapper">
+          {items.map((item, index) => {
+            return (
+              <StandardListItem key={index} selected={item.selected} info={item.info} icon={item.icon} description={item.description} onClick={item.onClick}>
+                {item.children}
+              </StandardListItem>
+            );
+          })}
+        </List>
+      </PopoverInfo>
+    </div>
   );
 }

packages/ui5-webcomponents-react-seed/src/components/Popover/List/PopoverListItems.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../../util/TestSetup';
+
+import PopoverListItems from './PopoverListItems';
+
+const popoverListItemsRef = {
+  current: {
+    openBy: jest.fn(),
+  },
+};
+
+const popoverItems = [
+  {
+    children: 'Language Switch',
+    icon: 'user-settings',
+  },
+  {
+    children: 'Theme Switch',
+    icon: 'customize',
+  },
+];
+
+describe('PopoverListItems.js Test Suite', () => {
+  beforeEach(() => {
+    render(
+      <>
+        <p data-testid="opener-wrapper" onClick={(e) => popoverListItemsRef.current.openBy(e.detail.targetRef)}>
+          Open Popover
+        </p>
+        <PopoverListItems popoverRef={popoverListItemsRef} title="Some Title" items={popoverItems} />
+      </>,
+    );
+  });
+
+  test('should render once triggered to open', async () => {
+    const opener = screen.getByTestId('opener-wrapper');
+    await userEvent.click(opener);
+
+    const popoverListItems = screen.getByTestId('popoverListItems-wrapper');
+    expect(popoverListItems).toBeInTheDocument();
+  });
+
+  test('should render two items in the list if passed correctly', async () => {
+    const opener = screen.getByTestId('opener-wrapper');
+    await userEvent.click(opener);
+
+    const popoverListItems = screen.getByTestId('popoverListItems-wrapper');
+    const popoverListItemsListOfElements = screen.getByTestId('popoverListItems-listOfElements-wrapper');
+    expect(popoverListItems).toBeInTheDocument();
+    expect(popoverListItemsListOfElements).toBeInTheDocument();
+    expect(popoverListItemsListOfElements.children).toHaveLength(2);
+  });
+});

packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js

@@ -24,7 +24,7 @@ const Shell = ({ title, ...props }) => {
   const { t } = useTranslation();
   const history = useHistory();
   const popoverConfigItemsRef = useRef(null);
-  const popoverItemsInterface = [
+  const popoverItems = [
     {
       children: t('shell.button.user.settings.item.languageSwitch'),
       icon: 'user-settings',
@@ -49,8 +49,8 @@ const Shell = ({ title, ...props }) => {
         onProfileClick={(e) => popoverConfigItemsRef.current.openBy(e.detail.targetRef)}
         {...props}
       />
-      <div style={style.emptySpace} />
-      <PopoverListItems popoverRef={popoverConfigItemsRef} title={t('shell.button.user.settings')} items={popoverItemsInterface} />
+      <div data-testid="emptySpace-wrapper" style={style.emptySpace} />
+      <PopoverListItems popoverRef={popoverConfigItemsRef} title={t('shell.button.user.settings')} items={popoverItems} />
     </>
   );
 };

packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.test.js

@@ -22,6 +22,19 @@ describe('Shell.js Test Suite', () => {
     expect(shell).toBeInTheDocument();
   });
 
+  test('should contain an empty space after the Shell Element', () => {
+    const emptySpace = screen.getByTestId('emptySpace-wrapper');
+
+    expect(emptySpace).toBeInTheDocument();
+  });
+
+  test('should contain an profile element', () => {
+    const { container } = render(<Shell title="Test" />);
+    const profile = container.querySelector('[slot="profile"]');
+
+    expect(profile).toBeInTheDocument();
+  });
+
   test('should render with primaryTitle "Test"', () => {
     render(<Shell title="Test" />);