2

Debo probar un servicio de Angular pero no comprendo como puedo asignar el valor de la variable en el servicio para poder entrar a las condiciones de los if, por ejemplo desde el test quiero asignarle valores a environment.sessionRewardStore y a environment.sessionStoreElegibilityKeys pero no logro hacerlo, mi servicio: (edito para subir el codigo completo del metodo getPurchasableRewards)

  public async getPurchasableRewards() {
    let userStores: RewardStore[] = [];
    await this.sessionmApi.getUserRewardStores().then((r) => {      
      if (Array.isArray(r)) {
        if (environment.sessionmRewardStore) {
          userStores = r.filter((s) => {
            return s.id === environment.sessionmRewardStore;
          });
        } else {    
          userStores = r.filter((s) => {
            return s.eligibility_models.find((e) => environment.sessionmStoreEligibilityKeys.includes(e));
          });
        }
      }
    });
    if (Array.isArray(userStores) && userStores.length > 0) {
      return this.sessionmApi.getRewardStoreOffers(userStores).then((rewards: IPurchasableReward[]) => {
        return this.store.dispatch({
          type: AppStateActions.PURCHASABLE_REWARDS,
          payload: rewards
        });
      });
    }
  }

Mi test:

fit('should getPurchasableRewards return .....', (doneFn) => {
    const mock = {
      type: AppStateActions.PURCHASABLE_REWARDS,
      payload: MockIPurchasableReward
    };
 
    const spysgetValue = spyOn(service['sessionmApi'], 'getUserRewardStores').and.returnValue(Promise.resolve(MockRewardStoreArray));

    //Aqui intento asignar el valor:
    environment.sessionmRewardStore='STORE-1'

    service.getPurchasableRewards().then((data) => {
      console.log('DATA PP:', data)
      doneFn();
    })
    .catch((err) =>{
      console.log('error', err)
    })
  });

Archivo environment original que usa el servicio: environment.ts, este importa una interfaz con los nombres de todas las variables:

import { environment as coreEnv, IxxxEnvironment } from '@xxx/files';
const env = {};

export const environment: IxxxEnvironment | any = coreEnv || env;

yo me cree uno que pense podría utilizar para reemplazar las variables que me interesa usar: environmentMock

import { IxxxEnvironment, abc } from '@xxx/files';
export const environmentMock: IxxxEnvironment | any = {
  apiBaseUrl: 'https://abc.com',
  sessionmStoreEligibilityKeys: ["public", "user_affiliation"],
  sessionmRewardStore:'ABC'
};
10
  • Quizá no entiendo tu duda, pero entiendo que lo que quieres es ejecutar el test variando el valor de MockRewardStoreArray. Commented el 2 feb. 2023 a las 15:26
  • En el servicio hay unos if, para entrar a esos se revisan unas variables en el servicio: environment.sessionmRewardStore y environment.sessionmStoreEligibilityKeys y dependiendo de eso se hace un proceso en el servicio, necesito enviarle valores a esas variables para comprobar que funciona pero no logro hacerlo :( Commented el 2 feb. 2023 a las 15:31
  • De dónde sale esa variable environment? Porque para hacer lo que quieres debería mockearla e inyectarla en tu función Commented el 2 feb. 2023 a las 15:34
  • esa variable en el servicio sale de un import de un archivo de configuracion: Import {environment} from 'archivo', ¿como deberia mockear esa variable? Commented el 2 feb. 2023 a las 15:37
  • Podrías agregar el código completo? getPurchasableRewards esto es un servicio de Angular o es una simple función? De eso depende cómo se mockearia. (Puedes hacer click en editar) Commented el 2 feb. 2023 a las 15:38

1 respuesta 1

1

Una solución podría ser usar inversión de dependencias en tu función y enviarle como parámetro el objeto config de configuración.

Teniendo así la posibilidad de variar la implementación del mismo para tus casos de prueba.

El código podría quedar así:

public async getPurchasableRewards(environment) { // Lo recibimos como parámetro
    let userStores: RewardStore[] = [];
    await this.sessionmApi.getUserRewardStores().then((r) => {      
      if (Array.isArray(r)) {
        if (environment.sessionmRewardStore) {
          userStores = r.filter((s) => {
            return s.id === environment.sessionmRewardStore;
          });
        } else {    
          userStores = r.filter((s) => {
            return s.eligibility_models.find((e) => environment.sessionmStoreEligibilityKeys.includes(e));
          });
        }
      }
    });
    if (Array.isArray(userStores) && userStores.length > 0) {
      return this.sessionmApi.getRewardStoreOffers(userStores).then((rewards: IPurchasableReward[]) => {
        return this.store.dispatch({
          type: AppStateActions.PURCHASABLE_REWARDS,
          payload: rewards
        });
      });
    }
  }

Ahora bien, hay que tener en cuenta la forma en la que usamos la función getPurchasableRewards, ya que ahora cada vez que la usemos debemos proveerle una implementación de environments.

Para tu test esto sería:

test.js

it('should getPurchasableRewards return .....', (doneFn) => {
    const mock = {
      type: AppStateActions.PURCHASABLE_REWARDS,
      payload: MockIPurchasableReward
    };
 
    const spysgetValue = spyOn(service['sessionmApi'], 'getUserRewardStores').and.returnValue(Promise.resolve(MockRewardStoreArray));

    //Declaramos environment aquí
    const environment = {}
    environment.sessionmRewardStore = 'STORE-1'
    environment.sessionStoreElegibilityKeys = ["public", "user_affiliation"]

    service.getPurchasableRewards(environment) // Le pasamos la variable a nuestra función
      .then((data) => {
        console.log('DATA PP:', data)
        doneFn();
      })
      .catch((err) =>{
        console.log('error', err)
      })
  });

Y para el caso de usar la función realmente en tu app:

import { environment } from "la/ruta/a/environment";

getPurchasableRewards(environment)
   .then(res => console.log(res))
   .catch(err => console.log(err));

Si bien quizás la inversión de dependencias se ve más a menudo en el constructor de una clase por ejemplo, esta es una solución válida para que tu función sea más fácil de testear.


EDIT:

Solución completa

Si la función es parte de un método de una clase podríamos hacer uso de la inversión de dependencia sin tener que pasarle la variable como parámetro a la función en sí.

Ejemplo:

Si bien no está en tu pregunta, supongo que la función getPurchasableRewards es un método de una clase. Por lo que la inyección de dependencia puede pasar a nivel de instanciación de la clase.

rewards.service.ts

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class RewardsService {
  private environment: environment;

  constructor(environment: environment) { // Gracias a esto podemos inyectar distintas implementaciones de la configuración.
    this.environment = environment;
  }

  async getPurchasableRewards(): Promise<any> {
    ...
    // Acá usamos environment normalmente
    if (this.environment.sessionmRewardStore) {} // Importante notar que usamos this.environment ya que es una propiedad de nuestra clase
    ...
  }
}

Y para el test, usamos la inyección de dependencias que provee angular:

rewards.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { RewardsService } from './rewards.service';

describe('RewardsService', () => {
  let service: RewardsService;

  beforeEach(() => {
    const environmentMock = { sessionRewardStore: "", sessionStoreElegibilityKeys: ["public", "user_affiliation"] /* aquí agregarías las propiedades y métodos que necesites */ };

    TestBed.configureTestingModule({
      providers: [
        RewardsService,
        { provide: 'environment', useValue: environmentMock } // Acá le decimos al test que use el mock que creamos arriba
      ]
    });
    service = TestBed.inject(RewardsService);
  });

it('should getPurchasableRewards return .....', (doneFn) => {
    service.getPurchasableRewards().then((data) => { // Ejecutamos la función sabiendo que está usando el mock que le pasamos
      console.log('DATA PP:', data)
      doneFn();
    })
    .catch((err) =>{
      console.log('error', err)
    })
  });

});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.