@learningpool/ui 1.6.2 → 1.6.5

package/src/lib/components/atoms/Button/Button.test.tsx

@@ -1,166 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Button from './Button'
-// import AllCombinations from "./AllCombinations";
-import DeleteIcon from '@mui/icons-material/Delete'
-
-/*
-
-  1. Displays a label
-  2. Conforms to accessibility
-  3. (multiple tests) renders differently based on props
-    a. Renders button with startIcon
-    b. Renders button with endIcon
-  4. Calls a function onClick
-
-*/
-
-// 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 -- Button component', () => {
-  it('renders button text', () => {
-    render(<Button>Button</Button>)
-
-    expect(screen.getByText(/Button/i)).toMatchInlineSnapshot(`
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-zddlty-MuiButtonBase-root-MuiButton-root"
-        tabindex="0"
-        type="button"
-      >
-        Button
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
-    `)
-  })
-
-  it('renders button with startIcon', () => {
-    render(
-      <Button data-testid="Button" startIcon={<DeleteIcon />}>
-        Button
-      </Button>
-    )
-
-    expect(screen.getByTestId('Button')).toMatchInlineSnapshot(`
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-zddlty-MuiButtonBase-root-MuiButton-root"
-        data-testid="Button"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-            data-testid="DeleteIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-            />
-          </svg>
-        </span>
-        Button
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Button data-testid="Button" onClick={mockCallBack}>
-        Ok!
-      </Button>
-    )
-
-    userEvent.click(screen.getByTestId('Button'))
-
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('has the proper aria attributes', () => {
-    const { rerender } = render(<Button>Hello</Button>)
-
-    // button has role="button"
-    let button = screen.getByRole('button')
-    expect(button).not.toHaveAttribute('aria-disabled')
-
-    // isLoading sets aria-disabled="true"
-    // rerender(<Button isLoading>Hello</Button>)
-    // button = screen.getByRole("button")
-    // expect(button).toHaveAttribute("data-loading", "")
-
-    // isDisabled sets aria-disabled="true"
-    rerender(<Button disabled>Hello</Button>)
-    button = screen.getByRole('button')
-    expect(button).toHaveAttribute('disabled', '')
-  })
-
-  it('has the proper type attribute', () => {
-    const { rerender } = render(<Button data-testid="btn">Email</Button>)
-    expect(screen.getByTestId('btn')).toHaveAttribute('type', 'button')
-
-    rerender(
-      <Button data-testid="btn" type="submit">
-        Email
-      </Button>
-    )
-    expect(screen.getByTestId('btn')).toHaveAttribute('type', 'submit')
-
-    rerender(
-      <Button data-testid="btn" component="button">
-        Email
-      </Button>
-    )
-    expect(screen.getByTestId('btn')).toMatchInlineSnapshot(`
-      <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-zddlty-MuiButtonBase-root-MuiButton-root"
-        data-testid="btn"
-        tabindex="0"
-        type="button"
-      >
-        Email
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
-    `)
-    expect(screen.getByTestId('btn')).toHaveAttribute('type')
-
-    rerender(
-      <Button data-testid="btn" component="span">
-        Email
-      </Button>
-    )
-    expect(screen.getByTestId('btn')).not.toHaveAttribute('type')
-  })
-
-  it('should be disabled', () => {
-    render(
-      <Button disabled data-testid="btn">
-        I'm a invalid button
-      </Button>
-    )
-    const button = screen.getByRole('button')
-    expect(button).toBeDisabled()
-  })
-
-  it('should take up full width', () => {
-    render(
-      <Button fullWidth data-testid="btn">
-        i'm a big button
-      </Button>
-    )
-    expect(screen.getByRole('button')).toHaveStyle('width: 100%')
-  })
-})

package/src/lib/components/atoms/Button/Button.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import MUIButton, { ButtonProps } from '@mui/material/Button'
-
-const Button = React.forwardRef((
-  props: ButtonProps,
-  ref: React.Ref<HTMLButtonElement>
-): JSX.Element => (
-  <MUIButton
-    disableElevation
-    variant='contained'
-    {...props}
-    ref={ref}
-  />
-))
-
-export default Button

package/src/lib/components/atoms/Checkbox/Checkbox.test.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import userEvent from '@testing-library/user-event'
-import Checkbox from './Checkbox'
-
-// 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 -- Checkbox component', () => {
-  it('renders checkbox', () => {
-    render(<Checkbox />)
-
-    const buttonIcon = screen.getByTestId('CheckBoxOutlineBlankIcon')
-
-    expect(buttonIcon).toMatchInlineSnapshot(`
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="CheckBoxOutlineBlankIcon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-        />
-      </svg>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(<Checkbox onClick={mockCallBack} data-testid="checkboxTest" />)
-
-    userEvent.click(screen.getByTestId('checkboxTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('changes checked state on click', () => {
-    render(<Checkbox />)
-    const checkboxTest = screen.getByRole('checkbox')
-
-    // Check initial state
-    expect(checkboxTest).not.toBeChecked()
-
-    // Check state after click
-    userEvent.click(checkboxTest)
-    expect(checkboxTest).toBeChecked()
-  })
-
-  it('should be disabled', () => {
-    render(<Checkbox disabled />)
-
-    const checkboxTest = screen.getByRole('checkbox')
-    expect(checkboxTest).toBeDisabled()
-  })
-
-  it('has the proper aria attributes', () => {
-    const { rerender } = render(
-      <Checkbox inputProps={{ 'aria-label': 'test label' }} />
-    )
-
-    // Default Checkbox has proper aria attributes
-    const checkboxInput = screen.getByRole('checkbox')
-    expect(checkboxInput).toHaveAttribute('aria-label', 'test label')
-    expect(checkboxInput).not.toHaveAttribute('aria-disabled')
-
-    // Disabled Checkbox has proper aria attribute
-    rerender(<Checkbox data-testid="checkboxTest" disabled />)
-    const checkboxSpan = screen.getByTestId('checkboxTest')
-    expect(checkboxSpan).toHaveAttribute('aria-disabled')
-  })
-
-  it('has the proper type attribute', () => {
-    render(<Checkbox />)
-    expect(screen.getByRole('checkbox')).toHaveAttribute('type', 'checkbox')
-  })
-
-  it('changes color', () => {
-    // Color prop changes css class
-    render(<Checkbox data-testid="checkboxTest" color="success" />)
-    expect(screen.getByTestId('checkboxTest')).toHaveClass('MuiCheckbox-colorSuccess')
-  })
-})

package/src/lib/components/atoms/Checkbox/Checkbox.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import MUICheckbox, { CheckboxProps } from '@mui/material/Checkbox'
-
-interface ICheckboxProps extends CheckboxProps {}
-
-export default function Checkbox ({ ...rest }: ICheckboxProps): JSX.Element {
-  return (
-    <MUICheckbox {...rest} />
-  )
-}

package/src/lib/components/atoms/IconButton/IconButton.test.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import userEvent from '@testing-library/user-event'
-import IconButton from './IconButton'
-import DeleteIcon from '@mui/icons-material/Delete'
-
-// 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 -- Icon Button component', () => {
-  it('renders button icon', () => {
-    render(
-      <IconButton>
-        <DeleteIcon />
-      </IconButton>
-    )
-
-    const buttonIcon = screen.getByTestId('DeleteIcon')
-
-    expect(buttonIcon).toMatchInlineSnapshot(`
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-        data-testid="DeleteIcon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-        />
-      </svg>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <IconButton onClick={mockCallBack}>
-        <DeleteIcon />
-      </IconButton>
-    )
-
-    userEvent.click(screen.getByTestId('DeleteIcon'))
-
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('has the proper aria attribute', () => {
-    render(
-      <IconButton aria-label="delete" data-testid="IconButtonTest">
-        <DeleteIcon />
-      </IconButton>
-    )
-
-    const checkboxInput = screen.getByTestId('IconButtonTest')
-    expect(checkboxInput).toHaveAttribute('aria-label', 'delete')
-  })
-})

package/src/lib/components/atoms/IconButton/IconButton.tsx

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

package/src/lib/components/atoms/Radio/Radio.test.tsx

@@ -1,136 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Radio from './Radio'
-import RadioGroup from '@mui/material/RadioGroup'
-import FormControlLabel from '@mui/material/FormControlLabel'
-
-// 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 -- Radio component', () => {
-  it('renders a radio button', () => {
-    render(
-      <Radio
-        data-testid="radioTest"
-        inputProps={{
-          'aria-label': 'label'
-        }}
-      />
-    )
-
-    expect(screen.getByTestId('radioTest')).toMatchInlineSnapshot(`
-      <span
-        class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary css-vqmohf-MuiButtonBase-root-MuiRadio-root"
-        data-testid="radioTest"
-      >
-        <input
-          aria-label="label"
-          class="PrivateSwitchBase-input css-1m9pwf3"
-          type="radio"
-          value=""
-        />
-        <span
-          class="css-hyxlzm"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hbvpl3-MuiSvgIcon-root"
-            data-testid="RadioButtonUncheckedIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1hhw7if-MuiSvgIcon-root"
-            data-testid="RadioButtonCheckedIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-            />
-          </svg>
-        </span>
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </span>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(<Radio onClick={mockCallBack} data-testid="radioTest" />)
-
-    userEvent.click(screen.getByTestId('radioTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('changes checked state on click', () => {
-    render(<Radio />)
-    const radioTest = screen.getByRole('radio')
-
-    // Check initial state
-    expect(radioTest).not.toBeChecked()
-
-    // Check state after click
-    userEvent.click(radioTest)
-    expect(radioTest).toBeChecked()
-  })
-
-  it('should be disabled', () => {
-    render(<Radio disabled />)
-
-    const radioTest = screen.getByRole('radio')
-    expect(radioTest).toBeDisabled()
-  })
-
-  it('has the proper attributes', () => {
-    const { rerender } = render(
-      <Radio inputProps={{ 'aria-label': 'test label' }} />
-    )
-
-    // Default Radio has proper type attribute
-    expect(screen.getByRole('radio')).toHaveAttribute('type', 'radio')
-
-    // Default Radio has proper aria attributes
-    const radioInput = screen.getByRole('radio')
-    expect(radioInput).toHaveAttribute('aria-label', 'test label')
-    expect(radioInput).not.toHaveAttribute('aria-disabled')
-
-    // Disabled Radio has proper aria attribut
-    rerender(<Radio data-testid="radioTest" disabled />)
-    const radioSpan = screen.getByTestId('radioTest')
-    expect(radioSpan).toHaveAttribute('aria-disabled')
-  })
-
-  it('has a default value', () => {
-    render(
-      <RadioGroup
-        aria-labelledby="demo-radio-buttons-group-label"
-        defaultValue="other"
-        name="radio-buttons-group"
-      >
-        <FormControlLabel value="female" control={<Radio />} label="Female" />
-        <FormControlLabel
-          value="male"
-          control={<Radio data-testid="notDefaultValue" />}
-          label="Male"
-        />
-        <FormControlLabel
-          value="other"
-          control={<Radio data-testid="defaultValue" />}
-          label="Other"
-        />
-      </RadioGroup>
-    )
-    expect(screen.getByLabelText('Other')).toBeChecked()
-    expect(screen.getByLabelText('Male')).not.toBeChecked()
-  })
-})

package/src/lib/components/atoms/Radio/Radio.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import MUIRadio, { RadioProps } from '@mui/material/Radio'
-
-interface IRadioProps extends RadioProps {}
-
-export default function Radio ({ ...rest }: IRadioProps): JSX.Element {
-  return (
-    <MUIRadio {...rest} />
-  )
-}

package/src/lib/components/atoms/Select/Select.test.tsx

@@ -1,158 +0,0 @@
-/* eslint-disable no-irregular-whitespace */
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Select from './Select'
-import { FormControl, InputLabel, MenuItem } from '@mui/material'
-
-const testData = ['One', 'Two', 'Three']
-
-// 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 -- Select component', () => {
-  it('renders a Select', () => {
-    render(
-      <Select id="combo-box-demo" sx={{ width: 300 }}>
-        <option>Select a number</option>
-        {testData.map((option) => (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        ))}
-      </Select>
-    )
-
-    expect(screen.getByRole('button')).toMatchInlineSnapshot(`
-      <div
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        aria-labelledby="combo-box-demo"
-        class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
-        id="combo-box-demo"
-        role="button"
-        tabindex="0"
-      >
-        <span
-          class="notranslate"
-        >
-          ​
-        </span>
-      </div>
-    `)
-  })
-
-  it('should display the correct number of options', () => {
-    const mockCallBack = jest.fn()
-
-    render(
-      <Select id="combo-box-demo" sx={{ width: 300 }} onClick={mockCallBack}>
-        <MenuItem>Select a number</MenuItem>
-        {testData.map((option) => (
-          <MenuItem key={option} value={option}>
-            {option}
-          </MenuItem>
-        ))}
-      </Select>
-    )
-
-    userEvent.click(screen.getByRole('button'))
-    expect(screen.getAllByRole('option').length).toBe(4)
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <Select id="combo-box-demo" sx={{ width: 300 }} onClick={mockCallBack}>
-        <MenuItem>Select a number</MenuItem>
-        {testData.map((option) => (
-          <MenuItem key={option} value={option}>
-            {option}
-          </MenuItem>
-        ))}
-      </Select>
-    )
-
-    userEvent.click(screen.getByRole('button'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('properly renders the options on click', () => {
-    render(
-      <Select id="combo-box-demo" sx={{ width: 300 }}>
-        <MenuItem>Select a number</MenuItem>
-        {testData.map((option) => (
-          <MenuItem key={option} value={option}>
-            {option}
-          </MenuItem>
-        ))}
-      </Select>
-    )
-
-    // Check that the options are not rendered
-    expect(screen.queryByText('One')).toBeNull()
-
-    // Click on the input and check that the options are rendered
-    userEvent.click(screen.getByRole('button'))
-    expect(screen.getByText('One')).toBeInTheDocument()
-  })
-
-  it('displays the label text', () => {
-    render(
-      <FormControl sx={{ m: 1, minWidth: 140 }}>
-        <InputLabel id="demo-simple-select-label">Select</InputLabel>
-        <Select
-          id="combo-box-demo"
-          sx={{ width: 300 }}
-          labelId="demo-simple-select-label"
-          label="Select"
-        >
-          <MenuItem>Select a number</MenuItem>
-          {testData.map((option) => (
-            <MenuItem key={option} value={option}>
-              {option}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    )
-
-    expect(screen.getByLabelText('Select')).toBeVisible()
-  })
-
-  // it("has the proper attributes", () => {
-  //   render(
-  //     <Select id="combo-box-demo" sx={{ width: 300 }} data-testid="Select">
-  //       <MenuItem>Select a number</MenuItem>
-  //       {testData.map((option) => (
-  //         <MenuItem key={option} value={option}>
-  //           {option}
-  //         </MenuItem>
-  //       ))}
-  //     </Select>
-  //   );
-
-  //   // Check the default container attributes
-  //   // expect(screen.getByTestId("Select")).toMatchInlineSnapshot();
-  //   expect(screen.getByTestId("Select")).toHaveAttribute("role", "button");
-  //   expect(screen.getByTestId("Select")).toHaveAttribute(
-  //     "aria-expanded",
-  //     "false"
-  //   );
-
-  //   // Click the input
-  //   userEvent.click(screen.getByTestId("Select"));
-
-  //   // Check the expanded container attributes
-  //   expect(screen.getByTestId("Select")).toHaveAttribute(
-  //     "aria-expanded",
-  //     "true"
-  //   );
-  //   expect(screen.getByTestId("Select")).toHaveAttribute(
-  //     "aria-owns",
-  //     "combo-box-demo-listbox"
-  //   );
-  // });
-})

package/src/lib/components/atoms/Select/Select.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import MUISelect, { SelectProps, SelectChangeEvent } from '@mui/material/Select'
-
-export type { SelectChangeEvent }
-
-interface ISelectProps extends SelectProps {}
-
-export default function Select ({ ...rest }: ISelectProps): JSX.Element {
-  return (
-    <MUISelect {...rest} />
-  )
-}