|
1 | | -import { render, waitFor } from '@testing-library/react'; |
| 1 | +import { render, screen, waitFor } from '@testing-library/react'; |
2 | 2 | import { Provider } from 'react-redux'; |
3 | 3 | import userEvent from '@testing-library/user-event'; |
4 | 4 | import { IntlProvider } from '@edx/frontend-platform/i18n'; |
@@ -30,6 +30,7 @@ const initialState = { |
30 | 30 | }; |
31 | 31 |
|
32 | 32 | const defaultProps = { |
| 33 | + index: 0, |
33 | 34 | ...signatoriesMock[0], |
34 | 35 | showDeleteButton: true, |
35 | 36 | isEdit: true, |
@@ -62,15 +63,20 @@ describe('Signatory Component', () => { |
62 | 63 | it('handles input change', async () => { |
63 | 64 | const user = userEvent.setup(); |
64 | 65 | const handleChange = jest.fn(); |
65 | | - const { getByPlaceholderText } = renderSignatory({ ...defaultProps, handleChange }); |
66 | | - const input = getByPlaceholderText(messages.namePlaceholder.defaultMessage); |
| 66 | + renderSignatory({ ...defaultProps, handleChange }); |
| 67 | + const input = screen.getByPlaceholderText(messages.namePlaceholder.defaultMessage); |
67 | 68 | const newInputValue = 'Jane Doe'; |
68 | 69 |
|
69 | | - await user.type(input, newInputValue, { name: 'signatories[0].name' }); |
| 70 | + expect(handleChange).not.toHaveBeenCalled(); |
| 71 | + expect(input.value).not.toBe(newInputValue); |
| 72 | + await user.type(input, newInputValue); |
70 | 73 |
|
71 | 74 | await waitFor(() => { |
72 | | - expect(handleChange).toHaveBeenCalledWith(expect.anything()); |
73 | | - expect(input.value).toBe(newInputValue); |
| 75 | + // This is not a great test; handleChange() gets called for each key press: |
| 76 | + expect(handleChange).toHaveBeenCalledTimes(newInputValue.length); |
| 77 | + // And the input value never actually changes because it's a controlled component |
| 78 | + // and we pass the name in as a prop, which hasn't changed. |
| 79 | + // expect(input.value).toBe(newInputValue); |
74 | 80 | }); |
75 | 81 | }); |
76 | 82 |
|
|
0 commit comments