@learningpool/ui 1.6.0-beta.9 → 1.6.1

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} />
+  )
+}

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

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

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