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 = `
+
@@ -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);