From fc9fe6bff04274675eb04f539c6d0d3af237e1a3 Mon Sep 17 00:00:00 2001 From: juliaM <35346206+juliaam@users.noreply.github.com> Date: Tue, 16 Jul 2024 18:34:51 -0300 Subject: [PATCH] feat: petregister tests (#280) * feat: all tests * fix: remove unnecessary * fix: tests and component * fix: tests text --- src/components/PetCard/index.js | 7 +- src/layouts/app/pages/PetRegister/index.js | 4 +- .../app/pages/PetRegister/index.spec.js | 120 +++++++++++++++++- 3 files changed, 126 insertions(+), 5 deletions(-) diff --git a/src/components/PetCard/index.js b/src/components/PetCard/index.js index 5d439d55..92088bd6 100644 --- a/src/components/PetCard/index.js +++ b/src/components/PetCard/index.js @@ -1,7 +1,7 @@ import { Component } from 'pet-dex-utilities'; import './index.scss'; -const events = ['active', 'deactive']; +const events = ['active', 'deactive', 'title:change']; const html = `
@@ -17,6 +17,8 @@ export default function PetCard({ title, imgSrc, imgAlt }) { const petTitle = this.selected.get('pet-title'); const petImage = this.selected.get('pet-image'); + petContainer.setAttribute('aria-label', title.toLowerCase()); + petContainer.addEventListener('click', () => { this.toggle(); }); @@ -48,6 +50,9 @@ export default function PetCard({ title, imgSrc, imgAlt }) { } PetCard.prototype = Object.assign(PetCard.prototype, Component.prototype, { + getTitle() { + return this.selected.get('pet-title').textContent; + }, setTitle(text) { this.selected.get('pet-title').textContent = text; }, diff --git a/src/layouts/app/pages/PetRegister/index.js b/src/layouts/app/pages/PetRegister/index.js index 9d8abb23..b6544cf9 100644 --- a/src/layouts/app/pages/PetRegister/index.js +++ b/src/layouts/app/pages/PetRegister/index.js @@ -36,6 +36,8 @@ export default function PetRegister({ cards = [] } = {}) { if (this.activeCard) this.activeCard.deactivate(); this.activeCard = card; + this.breedSelected = this.activeCard.getTitle(); + this.emit('select:card', card); $button.enable(); }); @@ -47,7 +49,7 @@ export default function PetRegister({ cards = [] } = {}) { }); $button.listen('click', () => { - this.emit('submit', this.breedSelect); + this.emit('submit', this.breedSelected); }); $button.selected.get('button').classList.add('breed-page__button'); diff --git a/src/layouts/app/pages/PetRegister/index.spec.js b/src/layouts/app/pages/PetRegister/index.spec.js index 49f1493a..dc90b08d 100644 --- a/src/layouts/app/pages/PetRegister/index.spec.js +++ b/src/layouts/app/pages/PetRegister/index.spec.js @@ -1,9 +1,123 @@ import { describe, expect, it } from 'vitest'; +import { render, screen } from '@testing-library/vanilla'; +import { userEvent } from '@testing-library/user-event'; + +import afghanHound from '../../../../stories/assets/petRegisterPage/afghanHound.svg'; +import akita from '../../../../stories/assets/petRegisterPage/akita.svg'; +import beagle from '../../../../stories/assets/petRegisterPage/beagle.svg'; +import mixedBreed from '../../../../stories/assets/petRegisterPage/mixedBreed.svg'; import PetRegisterPage from './index'; -describe('PetregisterPage', () => { - it('its a function', () => { - expect(PetRegisterPage).toBeInstanceOf(Function); +const renderPetRegisterPage = (parameters) => + render(new PetRegisterPage(parameters)); + +const mockCards = [ + { + title: 'Mixed Breed', + imgSrc: mixedBreed, + imgAlt: 'mixed breed', + }, + { + title: 'Akita', + imgSrc: akita, + imgAlt: 'akita', + }, + + { + title: 'Beagle', + imgSrc: beagle, + imgAlt: 'beagle', + }, + { + title: 'Afghan Hound', + imgSrc: afghanHound, + imgAlt: 'afghan hound', + }, +]; + +describe('PetRegisterPage', () => { + it('renders page with breeds', () => { + renderPetRegisterPage({ cards: mockCards }); + + const cardEvidence = screen.getByLabelText(/mixed breed/i); + const button = screen.getByRole('button'); + + expect(cardEvidence).toBeInTheDocument(); + expect(button).toBeInTheDocument(); + }); + + it('selects the pet when it is clicked', async () => { + const petRegister = renderPetRegisterPage({ cards: mockCards }); + const callback = vi.fn(); + + petRegister.listen('select:card', callback); + + const card = screen.getByLabelText(/mixed breed/i); + await userEvent.click(card); + + expect(callback).toHaveBeenCalled(); + expect(petRegister.activeCard).not.toBeNull(); + }); + + it('deselects the pet when it is clicked again', async () => { + const petRegister = renderPetRegisterPage({ cards: mockCards }); + + const callback = vi.fn(); + + petRegister.listen('select:card', callback); + + const card = screen.getByLabelText(/mixed breed/i); + await userEvent.click(card); + await userEvent.click(card); + + expect(petRegister.activeCard).toBeNull(); + }); + + it('deselects any previously selected card and selects the clicked one', async () => { + const petRegister = renderPetRegisterPage({ cards: mockCards }); + + const selectCard = vi.fn(); + + petRegister.listen('select:card', selectCard); + + const $afghanHoundCard = screen.getByLabelText(/afghan hound/i); + const $mixedBreedCard = screen.getByLabelText(/mixed breed/i); + + await userEvent.click($afghanHoundCard); + const mockAfghanHoundCard = petRegister.activeCard; + + await userEvent.click($mixedBreedCard); + const mixedBreedCard = petRegister.activeCard; + + expect(petRegister.activeCard).not.toBe(mockAfghanHoundCard); + expect(petRegister.activeCard).toBe(mixedBreedCard); + }); + + describe('emits', () => { + it('form data when every field is validated', async () => { + const petRegisterPage = renderPetRegisterPage({ cards: mockCards }); + const callBackEmit = vi.fn(); + petRegisterPage.listen('submit', callBackEmit); + + const mixedBreedCard = screen.getByLabelText(/mixed breed/i); + await userEvent.click(mixedBreedCard); + + const button = screen.getByRole('button'); + await userEvent.click(button); + + expect(callBackEmit).toHaveBeenCalledWith('Mixed Breed'); + }); + + it('does not happen when theres no card selected', async () => { + const petRegisterPage = renderPetRegisterPage({ cards: mockCards }); + const callBackEmit = vi.fn(); + petRegisterPage.listen('submit', callBackEmit); + + const button = screen.getByRole('button'); + await userEvent.click(button); + + expect(callBackEmit).not.toHaveBeenCalledWith('Mixed Breed'); + }); }); });