feat: inserido textarea na PetVetPage (devhatt#281)

* feat: inserido textarea na PetVetPage * fix: adicionado margin top ao textarea * feat: inserido textarea na PetVetPage * fix: adicionado margin top ao textarea
gustavogularte · Jul 16, 2024 · dc2ecf6 · dc2ecf6
1 parent a578f98
commit dc2ecf6
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 5 deletions.
diff --git a/src/layouts/app/pages/PetVet/index.js b/src/layouts/app/pages/PetVet/index.js
@@ -1,4 +1,5 @@
 import { Component } from 'pet-dex-utilities';
+import TextArea from '../../../../components/TextArea';
 import Button from '../../../../components/Button';
 import Radio from '../../../../components/RadioButton';
 import Vaccine from '../../../../components/Vaccine';
@@ -35,11 +36,12 @@ const html = `
           </div>
           <div class="petvet-page__card-content">
             <p>Cuidados especiais</p>
-            <form >
-            <fieldset data-select="special-care-radio"></fieldset>
+            <form>
+              <fieldset data-select="special-care-radio"></fieldset>
             </form>
           </div>
         </div>
+        <div class="petvet-page__card-text" data-select="special-care-text"></div>
       </div>
     </div>
     <div class="petvet-page__footer" data-select="footer"></div>
@@ -78,19 +80,20 @@ export default function PetVetPage({ vaccines = [] } = {}) {
 
   const $footer = this.selected.get('footer');
   const $specialCareRadio = this.selected.get('special-care-radio');
+  const $specialCareText = this.selected.get('special-care-text');
   const $neuteredRadio = this.selected.get('neutered-radio');
   const $cardGroup = this.selected.get('card-group');
 
   this.vaccine = new Vaccine({ vaccines });
   this.vaccine.mount($cardGroup);
 
-  createAndMount({
+  const notSpecialCare = createAndMount({
     name: 'specialCare',
     text: 'Não',
     mountTo: $specialCareRadio,
     value: 'notSpecialCare',
   });
-  createAndMount({
+  const specialCare = createAndMount({
     name: 'specialCare',
     text: 'Sim',
     mountTo: $specialCareRadio,
@@ -109,6 +112,24 @@ export default function PetVetPage({ vaccines = [] } = {}) {
     value: 'neutered',
   });
 
+  this.specialCareText = new TextArea({
+    name: 'specialCareText',
+    placeholder: 'Escreva o cuidado especial',
+    maxLength: 500,
+    required: true,
+  });
+
+  specialCare.listen('change', () => {
+    this.specialCareText.mount($specialCareText);
+    this.specialCareText.selected
+      .get('textarea')
+      .classList.add('petvet-page__textarea');
+  });
+  notSpecialCare.listen('change', () => {
+    this.specialCareText.selected.get('textarea').value = '';
+    this.specialCareText.unmount($specialCareText);
+  });
+
   this.button = new Button({
     text: 'Concluir',
     isFullWidth: false,
@@ -128,11 +149,14 @@ export default function PetVetPage({ vaccines = [] } = {}) {
   const emitForm = () => {
     const neuteredValue = document.forms[0].elements.neutered.value;
     const specialCareValue = document.forms[1].elements.specialCare.value;
+    const specialCareText = this.specialCareText.selected.get('textarea').value;
 
     if (!neuteredValue || !specialCareValue) return;
+    if (getBooleanValue(specialCareValue) && !specialCareText) return;
 
     form.isNeutered = getBooleanValue(neuteredValue);
     form.isSpecialCare = getBooleanValue(specialCareValue);
+    form.specialCareText = specialCareText;
 
     form.vaccines = this.vaccine.listVaccines();
     this.emit('submit', form);

diff --git a/src/layouts/app/pages/PetVet/index.scss b/src/layouts/app/pages/PetVet/index.scss
@@ -62,6 +62,10 @@
     align-items: center;
   }
 
+  &__textarea {
+    margin-top: 1.6rem;
+  }
+
   &__card-content {
     width: 100%;
 

diff --git a/src/layouts/app/pages/PetVet/index.spec.js b/src/layouts/app/pages/PetVet/index.spec.js
@@ -96,6 +96,56 @@ describe('PetVetPage', () => {
       expect(trueRadio).toBeChecked();
       expect(falseRadio).not.toBeChecked();
     });
+
+    it('shows the text area when special care "yes" radio is selected', async () => {
+      renderPetVetPage(argsWithVaccineEmpty);
+
+      const specialCareYesRadio = screen.getByLabelText(
+        'cuidados-especiais-sim',
+      );
+      await userEvent.click(specialCareYesRadio);
+
+      const textArea = screen.getByPlaceholderText(
+        'Escreva o cuidado especial',
+      );
+      expect(textArea).toBeInTheDocument();
+    });
+
+    it('hides the text area when special care "no" radio is selected', async () => {
+      renderPetVetPage(argsWithVaccineEmpty);
+
+      const specialCareYesRadio = screen.getByLabelText(
+        'cuidados-especiais-sim',
+      );
+      const specialCareNoRadio = screen.getByLabelText(
+        'cuidados-especiais-não',
+      );
+
+      await userEvent.click(specialCareYesRadio);
+      const textArea = screen.getByPlaceholderText(
+        'Escreva o cuidado especial',
+      );
+      expect(textArea).toBeInTheDocument();
+
+      await userEvent.click(specialCareNoRadio);
+      expect(textArea).not.toBeInTheDocument();
+    });
+
+    it('allows text input in the text area', async () => {
+      renderPetVetPage(argsWithVaccineEmpty);
+
+      const specialCareYesRadio = screen.getByLabelText(
+        'cuidados-especiais-sim',
+      );
+      await userEvent.click(specialCareYesRadio);
+
+      const textArea = screen.getByPlaceholderText(
+        'Escreva o cuidado especial',
+      );
+      await userEvent.type(textArea, 'Necessita de cuidados especiais');
+
+      expect(textArea).toHaveValue('Necessita de cuidados especiais');
+    });
   });
 
   describe('vaccine component', () => {
@@ -127,10 +177,15 @@ describe('PetVetPage', () => {
         await userEvent.click(neuteredYesRadio);
         await userEvent.click(specialCareYesRadio);
 
+        const textArea = screen.getByPlaceholderText(
+          'Escreva o cuidado especial',
+        );
+        await userEvent.type(textArea, 'Necessita de cuidados especiais');
+
         const formExpected = {
           isNeutered: true,
           isSpecialCare: true,
-          specialCareText: '',
+          specialCareText: 'Necessita de cuidados especiais',
           vaccines: mockVaccines.map(mapVaccine),
         };
 
@@ -158,6 +213,26 @@ describe('PetVetPage', () => {
         expect(callBackEmit).not.toHaveBeenCalled();
       });
 
+      it('does not emit the form data when special care "yes" radio is selected but the text area is empty', async () => {
+        const petVetPage = renderPetVetPage(argsWithVaccineEmpty);
+
+        const neuteredYesRadio = screen.getByLabelText('castrado-sim');
+        const specialCareYesRadio = screen.getByLabelText(
+          'cuidados-especiais-sim',
+        );
+
+        await userEvent.click(neuteredYesRadio);
+        await userEvent.click(specialCareYesRadio);
+
+        const callBackEmit = vi.fn();
+        petVetPage.listen('submit', callBackEmit);
+
+        const button = screen.getByRole('button');
+        await userEvent.click(button);
+
+        expect(callBackEmit).not.toHaveBeenCalled();
+      });
+
       it('does not emit the form data when neutered radio are not check', async () => {
         const petVetPage = renderPetVetPage(argsWithVaccine);