@learningpool/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1,179 @@
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Autocomplete from './Autocomplete'
+import TextField from '../TextField/TextField'
+
+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 -- Autocomplete component', () => {
+  it('renders a Autocomplete', () => {
+    render(
+      <Autocomplete
+        renderInput={(params) => <TextField {...params} label="Label" />}
+        id="combo-box-demo"
+        options={testData}
+        sx={{ width: 300 }}
+      />
+    )
+
+    expect(screen.getByRole('combobox')).toMatchInlineSnapshot(`
+      <input
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-invalid="false"
+        autocapitalize="none"
+        autocomplete="off"
+        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+        id="combo-box-demo"
+        role="combobox"
+        spellcheck="false"
+        type="text"
+        value=""
+      />
+    `)
+  })
+
+  it('responds to a click event', () => {
+    const mockCallBack = jest.fn()
+    render(
+      <Autocomplete
+        renderInput={(params) => (
+          <TextField {...params} label="Label" onClick={mockCallBack} />
+        )}
+        id="combo-box-demo"
+        options={testData}
+        sx={{ width: 300 }}
+      />
+    )
+
+    userEvent.click(screen.getByLabelText('Label'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('properly renders the options on click', () => {
+    render(
+      <Autocomplete
+        renderInput={(params) => <TextField {...params} label="Label" />}
+        id="combo-box-demo"
+        options={testData}
+        sx={{ width: 300 }}
+      />
+    )
+
+    // 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.getByLabelText('Label'))
+    expect(screen.getByText('One')).toBeInTheDocument()
+  })
+
+  it('properly renders the options on focus', () => {
+    render(
+      <Autocomplete
+        openOnFocus
+        renderInput={(params) => <TextField {...params} label="Label" />}
+        id="combo-box-demo"
+        options={testData}
+        sx={{ width: 300 }}
+      />
+    )
+
+    // Check that the options are not rendered
+    expect(screen.queryByText('One')).toBeNull()
+
+    // Tab to set focus and check that the options are rendered
+    userEvent.tab()
+    expect(screen.getByText('One')).toBeInTheDocument()
+  })
+
+  it('displays a default value', () => {
+    render(
+      <Autocomplete
+        defaultValue={['test']}
+        // Prevents the console.warn
+        // https://stackoverflow.com/questions/61947941/material-ui-autocomplete-warning-the-value-provided-to-autocomplete-is-invalid#answer-65347275
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        getOptionLabel={() => 'test'}
+        renderInput={(params) => <TextField {...params} label="Label" />}
+        id="combo-box-demo"
+        options={['test']}
+        sx={{ width: 300 }}
+      />
+    )
+
+    expect(screen.getByLabelText('Label')).toHaveValue('test')
+    expect(screen.getByLabelText('Label')).toBeVisible()
+  })
+
+  it('displays the label text', () => {
+    render(
+      <Autocomplete
+        getOptionLabel={(option) => option}
+        renderInput={(params) => <TextField {...params} label="Label" />}
+        id="combo-box-demo"
+        options={testData}
+        sx={{ width: 300 }}
+      />
+    )
+
+    expect(screen.getByLabelText('Label')).toBeVisible()
+  })
+
+  it.skip('has the proper attributes', () => {
+    // Need to revisit this as the selection for the input
+    // is not correct - role and aria-expanded are checking
+    // an incorrect element
+    render(
+      <Autocomplete
+        data-testid="AutocompleteTest"
+        renderInput={(params) => <TextField {...params} label="Label" />}
+        id="combo-box-demo"
+        options={testData}
+        sx={{ width: 300 }}
+      />
+    )
+
+    // Check the default container attributes
+    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
+      'role',
+      'combobox'
+    )
+    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
+      'aria-expanded',
+      'false'
+    )
+
+    // Check the default input attributes
+    expect(screen.getByLabelText('Label')).toHaveAttribute(
+      'aria-invalid',
+      'false'
+    )
+    expect(screen.getByLabelText('Label')).toHaveAttribute(
+      'aria-autocomplete',
+      'list'
+    )
+    expect(screen.getByLabelText('Label')).toHaveAttribute(
+      'autocomplete',
+      'off'
+    )
+
+    // Click the input
+    userEvent.click(screen.getByLabelText('Label'))
+
+    // Check the expanded container attributes
+    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
+      'aria-expanded',
+      'true'
+    )
+    expect(screen.getByTestId('AutocompleteTest')).toHaveAttribute(
+      'aria-owns',
+      'combo-box-demo-listbox'
+    )
+  })
+})

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import MUIAutocomplete, { AutocompleteProps } from '@mui/material/Autocomplete'
+
+interface IAutocompleteProps extends AutocompleteProps<any, true, true, true, 'div'> {}
+
+const Autocomplete = (
+  props: IAutocompleteProps
+): JSX.Element => {
+  return (
+    <MUIAutocomplete {...props} />
+  )
+}
+
+export default Autocomplete

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+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} />
+  )
+}