feat: petregister tests (devhatt#280)

* feat: all tests

* fix: remove unnecessary

* fix: tests and component

* fix: tests text

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 = `
   <div class="pet-container" data-select="pet-container">
@@ -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;
   },

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

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