Modal

mail@pastecode.io avatar
unknown
javascript
a month ago
13 kB
2
Indexable
Never
import { describe, expect, it } from '@jest/globals';
import { fireEvent, screen, waitFor } from '@testing-library/react';
import React from 'react';
import i18n from 'config/translations/i18n';
import { renderWithProviders } from 'utils/test-utils';
import { StoreDataBuilder } from 'utils/test-utils/StoreDataBuilder';
import ReasonForNonAvailabilityModal from '.';

// Arrange global
const preloadedState = new StoreDataBuilder().getStoreData();

const record = {
  id: 1,
  name: 'Motivo 1',
  active: true,
  byDefault: null,
  createdBy: '0',
  createdDate: null,
  lastModifiedBy: 'system',
  lastModifiedDate: '2024-08-19T19:34:24.602241'
};

describe(`src/modules/NewAdministrator/catalogs/ReasonForNonAvailability/ConfigModal`, () => {
  describe('WHEN click button to open modal', () => {
    it('THEN show modal', async () => {
      // Act
      renderWithProviders(<ReasonForNonAvailabilityModal open />, { preloadedState });

      // Assert
      await waitFor(() => {
        expect(screen.getByTestId('modal-reason-for-non-availability')).toBeInTheDocument();
      });
    });
    describe('WHEN render modal to add record', () => {
      it('THEN show title, label, placeholder and button in spanish', () => {
        // Arrange
        i18n.changeLanguage('es');

        // Act
        renderWithProviders(<ReasonForNonAvailabilityModal open />, {
          preloadedState
        });

        // Assert
        expect(screen.getByText(/Agregar motivo de no disponibilidad/i)).toBeInTheDocument();
        expect(screen.getByText(/Nombre de motivo de no disponibilidad/i)).toBeInTheDocument();
        expect(screen.getByPlaceholderText(/Ingrese motivo de no disponibilidad/i)).toBeInTheDocument();
        expect(screen.getByText(/Guardar/i)).toBeInTheDocument();
      });
      it('THEN show title, label, placeholder and button in english', () => {
        // Arrange
        i18n.changeLanguage('en');

        // Act
        renderWithProviders(<ReasonForNonAvailabilityModal open />, {
          preloadedState
        });

        // Assert
        expect(screen.getByText(/Add reason for non-availability/i)).toBeInTheDocument();
        expect(screen.getByText(/Reason for Non-Availability Name/i)).toBeInTheDocument();
        expect(screen.getByPlaceholderText(/Enter reason for Non-Availability/i)).toBeInTheDocument();
        expect(screen.getByText(/Save/i)).toBeInTheDocument();
      });
      it('THEN show title, label, placeholder and button in portuguese', () => {
        // Arrange
        i18n.changeLanguage('pt');

        // Act
        renderWithProviders(<ReasonForNonAvailabilityModal open />, {
          preloadedState
        });

        // Assert
        expect(screen.getByText(/Adicionar motivo de indisponibilidade/i)).toBeInTheDocument();
        expect(screen.getByText(/Nome do Motivo de Indisponibilidade/i)).toBeInTheDocument();
        expect(screen.getByPlaceholderText(/Insira o motivo de Indisponibilidade/i)).toBeInTheDocument();
        expect(screen.getByText(/Guardar/i)).toBeInTheDocument();
      });
      describe('WHEN validate input rules', () => {
        describe('WHEN validate whitespace before and at the end of input', () => {
          it('THEN render warning in spanish', async () => {
            // Arrange
            i18n.changeLanguage('es');

            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: ' espacion ' }
            });
            fireEvent.click(screen.getByTestId('btn-submit'));

            // Assert
            await waitFor(() => {
              expect(screen.getByText(/Debe ir sin espacios al principio/i)).toBeInTheDocument();
              expect(screen.getByText(/Debe ir sin espacios al Final/i)).toBeInTheDocument();
            });
          });
          it('THEN render warning in english', async () => {
            // Arrange
            i18n.changeLanguage('en');

            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: ' espacion ' }
            });
            fireEvent.click(screen.getByTestId('btn-submit'));

            // Assert
            await waitFor(() => {
              expect(screen.getByText(/Must not have spaces at the beginning/i)).toBeInTheDocument();
              expect(screen.getByText(/Must not have spaces at the end/i)).toBeInTheDocument();
            });
          });
          it('THEN render warning in porguese', async () => {
            // Arrange
            i18n.changeLanguage('pt');

            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: ' espacion ' }
            });
            fireEvent.click(screen.getByTestId('btn-submit'));

            // Assert
            await waitFor(() => {
              expect(screen.getByText(/Não deve conter espaços no início/i)).toBeInTheDocument();
              expect(screen.getByText(/Não deve conter espaços no final/i)).toBeInTheDocument();
            });
          });
        });
        describe('WHEN no add value', () => {
          it('THEN show warning required field in spanish', async () => {
            // Arrange
            i18n.changeLanguage('es');

            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: '' }
            });
            fireEvent.click(screen.getByTestId('btn-submit'));

            // Assert
            await waitFor(() => {
              expect(screen.getByText('Campo obligatorio')).toBeInTheDocument();
            });
          });
          it('THEN show warning required field in english', async () => {
            // Arrange
            i18n.changeLanguage('en');

            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: '' }
            });
            fireEvent.click(screen.getByTestId('btn-submit'));

            // Assert
            await waitFor(() => {
              expect(screen.getByText('Required Field')).toBeInTheDocument();
            });
          });
          it('THEN show warning required field in portuguese', async () => {
            // Arrange
            i18n.changeLanguage('pt');

            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: '' }
            });
            fireEvent.click(screen.getByTestId('btn-submit'));

            // Assert
            await waitFor(() => {
              expect(screen.getByText('Campo Obrigatório')).toBeInTheDocument();
            });
          });
        });
        describe('WHEN type to text on input', () => {
          it('THEN change text to uppercase', async () => {
            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: 'texto minusculas' }
            });

            // Assert
            await waitFor(() => {
              expect(screen.getByTestId('name-reason-for-non-availability').value).toBe('TEXTO MINUSCULAS');
            });
          });
          it('THEN count characters', async () => {
            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });
            fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
              target: { value: 'contar caracteres' }
            });

            // Assert
            await waitFor(() => {
              expect(screen.getByText('17 / 30')).toBeInTheDocument();
            });
          });
          it('THEN input have attribute max lenght of 30', () => {
            // Act
            renderWithProviders(<ReasonForNonAvailabilityModal open />, {
              preloadedState
            });

            // Assert
            expect(screen.getByTestId('name-reason-for-non-availability')).toHaveAttribute('maxlength', '30');
          });
          describe('WHEN try yo add text with more than 30 characters', () => {
            it('THEN show warning in spanish', async () => {
              // Arrange
              i18n.changeLanguage('es');

              // Act
              renderWithProviders(<ReasonForNonAvailabilityModal open />, {
                preloadedState
              });
              fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
                target: { value: 'Un texto con mas de 30 caracteres' }
              });
              fireEvent.click(screen.getByTestId('btn-submit'));

              // Assert
              await waitFor(() => {
                expect(screen.getByText('Máximo 30 caracteres')).toBeInTheDocument();
              });
            });
            it('THEN show warning in english', async () => {
              // Arrange
              i18n.changeLanguage('en');

              // Act
              renderWithProviders(<ReasonForNonAvailabilityModal open />, {
                preloadedState
              });
              fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
                target: { value: 'Un texto con mas de 30 caracteres' }
              });
              fireEvent.click(screen.getByTestId('btn-submit'));

              // Assert
              await waitFor(() => {
                expect(screen.getByText('Maximum 30 characters')).toBeInTheDocument();
              });
            });
            it('THEN show warning in portuguese', async () => {
              // Arrange
              i18n.changeLanguage('pt');

              // Act
              renderWithProviders(<ReasonForNonAvailabilityModal open />, {
                preloadedState
              });
              fireEvent.change(screen.getByTestId('name-reason-for-non-availability'), {
                target: { value: 'Un texto con mas de 30 caracteres' }
              });
              fireEvent.click(screen.getByTestId('btn-submit'));

              // Assert
              await waitFor(() => {
                expect(screen.getByText('Máximo de 30 caracteres')).toBeInTheDocument();
              });
            });
          });
        });
      });
    });
    describe('WHEN render modal to update record', () => {
      it('THEN show title in spanish', async () => {
        // Arrange
        i18n.changeLanguage('es');

        // Act
        renderWithProviders(<ReasonForNonAvailabilityModal open isEdition={true} entityToEdit={record} />, {
          preloadedState
        });

        // Assert
        await waitFor(() => {
          expect(screen.getByText('Editar motivo de no disponibilidad')).toBeInTheDocument();
        });
      });
      it('THEN show title in english', async () => {
        // Arrange
        i18n.changeLanguage('en');

        // Act
        renderWithProviders(<ReasonForNonAvailabilityModal open isEdition={true} entityToEdit={record} />, {
          preloadedState
        });

        // Assert
        await waitFor(() => {
          expect(screen.getByText('Edit Reason for Non-Availability')).toBeInTheDocument();
        });
      });
      it('THEN show title in spanish', async () => {
        // Arrange
        i18n.changeLanguage('pt');

        // Act
        renderWithProviders(<ReasonForNonAvailabilityModal open isEdition={true} entityToEdit={record} />, {
          preloadedState
        });

        // Assert
        await waitFor(() => {
          expect(screen.getByText('Editar Motivo de Indisponibilidade')).toBeInTheDocument();
        });
      });
      it(`THEN render record's name in the input`, async () => {
        // Act
        renderWithProviders(<ReasonForNonAvailabilityModal open isEdition={true} entityToEdit={record} />, {
          preloadedState
        });

        // Assert
        await waitFor(() => {
          expect(screen.getByTestId('name-reason-for-non-availability').value).toBe('Motivo 1');
        });
      });
    });
  });
});
Leave a Comment