describe('Testing Form Page', () => { test('Able to type input', () => { const { getByPlaceholderText, getByLabelText } = render(<Form />); const firstNameInputField = getByPlaceholderText(/First Name/i); const lastNameInputField = getByLabelText(/Last Name/i); fireEvent.change(firstNameInputField, { target: { value: FirstName } }); fireEvent.change(lastNameInputField, { target: { value: LastName } }); expect(firstNameInputField.value).toEqual(FirstName); expect(lastNameInputField.value).toEqual(LastName); }); });
test('entering a todo in form adds a todo', async () => { const { getByText, getByPlaceholderText, getByTestId, container } = render(<App />); // enter todo text in textbox getByPlaceholderText('Enter todo text').value = 'My new todo'; // click Add Simulate.click(getByText('Add')); // wait for Todo to show up await wait(() => getByText('My new todo')); // make sure form is cleared expect(getByTestId('TodoForm-input').value).toEqual(''); // make sure todo was added expect(getByText('My new todo')).toBeDefined(); });
describe('components', function() { describe('AgoSearch', function() { it('should pass q to input and call onSearch when button is clicked', function() { const q = 'initial q'; // test double for the search handler const onSearch = jest.fn(); // render component to the page const { getByPlaceholderText, getByText } = render( <AgoSearch q={q} onSearch={onSearch} size="sm" /> ); // initial dom state const input = getByPlaceholderText('search for items'); expect(input.value).toBe(q); let newQ = 'new q'; // change the value and click the search button fireEvent.change(input, { target: { value: newQ } }); getByText('Search').click(); expect(onSearch).toBeCalledWith(newQ); expect(onSearch).toHaveBeenCalledTimes(1); }); }); });
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render(<Login onSubmit={handler} />); fireEvent.change(getByPlaceholderText('Email address'), { target: { value: 'test@user.com' } }); fireEvent.change(getByPlaceholderText('Password'), { target: { value: 'password' } }); const submitButton = getByText(/log in/i); expect(container.firstChild).toHaveFormValues({ email: 'test@user.com', password: 'password' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { email: 'test@user.com', password: 'password' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });
it("has two inputs that I can change to see if it works", () => { // Arrange const { getByTestId, getByPlaceholderText, getByLabelText } = render(<Problem total={30}/>) const checkResult = getByTestId('check') const input_one = getByPlaceholderText('Place the first number here!') const input_two = getByLabelText('Number 2') const result = getByTestId('result') // Act fireEvent.change(input_one, { target: { value: 10 } }) fireEvent.change(input_two, { target: { value: 20 } }) fireEvent.click(checkResult) // Asserting that it was correct expect(result.textContent).toBe('Good') })
describe("CommentForm", () => { test("has a text area, text input and submit button", () => { const {getByPlaceholderText, getByLabelText, getByText} = render(<CommentForm />); expect(getByPlaceholderText("Write something...")).toBeInTheDocument() expect(getByLabelText("Your Name")).toBeInTheDocument() expect(getByText("Submit")).toBeInTheDocument() }); test("submit button is disabled on load", () => { const {getByText} = render(<CommentForm />); expect(getByText("Submit")).toHaveAttribute("disabled") }); test("submit button is enabled after fields are filled in", () => { const sampleComment = "Some comment" const sampleAuthor = "Mary" const {getByPlaceholderText, getByLabelText, queryByText} = render(<CommentForm />); const textArea = getByPlaceholderText("Write something...") const input = getByLabelText("Your Name") fireEvent.change(textArea, { target: { value: sampleComment } }) fireEvent.change(input, { target: { value: sampleAuthor } }) expect(queryByText("Submit")).not.toHaveAttribute("disabled") }); });
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render( <ForgotPassword onSubmit={handler} /> ); fireEvent.change(getByPlaceholderText('Email address'), { target: { value: 'test@user.com' } }); const submitButton = getByText(/submit/i); expect(container.firstChild).toHaveFormValues({ email: 'test@user.com' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { email: 'test@user.com' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });
getByPlaceholderText('Enter todo text').value = newTodoText;
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render(<Signup onSubmit={handler} />); fireEvent.change(getByPlaceholderText('Name'), { target: { value: 'John Doe' } }); fireEvent.change(getByPlaceholderText('Email address'), { target: { value: 'test@user.com' } }); fireEvent.change(getByPlaceholderText('Password'), { target: { value: 'password' } }); const submitButton = getByText(/sign up/i); expect(container.firstChild).toHaveFormValues({ name: 'John Doe', email: 'test@user.com', password: 'password' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { email: 'test@user.com', name: 'John Doe', password: 'password' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });
describe("App", () => { test("a new comment can be created", () => { const sampleComment = "This is a comment"; const sampleAuthor = "John"; const {container, getByText, getByPlaceholderText, getByLabelText}= render(<App />); const textArea = getByPlaceholderText("Write something...") const input = getByLabelText("Your Name") const button = getByText("Submit") fireEvent.change(textArea, { target: { value: sampleComment } }) fireEvent.change(input, { target: { value: sampleAuthor } }) fireEvent.click(button) const allComments = container.querySelectorAll("blockquote") expect(allComments.length).toEqual(1) }); });
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render( <ResetPassword token="aabbcc" onSubmit={handler} /> ); fireEvent.change(getByPlaceholderText('New password'), { target: { value: 'newpassword' } }); fireEvent.change(getByPlaceholderText('Re-enter new password'), { target: { value: 'newpassword' } }); const submitButton = getByText(/reset password/i); expect(container.firstChild).toHaveFormValues({ password: 'newpassword', repeatPassword: 'newpassword' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { password: 'newpassword', repeatPassword: 'newpassword', token: 'aabbcc' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render(<Login onSubmit={handler} />); fireEvent.change(getByPlaceholderText('Email address'), { target: { value: 'test@user.com' } }); fireEvent.change(getByPlaceholderText('Password'), { target: { value: 'password' } }); const submitButton = getByText(/log in/i); expect(container.firstChild).toHaveFormValues({ email: 'test@user.com', password: 'password' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { email: 'test@user.com', password: 'password' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render( <ForgotPassword onSubmit={handler} /> ); fireEvent.change(getByPlaceholderText('Email address'), { target: { value: 'test@user.com' } }); const submitButton = getByText(/submit/i); expect(container.firstChild).toHaveFormValues({ email: 'test@user.com' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { email: 'test@user.com' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render(<Signup onSubmit={handler} />); fireEvent.change(getByPlaceholderText('Name'), { target: { value: 'John Doe' } }); fireEvent.change(getByPlaceholderText('Email address'), { target: { value: 'test@user.com' } }); fireEvent.change(getByPlaceholderText('Password'), { target: { value: 'password' } }); const submitButton = getByText(/sign up/i); expect(container.firstChild).toHaveFormValues({ name: 'John Doe', email: 'test@user.com', password: 'password' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { email: 'test@user.com', name: 'John Doe', password: 'password' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });
it('submits with correct data', async () => { const handler = jest.fn((_, { setSubmitting }) => { setSubmitting(false); }); const { container, getByText, getByPlaceholderText } = render( <ResetPassword token="aabbcc" onSubmit={handler} /> ); fireEvent.change(getByPlaceholderText('New password'), { target: { value: 'newpassword' } }); fireEvent.change(getByPlaceholderText('Re-enter new password'), { target: { value: 'newpassword' } }); const submitButton = getByText(/reset password/i); expect(container.firstChild).toHaveFormValues({ password: 'newpassword', repeatPassword: 'newpassword' }); expect(submitButton).not.toHaveAttribute('disabled'); fireEvent.click(submitButton); expect(submitButton).toHaveAttribute('disabled'); await wait(() => { expect(handler).toHaveBeenCalledWith( { password: 'newpassword', repeatPassword: 'newpassword', token: 'aabbcc' }, expect.objectContaining({ setSubmitting: expect.any(Function) }) ); expect(submitButton).not.toHaveAttribute('disabled'); }); });