diff --git a/src/layouts/app/pages/PetVet/index.js b/src/layouts/app/pages/PetVet/index.js index 461aca5d..d54d54cb 100644 --- a/src/layouts/app/pages/PetVet/index.js +++ b/src/layouts/app/pages/PetVet/index.js @@ -22,7 +22,9 @@ const html = `

O seu pet amigo foi castrado?

-
+
+
+
@@ -33,7 +35,9 @@ const html = `

Cuidados especiais

-
+
+
+
@@ -44,11 +48,27 @@ const html = ` const events = ['submit']; -function createAndMount({ name, text, mountTo }) { - const radio = new Radio({ name, text }); +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('data-testid', `${name}-${text.toLowerCase()}`); + .setAttribute('aria-label', `${getAriaLabel(name)}-${text.toLowerCase()}`); radio.mount(mountTo); return radio; } @@ -64,51 +84,29 @@ export default function PetVetPage({ vaccines = [] } = {}) { this.vaccine = new Vaccine({ vaccines }); this.vaccine.mount($cardGroup); - const form = { - isNeutered: undefined, - isSpecialCare: undefined, - specialCareText: '', - vaccines: undefined, - }; - - const specialCare = [ - createAndMount({ - name: 'specialCare', - text: 'Não', - mountTo: $specialCareRadio, - }), - createAndMount({ - name: 'specialCare', - text: 'Sim', - mountTo: $specialCareRadio, - }), - ]; - - const neutered = [ - createAndMount({ - name: 'neutered', - text: 'Não', - mountTo: $neuteredRadio, - }), - createAndMount({ - name: 'neutered', - text: 'Sim', - mountTo: $neuteredRadio, - }), - ]; - - neutered.forEach((radio) => { - radio.listen('change', (value) => { - const text = radio.getText(); - form.isNeutered = text === 'Sim' ? value : !value; - }); + createAndMount({ + name: 'specialCare', + text: 'Não', + mountTo: $specialCareRadio, + value: 'notSpecialCare', }); - - specialCare.forEach((radio) => { - radio.listen('change', (value) => { - const text = radio.getText(); - form.isSpecialCare = text === 'Sim' ? value : !value; - }); + 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({ @@ -120,10 +118,21 @@ export default function PetVetPage({ vaccines = [] } = {}) { 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 = () => { - if (form.isSpecialCare === undefined || form.isNeutered === undefined) { - return; - } + 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); diff --git a/src/layouts/app/pages/PetVet/index.spec.js b/src/layouts/app/pages/PetVet/index.spec.js index f07967d9..6c887417 100644 --- a/src/layouts/app/pages/PetVet/index.spec.js +++ b/src/layouts/app/pages/PetVet/index.spec.js @@ -40,30 +40,19 @@ describe('PetVetPage', () => { const argsWithVaccineEmpty = { vaccines: [] }; const renderPetVetPage = (parameters) => render(new PetVetPage(parameters)); - it('renders', () => { - renderPetVetPage(argsWithVaccine); + it('renders the main container', () => { + renderPetVetPage(argsWithVaccineEmpty); const title = screen.getByText('Conte-nos um pouco mais do seu animal'); - const subtitle = screen.getByText( - 'Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!', - ); - const neuteredCard = screen.getByText('O seu pet amigo foi castrado?'); - const specialCareCard = screen.getByText('Cuidados especiais'); - const button = screen.getByRole('button'); expect(title).toBeInTheDocument(); - expect(subtitle).toBeInTheDocument(); - expect(neuteredCard).toBeInTheDocument(); - expect(specialCareCard).toBeInTheDocument(); - expect(button).toBeInTheDocument(); - expect(button.innerHTML).toBeTruthy(); }); - describe('radios', () => { - it('neutered', async () => { + describe('radios form', () => { + it('confirms if the neutering selection is correct', async () => { renderPetVetPage(argsWithVaccineEmpty); - const falseRadio = screen.getByTestId('neutered-não'); - const trueRadio = screen.getByTestId('neutered-sim'); + const falseRadio = screen.getByLabelText('cuidados-especiais-não'); + const trueRadio = screen.getByLabelText('cuidados-especiais-sim'); await userEvent.click(falseRadio); @@ -71,11 +60,11 @@ describe('PetVetPage', () => { expect(trueRadio).not.toBeChecked(); }); - it('special care', async () => { + it('confirms if the special care selection is correct', async () => { renderPetVetPage(argsWithVaccineEmpty); - const falseRadio = screen.getByTestId('specialCare-não'); - const trueRadio = screen.getByTestId('specialCare-sim'); + const falseRadio = screen.getByLabelText('cuidados-especiais-não'); + const trueRadio = screen.getByLabelText('cuidados-especiais-sim'); await userEvent.click(falseRadio); expect(falseRadio).toBeChecked(); @@ -84,14 +73,14 @@ describe('PetVetPage', () => { }); describe('vaccine component', () => { - it('renders vaccine component without vaccines passed', () => { + it('renders without vaccines passed', () => { renderPetVetPage(argsWithVaccineEmpty); const vaccinesEvidence = screen.getByText('Vacinas'); expect(vaccinesEvidence).toBeInTheDocument(); }); - it('renders vaccine component with vaccines passed', () => { + it('renders with vaccines passed', () => { renderPetVetPage(argsWithVaccine); const vaccinesEvidence = screen.getByText('Vacinas'); const someVaccineEvidence = screen.getByText(mockVaccines[0].title); @@ -104,8 +93,10 @@ describe('PetVetPage', () => { it('emits the form data when every field is passed', async () => { const petVetPage = renderPetVetPage(argsWithVaccine); - const neuteredYesRadio = screen.getByTestId('neutered-sim'); - const specialCareYesRadio = screen.getByTestId('specialCare-sim'); + const neuteredYesRadio = screen.getByLabelText('castrado-sim'); + const specialCareYesRadio = screen.getByLabelText( + 'cuidados-especiais-sim', + ); await userEvent.click(neuteredYesRadio); await userEvent.click(specialCareYesRadio);