Modal
unknown
javascript
2 years ago
13 kB
11
Indexable
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');
});
});
});
});
});
Editor is loading...
Leave a Comment