describe('Counter', () => { it('should increase count and update UI', () => { const { getByTestId } = render(<Counter />); const button = getByTestId('button'); const counter = getByTestId('counter'); fireEvent.click(button); expect(counter).toHaveTextContent('1'); }); });
test('get weather', async () => { const { getByText, queryByText, container } = render(<Weather location="charleston" />) await wait(() => expect(queryByText(/loading/i)).not.toBeInTheDocument()) expect(getByText(/raining/)).toBeInTheDocument() })
it('renders success alert type', () => { const { getByText } = render( <Alert messages={{ success: { email: 'Email is available!' } }} /> ); const alert = getByText('Email is available!'); expect(alert).toHaveTextContent('Email is available!'); expect(alert.parentNode).toHaveClass('alert alert-success'); });
test('submit login', () => { const handleSubmit = jest.fn() const { getByText, getByLabelText } = render(<Login onSubmit={handleSubmit} />) fireEvent.change(getByLabelText(/username/i), {target: {value: 'johndoe'}}) fireEvent.change(getByLabelText(/password/i), {target: {value: 'password'}}) getByText(/submit/i).click() expect(handleSubmit).toHaveBeenCalledTimes(1) expect(handleSubmit).toHaveBeenCalledWith({ username: 'johndoe', password: 'password' }) })
describe('Search', () => { it('should perform search onSubmit', () => { const handleSubmit = jest.fn(); const { getByLabelText, getByText } = render(<Search onSubmit={handleSubmit} />); const input = getByLabelText('Search'); const button = getByText('Submit'); fireEvent.change(input, { target: { value: 'hello' } }); fireEvent.click(button); expect(handleSubmit).toHaveBeenCalled(); expect(handleSubmit).toHaveBeenCalledWith({ searchTerm: 'hello' }); }) })
it('displays error messages', () => { const handler = jest.fn(); const { getByText } = render( <ResetPassword token="aabbcc" messages={{ error: { password: 'New password is too short' } }} onSubmit={handler} /> ); const alert = getByText('New password is too short'); expect(alert.parentNode).toHaveClass('alert alert-error'); });
test("parameters change updates the result", () => { store.dispatch(append("a")); const { container, getByTestId } = renderRepeated(); fireEvent.change(getByTestId("repeated-input"), { target: { value: "b" } }); expect(container).toHaveTextContent("unique"); });
test("can't decrement to a negative count", () => { const { getByLabelText, getByText } = render(<CounterPage />); fireEvent.click(getByText("Decrement")); expect(getByLabelText("Count").value).toEqual("0"); });
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); }); });
it("is a ClassCounter with an increment button. It 0 then 1.", () => { // Arrange const { getByTestId } = render(<ClassCounter />) const count = getByTestId('count') const plusButton = getByTestId('plus') // Asserting that it starts at 0 expect(count.textContent).toBe('0') // Act fireEvent.click(plusButton) // Asserting that it now is 1 expect(count.textContent).toBe('1') })
describe('Loading', () => { it('should show loading and change UI after 3 seconds', async () => { const { getByText, getByTestId } = render(<Loading />); const loading = getByText(/loading/i); expect(loading).toBeVisible(); await waitForElement(() => getByTestId('loading')); expect(getByTestId('loading')).toBeInTheDocument(); }) })
it('renders error alert type', () => { const { getByText } = render( <Alert messages={{ error: { name: 'Name is too long' } }} /> ); const alert = getByText('Name is too long'); expect(alert.parentNode).toHaveClass('alert alert-error'); });
test("DrakeButtons has the same amount of buttons as drakes passed in", () => { const { getByTestId } = render( <DrakeButtons drakes={[{ one: 1 }, { two: 2 }]} onClick={x => x} /> ); const { length } = getByTestId(TEST_ID).querySelectorAll("button"); expect(length).toBe(2); });
it('renders success alert type', () => { const { getByText } = render( <Alert messages={{ success: { email: 'Email is available!' } }} /> ); const alert = getByText('Email is available!'); expect(alert).toHaveTextContent('Email is available!'); expect(alert.parentNode).toHaveClass('alert alert-success'); });
it('renders error alert type', () => { const { getByText } = render( <Alert messages={{ error: { name: 'Name is too long' } }} /> ); const alert = getByText('Name is too long'); expect(alert.parentNode).toHaveClass('alert alert-error'); });