From dc2ecf68a9ae77235c892b8739b02390baa6d63c Mon Sep 17 00:00:00 2001 From: Gustavo Gularte Arend <98916022+gustavogularte@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:36:37 -0300 Subject: [PATCH] feat: inserido textarea na PetVetPage (#281) * feat: inserido textarea na PetVetPage * fix: adicionado margin top ao textarea * feat: inserido textarea na PetVetPage * fix: adicionado margin top ao textarea --- src/layouts/app/pages/PetVet/index.js | 32 +++++++-- src/layouts/app/pages/PetVet/index.scss | 4 ++ src/layouts/app/pages/PetVet/index.spec.js | 77 +++++++++++++++++++++- 3 files changed, 108 insertions(+), 5 deletions(-) diff --git a/src/layouts/app/pages/PetVet/index.js b/src/layouts/app/pages/PetVet/index.js index d54d54cb..87486e7e 100644 --- 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 = `

Cuidados especiais

-
-
+ +
+
@@ -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 index f0136cd4..01dc378f 100644 --- 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 index 751d6b32..0ca03009 100644 --- 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);