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');
+ });
});
});