Skip to content

Commit

Permalink
feat: petregister tests (devhatt#280)
Browse files Browse the repository at this point in the history
* feat: all tests

* fix: remove unnecessary

* fix: tests and component

* fix: tests text
  • Loading branch information
juliaam authored Jul 16, 2024
1 parent dc2ecf6 commit fc9fe6b
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 5 deletions.
7 changes: 6 additions & 1 deletion src/components/PetCard/index.js
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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();
});
Expand Down Expand Up @@ -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;
},
Expand Down
4 changes: 3 additions & 1 deletion src/layouts/app/pages/PetRegister/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand All @@ -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');
Expand Down
120 changes: 117 additions & 3 deletions src/layouts/app/pages/PetRegister/index.spec.js
Original file line number Diff line number Diff line change
@@ -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');
});
});
});

0 comments on commit fc9fe6b

Please sign in to comment.