Testing componentes para superadmins con getByTestId
Contenido del curso
Natalia Niño Machado
Wilmer Garzon Cabezas
Team Platzi
Genessis Jimenez
Wilmer Garzon Cabezas
Team Platzi
José Ángel Arreola González
Ulqernesh Karvenae
César Augusto Cortés Labrada
César Augusto Cortés Labrada
Elioenai Garcia
Wilmer Garzon Cabezas
Team Platzi
Salome Arboleda
Estoy muy feliz tomando este curso, la explicacion es clara y en particular me agrada que el profe repita cosas que vimos en clases anteriores, eso me ayuda a reforzar y recordar en un nuevo contexto lo visto anteriormente, muchas gracias
¡Hola natalia! Es un placer aportar en tu crecimiento profesional 💚
Hacer el expect de esta forma me parece un poco mas clean:
expect(totalOrdersElements).length(totalOrders)
excelente approach Genessis! 💚
Hasta el momento uno de los mejores cursos que he tomado en la plataforma, muy didactica y sencilla la explicación del instructor, ojala hiciera un curso avanzado del mismo tema! O algún otro curso relacionado a Pipelines :)
it("shows the section for superadmin", async () => { mockGetOrders.mockResolvedValue(mockOrders); render(handleRenderOrders("superadmin")); await waitFor(() => { const { totalOrders, totalValue, averageOrderValue } = getSummaryOrders(mockOrders); expect(screen.getByTestId("total-orders")).toHaveTextContent( String(totalOrders), ); expect(screen.getByTestId("total-value")).toHaveTextContent( `$${totalValue.toFixed(2)}`, ); expect(screen.getByTestId("average-order-value")).toHaveTextContent( `$${averageOrderValue.toFixed(2)}`, ); }); });
Para el reto hice lo siguiente:
Nota: las configuraciones de mocks están y se usa un beforeEach para inicializar datos.
Salid en consola:
Vamoooo, que gran trabajo Elioenai! 👏
Dejo mi tarea resuelta por aqui:
it('should show superadmin section', async () => { mockGetOrders.mockResolvedValue(mockOrders); renderOrders('superadmin'); await waitFor(() => { const { totalOrders, totalValue, averageOrderValue, ordersByStatus } = getSummaryOrders(mockOrders); const totalOrdersByStatus = Object.keys(ordersByStatus).length; const totalOrdersElement = screen.getByTestId('total-orders'); expect(totalOrdersElement.textContent).toBe(String(totalOrders)); const toalValueElement = screen.getByTestId('value-orders'); expect(toalValueElement.textContent).toBe(`$${totalValue.toFixed(2)}`); const averageOrderValueElement = screen.getByTestId('average-order-value'); expect(averageOrderValueElement.textContent).toBe( `$${averageOrderValue.toFixed(2)}`, ); const ul = screen.getByTestId('orders-by-status-list'); const items = ul.querySelectorAll('li'); expect(items).toHaveLength(totalOrdersByStatus); Object.entries(ordersByStatus).forEach(([status, count]) => { const li = within(ul) .getAllByRole('listitem') .find((item) => within(item).queryByText(status, { exact: false })); expect(li).toBeTruthy(); expect(within(li!).getByText(String(count))).toBeTruthy(); }); }); });
