@acrilo/mock-service

Esta librería permite mockear o falsear los consumos Http de una aplicación de Angular.

Contexto

Cuando eres Frontend Developer en un equipo granularmente distribuido, ocasionalmente te pueden solicitar que construyas un componente de UI que consuma un Endpoint que aún no existe o está siendo desarrollado en paralelo. Esta situación genera dependencia y tiende a impactar la velocidad del desarrollo. Al respecto, una buena estrategia para mitigar esa dependencia, es falsear dicho consumo mediante Mocks.

Antes implementar un Mock, es muy importante hablar con el equipo de Backend para definir una firma o contrato que permitirá simular la respuesta exacta del Endpoint real.

Instalación

Para agregar esta librería a tu proyecto de Angular, debes abrir una terminal en la raiz del proyecto y ejecutar el siguiente comando:

npm i @acrilo/mock-service

Configuración

Para configurar la librería debes crear una función exportable en alguna parte de tu proyecto. Esta clase servirá para decorar los métodos internos de un servicio de Angular. Esta clase puedes nombrarla como quieras. Para el caso de este ejemplo, decidí llamarla BCMockService.

import { MockServiceSettings , MockServiceDecorator } from  "@acrilo/mock-service";

export const BCMockService = (mockPath: string) => {

	const  settings: MockServiceSettings = {
		urlBase:  'http://localhost',
		servicePort:  4500, // este atributo es opcional, ya que puede estar en un dominio
		active:  true
	}

	return  MockServiceDecorator(settings, mockPath);

}

Consideraciones:

• El decorador recibe un parametro llamado mockPath. Este debe ser un string único en formato de Path - Url que debe estar configurado en el servicio que va a simular la respuesta del servidor. Por ejemplo: create-user, get-user-list, onboarding-register.

• Los atributos urlBase, servicePort y active, es recomendable almacenarlos en un nodo del fichero Environment. Cabe mencionar, que el atributo active es el que activa el funcionamiento del decorador. Por lo tanto, debemos ser cuidadosos en garantizar que esta caracteristica se desactive en ambiente de producción.

• El atributo servicePort es opcional, ya que el servicio encargado de simular las respuestas del servidor, puede estar en un nombre de dominio.

Uso

Para hacer uso de la configuración mencionada en la sección anterior, debe crearse un servicio con un método interno que haga el consumo Http tradicional. Sumado a eso, se debe poner el decorador creado encima del metodo como se muestra a continuación.

@Injectable({
	providedIn: 'root',
})
export  class  BasicDataService  {
	constructor(private http:  HttpClient)  {}

	@BCMockService('get-user-list')
	getUserList(): Observable<any> => {
		...
	}
}

Al tener activo el decorador, en tiempo de ejecución se ignora el contenido original del método. Esto permite dejar listo el código a la espera de que el servicio real se encuentre disponible.

Es importante tener en cuenta que por debajo se realizará un fetching GET con las configuraciones definidas. Para este ejemplo, sería a http://localhost:4500/get-user-list. Por lo tanto, debes asegurarte de tener un servicio backend que responda esa petición.