feat: petvetpage tests (#264)

* 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

src/components/Vaccine/index.js

@@ -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() {

src/components/VaccineGroup/index.js

@@ -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;
     },
   },

src/layouts/app/pages/PetVet/index.js

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

src/layouts/app/pages/PetVet/index.scss

@@ -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;
+      }
+    }
+  }
+}