Creando un componente & nativeElement

Clase 4 de 23 • Curso de Angular: Unit Testing para Componentes

Contenido del curso

Introducción

Componentes

Componentes con dependencias

Directivas

Pipes

Próximos pasos

23
Continúa con el Curso de Testing en Formularios y Routing
00:56 min

Tomar examen

Comentarios

Franklin Gil

student•

El signo ?, lo que hace es validar que la variable este definida.

querySelector puede traer un null, entonces el parametro textContext daria error porque la propiedad textContext, no existe en una variable con el valor null

Tanelo Mondaca Silva

student•

Más que validar la variable, lo que hace es decirle a la acción que si existe esa propiedad que haga tal o tal cosa. No lo valida, te avisa que puede no existir

Cesar Elías Armendariz Ruano

student•

Dentro de las pruebas de componentes, en el momento que creamos un nuevo componente, Angular nos da ya un archivo para realizar pruebas que contiene las siguientes funcionalidades.

person.component.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

// importación del modulo, servicio o componente del que se quiere hacer pruebas
import { PersonComponent } from './person.component';

describe('PersonComponent', () => {

  let component: PersonComponent;
  // Ambien para interactuar con el componente de prueba, por lo que se obtienen una instacia de nuestro componente
  let fixture: ComponentFixture<PersonComponent>;
// Pequeño ambiente de pruebas para nuestros componentes que se correra de manera asincrona 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ PersonComponent ]
    })
    .compileComponents();
  });

// Componente de pruebas que nos devolvera las pruebas del componente con todos sus elementos a probarse, por lo que cualquier componente creado tendra todos los métodos y atributos para ser probados
  beforeEach(() => {
    fixture = TestBed.createComponent(PersonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); //life cycle
  });
  // prueba sobre si se puede crear
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Las prácticas interesantes de pruebas hacia componentes es probar el render y el comportamiento del mismo render y la interfaz gráfica

it('should have <p> with "Soy un párrafo"</p>', () => {
    const personElement: HTMLElement = fixture.nativeElement;
    const p = personElement.querySelector('p');
    expect(p?.textContent).toEqual('Soy un párrafo');
  });

Carlos Alejandro Hernández Mejía

student•

Componentes

Cuando utilizas la CLI de Angular para generar un componente, también nos genera un archivo de pruebas unitarias para ese componente, el cual proporciona una estructura básica para escribir las pruebas unitarias del componente generado.
💡 A dicha estructura se le conoce como boilerplate, que es una plantilla o estructura básica que se utiliza como punto de partida para resolver un problema específico.
El boilerplate incluye la configuración necesaria para ejecutar las pruebas y también proporciona algunos ejemplos de pruebas básicas que se pueden utilizar como punto de partida.
💡 Puedes personalizar y agregar más pruebas a medida que necesites probar más aspectos del componente.

Boilerplate

En este boilerplate, se importan varios módulos de Angular que se utilizan para configurar y ejecutar las pruebas. También se importa el componente que se está probando.
Luego, se define una función describe que contiene varias funciones it, que son las pruebas en sí.
💡 Cada función it contiene una afirmación expect que verifica sí la hipótesis planteada es correcta.
El boilerplate también incluye dos funciones beforeEach, que se ejecutan antes de cada prueba. A continuación, se describe a detalle la función da cada una:

La primera, utiliza el método configureTestingModule para configurar el módulo de pruebas con el componente que se está probando.
La segunda, utiliza el método createComponent para crear una instancia del componente y realizar un cambio en él para que Angular lo detecte y actualice la vista.

Ejemplo de Boilerplate

import { ComponentFixture, TestBed } from '@angular/core/testing';
    
import { MyComponent } from './my.component';
    
describe('MyComponent', () => {
      let component: MyComponent;
      let fixture: ComponentFixture<MyComponent>;
    
      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [MyComponent],
        }).compileComponents();
      });
    
      beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
});

Gerardo Pérez Pérez

student•

ComponentFixture: Ambiente para poder interactuar con nuestro component.

Sebastian Collantes

student•

Tengo una consulta al hacer los test hay muchos test que se me skippean, como los activo?

Denil José Parada Cabrera

student•

Así como le ponemos f al describe para hacer focus se le puede poner xdescribe para skipearlos

Jorge Luis Silva Medina

student•

El Optional Chaining (encadenamiento opcional) es una característica de JavaScript introducida en la versión ES2020 que permite acceder a propiedades anidadas de un objeto sin preocuparse por si alguna de esas propiedades es nula o indefinida.

En otras palabras, el Optional Chaining permite evitar errores de tipo "TypeError: Cannot read property 'propiedad' of undefined" al acceder a una propiedad anidada de un objeto cuando alguno de los niveles previos puede ser nulo o indefinido.

Por ejemplo, supongamos que tenemos el siguiente objeto:

const persona = {
  nombre: 'Juan',
  edad: 30,
  direccion: {
    calle: 'Av. Principal',
    numero: 123,
    ciudad: 'Ciudad de México'
  }
}

Si queremos acceder a la propiedad "ciudad" de la propiedad "direccion" de la persona, podemos hacerlo de la siguiente manera:

const ciudad = persona.direccion.ciudad;

Pero si el objeto persona no tiene la propiedad "direccion", obtendremos un error de tipo "TypeError: Cannot read property 'ciudad' of undefined".

Con el Optional Chaining, podemos hacer lo siguiente:

const ciudad = persona.direccion?.ciudad;

El signo de interrogación "?" indica que la propiedad "direccion" es opcional, es decir, si no existe, no se producirá un error al intentar acceder a la propiedad "ciudad". Si la propiedad "direccion" existe, se accederá a la propiedad "ciudad" normalmente.

Otra forma de usar Optional Chaining es con arrays y el operador "[]". Por ejemplo:

const valores = [1, 2, 3, null, undefined];
const valor = valores?.[3];

En este caso, el valor de la variable "valor" será "null", ya que el índice 3 existe en el array "valores", pero su valor es "null".

En resumen, el Optional Chaining es una herramienta muy útil para acceder a propiedades anidadas de un objeto o elementos de un array de forma segura, evitando errores por propiedades o elementos nulos o indefinidos.

Jorge Luis Silva Medina

student•

Optional chainig https://javascript.info/optional-chaining

import { ComponentFixture, TestBed } from '@angular/core/testing';

// importación del modulo, servicio o componente del que se quiere hacer pruebas
import { PersonComponent } from './person.component';

describe('PersonComponent', () => {

  let component: PersonComponent;
  // Ambien para interactuar con el componente de prueba, por lo que se obtienen una instacia de nuestro componente
  let fixture: ComponentFixture<PersonComponent>;
// Pequeño ambiente de pruebas para nuestros componentes que se correra de manera asincrona 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ PersonComponent ]
    })
    .compileComponents();
  });

// Componente de pruebas que nos devolvera las pruebas del componente con todos sus elementos a probarse, por lo que cualquier componente creado tendra todos los métodos y atributos para ser probados
  beforeEach(() => {
    fixture = TestBed.createComponent(PersonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); //life cycle
  });
  // prueba sobre si se puede crear
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

it('should have <p> with "Soy un párrafo"</p>', () => {
    const personElement: HTMLElement = fixture.nativeElement;
    const p = personElement.querySelector('p');
    expect(p?.textContent).toEqual('Soy un párrafo');
  });

import { ComponentFixture, TestBed } from '@angular/core/testing';
    
import { MyComponent } from './my.component';
    
describe('MyComponent', () => {
      let component: MyComponent;
      let fixture: ComponentFixture<MyComponent>;
    
      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [MyComponent],
        }).compileComponents();
      });
    
      beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
});

Creando un componente & nativeElement

Introducción

Unit Testing en Angular para Componentes

Creando el proyecto

Primera prueba

Componentes