Testeo de Componentes para Administradores en Platzi Orders

Clase 11 de 20 • Curso de React Testing Library

Resumen

¿Cómo testear un componente exclusivo para administradores?

Testear componentes en aplicaciones web es fundamental para garantizar su funcionamiento correcto. Cuando un componente está diseñado específicamente para administradores, es necesario realizar pruebas adicionales para confirmar que solo ellos pueden acceder a sus características.

¿Qué es Order Summary y cuándo se muestra?

El componente Order Summary forma parte de Platzi Orders y tiene una función especial: aparecer únicamente para los SuperAdmins. Muestra el total de órdenes, ventas y un promedio de las ventas. Para verificar esta funcionalidad, es crucial utilizar correctamente los roles de usuario durante las pruebas.

¿Cómo se configura el test para un SuperAdmin?

Para comenzar a testar, primero es importante asegurarse de que el componente solo se renderice cuando el rol del usuario sea SuperAdmin. Aquí te mostramos cómo hacerlo paso a paso:

Crea un nuevo caso de prueba: Define el caso de prueba para verificar que la sección se muestra para SuperAdmins.

it('debería mostrar sección para superadmins', async () => {
   renderOrders({ role: 'SuperAdmin' });
});

Mock de órdenes: Utiliza un mock para simular las órdenes y verificar que el componente maneja correctamente la información.
```
mockGetOrders.mockResolvedValue(mockOrders);
```

Uso de waitFor: Emplea waitFor para manejar la espera de aserciones asíncronas.

await waitFor(() => {
   const totalOrdersElement = screen.getByText(totalOrders);
   expect(totalOrdersElement).toBeInTheDocument();
});

¿Cómo identificar elementos específicos sin ambigüedad?

A veces, una aplicación puede contener muchos elementos similares, complicando la tarea de encontrar el correcto. Aquí es donde getByTestId se convierte en una herramienta valiosa.

Modificar el componente: Añade un atributo data-testid al elemento HTML que deseas identificar de forma única.
```
<p data-testid="total-orders">{totalOrders}</p>
```

Uso de getByTestId: Emplea esta función para obtener el elemento en cuestión de manera clara y precisa.

const totalOrdersElement = screen.getByTestId('total-orders');
expect(totalOrdersElement.textContent).toBe(String(totalOrders));

Recomendaciones al usar DataTestID

Aunque el data-testid es útil para identificar elementos, debes emplearlo con moderación. Aquí van algunos consejos para su uso:

Último recurso: Usa data-testid solo cuando otras estrategias de selección de elementos no funcionen.
Mantenimiento del código: Evita abusar de esta técnica para prevenir problemas de mantenimiento y legibilidad del código.

¡Anímate a practicar y mejorar tus habilidades en testing de componentes! Recuerda que dominar estas técnicas lleva tiempo, pero los beneficios en la calidad de tu software lo valen. Y no olvides dejar tus experiencias y resultados en la sección de comentarios, ¡eso nos ayuda a todos a crecer!