Auto-Mock Componentes Angular

05 Aug, 2023 Programación 0

Problema

Cuando pruebo Componentes de Angular, a menudo encuentro el siguiente mensaje de error:

'NG0304: 'app-chip' no es un elemento conocido:
1. Si 'app-chip' es un componente de Angular, entonces verifique que sea parte de este módulo.
2. Si 'app-chip' es un Componente Web, entonces agregue 'CUSTOM_ELEMENTS_SCHEMA' al 'NgModules.schemas' de este componente para suprimir este mensaje.'

Razón

Usualmente esto sucede porque uso un Componente (aquí: ) en la plantilla:


   Asanas

y olvidé agregar el Componente simulado al archivo de especificación:

TestBed.configureTestingModule({
  declarations: [
    AsanasFilterComponent,
    MockComponent(FilterStickyHeaderComponent),
    MockComponent(FilterFooterComponent),
    // Falta MockComponent(AppChipComponent) aquí
  ],
}).compileComponents();

Estoy usando ng-mocks para simular Componentes.

Solución deseada

Creo que tener que agregar manualmente los componentes utilizados en la plantilla a la configuración de prueba no beneficia el proceso de desarrollo: Si olvido importar un componente que estoy usando en el módulo actual (o en caso de un error tipográfico), la compilación fallará de todos modos. (por eso no quiero usar CUSTOM_ELEMENTS_SCHEMA)

¿Existe alguna manera de agregar automáticamente todos los componentes que uso en la plantilla al arreglo de declaraciones como simulaciones?

¿O hay alguna razón para no hacerlo (y seguir agregándolos manualmente)?

davy.ai

August 5, 2023 at 5:52 am

Solución Propuesta

Una posible solución para agregar automáticamente todos los componentes utilizados en la plantilla al Configurador de Pruebas como “Mocks” es crear una función de utilidad que analice la plantilla y recupere todos los nombres de los selectores de componentes. Luego, iterar sobre la lista de selectores y agregar un MockComponent para cada uno de ellos al array declarations.

Aquí tienes un ejemplo de implementación utilizando JavaScript y ng-mocks:

import { Type } from '@angular/core';
import { MockComponent } from 'ng-mocks';

function autoMockComponents(template: string): Type<any>[] {
  const componentSelectors = template.match(/<([^/!][a-z-]*)/gi)
    .map(selector => selector.slice(1)); // eliminar < del nombre del selector
  return componentSelectors.map(selector => MockComponent({ selector }));
}

Esta función recibe una cadena que representa la plantilla y devuelve un array de Componente Mock que representa todos los componentes utilizados en la plantilla. La función MockComponent() de ng-mocks se utiliza para crear un “mock” para cada selector.

Para utilizar esta función, podemos llamarla en el método configureTestingModule() y extender el array resultante dentro del array declarations, de la siguiente manera:

TestBed.configureTestingModule({
  declarations: [
    AsanasFilterComponent,
    MockComponent(FilterStickyHeaderComponent),
    MockComponent(FilterFooterComponent),
    ...autoMockComponents('<div class="chips" *ngif="asanas"><app-chip *ngfor="let asana of asanas" [label]="asana.label" [(model)]="model[asana.id]"></app-chip></div>')
  ],
}).compileComponents();

Esto agregará automáticamente un “mock” para el componente app-chip utilizado en la plantilla sin tener que agregarlo manualmente al array declarations.

Conclusión

Agregar automáticamente componentes “mock” puede ahorrar tiempo y reducir la probabilidad de errores en tiempo de ejecución debido a componentes faltantes en un módulo de prueba. Al proporcionar una función que analiza la plantilla y devuelve componentes “mock”, podemos eliminar la necesidad de que los desarrolladores agreguen manualmente cada componente que utilizan al módulo de prueba.

Answer

davy.ai

August 5, 2023 at 5:52 am
Solución Propuesta

Una posible solución para agregar automáticamente todos los componentes utilizados en la plantilla al Configurador de Pruebas como “Mocks” es crear una función de utilidad que analice la plantilla y recupere todos los nombres de los selectores de componentes. Luego, iterar sobre la lista de selectores y agregar un MockComponent para cada uno de ellos al array declarations.

Aquí tienes un ejemplo de implementación utilizando JavaScript y ng-mocks:
```
import { Type } from '@angular/core';
import { MockComponent } from 'ng-mocks';

function autoMockComponents(template: string): Type<any>[] {
  const componentSelectors = template.match(/<([^/!][a-z-]*)/gi)
    .map(selector => selector.slice(1)); // eliminar < del nombre del selector
  return componentSelectors.map(selector => MockComponent({ selector }));
}
```
Esta función recibe una cadena que representa la plantilla y devuelve un array de Componente Mock que representa todos los componentes utilizados en la plantilla. La función MockComponent() de ng-mocks se utiliza para crear un “mock” para cada selector.

Para utilizar esta función, podemos llamarla en el método configureTestingModule() y extender el array resultante dentro del array declarations, de la siguiente manera:
```
TestBed.configureTestingModule({
  declarations: [
    AsanasFilterComponent,
    MockComponent(FilterStickyHeaderComponent),
    MockComponent(FilterFooterComponent),
    ...autoMockComponents('<div class="chips" *ngif="asanas"><app-chip *ngfor="let asana of asanas" [label]="asana.label" [(model)]="model[asana.id]"></app-chip></div>')
  ],
}).compileComponents();
```
Esto agregará automáticamente un “mock” para el componente app-chip utilizado en la plantilla sin tener que agregarlo manualmente al array declarations.

Conclusión

Agregar automáticamente componentes “mock” puede ahorrar tiempo y reducir la probabilidad de errores en tiempo de ejecución debido a componentes faltantes en un módulo de prueba. Al proporcionar una función que analiza la plantilla y devuelve componentes “mock”, podemos eliminar la necesidad de que los desarrolladores agreguen manualmente cada componente que utilizan al módulo de prueba.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?