Refactor: improvments for the unit tests

src/async-tokenize/tests/async-tokenize.test.ts → src/async-tokenize/async-tokenize.test.ts

@@ -1,56 +1,29 @@
 import { fireEvent, waitFor } from '@testing-library/dom'
+
+import { AsyncTokenize } from './async-tokenize'
+import * as utilsValues from 'src/common/utils/form-values/form-values'
+import * as utilsElements from 'src/common/utils/form-elements/form-elements'
 import {
+  configureFormSubmissionMock,
   formElementsMock,
   formValuesMock,
   handleFormMock,
   malgaConfigurations,
-  configureFormSubmissionMock,
-} from '../../../tests/mocks/malga-tests-mocks'
-import { Malga } from '../../common/malga/malga'
-import { AsyncTokenize } from '../async-tokenize'
-import * as utilsValues from '../../common/utils/form-values/form-values'
-import * as utilsElements from '../../common/utils/form-elements/form-elements'
+} from 'tests/mocks/common-configurations'
+import { generateForm } from 'tests/mocks/form-dom'
+import { Malga } from 'src/common/malga'
 
 const onSubmit = vi.fn()
 
-vi.mock('../../common/malga/malga', async (importOriginal) => {
-  const Malga =
-    await importOriginal<typeof import('../../common/malga/malga')>()
+vi.mock('src/common/malga', async (importOriginal) => {
+  const Malga = await importOriginal<typeof import('src/common/malga')>()
   return {
     ...Malga,
     tokenization: vi.fn(),
   }
 })
 
-function generateForm(onSubmit: any) {
-  const { form, holderNameInput, cvvInput, expirationDateInput, numberInput } =
-    handleFormMock()
-
-  form.setAttribute(formElementsMock.form, '')
-  form.onsubmit = onSubmit
-  form.id = 'form'
-  form.method = 'POST'
-  form.action = '/test'
-
-  holderNameInput.setAttribute(formElementsMock.holderName, '')
-  numberInput.setAttribute(formElementsMock.number, '')
-  cvvInput.setAttribute(formElementsMock.cvv, '')
-  expirationDateInput.setAttribute(formElementsMock.expirationDate, '')
-
-  document.body.appendChild(form)
-  form.appendChild(holderNameInput)
-  form.appendChild(numberInput)
-  form.appendChild(expirationDateInput)
-  form.appendChild(cvvInput)
-
-  const inputs = document.querySelectorAll('input')
-  inputs[0].value = formValuesMock.holderName
-  inputs[1].value = formValuesMock.number
-  inputs[2].value = formValuesMock.expirationDate
-  inputs[3].value = formValuesMock.cvv
-}
-
-describe('handle', () => {
+describe('async-tokenize', () => {
   beforeEach(() => {
     document.body.innerHTML = ''
   })
@@ -125,7 +98,6 @@ describe('handle', () => {
       const tokenIdInput = document.querySelector<HTMLInputElement>(
         'input[name="tokenId"]',
       )
-      console.log('tokenId: ', tokenIdInput)
       expect(tokenIdInput?.value).toBe('production-token-id')
     })
   })

src/common/malga/interfaces/tokenization.ts

@@ -1,6 +1,6 @@
 export interface TokenizationPayload {
-  holderName?: string
-  number?: string
-  expirationDate?: string
-  cvv?: string
+  holderName: string
+  number: string
+  expirationDate: string
+  cvv: string
 }

src/common/utils/form-elements/form-elements.test.ts

@@ -0,0 +1,178 @@
+import {
+  formElementsMock,
+  handleFormMock,
+} from 'tests/mocks/common-configurations'
+import {
+  createFormElement,
+  getFormElements,
+  removeFormElements,
+} from './form-elements'
+import { generateForm } from 'tests/mocks/form-dom'
+
+const tokenId = '54595fec-87db-44f8-996a-2f4d6bf270b9'
+describe('form-elements', () => {
+  describe('getFormElements', () => {
+    test('should be returned the elements correctly', () => {
+      const {
+        form,
+        holderNameInput,
+        cvvInput,
+        expirationDateInput,
+        numberInput,
+      } = handleFormMock()
+
+      form.setAttribute(formElementsMock.form, '')
+      holderNameInput.setAttribute(formElementsMock.holderName, '')
+      numberInput.setAttribute(formElementsMock.number, '')
+      cvvInput.setAttribute(formElementsMock.cvv, '')
+      expirationDateInput.setAttribute(formElementsMock.expirationDate, '')
+
+      document.body.appendChild(form)
+      form.appendChild(holderNameInput)
+      form.appendChild(numberInput)
+      form.appendChild(expirationDateInput)
+      form.appendChild(cvvInput)
+
+      const formElements = getFormElements({
+        form: 'data-malga-tokenization-form',
+        holderName: 'data-malga-tokenization-holder-name',
+        number: 'data-malga-tokenization-number',
+        expirationDate: 'data-malga-tokenization-expiration-date',
+        cvv: 'data-malga-tokenization-cvv',
+      })
+
+      expect(formElements.form).toBe(form)
+      expect(formElements.holderName).toBe(holderNameInput)
+      expect(formElements.number).toBe(numberInput)
+      expect(formElements.expirationDate).toBe(expirationDateInput)
+      expect(formElements.cvv).toBe(cvvInput)
+    })
+
+    test('should be possible to find the elements in the dom', () => {
+      generateForm()
+
+      const formElements = getFormElements({
+        form: 'data-malga-tokenization-form',
+        holderName: 'data-malga-tokenization-holder-name',
+        number: 'data-malga-tokenization-number',
+        expirationDate: 'data-malga-tokenization-expiration-date',
+        cvv: 'data-malga-tokenization-cvv',
+      })
+
+      expect(formElements.form).toBeInTheDocument()
+      expect(formElements.holderName).toBeInTheDocument()
+      expect(formElements.cvv).toBeInTheDocument()
+      expect(formElements.expirationDate).toBeInTheDocument()
+      expect(formElements.number).toBeInTheDocument()
+    })
+
+    test("Should be returned null when elements aren't finded", () => {
+      generateForm()
+
+      const formElements = getFormElements({
+        form: 'data-malga-form',
+        holderName: 'data-malga-holder-name',
+        number: 'data-malga-number',
+        expirationDate: 'data-malga-expiration-date',
+        cvv: 'data-malga-cvv',
+      })
+      expect(formElements.form).toBeNull()
+      expect(formElements.holderName).toBeNull()
+      expect(formElements.number).toBeNull()
+      expect(formElements.expirationDate).toBeNull()
+      expect(formElements.cvv).toBeNull()
+    })
+
+    test('should be possible to return null if there is no equal element in the DOM', () => {
+      const formElements = getFormElements({
+        form: 'data-malga-form',
+        holderName: 'data-malga-holder-name',
+        number: 'data-malga-number',
+        expirationDate: 'data-malga-expiration-date',
+        cvv: 'data-malga-cvv',
+      })
+      expect(formElements.form).toBeNull()
+      expect(formElements.holderName).toBeNull()
+      expect(formElements.number).toBeNull()
+      expect(formElements.expirationDate).toBeNull()
+      expect(formElements.cvv).toBeNull()
+    })
+  })
+  describe('removeFormElements', () => {
+    beforeEach(() => {
+      document.body.innerHTML = ''
+    })
+    test('should be possible to return null when trying to find the elements in the dom after calling the function', () => {
+      generateForm()
+
+      removeFormElements({
+        form: 'data-malga-tokenization-form',
+        holderName: 'data-malga-tokenization-holder-name',
+        number: 'data-malga-tokenization-number',
+        expirationDate: 'data-malga-tokenization-expiration-date',
+        cvv: 'data-malga-tokenization-cvv',
+      })
+
+      expect(
+        document.querySelector('data-malga-tokenization-holder-name'),
+      ).toBeNull()
+      expect(
+        document.querySelector('data-malga-tokenization-number'),
+      ).toBeNull()
+      expect(
+        document.querySelector('data-malga-tokenization-expiration-date'),
+      ).toBeNull()
+      expect(document.querySelector('data-malga-tokenization-cvv')).toBeNull()
+    })
+    test('should be returned the elements in the DOM, when the function are called with selectores wrong, since the elements could not be removed', () => {
+      generateForm()
+
+      removeFormElements({
+        form: 'data-malga-form',
+        holderName: 'data-malga-holder-name',
+        number: 'data-malga-number',
+        expirationDate: 'data-malga-expiration-date',
+        cvv: 'data-malga-cvv',
+      })
+      const formElements = getFormElements({
+        form: 'data-malga-tokenization-form',
+        holderName: 'data-malga-tokenization-holder-name',
+        number: 'data-malga-tokenization-number',
+        expirationDate: 'data-malga-tokenization-expiration-date',
+        cvv: 'data-malga-tokenization-cvv',
+      })
+      expect(formElements.form).toBeInTheDocument()
+      expect(formElements.holderName).toBeInTheDocument()
+      expect(formElements.number).toBeInTheDocument()
+      expect(formElements.expirationDate).toBeInTheDocument()
+      expect(formElements.cvv).toBeInTheDocument()
+    })
+  })
+  describe('createFormElements', () => {
+    test('should be possible to return a field with attributes of name, type and value which must be the passed tokenId', () => {
+      const tokenIdElement = createFormElement('tokenId', tokenId)
+
+      expect(tokenIdElement).toHaveAttribute('name', 'tokenId')
+      expect(tokenIdElement).toHaveValue(tokenId)
+      expect(tokenIdElement).toHaveAttribute('type', 'hidden')
+    })
+
+    test('should be possible for the field field to be the same as the one mounted in the dom', () => {
+      const tokenIdElement = createFormElement('tokenId', tokenId)
+
+      const field = document.createElement('input')
+      field.type = 'hidden'
+      field.name = 'tokenId'
+      field.value = '54595fec-87db-44f8-996a-2f4d6bf270b9'
+
+      expect(tokenIdElement).toEqual(field)
+    })
+    test('should be possible to insert the element in the body in the dom', () => {
+      const tokenIdElement = createFormElement('tokenId', tokenId)
+
+      document.body.appendChild(tokenIdElement)
+
+      expect(tokenIdElement).toBeInTheDocument()
+    })
+  })
+})

src/common/utils/tests/form-values.test.ts → src/common/utils/form-values/form-values.test.ts

@@ -2,8 +2,8 @@ import {
   formElementsMock,
   formValuesMock,
   handleFormMock,
-} from '../../../../tests/mocks/malga-tests-mocks'
-import { getFormValues } from '../form-values/form-values'
+} from 'tests/mocks/common-configurations'
+import { getFormValues } from './form-values'
 
 function Form() {
   const { form, holderNameInput, cvvInput, expirationDateInput, numberInput } =
@@ -63,7 +63,7 @@ describe('getFormValues', () => {
     expect(formValue.expirationDate).toBe('')
     expect(formValue.cvv).toBe('')
   })
-  test('should be possible to return error if the elements are not found', async () => {
+  test('should be possible to return error if the elements are not found', () => {
     Form()
 
     const inputs = document.querySelectorAll('input')