@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/form/__tests__/CFormControl.spec.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormInput } from '../index'
-
-test('loads and displays CFormInput component', async () => {
-  const { container } = render(<CFormInput />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormInput customize', async () => {
-  const { container } = render(
-    <CFormInput
-      className="bazinga"
-      disabled={true}
-      plainText={true}
-      readOnly={true}
-      size="lg"
-      type="color"
-      value="value"
-    />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-control-plaintext')
-  expect(container.firstChild).toHaveClass('form-control-color')
-  expect(container.firstChild).toHaveClass('form-control-lg')
-})
-
-test('CFormInput change input', async () => {
-  jest.useFakeTimers()
-  const onChange = jest.fn()
-  render(<CFormInput onChange={onChange} />)
-  expect(onChange).toHaveBeenCalledTimes(0)
-  const input = document.querySelector('input')
-  if (input !== null) {
-    fireEvent.change(input, { target: { value: 'bazinga' } })
-  }
-  expect(onChange).toHaveBeenCalledTimes(1)
-  if (input !== null) {
-    fireEvent.change(input, { target: { value: '2' } })
-  }
-  expect(onChange).toHaveBeenCalledTimes(2)
-})

package/src/components/form/__tests__/CFormFeedback.spec.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormFeedback } from '../index'
-
-test('loads and displays CFormFeedback component', async () => {
-  const { container } = render(<CFormFeedback />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormFeedback customize one', async () => {
-  const { container } = render(
-    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={true} />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('invalid-tooltip')
-  expect(container.firstChild).toHaveClass('valid-tooltip')
-  expect(container.firstChild).toHaveClass('bazinga')
-})
-
-test('CFormFeedback customize two', async () => {
-  const { container } = render(
-    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={false} />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('invalid-feedback')
-  expect(container.firstChild).toHaveClass('valid-feedback')
-  expect(container.firstChild).toHaveClass('bazinga')
-})

package/src/components/form/__tests__/CFormFloating.spec.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormFloating } from '../index'
-
-test('loads and displays CFormFloating component', async () => {
-  const { container } = render(<CFormFloating />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormFloating customize', async () => {
-  const { container } = render(<CFormFloating className="bazinga">Test</CFormFloating>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-floating')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})

package/src/components/form/__tests__/CFormInput.spec.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormInput } from '../index'
-
-test('loads and displays CFormInput component', async () => {
-  const { container } = render(<CFormInput />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormInput customize one', async () => {
-  const { container } = render(<CFormInput />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control')
-})
-
-test('CFormInput customize two', async () => {
-  const { container } = render(
-    <CFormInput
-      className="bazinga"
-      disabled={true}
-      invalid={true}
-      plainText={true}
-      readOnly={true}
-      size="lg"
-      type="color"
-      valid={true}
-      value="#888888"
-    />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control-lg')
-  expect(container.firstChild).toHaveClass('form-control-color')
-  expect(container.firstChild).toHaveClass('is-invalid')
-  expect(container.firstChild).toHaveClass('is-valid')
-  expect(container.firstChild).toHaveClass('form-control-plaintext')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveAttribute('value', '#888888')
-  expect(container.firstChild).toHaveAttribute('type', 'color')
-  expect(container.firstChild).toHaveAttribute('disabled', '')
-  expect(container.firstChild).toHaveAttribute('readonly', '')
-})

package/src/components/form/__tests__/CFormLabel.spec.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormLabel } from '../index'
-
-test('loads and displays CFormLabel component', async () => {
-  const { container } = render(<CFormLabel>Test</CFormLabel>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormLabel customize className', async () => {
-  const { container } = render(<CFormLabel className="bazinga">Test</CFormLabel>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-label')
-  expect(container.firstChild).toHaveTextContent('Test')
-})
-
-test('CFormLabel customize htmlFor', async () => {
-  const { container } = render(<CFormLabel htmlFor="bazinga">Test</CFormLabel>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveAttribute('for', 'bazinga')
-  expect(container.firstChild).toHaveClass('form-label')
-  expect(container.firstChild).toHaveTextContent('Test')
-})

package/src/components/form/__tests__/CFormRange.spec.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormRange } from '../index'
-
-test('loads and displays CFormRange component', async () => {
-  const { container } = render(<CFormRange step={3} />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormRange customize', async () => {
-  const { container } = render(
-    <CFormRange
-      className="bazinga"
-      step={2}
-      disabled={true}
-      max={150}
-      min={20}
-      readOnly={true}
-      value={80}
-    />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-range')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveAttribute('disabled', '')
-  expect(container.firstChild).toHaveAttribute('max', '150')
-  expect(container.firstChild).toHaveAttribute('min', '20')
-  expect(container.firstChild).toHaveAttribute('readonly', '')
-  expect(container.firstChild).toHaveAttribute('step', '2')
-  expect(container.firstChild).toHaveAttribute('type', 'range')
-  expect(container.firstChild).toHaveAttribute('value', '80')
-})

package/src/components/form/__tests__/CFormSelect.spec.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormSelect } from '../index'
-
-test('loads and displays CFormSelect component', async () => {
-  const { container } = render(<CFormSelect></CFormSelect>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormSelect customize', async () => {
-  const { container } = render(
-    <CFormSelect className="bazinga" size="lg">
-      <option value="A">B</option>
-      <option>C</option>
-    </CFormSelect>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-select')
-  expect(container.firstChild).toHaveClass('form-select-lg')
-})

package/src/components/form/__tests__/CFormSwitch.spec.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormSwitch } from '../index'
-
-test('loads and displays CFormSwitch component', async () => {
-  const { container } = render(<CFormSwitch />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormSwitch customize', async () => {
-  const { container } = render(
-    <CFormSwitch
-      className="bazinga"
-      id="2"
-      invalid={true}
-      label="Some label"
-      size="xl"
-      type="radio"
-      valid={true}
-    />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-check')
-  expect(container.firstChild).toHaveClass('form-switch')
-  expect(container.firstChild).toHaveClass('form-switch-xl')
-  expect(container.firstChild).toHaveClass('is-invalid')
-  expect(container.firstChild).toHaveClass('is-valid')
-  expect(container.firstChild).toHaveClass('bazinga')
-  if (container.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('form-check-input')
-    expect(container.firstChild.firstChild).toHaveClass('is-invalid')
-    expect(container.firstChild.firstChild).toHaveClass('is-valid')
-    expect(container.firstChild.firstChild).toHaveAttribute('id', '2')
-    expect(container.firstChild.firstChild).toHaveAttribute('type', 'radio')
-    expect(container.firstChild.lastChild).toHaveClass('form-check-label')
-    expect(container.firstChild.lastChild).toHaveTextContent('Some label')
-    expect(container.firstChild.lastChild).toHaveAttribute('for', '2')
-  }
-})

package/src/components/form/__tests__/CFormText.spec.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormText } from '../index'
-
-test('loads and displays CFormText component', async () => {
-  const { container } = render(<CFormText>Test</CFormText>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormText customize', async () => {
-  const { container } = render(
-    <CFormText className="bazinga" as="h3">
-      Test
-    </CFormText>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-text')
-})

package/src/components/form/__tests__/CFormTextarea.spec.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormTextarea } from '../index'
-
-test('loads and displays CFormTextarea component', async () => {
-  const { container } = render(<CFormTextarea defaultValue="Some value" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control')
-})
-
-test('CFormTextarea customize', async () => {
-  const { container } = render(
-    <CFormTextarea
-      className="bazinga"
-      disabled={true}
-      invalid={true}
-      plainText={true}
-      readOnly={true}
-      valid={true}
-      defaultValue="Some value"
-      rows={2}
-    />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('form-control-plaintext')
-  expect(container.firstChild).toHaveClass('is-invalid')
-  expect(container.firstChild).toHaveClass('is-valid')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Some value')
-  expect(container.firstChild).toHaveAttribute('disabled', '')
-  expect(container.firstChild).toHaveAttribute('readonly', '')
-})

package/src/components/form/__tests__/CInputGroup.spec.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CInputGroup } from '../index'
-
-test('loads and displays CInputGroup component', async () => {
-  const { container } = render(<CInputGroup>Test</CInputGroup>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CInputGroup customize', async () => {
-  const { container } = render(
-    <CInputGroup className="bazinga" size="lg">
-      Test
-    </CInputGroup>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('input-group')
-  expect(container.firstChild).toHaveClass('input-group-lg')
-})

package/src/components/form/__tests__/CInputGroupText.spec.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CInputGroupText } from '../index'
-
-test('loads and displays CInputGroupText component', async () => {
-  const { container } = render(<CInputGroupText>Test</CInputGroupText>)
-  expect(container).toMatchSnapshot()
-})
-
-test('renders CInputGroupText component as a label', async () => {
-  const { container } = render(
-    <CInputGroupText as="label" htmlFor="input">
-      Test
-    </CInputGroupText>
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CInputGroupText customize', async () => {
-  const { container } = render(<CInputGroupText className="bazinga">Test</CInputGroupText>)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('input-group-text')
-})

package/src/components/form/__tests__/__snapshots__/CChipInput.spec.tsx.snap

@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CChipInput component 1`] = `
-<div>
-  <div
-    class="chip-input"
-  >
-    <span
-      class="chip"
-      data-coreui-chip-focusable="true"
-      tabindex="0"
-    >
-      React
-      <button
-        aria-label="Remove React"
-        class="chip-remove"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          fill="none"
-          height="16"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <line
-            x1="4"
-            x2="12"
-            y1="4"
-            y2="12"
-          />
-          <line
-            x1="12"
-            x2="4"
-            y1="4"
-            y2="12"
-          />
-        </svg>
-      </button>
-    </span>
-    <span
-      class="chip"
-      data-coreui-chip-focusable="true"
-      tabindex="0"
-    >
-      TypeScript
-      <button
-        aria-label="Remove TypeScript"
-        class="chip-remove"
-        tabindex="-1"
-        type="button"
-      >
-        <svg
-          fill="none"
-          height="16"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="2"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <line
-            x1="4"
-            x2="12"
-            y1="4"
-            y2="12"
-          />
-          <line
-            x1="12"
-            x2="4"
-            y1="4"
-            y2="12"
-          />
-        </svg>
-      </button>
-    </span>
-    <input
-      class="chip-input-field"
-      placeholder=""
-      size="1"
-      type="text"
-      value=""
-    />
-  </div>
-</div>
-`;

package/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap

@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CForm customize 1`] = `
-<div>
-  <form
-    class="was-validated bazinga"
-  >
-    Test
-  </form>
-</div>
-`;
-
-exports[`CForm example 1`] = `
-<div>
-  <form>
-    <label
-      class="form-label"
-    >
-      A
-    </label>
-    <input
-      aria-describedby="B"
-      class="form-control"
-      type="email"
-    />
-    <div
-      class="form-text"
-    >
-      C
-    </div>
-    <div
-      class="form-check"
-    >
-      <input
-        class="form-check-input"
-        type="checkbox"
-      />
-      <label
-        class="form-check-label"
-      >
-        D
-      </label>
-    </div>
-    <button
-      class="btn btn-primary"
-      type="submit"
-    >
-      E
-    </button>
-  </form>
-</div>
-`;
-
-exports[`loads and displays CForm component 1`] = `
-<div>
-  <form>
-    Test
-  </form>
-</div>
-`;

package/src/components/form/__tests__/__snapshots__/CFormCheck.spec.tsx.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormCheck customize button=false 1`] = `
-<div>
-  <div
-    class="form-check form-check-inline bazinga"
-  >
-    <input
-      class="form-check-input"
-      id="id"
-      type="radio"
-    />
-    <label
-      class="form-check-label"
-      for="id"
-    >
-      label
-    </label>
-  </div>
-</div>
-`;
-
-exports[`CFormCheck customize button=true 1`] = `
-<div>
-  <input
-    class="btn-check"
-    id="id"
-    type="radio"
-  />
-  <label
-    class="btn btn-ghost-primary btn-lg rounded"
-    for="id"
-  >
-    label
-  </label>
-</div>
-`;
-
-exports[`loads and displays CFormCheck component 1`] = `
-<div>
-  <input
-    class="form-check-input"
-    type="checkbox"
-  />
-</div>
-`;

package/src/components/form/__tests__/__snapshots__/CFormControl.spec.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormInput customize 1`] = `
-<div>
-  <input
-    class="form-control-plaintext form-control-lg form-control-color bazinga"
-    disabled=""
-    readonly=""
-    type="color"
-    value="value"
-  />
-</div>
-`;
-
-exports[`loads and displays CFormInput component 1`] = `
-<div>
-  <input
-    class="form-control"
-    type="text"
-  />
-</div>
-`;

package/src/components/form/__tests__/__snapshots__/CFormFeedback.spec.tsx.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormFeedback customize one 1`] = `
-<div>
-  <div
-    class="invalid-tooltip valid-tooltip bazinga"
-  />
-</div>
-`;
-
-exports[`CFormFeedback customize two 1`] = `
-<div>
-  <div
-    class="invalid-feedback valid-feedback bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CFormFeedback component 1`] = `
-<div>
-  <div
-    class=""
-  />
-</div>
-`;

package/src/components/form/__tests__/__snapshots__/CFormFloating.spec.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormFloating customize 1`] = `
-<div>
-  <div
-    class="form-floating bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CFormFloating component 1`] = `
-<div>
-  <div
-    class="form-floating"
-  />
-</div>
-`;

package/src/components/form/__tests__/__snapshots__/CFormInput.spec.tsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFormInput customize one 1`] = `
-<div>
-  <input
-    class="form-control"
-    type="text"
-  />
-</div>
-`;
-
-exports[`CFormInput customize two 1`] = `
-<div>
-  <input
-    class="form-control-plaintext form-control-lg form-control-color is-invalid is-valid bazinga"
-    disabled=""
-    readonly=""
-    type="color"
-    value="#888888"
-  />
-</div>
-`;
-
-exports[`loads and displays CFormInput component 1`] = `
-<div>
-  <input
-    class="form-control"
-    type="text"
-  />
-</div>
-`;