@learningpool/ui 1.6.2 → 1.6.5

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

@@ -1,187 +0,0 @@
-/**
- * @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

@@ -1,35 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,168 +0,0 @@
-/**
- * @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

@@ -1,8 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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