From b32a18671dedde55f08e6ccda34889d09a7a1a71 Mon Sep 17 00:00:00 2001 From: Qs-F Date: Thu, 8 Jun 2023 12:01:22 +0900 Subject: [PATCH] =?UTF-8?q?chore(Select):=20=E3=83=86=E3=82=B9=E3=83=88?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/for-ui/src/select/Select.test.tsx | 146 +++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 packages/for-ui/src/select/Select.test.tsx diff --git a/packages/for-ui/src/select/Select.test.tsx b/packages/for-ui/src/select/Select.test.tsx new file mode 100644 index 000000000..e2277dd91 --- /dev/null +++ b/packages/for-ui/src/select/Select.test.tsx @@ -0,0 +1,146 @@ +import { ComponentPropsWithoutRef } from 'react'; +import { describe, expect, it, vi } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { withRHF } from '../testing/rhf'; +import { Select } from './Select'; + +describe('Select', () => { + it('can be rendered', async () => { + render(); + expect(screen.getByRole('combobox')).toBeInTheDocument(); + }); + +// it('with custom label can be rendered', async () => { +// render(TextField} />); +// expect(screen.getByRole('textbox', { name: 'TextField' })).toBeInTheDocument(); +// }); +// it('is focused when clicking label', async () => { +// const user = userEvent.setup(); +// render(); +// await user.click(screen.getByText('TextField')); +// expect(screen.getByRole('textbox', { name: 'TextField' })).toHaveFocus(); +// }); +// it('can be typed', async () => { +// const user = userEvent.setup(); +// render(); +// const textField = screen.getByRole('textbox', { name: 'TextField' }); +// await user.type(textField, 'Hello World'); +// expect(textField).toHaveValue('Hello World'); +// }); +// it('can have default value', async () => { +// render(); +// const textField = screen.getByRole('textbox', { name: 'TextField' }); +// expect(textField).toHaveValue('Hello World'); +// }); +// it('cannot be typed when disabled', async () => { +// const user = userEvent.setup(); +// render(); +// const textField = screen.getByRole('textbox', { name: 'TextField' }); +// await user.type(textField, 'Hello World'); +// expect(textField).not.toHaveValue('Hello World'); +// }); +// it('does not accpect line breaks', async () => { +// const user = userEvent.setup(); +// render(); +// const textField = screen.getByRole('textbox', { name: 'TextField' }); +// await user.type( +// textField, +// `Hello +// World`, +// ); +// expect(textField).toHaveValue('HelloWorld'); +// }); +// it('with isPriceFormat does not accept value except for numbers', async () => { +// const user = userEvent.setup(); +// render(); +// const textField = screen.getByRole('textbox', { name: 'TextField' }); +// await user.type(textField, '1,2,3'); +// expect(textField).toHaveValue('123'); +// }); +// it('with isPriceFormat does not accept value except for numbers', async () => { +// const user = userEvent.setup(); +// render(); +// const textField = screen.getByRole('textbox', { name: 'TextField' }); +// await user.type(textField, 'Hello World'); +// expect(textField).toHaveValue(''); +// }); +// it('with error is invalid', async () => { +// render(); +// expect(screen.getByRole('textbox', { name: 'TextField' })).toBeInvalid(); +// }); +// it('with required shows error when value is empty', async () => { +// render(); +// expect(screen.getByRole('textbox', { name: 'TextField *' })).toBeInvalid(); +// }); +// it('with helperText shows description', async () => { +// render(); +// expect(screen.getByRole('textbox', { name: 'TextField' })).toHaveAccessibleDescription('Description'); +// }); +// it('with error and helperText shows error message', async () => { +// render(); +// expect(screen.getByRole('textbox', { name: 'TextField' })).toHaveErrorMessage('Something wrong'); +// }); +}); + +describe('Controlled TextField', () => { + it('', async () => { + + }) + // it('can handle onChange event callback', async () => { + // const user = userEvent.setup(); + // const onChange: ComponentPropsWithoutRef['onChange'] = vi.fn(); + // render(); + // await user.type(screen.getByRole('textbox', { name: 'TextField' }), 'Hello World'); + // expect(onChange).toHaveBeenCalled(); + // }); + // it('can get typed value', async () => { + // const user = userEvent.setup(); + // const onChange: ComponentPropsWithoutRef['onChange'] = vi.fn((e) => e.target.value); + // render(); + // await user.type(screen.getByRole('textbox', { name: 'TextField' }), 'Hello World'); + // expect(onChange).toHaveLastReturnedWith('Hello World'); + // }); +}); + +describe('Uncontrolled TextField', () => { + it('', async () => { + + }) + + // it('can get typed value', async () => { + // const user = userEvent.setup(); + // const onSubmit = vi.fn((value) => value); + // const { Form, submit } = withRHF<{ textField: string }>({ + // onSubmit, + // Component: ({ register }) => , + // }); + // render(
); + // await user.type(screen.getByRole('textbox', { name: 'TextField' }), 'Hello World'); + // await submit(); + // expect(onSubmit).toHaveLastReturnedWith({ + // textField: 'Hello World', + // }); + // }); + // it('can get value when default value is set', async () => { + // const onSubmit = vi.fn((value) => value); + // const { Form, submit } = withRHF<{ textField: string }>({ + // onSubmit, + // useFormOptions: { + // defaultValues: { + // textField: 'Hello World', + // }, + // }, + // Component: ({ register }) => , + // }); + // render(); + // await submit(); + // expect(onSubmit).toHaveLastReturnedWith({ + // textField: 'Hello World', + // }); + // }); +});