DEV Community

Victor Sandoval Valladolid
Victor Sandoval Valladolid

Posted on

Angular Testing Library - Casos de Uso

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)

Read next

nickytonline profile image

Tools that keep me productive

Nick Taylor -

louaiboumediene profile image

Mastering Relational Database Design: A Comprehensive Guide

Louai Boumediene -

erinao profile image

Top 7 Featured DEV Posts of the Week

Erin A Olinick -

moovhe4rt profile image

Is the Habbo Hotel related to programming?

Moov -