DEV Community

Victor Sandoval Valladolid
Victor Sandoval Valladolid

Posted on

Angular Testing Library - Casos de Uso

#discuss

Verificar que redireccione a una URL 

it('...', async () => { const spyRouter = jest.spyOn(Router.prototype, 'navigate') await setupComponent() ... expect(spyRouter).toHaveBeenCalledWith(['/stores']) })
Enter fullscreen mode Exit fullscreen mode

Emular datos adquiridos por la URL

Para poder simular un id como dato ingresado por url (Ej. www.my-web.com/users/edit/1).

Debemos utilizar la clase stub ActivatedRouteStub que fué creado para simular datos de entrada por URL. Esta clase se le puede pasar lo siguiente:

new ActivatedRouteStub({ initialParams: { id: '1', // Ej de URL: /user/edit/:id }, initialQueryParams: { page: '1' // Ej de URL: /user/list?page=1 } })
Enter fullscreen mode Exit fullscreen mode

Esta clase se puede poner al inicio del renderizado del componente setupComponent() o en la zona de test

// Opción 1: En el renderizado del componente async function setupComponent() { return await render(UsersUpsertComponent, { declarations: [...], imports: [...], providers: [ ... { provide: ActivatedRoute, useValue: new ActivatedRouteStub({ initialParams: { id: '1', }, }), }, ], }) }
Enter fullscreen mode Exit fullscreen mode 
// Opción 2: En la zona de test async function setupComponent(params: { id?: string; zoneId?: string } = {}) { const initialParams = { id: '3157', ...params, } return await render(DeliveryZoneUpsertComponent, { declarations: [...], imports: [...], providers: [ ... { provide: ActivatedRoute, useValue: new ActivatedRouteStub({ initialParams }), }, ], }) } it('...', () => { const initialParams = { id: '3157', zoneId: '445', } const { fixture } = await setupComponent(initialParams) ... actions ... ... assertions ... })
Enter fullscreen mode Exit fullscreen mode

Captura de un elemento y ejecutar un evento

Mat-Toogle

Capturar el input dentro del mat-toggle

const toggle = screen.getByTestId('productList_productDisplay0Enabled0_toggle-input')
Enter fullscreen mode Exit fullscreen mode

Ejecutar el evento change con fireEvent()

// Debemos capturar el input que está dentro del 'mat-toggle' const toggle = screen.getByTestId('productList_productDisplay0Enabled0_toggle-input') fireEvent.change(toggle, { target: { checked: false }, })
Enter fullscreen mode Exit fullscreen mode

Ejecutar el evento click con userEvent()

const user = userEvent.setup() // Debemos capturar el 'mat-toggle' como tal. const toggleEnabled = screen.getByTestId('[ELEMENT_ID]') await user.click(toggleEnabled) expect(toggleEnabled).toHaveAttribute('ng-reflect-checked', 'false')
Enter fullscreen mode Exit fullscreen mode

Mat-Select

Capturar el elemento

// Por su ID const select = screen.getByTestId('[ELEMENT_ID]') // Por su Rol const select = screen.getByRole('combobox', { name: /List/i })
Enter fullscreen mode Exit fullscreen mode

Ejecutar el evento select con userEvent()

const user = userEvent.setup() const { fixture } = await setupComponent() const select = screen.getByRole('combobox', { name: /List/i }) await user.click(select) await user.click(screen.getByText(/Minimarket/i)) ... assertions ...
Enter fullscreen mode Exit fullscreen mode

Para este caso no se puede usar fireEvent() directamente ya que el mat-select no contiene un select nativo HTML

Mat-Input

Capturar el elemento

//Por su ID const input = screen.getByTestId('[ELEMENT_ID]') //Por su label const input = screen.getByLabelText(/Minimum order amount/i)
Enter fullscreen mode Exit fullscreen mode

Ejecutar el evento input usando fireEvent()

const input = screen.getByTestId('products_searchValue_input') fireEvent.input(input, { target: { value: 'foo' } }) ... assertions ...
Enter fullscreen mode Exit fullscreen mode

Ejecutar el evento type usando userEvent()

const user = userEvent.setup() const legalName = screen.getByTestId('[ELEMENT_ID]') user.type(legalName, 'Kirby') ... assertions ...
Enter fullscreen mode Exit fullscreen mode

Mat-Button

Capturar el elemento

//Por su ID const button = screen.getByTestId('app_save_button') //Por su label del button const button = screen.getByText(/Save/i)
Enter fullscreen mode Exit fullscreen mode

Emular retorno de datos en un Modal

Para este caso debemos usar el stub test/__stubs__/MatDialogStub que es un clase que emula el retorno de datos de un modal y se implementa llamando a la clase MatDialogStub en el archivo .spec donde se monta el componente a testear.

//component.spec.ts async function setupComponent() { return await render(ApiIntegrationComponent, { declarations: [], imports: [], providers: [ // Se implementa el Stub { provide: MatDialog, useValue: new MatDialogStub() }, ... ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) } describe('...', () => { it('Should create component correctly', async () => { const { fixture } = await setupComponent() ... }) })
Enter fullscreen mode Exit fullscreen mode

Por defecto la clase MatDialogStub() retorna true. Si queremos retornar otro valor, entonces sería de esta manera.

providers: [ { provide: MatDialog, useValue: new MatDialogStub({ name: 'Foo', age: 23 }) }, ... ],
Enter fullscreen mode Exit fullscreen mode

Top comments (0)