From 2d3c6edfde9fbed990914301e423bb0916233dca Mon Sep 17 00:00:00 2001 From: Marce Date: Sun, 26 May 2024 16:24:47 -0300 Subject: [PATCH 1/5] =?UTF-8?q?test:=20adiciona=20testes=20da=20p=C3=A1gin?= =?UTF-8?q?a=20de=20peso=20do=20pet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PetWeightPage/petWeightPage.spec.js | 176 +++++++++++++++++- 1 file changed, 174 insertions(+), 2 deletions(-) diff --git a/src/home/components/PetWeightPage/petWeightPage.spec.js b/src/home/components/PetWeightPage/petWeightPage.spec.js index 4de0e7a7..750c5092 100644 --- a/src/home/components/PetWeightPage/petWeightPage.spec.js +++ b/src/home/components/PetWeightPage/petWeightPage.spec.js @@ -1,16 +1,188 @@ -import { describe, it, expect } from 'vitest'; +import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'; import PetWeightPage from './index'; +import UploadImage from '../../../components/UploadImage'; +import RangeSlider from '../../../components/RangeSlider'; +import TextInput from '../../../components/TextInput'; +import RadioButton from '../../../components/RadioButton'; +import Button from '../../../components/Button'; + +let instance; + +vi.mock('../../../components/UploadImage', () => ({ + __esModule: true, + default: vi.fn().mockImplementation(() => ({ + mount: vi.fn(), + selected: { + get: vi.fn().mockReturnValue({ + classList: { + add: vi.fn(), + }, + }), + }, + })), +})); + +vi.mock('../../../components/RangeSlider', () => ({ + __esModule: true, + default: vi.fn().mockImplementation(() => ({ + mount: vi.fn(), + setValue: vi.fn(), + listen: vi.fn(), + selected: { + get: vi.fn().mockReturnValue({ + classList: { + add: vi.fn(), + }, + }), + }, + })), +})); + +vi.mock('../../../components/TextInput', () => ({ + __esModule: true, + default: vi.fn().mockImplementation(() => ({ + mount: vi.fn(), + setValue: vi.fn(), + listen: vi.fn(), + selected: { + get: vi.fn().mockReturnValue({ + classList: { + add: vi.fn(), + }, + }), + }, + })), +})); + +vi.mock('../../../components/RadioButton', () => ({ + __esModule: true, + default: vi.fn().mockImplementation(() => ({ + mount: vi.fn(), + isChecked: vi.fn().mockImplementation(function isChecked() { + return this === instance.radioKG; + }), + getValue: vi.fn().mockImplementation(function getValue() { + return this === instance.radioKG ? 'kg' : 'lb'; + }), + selected: { + get: vi.fn().mockReturnValue({ + classList: { + add: vi.fn(), + }, + }), + }, + })), +})); + +vi.mock('../../../components/Button', () => ({ + __esModule: true, + default: vi.fn().mockImplementation(() => ({ + mount: vi.fn(), + listen: vi.fn(), + selected: { + get: vi.fn().mockReturnValue({ + classList: { + add: vi.fn(), + }, + }), + }, + })), +})); const propsMock = { petPhoto: 'https://via.placeholder.com/150', }; describe('PetWeightPage', () => { + beforeEach(() => { + instance = new PetWeightPage(propsMock); + }); + + afterEach(() => { + vi.clearAllMocks(); + }); + it('is a Function', () => { expect(PetWeightPage).toBeInstanceOf(Function); }); it('returns an object', () => { - expect(new PetWeightPage(propsMock)).toBeInstanceOf(Object); + expect(instance).toBeInstanceOf(Object); + }); + + it('initializes components correctly', () => { + expect(UploadImage).toHaveBeenCalledTimes(1); + expect(RangeSlider).toHaveBeenCalledTimes(1); + expect(TextInput).toHaveBeenCalledTimes(1); + expect(RadioButton).toHaveBeenCalledTimes(2); + expect(Button).toHaveBeenCalledTimes(1); + }); + + it('sets the initial pet photo', () => { + expect(UploadImage).toHaveBeenCalledWith(); + }); + + it('updates weight correctly on slider change', () => { + const mockValue = 5.0; + instance.slider.listen.mock.calls[0][1](mockValue); + expect(instance.weight).toBe(mockValue); + expect(instance.input.setValue).toHaveBeenCalledWith(mockValue); + }); + + it('updates slider correctly on input change', () => { + const mockValue = '5.0'; + instance.input.listen.mock.calls[0][1](mockValue); + expect(instance.weight).toBe(parseFloat(mockValue)); + expect(instance.slider.setValue).toHaveBeenCalledWith( + parseFloat(mockValue), + ); + }); + + it('emits weight and unit on button click', () => { + const mockWeight = 5.0; + instance.weight = mockWeight; + instance.radioKG.isChecked = () => true; + instance.radioKG.getValue = () => 'kg'; + const emitSpy = vi.spyOn(instance, 'emit'); + + instance.button.listen.mock.calls[0][1](); + + expect(emitSpy).toHaveBeenCalledWith('weight', mockWeight, 'kg'); + }); + + it('switches weight unit correctly', () => { + instance.radioKG.isChecked = () => true; + expect(instance.weightUnit()).toBe('kg'); + + instance.radioKG.isChecked = () => false; + instance.radioLB.isChecked = () => true; + expect(instance.weightUnit()).toBe('lb'); + }); + + it('applies CSS classes correctly', () => { + expect( + instance.image.selected.get('image-preview').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__image'); + expect( + instance.slider.selected.get('range-slider').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__slider'); + expect( + instance.slider.selected.get('range-slider-value').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__value'); + expect( + instance.input.selected.get('input-text').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__input'); + expect( + instance.input.selected.get('input-text-container').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__input-container'); + expect( + instance.radioKG.selected.get('radio-container').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__radio'); + expect( + instance.radioLB.selected.get('radio-container').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__radio'); + expect( + instance.button.selected.get('button').classList.add, + ).toHaveBeenCalledWith('pet-weight-page__button'); }); }); From 9180c61651617b4973dd7f3f445ffee43bc1d768 Mon Sep 17 00:00:00 2001 From: Marce Date: Sun, 30 Jun 2024 16:54:07 -0300 Subject: [PATCH 2/5] =?UTF-8?q?test:=20melhora=20testes=20na=20p=C3=A1gina?= =?UTF-8?q?=20de=20peso=20do=20pet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PetWeightPage/petWeightPage.spec.js | 205 ++++-------------- 1 file changed, 42 insertions(+), 163 deletions(-) diff --git a/src/home/components/PetWeightPage/petWeightPage.spec.js b/src/home/components/PetWeightPage/petWeightPage.spec.js index 750c5092..37ef787f 100644 --- a/src/home/components/PetWeightPage/petWeightPage.spec.js +++ b/src/home/components/PetWeightPage/petWeightPage.spec.js @@ -1,188 +1,67 @@ -import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'; -import PetWeightPage from './index'; -import UploadImage from '../../../components/UploadImage'; -import RangeSlider from '../../../components/RangeSlider'; -import TextInput from '../../../components/TextInput'; -import RadioButton from '../../../components/RadioButton'; -import Button from '../../../components/Button'; - -let instance; - -vi.mock('../../../components/UploadImage', () => ({ - __esModule: true, - default: vi.fn().mockImplementation(() => ({ - mount: vi.fn(), - selected: { - get: vi.fn().mockReturnValue({ - classList: { - add: vi.fn(), - }, - }), - }, - })), -})); - -vi.mock('../../../components/RangeSlider', () => ({ - __esModule: true, - default: vi.fn().mockImplementation(() => ({ - mount: vi.fn(), - setValue: vi.fn(), - listen: vi.fn(), - selected: { - get: vi.fn().mockReturnValue({ - classList: { - add: vi.fn(), - }, - }), - }, - })), -})); - -vi.mock('../../../components/TextInput', () => ({ - __esModule: true, - default: vi.fn().mockImplementation(() => ({ - mount: vi.fn(), - setValue: vi.fn(), - listen: vi.fn(), - selected: { - get: vi.fn().mockReturnValue({ - classList: { - add: vi.fn(), - }, - }), - }, - })), -})); - -vi.mock('../../../components/RadioButton', () => ({ - __esModule: true, - default: vi.fn().mockImplementation(() => ({ - mount: vi.fn(), - isChecked: vi.fn().mockImplementation(function isChecked() { - return this === instance.radioKG; - }), - getValue: vi.fn().mockImplementation(function getValue() { - return this === instance.radioKG ? 'kg' : 'lb'; - }), - selected: { - get: vi.fn().mockReturnValue({ - classList: { - add: vi.fn(), - }, - }), - }, - })), -})); - -vi.mock('../../../components/Button', () => ({ - __esModule: true, - default: vi.fn().mockImplementation(() => ({ - mount: vi.fn(), - listen: vi.fn(), - selected: { - get: vi.fn().mockReturnValue({ - classList: { - add: vi.fn(), - }, - }), - }, - })), -})); +import { describe, expect, it } from 'vitest'; +import { render, screen } from '@testing-library/vanilla'; +import PetWeightPage from '.'; const propsMock = { petPhoto: 'https://via.placeholder.com/150', }; -describe('PetWeightPage', () => { - beforeEach(() => { - instance = new PetWeightPage(propsMock); - }); +const makeComponent = (params) => render(new PetWeightPage(params)); - afterEach(() => { - vi.clearAllMocks(); - }); +describe.only('Pet Weight page', () => { + it('renders image', async () => { + const page = makeComponent(propsMock.petPhoto); - it('is a Function', () => { - expect(PetWeightPage).toBeInstanceOf(Function); - }); + render(page); + const image = screen.getByAltText('Imagem carregada'); - it('returns an object', () => { - expect(instance).toBeInstanceOf(Object); + expect(image).toBeInTheDocument(); }); - it('initializes components correctly', () => { - expect(UploadImage).toHaveBeenCalledTimes(1); - expect(RangeSlider).toHaveBeenCalledTimes(1); - expect(TextInput).toHaveBeenCalledTimes(1); - expect(RadioButton).toHaveBeenCalledTimes(2); - expect(Button).toHaveBeenCalledTimes(1); - }); + it('renders title', () => { + const page = makeComponent(propsMock.petPhoto); + const componentTitle = 'Qual é o peso do seu animal de estimação?'; - it('sets the initial pet photo', () => { - expect(UploadImage).toHaveBeenCalledWith(); - }); + render(page); + const title = screen.getByRole('heading', { name: componentTitle }); - it('updates weight correctly on slider change', () => { - const mockValue = 5.0; - instance.slider.listen.mock.calls[0][1](mockValue); - expect(instance.weight).toBe(mockValue); - expect(instance.input.setValue).toHaveBeenCalledWith(mockValue); + expect(title).toBeInTheDocument(); }); - it('updates slider correctly on input change', () => { - const mockValue = '5.0'; - instance.input.listen.mock.calls[0][1](mockValue); - expect(instance.weight).toBe(parseFloat(mockValue)); - expect(instance.slider.setValue).toHaveBeenCalledWith( - parseFloat(mockValue), - ); + it('renders hint', () => { + const page = makeComponent(propsMock.petPhoto); + const componentHint = 'Ajuste de acordo com a realidade'; + + render(page); + const hint = screen.getByText(componentHint); + + expect(hint).toBeInTheDocument(); }); - it('emits weight and unit on button click', () => { - const mockWeight = 5.0; - instance.weight = mockWeight; - instance.radioKG.isChecked = () => true; - instance.radioKG.getValue = () => 'kg'; - const emitSpy = vi.spyOn(instance, 'emit'); + it('renders slider', () => { + const page = makeComponent(propsMock.petPhoto); + render(page); - instance.button.listen.mock.calls[0][1](); + const slider = screen.getByText('I I I'); - expect(emitSpy).toHaveBeenCalledWith('weight', mockWeight, 'kg'); + expect(slider).toBeInTheDocument(); }); - it('switches weight unit correctly', () => { - instance.radioKG.isChecked = () => true; - expect(instance.weightUnit()).toBe('kg'); + it('renders weight input', () => { + const page = makeComponent(propsMock.petPhoto); + render(page); + + const input = screen.getByPlaceholderText('Peso'); - instance.radioKG.isChecked = () => false; - instance.radioLB.isChecked = () => true; - expect(instance.weightUnit()).toBe('lb'); + expect(input).toBeInTheDocument(); }); - it('applies CSS classes correctly', () => { - expect( - instance.image.selected.get('image-preview').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__image'); - expect( - instance.slider.selected.get('range-slider').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__slider'); - expect( - instance.slider.selected.get('range-slider-value').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__value'); - expect( - instance.input.selected.get('input-text').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__input'); - expect( - instance.input.selected.get('input-text-container').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__input-container'); - expect( - instance.radioKG.selected.get('radio-container').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__radio'); - expect( - instance.radioLB.selected.get('radio-container').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__radio'); - expect( - instance.button.selected.get('button').classList.add, - ).toHaveBeenCalledWith('pet-weight-page__button'); + it('renders continue button', () => { + const page = makeComponent(propsMock.petPhoto); + render(page); + + const button = screen.getByRole('button', { name: 'Continuar' }); + + expect(button).toBeInTheDocument(); }); }); From c8d2593151f96f98efc2ea76ac12b74a5c942f76 Mon Sep 17 00:00:00 2001 From: Marce Date: Sun, 21 Jul 2024 01:06:27 -0300 Subject: [PATCH 3/5] =?UTF-8?q?test:=20melhora=20testes=20da=20p=C3=A1gina?= =?UTF-8?q?=20de=20peso=20do=20pet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PetWeightPage/petWeightPage.spec.js | 63 +++++++++++++------ 1 file changed, 44 insertions(+), 19 deletions(-) diff --git a/src/home/components/PetWeightPage/petWeightPage.spec.js b/src/home/components/PetWeightPage/petWeightPage.spec.js index 37ef787f..5dbd2cd8 100644 --- a/src/home/components/PetWeightPage/petWeightPage.spec.js +++ b/src/home/components/PetWeightPage/petWeightPage.spec.js @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { render, screen } from '@testing-library/vanilla'; +import { render, screen, userEvent, waitFor } from '@testing-library/vanilla'; import PetWeightPage from '.'; const propsMock = { @@ -18,50 +18,75 @@ describe.only('Pet Weight page', () => { expect(image).toBeInTheDocument(); }); - it('renders title', () => { + it('KG radio is checked by default', () => { const page = makeComponent(propsMock.petPhoto); - const componentTitle = 'Qual é o peso do seu animal de estimação?'; - render(page); - const title = screen.getByRole('heading', { name: componentTitle }); - expect(title).toBeInTheDocument(); + const radioKG = screen.getByLabelText('KG'); + + expect(radioKG.checked).toBe(true); }); - it('renders hint', () => { + it('selects radio buttons when clicked and desselects the other', async () => { const page = makeComponent(propsMock.petPhoto); - const componentHint = 'Ajuste de acordo com a realidade'; - render(page); - const hint = screen.getByText(componentHint); - expect(hint).toBeInTheDocument(); + 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('renders slider', () => { + it('allows typing in the input field', async () => { const page = makeComponent(propsMock.petPhoto); render(page); - const slider = screen.getByText('I I I'); + const input = screen.getByPlaceholderText('Peso'); + + await userEvent.type(input, '5'); - expect(slider).toBeInTheDocument(); + expect(input).toHaveValue('5'); }); - it('renders weight input', () => { + 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'); - expect(input).toBeInTheDocument(); + await waitFor(() => { + expect(slider).toHaveTextContent('5.0'); + }); }); - it('renders continue button', () => { + it('emits data when continue button is clicked', async () => { const page = makeComponent(propsMock.petPhoto); render(page); - const button = screen.getByRole('button', { name: 'Continuar' }); + 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(button).toBeInTheDocument(); + await waitFor(() => { + expect(mockEmit).toHaveBeenCalledWith('weight', 5.0, 'kg'); + }); }); }); From 425c30439fef2dae963b22aa44d98a911c37a8b7 Mon Sep 17 00:00:00 2001 From: Marce Date: Thu, 25 Jul 2024 22:46:22 -0300 Subject: [PATCH 4/5] test: remove only --- src/home/components/PetWeightPage/petWeightPage.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/home/components/PetWeightPage/petWeightPage.spec.js b/src/home/components/PetWeightPage/petWeightPage.spec.js index 5dbd2cd8..201315bc 100644 --- a/src/home/components/PetWeightPage/petWeightPage.spec.js +++ b/src/home/components/PetWeightPage/petWeightPage.spec.js @@ -8,7 +8,7 @@ const propsMock = { const makeComponent = (params) => render(new PetWeightPage(params)); -describe.only('Pet Weight page', () => { +describe('Pet Weight page', () => { it('renders image', async () => { const page = makeComponent(propsMock.petPhoto); From 2d0af4001bde5b42ca6fa096cf99ae1abf0a5a82 Mon Sep 17 00:00:00 2001 From: Marce Date: Sun, 11 Aug 2024 17:41:31 -0300 Subject: [PATCH 5/5] test: adjust continue button test --- src/layouts/app/pages/PetWeight/petWeightPage.spec.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/layouts/app/pages/PetWeight/petWeightPage.spec.js b/src/layouts/app/pages/PetWeight/petWeightPage.spec.js index 201315bc..f06841b8 100644 --- a/src/layouts/app/pages/PetWeight/petWeightPage.spec.js +++ b/src/layouts/app/pages/PetWeight/petWeightPage.spec.js @@ -85,8 +85,9 @@ describe('Pet Weight page', () => { await userEvent.click(continueButton); - await waitFor(() => { - expect(mockEmit).toHaveBeenCalledWith('weight', 5.0, 'kg'); + expect(mockEmit).toHaveBeenCalledWith('submit', { + weight: 5.0, + weightUnit: 'kg', }); }); });