diff --git a/components/doc/chips/apidoc.js b/components/doc/chips/apidoc.js index d1d792b1a4..9923ca4fb2 100644 --- a/components/doc/chips/apidoc.js +++ b/components/doc/chips/apidoc.js @@ -317,7 +317,7 @@ export function ApiDoc(props) { - +

Dependencies

None.

diff --git a/components/doc/chips/templatedoc.js b/components/doc/chips/templatedoc.js index d8f79ff708..aaf5961801 100644 --- a/components/doc/chips/templatedoc.js +++ b/components/doc/chips/templatedoc.js @@ -67,7 +67,7 @@ export default function TemplateDemo() { A chip is customized using itemTemplate function where value is passed to return JSX.
- setValue(e.value)} itemTemplate={customChip}/> + setValue(e.value)} itemTemplate={customChip} />
diff --git a/components/lib/button/Button.spec.js b/components/lib/button/Button.spec.js index fcf46d1e34..9fa8129eb3 100644 --- a/components/lib/button/Button.spec.js +++ b/components/lib/button/Button.spec.js @@ -153,6 +153,7 @@ describe('Button', () => { fireEvent.click(button); // Assert + expect(button).toBeDisabled(); expect(clickOn).toHaveBeenCalledTimes(0); }); }); diff --git a/components/lib/inputtext/InputText.spec.js b/components/lib/inputtext/InputText.spec.js new file mode 100644 index 0000000000..232635f249 --- /dev/null +++ b/components/lib/inputtext/InputText.spec.js @@ -0,0 +1,113 @@ +import '@testing-library/jest-dom'; +import { fireEvent, render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { InputText } from './InputText'; + +describe('InputText', () => { + test('when input is enabled then input accepts data entry and have filled state', () => { + // Arrange + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + fireEvent.input(input, { target: { value: 'abc' } }); + + // Act + expect(input).toBeEnabled(); + expect(input).toHaveClass('p-inputtext p-component p-filled'); + expect(input).toHaveValue('abc'); + }); + test('when input is blank it should not have filled state', () => { + // Arrange + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + fireEvent.input(input, { target: { value: '' } }); + + // Act + expect(input).toBeEnabled(); + expect(input).toHaveClass('p-inputtext p-component'); + expect(input).not.toHaveClass('p-filled'); + expect(input).toHaveValue(''); + }); + test('when input is is set for validation only', () => { + // Arrange + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + fireEvent.input(input, { target: { value: 'def' } }); + + // Act + expect(input).toBeEnabled(); + expect(input).toHaveClass('p-inputtext p-component'); + expect(input).toHaveValue('def'); + }); + test('when input is disabled it should render as disabled', () => { + // Arrange + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + fireEvent.input(input, { target: { value: '23' } }); + + // Act + expect(input).toBeDisabled(); + expect(input).toHaveClass('p-inputtext p-component p-disabled'); + }); + test('when input is using keyfilter for integers accept integer input', async () => { + // Arrange + const keydownOn = jest.fn(); + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + await userEvent.type(input, '123'); + + // Act + expect(input).toHaveValue('123'); + expect(keydownOn).toHaveBeenCalledTimes(3); + }); + test('when input is using keyfilter for integers do not accept alphabetic input', async () => { + // Arrange + const keydownOn = jest.fn(); + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + await userEvent.type(input, 'abc'); + + // Act + expect(input).toHaveValue(''); + expect(keydownOn).toHaveBeenCalledTimes(3); + }); + test('when input is using keyfilter for alphabetic accept paste of alphabetic values', async () => { + // Arrange + const pasteOn = jest.fn(); + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + input.focus(); + await userEvent.paste('abc'); + + // Act + expect(input).toHaveValue('abc'); + expect(pasteOn).toHaveBeenCalledTimes(1); + }); + test('when input is using keyfilter for alphabetic do not accept paste of integer values', async () => { + // Arrange + const pasteOn = jest.fn(); + const { container } = render(); + const input = container.getElementsByTagName('input')[0]; + + // Act + input.focus(); + await userEvent.paste('123'); + + // Act + expect(input).toHaveValue(''); + expect(pasteOn).toHaveBeenCalledTimes(1); + }); +}); diff --git a/components/lib/keyfilter/KeyFilter.js b/components/lib/keyfilter/KeyFilter.js index 3b89918397..8eedf626bb 100644 --- a/components/lib/keyfilter/KeyFilter.js +++ b/components/lib/keyfilter/KeyFilter.js @@ -61,7 +61,9 @@ export const KeyFilter = { let value = e.target.value, validatePattern = true; - if (value && !keyfilter.test(value)) { + const regex = this.getRegex(keyfilter); + + if (value && !regex.test(value)) { validatePattern = false; }