@learningpool/ui 1.6.0 → 1.6.1

package/src/lib/components/datadisplay/Avatar/Avatar.test.tsx

@@ -0,0 +1,187 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Avatar, AvatarGroup } from '../../../../lib/'
+import FolderIcon from '@mui/icons-material/Folder'
+// import logoImage from '../../../../lib/assets/avatar-1.jpg'
+
+// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
+// unmount and cleanup DOM after the test is finished.
+afterEach(cleanup)
+
+describe('Test -- Avatar component', () => {
+  it('renders a Avatar', () => {
+    render(<Avatar data-testid="AvatarTest">LP</Avatar>)
+
+    expect(screen.getByTestId('AvatarTest')).toMatchInlineSnapshot(`
+      <div
+        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-1hhrmaj-MuiAvatar-root"
+        data-testid="AvatarTest"
+      >
+        LP
+      </div>
+    `)
+  })
+
+  it('renders a group of avatars', () => {
+    render(
+      <AvatarGroup data-testid="AvatarTest">
+        <Avatar>RD</Avatar>
+        <Avatar>NS</Avatar>
+        <Avatar>AM</Avatar>
+      </AvatarGroup>
+    )
+
+    expect(screen.getByTestId('AvatarTest')).toMatchInlineSnapshot(`
+      <div
+        class="MuiAvatarGroup-root css-1ytufz-MuiAvatarGroup-root"
+        data-testid="AvatarTest"
+      >
+        <div
+          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-1hhrmaj-MuiAvatar-root"
+        >
+          AM
+        </div>
+        <div
+          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-1hhrmaj-MuiAvatar-root"
+        >
+          NS
+        </div>
+        <div
+          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-1hhrmaj-MuiAvatar-root"
+        >
+          RD
+        </div>
+      </div>
+    `)
+  })
+
+  it('displays the correct number of avatars in a group', () => {
+    render(
+      <AvatarGroup data-testid="AvatarTest" total={10}>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+        <Avatar>LP</Avatar>
+      </AvatarGroup>
+    )
+
+    const el = screen.getByText(/6/i)
+    expect(el).toBeInTheDocument()
+  })
+
+  it('limits the number of avatars in a group', () => {
+    render(
+      <AvatarGroup max={3}>
+        <Avatar>RD</Avatar>
+        <Avatar>NS</Avatar>
+        <Avatar>AM</Avatar>
+        <Avatar>KW</Avatar>
+        <Avatar>DD</Avatar>
+        <Avatar>NT</Avatar>
+      </AvatarGroup>
+    )
+
+    const el = screen.getByText(/4/i)
+    expect(el).toBeInTheDocument()
+  })
+
+  it('renders the correct initials', () => {
+    render(<Avatar data-testid="AvatarTest">LP</Avatar>)
+
+    const el = screen.getByText('LP')
+    expect(el).toBeInTheDocument()
+  })
+
+  it('has an accessibile description', () => {
+    render(
+      <Avatar data-testid="AvatarTest" aria-label="Label">
+        LP
+      </Avatar>
+    )
+
+    const el = screen.getByTestId('AvatarTest')
+    expect(el).toHaveAttribute('aria-label', 'Label')
+  })
+
+  it('changes size', () => {
+    render(
+      <Avatar data-testid="AvatarTest" sx={{ width: 100, height: 100 }}>
+        LP
+      </Avatar>
+    )
+
+    const el = screen.getByTestId('AvatarTest')
+    expect(el).toHaveStyle('width: 100px')
+    expect(el).toHaveStyle('height: 100px')
+  })
+
+  it('renders an icon', () => {
+    render(
+      <Avatar>
+        <FolderIcon />
+      </Avatar>
+    )
+
+    const el = screen.getByTestId('FolderIcon')
+    expect(el).toBeInTheDocument()
+  })
+
+  it('automatically sets the text color', () => {
+    render(
+      <>
+        <Avatar data-testid="AvatarTest1" style={{ backgroundColor: '#000' }}>
+          LP
+        </Avatar>
+        {/* <Avatar data-testid="AvatarTest2" sx={{ bgcolor: '#fff' }}>
+          LP
+        </Avatar> */}
+      </>
+    )
+
+    const black = screen.getByTestId('AvatarTest1')
+
+    expect(screen.getByTestId('AvatarTest1')).toMatchInlineSnapshot(`
+      <div
+        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-1hhrmaj-MuiAvatar-root"
+        data-testid="AvatarTest1"
+        style="background-color: rgb(0, 0, 0);"
+      >
+        LP
+      </div>
+    `)
+    expect(black).toHaveStyle('color: #fff')
+
+    // const white = screen.getByTestId('AvatarTest2')
+    // expect(screen.getByTestId('AvatarTest2')).toMatchInlineSnapshot(`
+    //   <div
+    //     class="tss-26olqr-root MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-ax6k3r-MuiAvatar-root"
+    //     data-testid="AvatarTest2"
+    //   >
+    //     LP
+    //   </div>
+    // `)
+    // expect(white).toHaveStyle('color: rgba(0, 0, 0, 0.87)')
+  })
+
+  it('properly renders a fallback image', () => {
+    render(
+      <Avatar
+        data-testid="AvatarTest"
+        src="https://source.unsplash.com/cUgSz7nO_RY"
+      />
+    )
+
+    const el = screen.getByTestId('AvatarTest')
+    expect(el).toBeInTheDocument()
+  })
+})

package/src/lib/components/datadisplay/Avatar/Avatar.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import MUIAvatar, { AvatarProps } from '@mui/material/Avatar'
+import GlobalStyles from '@mui/material/GlobalStyles'
+import { styled } from '@mui/material/styles'
+
+const StyledAvatar = styled(MUIAvatar, { shouldForwardProp: (prop) => prop !== 'sx' })<{
+  sx?: any
+}>(({ theme, sx }) => ({
+  backgroundColor: sx?.bgcolor
+    ? sx.bgcolor
+    : theme.palette.primary.main,
+  color: sx?.bgcolor
+    ? sx.color ?? theme.palette.getContrastText(sx.bgcolor)
+    : theme.palette.primary.contrastText,
+  fontSize: '0.9rem',
+  textTransform: 'uppercase'
+}))
+
+const Avatar = (
+  props: AvatarProps | any
+): React.ReactElement => (
+  <>
+    <GlobalStyles
+      styles={{
+        '.MuiAvatarGroup-root .MuiAvatar-root:first-of-type': {
+          backgroundColor: '#eee',
+          color: '#333'
+        }
+      }}
+    />
+    <StyledAvatar {...props} />
+  </>
+)
+
+export default Avatar

package/src/lib/components/datadisplay/Chip/Chip.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Chip from './Chip'
+import FaceIcon from '@mui/icons-material/Face'
+import Avatar from '@mui/material/Avatar'
+
+// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
+// unmount and cleanup DOM after the test is finished.
+afterEach(cleanup)
+
+describe('Test -- Chip component', () => {
+  it('renders a Chip', () => {
+    render(<Chip data-testid="ChipTest" label="label" />)
+
+    expect(screen.getByTestId('ChipTest')).toMatchInlineSnapshot(`
+      <div
+        class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gac2fo-MuiChip-root"
+        data-testid="ChipTest"
+      >
+        <span
+          class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+        >
+          label
+        </span>
+      </div>
+    `)
+  })
+
+  it('responds to a click event', () => {
+    const mockCallBack = jest.fn()
+    render(
+      <Chip onClick={mockCallBack} data-testid="ChipTest" label="label" />
+    )
+
+    userEvent.click(screen.getByTestId('ChipTest'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('renders a link element', () => {
+    render(
+      <Chip
+        label="label"
+        data-testid="ChipTest"
+        component="a"
+        href="#"
+        clickable
+      />
+    )
+
+    const chip = screen.getByTestId('ChipTest')
+    expect(chip).toHaveAttribute('href', '#')
+  })
+
+  it('renders a delete icon', () => {
+    const mockCallBack = jest.fn()
+    render(
+      <Chip label="label" data-testid="ChipTest" onDelete={mockCallBack} />
+    )
+
+    expect(screen.getByTestId('CancelIcon')).toBeInTheDocument()
+  })
+
+  it('responds to a delete click event', () => {
+    const mockCallBack = jest.fn()
+    render(<Chip label="label" onDelete={mockCallBack} />)
+    userEvent.click(screen.getByTestId('CancelIcon'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('renders with correct adornments', () => {
+    // Check render with icon
+    const { rerender } = render(<Chip icon={<FaceIcon />} label="label" />)
+    const chip = screen.getByTestId('FaceIcon')
+    expect(chip).toBeInTheDocument()
+
+    // Check render with avatar
+    rerender(<Chip avatar={<Avatar>LP</Avatar>} label="Label" />)
+    const chipAvatar = screen.getByText('LP')
+    expect(chipAvatar).toBeInTheDocument()
+  })
+})

package/src/lib/components/datadisplay/Chip/Chip.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import MUIChip from '@mui/material/Chip'
+import type { ChipProps } from '@mui/material/Chip'
+
+interface IChipProps extends ChipProps {}
+
+export default function Chip ({ ...rest }: IChipProps): JSX.Element {
+  return (
+    <MUIChip {...rest} />
+  )
+}

package/src/lib/components/datadisplay/List/List.test.tsx

@@ -0,0 +1,168 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import List from './List'
+import {
+  ListItem,
+  ListItemText,
+  ListItemButton,
+  ListItemIcon
+} from '../../../'
+import FaceIcon from '@mui/icons-material/Face'
+
+// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
+// unmount and cleanup DOM after the test is finished.
+afterEach(cleanup)
+
+describe('Test -- List component', () => {
+  it('renders a List', () => {
+    render(
+      <List data-testid="ListTest">
+        <ListItem>
+          <ListItemText primary="One" />
+        </ListItem>
+      </List>
+    )
+
+    expect(screen.getByTestId('ListTest')).toMatchInlineSnapshot(`
+      <ul
+        class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
+        data-testid="ListTest"
+      >
+        <li
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1p823my-MuiListItem-root"
+        >
+          <div
+            class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
+            >
+              One
+            </span>
+          </div>
+        </li>
+      </ul>
+    `)
+  })
+
+  it('renders the proper DOM elements', () => {
+    const { rerender } = render(
+      <List data-testid="ListTest" component="ol">
+        <ListItem>
+          <ListItemText primary="One" />
+        </ListItem>
+      </List>
+    )
+    expect(screen.getByTestId('ListTest')).toMatchInlineSnapshot(`
+      <ol
+        class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
+        data-testid="ListTest"
+      >
+        <li
+          class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1p823my-MuiListItem-root"
+        >
+          <div
+            class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
+            >
+              One
+            </span>
+          </div>
+        </li>
+      </ol>
+    `)
+
+    rerender(
+      <List data-testid="ListTest" component="nav">
+        <ListItemButton>
+          <ListItemText primary="One" />
+        </ListItemButton>
+      </List>
+    )
+    expect(screen.getByTestId('ListTest')).toMatchInlineSnapshot(`
+      <nav
+        class="MuiList-root MuiList-padding css-h4y409-MuiList-root"
+        data-testid="ListTest"
+      >
+        <div
+          class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters css-16ac5r2-MuiButtonBase-root-MuiListItemButton-root"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="MuiListItemText-root css-tlelie-MuiListItemText-root"
+          >
+            <span
+              class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-10hburv-MuiTypography-root"
+            >
+              One
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+          />
+        </div>
+      </nav>
+    `)
+  })
+
+  it('renders a selected element', () => {
+    render(
+      <List data-testid="ListTest">
+        <ListItemButton selected={true}>
+          <ListItemText primary="One" />
+        </ListItemButton>
+      </List>
+    )
+    expect(screen.getByRole('button')).toHaveClass('Mui-selected')
+  })
+
+  it('responds to a click event', () => {
+    const mockCallBack = jest.fn()
+    render(
+      <List data-testid="ListTest">
+        <ListItemButton onClick={mockCallBack}>
+          <ListItemText primary="One" />
+        </ListItemButton>
+      </List>
+    )
+
+    userEvent.click(screen.getByRole('button'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('renders a list item icon', () => {
+    render(
+      <List data-testid="ListTest">
+        <ListItemButton>
+          <ListItemIcon>
+            <FaceIcon />
+          </ListItemIcon>
+        </ListItemButton>
+      </List>
+    )
+
+    expect(screen.getByTestId('FaceIcon')).toBeInTheDocument()
+  })
+
+  it('renders a list item button', () => {
+    render(
+      <List data-testid="ListTest">
+        <ListItemButton>
+          <ListItemIcon>
+            <FaceIcon />
+          </ListItemIcon>
+        </ListItemButton>
+      </List>
+    )
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+})

package/src/lib/components/datadisplay/List/List.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import MUIList, { ListProps } from '@mui/material/List'
+
+const List = (props: ListProps): React.ReactElement => (
+  <MUIList {...props} />
+)
+
+export default List

package/src/lib/components/datadisplay/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Tooltip from './Tooltip'
+import Button from '../../../../lib/components/atoms/Button/Button'
+
+// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
+// unmount and cleanup DOM after the test is finished.
+afterEach(cleanup)
+
+describe('Test -- Tooltip component', () => {
+  it('properly renders the Tooltip', async () => {
+    render(
+      <Tooltip title="Tooltip title test" data-testid="TooltipTest">
+        <Button>Tooltip</Button>
+      </Tooltip>
+    )
+
+    // Confirm that the tooltip is not visible
+    expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
+
+    // Hover over the button
+    userEvent.hover(screen.getByTestId('TooltipTest'))
+
+    // Wait for the tooltip to appear and confirm that it is visible
+    expect(await screen.findByText('Tooltip title test')).toBeInTheDocument()
+
+    // Unhover over the button
+    userEvent.unhover(screen.getByTestId('TooltipTest'))
+
+    // Then wait 1 second for the tooltip to disappear and confirm that it is not visible
+    // @TODO: Revisit with act(() => {})
+    // await new Promise(function (resolve) { setTimeout(resolve, 1000) })
+    // expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
+  })
+
+  it('renders a Tooltip on a disabled element', async () => {
+    render(
+      <Tooltip title="Tooltip title test" data-testid="TooltipTest">
+        <span>
+          <Button disabled>Disabled Button</Button>
+        </span>
+      </Tooltip>
+    )
+
+    // Hover over the button
+    userEvent.hover(screen.getByTestId('TooltipTest'))
+
+    // Wait for the tooltip to appear
+    expect(await screen.findByText('Tooltip title test')).toBeInTheDocument()
+  })
+
+  it('has the proper role attribute', () => {
+    render(
+      <Tooltip open={true} title="Tooltip title test">
+        <Button>Button</Button>
+      </Tooltip>
+    )
+
+    expect(screen.getByRole('tooltip')).toHaveAttribute('role', 'tooltip')
+  })
+
+  it('renders the arrow element', () => {
+    render(
+      <Tooltip arrow open={true} title="Tooltip title test">
+        <Button>Button</Button>
+      </Tooltip>
+    )
+
+    // Look for the arrow <span> element inside the tooltip
+    expect(screen.getByRole('tooltip')).toContainHTML('<span class="MuiTooltip-arrow')
+  })
+
+  it('properly renders a followCursor Tooltip', async () => {
+    render(
+      <Tooltip followCursor title="Tooltip title test" data-testid="TooltipTest">
+        <Button>Tooltip</Button>
+      </Tooltip>
+    )
+
+    // Confirm that the tooltip is not visible
+    expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
+
+    // Hover over the button
+    userEvent.hover(screen.getByTestId('TooltipTest'))
+
+    // Wait for the tooltip to appear and confirm that it is visible
+    expect(await screen.findByText('Tooltip title test')).toBeInTheDocument()
+
+    // Unhover over the button
+    userEvent.unhover(screen.getByTestId('TooltipTest'))
+
+    // Then wait 1 second for the tooltip to disappear and confirm that it is not visible
+    // @TODO: Revisit with act(() => {})
+    // await new Promise(function (resolve) { setTimeout(resolve, 1000) })
+    // expect(screen.queryByText('Tooltip title test')).not.toBeInTheDocument()
+  })
+})

package/src/lib/components/datadisplay/Tooltip/Tooltip.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import MUITooltip, { TooltipProps } from '@mui/material/Tooltip'
+
+const Tooltip = (props: TooltipProps): JSX.Element => (
+  <MUITooltip {...props} />
+)
+Tooltip.muiName = 'MUITooltip'
+
+export default Tooltip