Creando un componente & nativeElement
Clase 4 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Franklin Gil
student•
hace 3 años
Tanelo Mondaca Silva
student•
hace 3 años
Franklin Gil
Tanelo Mondaca Silva
Cesar Elías Armendariz Ruano
Carlos Alejandro Hernández Mejía
Gerardo Pérez Pérez
Sebastian Collantes
Denil José Parada Cabrera
Jorge Luis Silva Medina
Jorge Luis Silva Medina
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
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
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'); });
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:
configureTestingModule para configurar el módulo de pruebas con el componente que se está probando.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(); }); });
ComponentFixture: Ambiente para poder interactuar con nuestro component.
Tengo una consulta al hacer los test hay muchos test que se me skippean, como los activo?
Así como le ponemos f al describe para hacer focus se le puede poner xdescribe para skipearlos
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.
Optional chainig https://javascript.info/optional-chaining