@learningpool/ui 1.6.0 → 1.6.1

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

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

@@ -0,0 +1,103 @@
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Slider from './Slider'
+
+// 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 -- Slider component', () => {
+  it('renders a slider', () => {
+    render(
+      <Slider data-testid="sliderTest" defaultValue={50} aria-label="label" />
+    )
+
+    expect(screen.getByTestId('sliderTest')).toMatchInlineSnapshot(`
+      <span
+        class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeMedium css-187mznn-MuiSlider-root"
+        data-testid="sliderTest"
+      >
+        <span
+          class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
+        />
+        <span
+          class="MuiSlider-track css-1gv0vcd-MuiSlider-track"
+          style="left: 0%; width: 50%;"
+        />
+        <span
+          class="MuiSlider-thumb MuiSlider-thumbColorPrimary MuiSlider-thumbSizeMedium css-eg0mwd-MuiSlider-thumb"
+          data-focusvisible="false"
+          data-index="0"
+          style="left: 50%;"
+        >
+          <input
+            aria-label="label"
+            aria-orientation="horizontal"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            aria-valuenow="50"
+            data-index="0"
+            max="100"
+            min="0"
+            step="1"
+            style="border: 0px; height: 100%; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 100%; direction: ltr;"
+            type="range"
+            value="50"
+          />
+        </span>
+      </span>
+    `)
+  })
+
+  it('responds to a click event', () => {
+    const mockCallBack = jest.fn()
+    render(<Slider onClick={mockCallBack} value={0} aria-label="label" />)
+
+    userEvent.click(screen.getByLabelText('label'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('should be disabled', () => {
+    render(<Slider disabled defaultValue={50} aria-label="label" />)
+
+    const slider = screen.getByLabelText('label')
+    expect(slider).toBeDisabled()
+  })
+
+  it('has a discrete range of values', () => {
+    render(<Slider value={[25, 50]} defaultValue={25} />)
+
+    const sliderMin = screen.getByDisplayValue('25')
+    expect(sliderMin).toHaveValue('25')
+    expect(sliderMin).toHaveAttribute('aria-valuenow', '25')
+
+    const sliderMax = screen.getByDisplayValue('50')
+    expect(sliderMax).toHaveValue('50')
+    expect(sliderMax).toHaveAttribute('aria-valuenow', '50')
+  })
+
+  it('has a proper default value', () => {
+    render(<Slider defaultValue={100} aria-label="label" />)
+
+    const slider = screen.getByLabelText('label')
+    expect(slider).toHaveAttribute('value', '100')
+  })
+
+  it('has the proper aria attributes', () => {
+    render(<Slider defaultValue={50} aria-label="label" />)
+
+    const slider = screen.getByLabelText('label')
+    expect(slider).toHaveAttribute('aria-label', 'label')
+    expect(slider).toHaveAttribute('aria-valuenow', '50')
+    expect(slider).toHaveAttribute('aria-valuemin', '0')
+    expect(slider).toHaveAttribute('aria-valuemax', '100')
+  })
+
+  it('has the proper type attribute', () => {
+    render(<Slider defaultValue={50} aria-label="label" />)
+
+    const slider = screen.getByLabelText('label')
+    expect(slider).toHaveAttribute('type', 'range')
+  })
+})

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

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

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

@@ -0,0 +1,96 @@
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Switch from './Switch'
+
+// 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 -- Switch component', () => {
+  it('renders a switch', () => {
+    render(
+      <Switch
+        data-testid="switchTest"
+        inputProps={{
+          'aria-label': 'label'
+        }}
+      />
+    )
+
+    expect(screen.getByTestId('switchTest')).toMatchInlineSnapshot(`
+      <span
+        class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase"
+        data-testid="switchTest"
+      >
+        <input
+          aria-label="label"
+          class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+          type="checkbox"
+        />
+        <span
+          class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+        />
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </span>
+    `)
+  })
+
+  it('responds to a click event', () => {
+    const mockCallBack = jest.fn()
+    render(<Switch onClick={mockCallBack} data-testid="switchTest" />)
+
+    userEvent.click(screen.getByTestId('switchTest'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('changes checked state on click', () => {
+    render(<Switch />)
+    const switchTest = screen.getByRole('checkbox')
+
+    // Check initial state
+    expect(switchTest).not.toBeChecked()
+
+    // Check state after click
+    userEvent.click(switchTest)
+    expect(switchTest).toBeChecked()
+  })
+
+  it('should be disabled', () => {
+    render(<Switch disabled />)
+
+    const switchTest = screen.getByRole('checkbox')
+    expect(switchTest).toBeDisabled()
+  })
+
+  it('has the proper aria attributes', () => {
+    const { rerender } = render(
+      <Switch inputProps={{ 'aria-label': 'test label' }} />
+    )
+
+    // Default Switch has proper aria attributes
+    const switchInput = screen.getByRole('checkbox')
+    expect(switchInput).toHaveAttribute('aria-label', 'test label')
+    expect(switchInput).not.toHaveAttribute('aria-disabled')
+
+    // Disabled Switch has proper aria attribute
+    rerender(<Switch data-testid="switchTest" disabled />)
+    const switchSpan = screen.getByTestId('switchTest')
+    expect(switchSpan).toHaveAttribute('aria-disabled')
+  })
+
+  it('has the proper type attribute', () => {
+    render(<Switch />)
+    expect(screen.getByRole('checkbox')).toHaveAttribute('type', 'checkbox')
+  })
+
+  it('changes color', () => {
+    // Color prop changes css class
+    render(<Switch data-testid="switchTest" color="success" />)
+    expect(screen.getByTestId('switchTest')).toHaveClass(
+      'MuiSwitch-colorSuccess'
+    )
+  })
+})

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

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

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

@@ -0,0 +1,131 @@
+/* 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 TextField from './TextField'
+
+// 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 -- TextField component', () => {
+  it('renders an outlined textField by default', () => {
+    render(
+      <TextField
+        data-testid="textFieldTest"
+        inputProps={{
+          'aria-label': 'label'
+        }}
+      />
+    )
+
+    expect(screen.getByTestId('textFieldTest')).toMatchInlineSnapshot(`
+      <div
+        class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
+        data-testid="textFieldTest"
+      >
+        <div
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="label"
+            class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
+            id="mui-1"
+            type="text"
+            value=""
+          />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+          >
+            <legend
+              class="css-hdw1oc"
+            >
+              <span
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
+        </div>
+      </div>
+    `)
+  })
+
+  it('responds to a click event', () => {
+    const mockCallBack = jest.fn()
+    render(<TextField onClick={mockCallBack} data-testid="textFieldTest" />)
+
+    userEvent.click(screen.getByTestId('textFieldTest'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('changes focused state on click', () => {
+    render(
+      <TextField
+        inputProps={{
+          'data-testid': 'textFieldTest'
+        }}
+        label="outlined"
+      />
+    )
+    const textFieldTest = screen.getByTestId('textFieldTest')
+
+    // Check initial state
+    expect(textFieldTest).not.toHaveFocus()
+
+    // Check state after click
+    userEvent.click(textFieldTest)
+    expect(textFieldTest).toHaveFocus()
+  })
+
+  it('should be disabled', () => {
+    render(
+      <TextField
+        inputProps={{
+          'data-testid': 'textFieldTest'
+        }}
+        disabled
+      />
+    )
+
+    const textFieldTest = screen.getByTestId('textFieldTest')
+    expect(textFieldTest).toBeDisabled()
+  })
+
+  it('has the proper aria attributes', () => {
+    render(
+      <TextField
+        inputProps={{
+          'aria-label': 'test label',
+          'data-testid': 'textFieldTest'
+        }}
+      />
+    )
+
+    // Default TextField has proper aria attributes
+    const textFieldInput = screen.getByTestId('textFieldTest')
+    expect(textFieldInput).toHaveAttribute('aria-label', 'test label')
+    expect(textFieldInput).not.toHaveAttribute('aria-disabled')
+  })
+
+  it('has the proper type attribute', () => {
+    render(
+      <TextField
+        inputProps={{
+          'data-testid': 'textFieldTest'
+        }}
+      />
+    )
+    const textFieldInput = screen.getByTestId('textFieldTest')
+    expect(textFieldInput).toHaveAttribute('type', 'text')
+  })
+
+  // it("changes color", () => {
+  //   // Color prop changes css class
+  //   render(<TextField data-testid="textFieldTest" color="success" />);
+  //   expect(screen.getByTestId("textFieldTest")).toHaveClass("MuiTextField-colorSuccess");
+  // });
+})

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import MUITextField, { BaseTextFieldProps } from '@mui/material/TextField'
+import { OutlinedInputProps } from '@mui/material/OutlinedInput'
+
+interface ITextFieldProps extends BaseTextFieldProps {
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange?: OutlinedInputProps['onChange']
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant?: 'outlined'
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/api/filled-input/),
+   * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps?: Partial<OutlinedInputProps>
+}
+
+export default function TextField (props: ITextFieldProps): JSX.Element {
+  return (
+    <MUITextField {...props} />
+  )
+}

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

@@ -0,0 +1,122 @@
+import React from 'react'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ToggleButton from '../../../../lib/components/atoms/ToggleButton/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+
+// 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 -- ToggleButton component', () => {
+  it('renders a ToggleButton', () => {
+    render(
+      <ToggleButton
+        aria-label="label"
+        value="check"
+        data-testid="toggleButtonTest"
+      >
+        ToggleButton
+      </ToggleButton>
+    )
+
+    expect(screen.getByTestId('toggleButtonTest')).toMatchInlineSnapshot(`
+      <button
+        aria-label="label"
+        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
+        data-testid="toggleButtonTest"
+        tabindex="0"
+        type="button"
+        value="check"
+      >
+        ToggleButton
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+    `)
+  })
+
+  it('responds to a click event', () => {
+    const mockCallBack = jest.fn()
+    render(
+      <ToggleButton
+        onClick={mockCallBack}
+        value={0}
+        data-testid="toggleButtonTest"
+      />
+    )
+
+    userEvent.click(screen.getByTestId('toggleButtonTest'))
+    expect(mockCallBack.mock.calls.length).toEqual(1)
+  })
+
+  it('has the proper attributes', () => {
+    render(
+      <ToggleButtonGroup
+        value="two"
+        aria-label="ToggleButtonGroup label"
+        data-testid="toggleButtonTest"
+      >
+        <ToggleButton value="one" aria-label="ToggleButton one">One</ToggleButton>
+        <ToggleButton value="two" aria-label="ToggleButton two">Two</ToggleButton>
+        <ToggleButton value="three" aria-label="ToggleButton three" disabled>Three</ToggleButton>
+      </ToggleButtonGroup>
+    )
+
+    // Check toggleButtonGroup
+    const toggleButtonGroup = screen.getByTestId('toggleButtonTest')
+    expect(toggleButtonGroup).toHaveAttribute('aria-label', 'ToggleButtonGroup label')
+    expect(toggleButtonGroup).toHaveAttribute('role', 'group')
+
+    // Check toggleButton default
+    const toggleButtonOne = screen.getByLabelText('ToggleButton one')
+    expect(toggleButtonOne).toHaveAttribute('aria-pressed', 'false')
+    expect(toggleButtonOne).toHaveAttribute('tabindex', '0')
+
+    // Check toggleButton selected
+    const toggleButtonTwo = screen.getByLabelText('ToggleButton two')
+    expect(toggleButtonTwo).toHaveAttribute('aria-pressed', 'true')
+
+    // Check toggleButton disabled
+    const toggleButtonThree = screen.getByLabelText('ToggleButton three')
+    expect(toggleButtonThree).toBeDisabled()
+  })
+
+  it('properly changes focus state', () => {
+    render(
+      <ToggleButtonGroup
+        value="two"
+        aria-label="ToggleButtonGroup label"
+        data-testid="toggleButtonTest"
+      >
+        <ToggleButton value="one" aria-label="ToggleButton one">One</ToggleButton>
+        <ToggleButton value="two" aria-label="ToggleButton two">Two</ToggleButton>
+        <ToggleButton value="three" aria-label="ToggleButton three" disabled>Three</ToggleButton>
+      </ToggleButtonGroup>
+    )
+    const toggleButtonOne = screen.getByLabelText('ToggleButton one')
+    const toggleButtonTwo = screen.getByLabelText('ToggleButton two')
+    const toggleButtonThree = screen.getByLabelText('ToggleButton three')
+
+    // Check initial state
+    expect(toggleButtonOne).not.toHaveFocus()
+    expect(toggleButtonTwo).not.toHaveFocus()
+    expect(toggleButtonThree).not.toHaveFocus()
+
+    // Check state after click
+    userEvent.click(toggleButtonOne)
+    expect(toggleButtonOne).toHaveFocus()
+    expect(toggleButtonTwo).not.toHaveFocus()
+
+    // Check state after keyboard tab
+    userEvent.tab()
+    expect(toggleButtonOne).not.toHaveFocus()
+    expect(toggleButtonTwo).toHaveFocus()
+    expect(toggleButtonThree).not.toHaveFocus()
+
+    // Confirm disabled button does not receive focus
+    userEvent.tab()
+    expect(toggleButtonThree).not.toHaveFocus()
+  })
+})

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

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