Skip to content

Commit

Permalink
feat: petvetpage tests (devhatt#264)
Browse files Browse the repository at this point in the history
* feat: petvetpage tests

* fix: error in methods

* fix: tests and form validation

* fix: stories

* fix: correct petvet

* fix: petvet and it tests

* fix: tests describes
  • Loading branch information
juliaam authored Jul 3, 2024
1 parent 18e6b81 commit 105a031
Show file tree
Hide file tree
Showing 11 changed files with 542 additions and 6 deletions.
3 changes: 2 additions & 1 deletion src/components/Vaccine/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,11 @@ Vaccine.prototype = Object.assign(Vaccine.prototype, Component.prototype, {
listVaccines() {
const vaccines = [];

this.groups.values().forEach((group) => {
Array.from(this.groups.values()).forEach((group) => {
const items = group.listItems();
vaccines.push(...items);
});

return vaccines;
},
openDrawer() {
Expand Down
3 changes: 2 additions & 1 deletion src/components/VaccineGroup/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,15 @@ VaccineGroup.prototype = Object.assign(
listItems() {
const items = [];

this.items.values().forEach((item) => {
Array.from(this.items.values()).forEach((item) => {
items.push({
id: item.id,
title: item.getTitle(),
veterinary: item.getVeterinary(),
date: item.getDate(),
});
});

return items;
},
},
Expand Down
19 changes: 19 additions & 0 deletions src/layouts/app/pages/PetVet/images/cuidadosEspeciais.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions src/layouts/app/pages/PetVet/images/estetoscopio.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 144 additions & 0 deletions src/layouts/app/pages/PetVet/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import { Component } from 'pet-dex-utilities';
import Button from '../../../../components/Button';
import Radio from '../../../../components/RadioButton';
import Vaccine from '../../../../components/Vaccine';

import estetoscopio from './images/estetoscopio.svg';
import cuidadosEspeciais from './images/cuidadosEspeciais.svg';

import './index.scss';

const html = `
<div data-select="container" class="petvet-page">
<div class="petvet-page__header">
<p class="petvet-page__header--text">Conte-nos um pouco mais do seu animal</p>
<p class="petvet-page__header--subtext">Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!</p>
</div>
<div class="petvet-page__card-group" data-select="card-group">
<div class="petvet-page__card">
<div class="petvet-page__card-header">
<div>
<a href="#"><img class="petvet-page__img" src="${estetoscopio}" alt="estetoscopio" /></a>
</div>
<div class="petvet-page__card-content">
<p>O seu pet amigo foi castrado?</p>
<form>
<fieldset data-select="neutered-radio"></fieldset>
</form>
</div>
</div>
</div>
<div class="petvet-page__card" data-select="special-care">
<div class="petvet-page__card-header">
<div class="petvet-page__icon-text">
<a href="#"><img class="petvet-page__img" src="${cuidadosEspeciais}" alt="cuidados especiais" /></a>
</div>
<div class="petvet-page__card-content">
<p>Cuidados especiais</p>
<form >
<fieldset data-select="special-care-radio"></fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="petvet-page__footer" data-select="footer"></div>
</div>
`;

const events = ['submit'];

function getAriaLabel(radioName) {
const arias = {
specialCare: 'cuidados-especiais',
neutered: 'castrado',
};
return arias[radioName];
}

function getBooleanValue(value) {
const radiosValue = {
specialCare: true,
neutered: true,
};
return value in radiosValue ? radiosValue[value] : false;
}

function createAndMount({ name, text, mountTo, value }) {
const radio = new Radio({ name, text, value });
radio.selected
.get('radio-button')
.setAttribute('aria-label', `${getAriaLabel(name)}-${text.toLowerCase()}`);
radio.mount(mountTo);
return radio;
}

export default function PetVetPage({ vaccines = [] } = {}) {
Component.call(this, { html, events });

const $footer = this.selected.get('footer');
const $specialCareRadio = this.selected.get('special-care-radio');
const $neuteredRadio = this.selected.get('neutered-radio');
const $cardGroup = this.selected.get('card-group');

this.vaccine = new Vaccine({ vaccines });
this.vaccine.mount($cardGroup);

createAndMount({
name: 'specialCare',
text: 'Não',
mountTo: $specialCareRadio,
value: 'notSpecialCare',
});
createAndMount({
name: 'specialCare',
text: 'Sim',
mountTo: $specialCareRadio,
value: 'specialCare',
});
createAndMount({
name: 'neutered',
text: 'Não',
mountTo: $neuteredRadio,
value: 'notNeutered',
});
createAndMount({
name: 'neutered',
text: 'Sim',
mountTo: $neuteredRadio,
value: 'neutered',
});

this.button = new Button({
text: 'Concluir',
isFullWidth: false,
isDisabled: false,
});

this.button.selected.get('button').classList.add('petvet-page__button');
this.button.mount($footer);

const form = {
isNeutered: undefined,
isSpecialCare: undefined,
specialCareText: '',
vaccines: undefined,
};

const emitForm = () => {
const neuteredValue = document.forms[0].elements.neutered.value;
const specialCareValue = document.forms[1].elements.specialCare.value;

if (!neuteredValue || !specialCareValue) return;

form.isNeutered = getBooleanValue(neuteredValue);
form.isSpecialCare = getBooleanValue(specialCareValue);

form.vaccines = this.vaccine.listVaccines();
this.emit('submit', form);
};

this.button.listen('click', emitForm);
}

PetVetPage.prototype = Object.assign(PetVetPage.prototype, Component.prototype);
159 changes: 159 additions & 0 deletions src/layouts/app/pages/PetVet/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
@use '~styles/colors.scss' as colors;
@use '~styles/fonts.scss' as fonts;
@use '~styles/breakpoints' as breakpoints;

.petvet-page {
height: 100%;

display: flex;
flex-direction: column;

align-items: center;

&__header {
text-align: center;

margin-bottom: 2.4rem;

&--text {
font-family: fonts.$primaryFont;
color: colors.$gray800;
font-size: 1.8rem;
font-weight: fonts.$semiBold;

line-height: 2.6;
}

&--subtext {
font-family: fonts.$fourthFont;
color: colors.$gray700;
font-size: fonts.$sm;
font-weight: fonts.$regular;

line-height: 2.2;
}
}

&__card-group {
display: flex;
flex-direction: column;

gap: 1.6rem;
}

&__card {
font-family: fonts.$primaryFont;
color: colors.$gray800;
font-size: 1.4rem;
font-weight: fonts.$semiBold;
line-height: 2rem;

padding: 1.6rem;

box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04);

border-radius: 1.4rem;
}

&__card-header {
display: flex;
gap: 1rem;

align-items: center;
}

&__card-content {
width: 100%;

display: flex;

flex-direction: column;

gap: 2rem;
}

&__img {
max-width: 5.4rem;
max-height: 5.4rem;

display: flex;

align-items: center;
}

&__footer {
width: 100%;

display: flex;

justify-content: center;
}

&__button {
width: min(100%, 42rem);

margin-top: 2.4rem;
margin-bottom: 2.4rem;
}
}

@include breakpoints.from667 {
.petvet-page {
&__img {
min-width: 6rem;
min-height: 6rem;

display: flex;

align-items: center;
}

&__card {
padding: 2rem;

border: 1px solid colors.$gray150;

box-shadow: none;
border-radius: 1.8rem;
}

&__card-header {
display: flex;
gap: 2rem;

align-items: center;
}

&__card-content {
flex-direction: row;

align-items: center;

justify-content: space-between;
}

&__header {
&--subtext {
font-size: fonts.$sm;
}
}

&__card-group {
gap: 2.4rem;
}

&__button {
margin-bottom: 0;
}
}
}

@container (min-height: 790px) {
@include breakpoints.from667 {
.petvet-page {
&__card-group {
overflow: auto;
}
}
}
}
Loading

0 comments on commit 105a031

Please sign in to comment.