-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adicionando testes para página de login e componentes isolados
- Loading branch information
1 parent
37914cc
commit 227380c
Showing
5 changed files
with
229 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { render, fireEvent, wait } from '@testing-library/react'; | ||
| import Input from '../../components/Input'; | ||
|
|
||
| jest.mock('@unform/core', () => { | ||
| return { | ||
| useField() { | ||
| return { | ||
| fieldName: 'email', | ||
| defaultValue: '', | ||
| error: '', | ||
| registerField: jest.fn(), | ||
| }; | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| describe('Input component', () => { | ||
| it('should be able to render an input', () => { | ||
| const { getByPlaceholderText } = render( | ||
| <Input name="email" placeholder="E-mail" />, | ||
| ); | ||
|
|
||
| expect(getByPlaceholderText('E-mail')).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should render highlight on input focus', async () => { | ||
| const { getByPlaceholderText, getByTestId } = render( | ||
| <Input name="email" placeholder="E-mail" />, | ||
| ); | ||
|
|
||
| const inputElement = getByPlaceholderText('E-mail'); | ||
| const containerElement = getByTestId('input-container'); | ||
|
|
||
| fireEvent.focus(inputElement); | ||
|
|
||
| await wait(() => { | ||
| expect(containerElement).toHaveStyle('border-color: #ff9000;'); | ||
| expect(containerElement).toHaveStyle('color: #ff9000;'); | ||
| }); | ||
|
|
||
| fireEvent.blur(inputElement); | ||
|
|
||
| await wait(() => { | ||
| expect(containerElement).not.toHaveStyle('border-color: #ff9000;'); | ||
| expect(containerElement).not.toHaveStyle('color: #ff9000;'); | ||
| }); | ||
| }); | ||
|
|
||
| it('should keep input border highlight when input filled', async () => { | ||
| const { getByPlaceholderText, getByTestId } = render( | ||
| <Input name="email" placeholder="E-mail" />, | ||
| ); | ||
|
|
||
| const inputElement = getByPlaceholderText('E-mail'); | ||
| const containerElement = getByTestId('input-container'); | ||
|
|
||
| fireEvent.change(inputElement, { | ||
| target: { value: 'johndoe@example.com.br' }, | ||
| }); | ||
|
|
||
| fireEvent.blur(inputElement); | ||
|
|
||
| await wait(() => { | ||
| expect(containerElement).toHaveStyle('color: #ff9000;'); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,98 @@ | ||
| import React from 'react' | ||
| import { render } from '@testing-library/react' | ||
| import { render, fireEvent, wait } from '@testing-library/react' | ||
|
|
||
| import SignIn from '../../pages/SignIn' | ||
|
|
||
| const mockedHistoryPush = jest.fn() | ||
| const mockedSignIn = jest.fn() | ||
| const mockedAddToast = jest.fn() | ||
|
|
||
| jest.mock('react-router-dom', () => { | ||
| return { | ||
| useHistory: jest.fn(), | ||
| useHistory: () => ({ | ||
| push: mockedHistoryPush | ||
| }), | ||
| Link: ({ children }: { children: React.ReactNode }) => children | ||
| } | ||
| }) | ||
|
|
||
| jest.mock('../../hooks/auth', () => { | ||
| return { | ||
| useAuth: () => ({ | ||
| signIn: mockedSignIn | ||
| }) | ||
| } | ||
| }) | ||
|
|
||
| jest.mock('../../hooks/toast', () => { | ||
| return { | ||
| useToast: () => ({ | ||
| addToast: mockedAddToast | ||
| }) | ||
| } | ||
| }) | ||
|
|
||
| describe('SignIn Page', () => { | ||
| it('should be able to sign in', () => { | ||
| const { debug } = render(<SignIn />) | ||
| beforeEach(() => { | ||
| mockedHistoryPush.mockClear() | ||
| }) | ||
|
|
||
| it('should be able to sign in', async () => { | ||
| const { getByPlaceholderText, getByText } = render(<SignIn />) | ||
|
|
||
| const emailField = getByPlaceholderText('E-mail') | ||
| const passwordField = getByPlaceholderText('Senha') | ||
| const buttonElement = getByText('Entrar') | ||
|
|
||
| fireEvent.change(emailField, { target: { value: 'johndoe@example.com' } }) | ||
| fireEvent.change(passwordField, { target: { value: '123456' } }) | ||
|
|
||
| fireEvent.click(buttonElement) | ||
|
|
||
| await wait(() => { | ||
| expect(mockedHistoryPush).toHaveBeenCalledWith('/dashboard') | ||
| }) | ||
| }) | ||
|
|
||
| it('should not be able to sign in with invalid credentials', async () => { | ||
| const { getByPlaceholderText, getByText } = render(<SignIn />) | ||
|
|
||
| const emailField = getByPlaceholderText('E-mail') | ||
| const passwordField = getByPlaceholderText('Senha') | ||
| const buttonElement = getByText('Entrar') | ||
|
|
||
| fireEvent.change(emailField, { target: { value: 'not-valid-email' } }) | ||
| fireEvent.change(passwordField, { target: { value: '123456' } }) | ||
|
|
||
| fireEvent.click(buttonElement) | ||
|
|
||
| await wait(() => { | ||
| expect(mockedHistoryPush).not.toHaveBeenCalled() | ||
| }) | ||
| }) | ||
|
|
||
| it('should display an error if login fails', async () => { | ||
| mockedSignIn.mockImplementation(() => { | ||
| throw new Error() | ||
| }) | ||
|
|
||
| const { getByPlaceholderText, getByText } = render(<SignIn />) | ||
|
|
||
| const emailField = getByPlaceholderText('E-mail') | ||
| const passwordField = getByPlaceholderText('Senha') | ||
| const buttonElement = getByText('Entrar') | ||
|
|
||
| fireEvent.change(emailField, { target: { value: 'johndoe@example.com' } }) | ||
| fireEvent.change(passwordField, { target: { value: '123456' } }) | ||
|
|
||
| fireEvent.click(buttonElement) | ||
|
|
||
| debug() | ||
| await wait(() => { | ||
| expect(mockedAddToast).toHaveBeenCalledWith( | ||
| expect.objectContaining({ | ||
| type: 'error' | ||
| }) | ||
| ) | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -115,4 +115,5 @@ const SingIn: React.FC = () => { | |
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| export default SingIn; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters