Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 220 - Teste da página de peso do pet #252

Merged
merged 10 commits into from
Aug 11, 2024
89 changes: 83 additions & 6 deletions src/layouts/app/pages/PetWeight/petWeightPage.spec.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,93 @@
import { describe, expect, it } from 'vitest';
import PetWeightPage from './index';
import { render, screen, userEvent, waitFor } from '@testing-library/vanilla';
import PetWeightPage from '.';

const propsMock = {
petPhoto: 'https://via.placeholder.com/150',
};

describe('PetWeightPage', () => {
it('is a Function', () => {
expect(PetWeightPage).toBeInstanceOf(Function);
const makeComponent = (params) => render(new PetWeightPage(params));

describe('Pet Weight page', () => {
it('renders image', async () => {
const page = makeComponent(propsMock.petPhoto);

render(page);
const image = screen.getByAltText('Imagem carregada');

expect(image).toBeInTheDocument();
});

it('KG radio is checked by default', () => {
const page = makeComponent(propsMock.petPhoto);
render(page);

const radioKG = screen.getByLabelText('KG');

expect(radioKG.checked).toBe(true);
});

it.skip('returns an object', () => {
expect(new PetWeightPage(propsMock)).toBeInstanceOf(Object);
it('selects radio buttons when clicked and desselects the other', async () => {
const page = makeComponent(propsMock.petPhoto);
render(page);

const radioButtonKG = screen.getByLabelText('KG');
const radioButtonLB = screen.getByLabelText('LB');

await userEvent.click(radioButtonKG);
expect(radioButtonKG).toBeChecked();
expect(radioButtonLB).not.toBeChecked();

await userEvent.click(radioButtonLB);
expect(radioButtonLB).toBeChecked();
expect(radioButtonKG).not.toBeChecked();
});

it('allows typing in the input field', async () => {
const page = makeComponent(propsMock.petPhoto);
render(page);

const input = screen.getByPlaceholderText('Peso');

await userEvent.type(input, '5');

expect(input).toHaveValue('5');
});

it('shows right value in slider when value changes in the input field', async () => {
const page = makeComponent(propsMock.petPhoto);
render(page);

const input = screen.getByPlaceholderText('Peso');
const slider = screen.getByText('10.0');

await userEvent.clear(input);
await userEvent.type(input, '5');

await waitFor(() => {
expect(slider).toHaveTextContent('5.0');
});
});

it('emits data when continue button is clicked', async () => {
const page = makeComponent(propsMock.petPhoto);
render(page);

const input = screen.getByPlaceholderText('Peso');
const radioKG = screen.getByLabelText('KG');
const continueButton = screen.getByRole('button', { name: 'Continuar' });

await userEvent.clear(input);
await userEvent.type(input, '5');
await userEvent.click(radioKG);

const mockEmit = vi.spyOn(page, 'emit');

await userEvent.click(continueButton);

expect(mockEmit).toHaveBeenCalledWith('submit', {
weight: 5.0,
weightUnit: 'kg',
});
});
});
Loading