fix: petvet and it tests

devhatt · Jun 19, 2024 · bed50f2 · bed50f2
1 parent 0ef30f0
commit bed50f2
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 76 deletions.
diff --git a/src/layouts/app/pages/PetVet/index.js b/src/layouts/app/pages/PetVet/index.js
@@ -22,7 +22,9 @@ const html = `
           </div>
           <div class="petvet-page__card-content">
             <p>O seu pet amigo foi castrado?</p>
-            <div data-select="neutered-radio"></div>
+             <form>
+            <fieldset data-select="neutered-radio"></fieldset>
+            </form>
           </div>
         </div>
       </div>
@@ -33,7 +35,9 @@ const html = `
           </div>
           <div class="petvet-page__card-content">
             <p>Cuidados especiais</p>
-            <div data-select="special-care-radio"></div>
+            <form >
+            <fieldset data-select="special-care-radio"></fieldset>
+            </form>
           </div>
         </div>
       </div>
@@ -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
@@ -40,42 +40,31 @@ 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);
 
       expect(falseRadio).toBeChecked();
       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);