Estoy intentando hacer las pruebas de este codigo, pero por mas que intento no consigo solucionarlo. Si alguien puede ayudarme <code>impo...

Jaime Quintero Rodríguez

Pregunta

student•hace 6 años

Estoy intentando hacer las pruebas de este codigo, pero por mas que intento no consigo solucionarlo. Si alguien puede ayudarme

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HttpClient } from '@angular/common/http';
import { StorageService } from './services/storage.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private httpClient: HttpClient,
    private storageService: StorageService,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.httpClient.get('https://s3-eu-west-1.amazonaws.com/wuolah-public/config/languages/lang/es_ES/config.json').toPromise().then(
        (strings) => {
          this.storageService.write('locale', strings);
          this.statusBar.styleDefault();
          this.splashScreen.hide();
        }
      );
    });
  }
}

Cristian Daniel Marquez Barrio

teacher•hace 6 años

Debería ser:

{ provide: Platform, useClass: PlatformStub },
return Promise.resolve();

Jaime Quintero Rodríguez

student•hace 6 años

Este es mi spec.ts. No me identifica Platfom.ready() como funcion y nisiquiera estoy realizando ninguna prueba

<import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, async, ComponentFixture } from '@angular/core/testing';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { StorageService } from './services/storage.service';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'


class PlatformStub {
  ready(){
    const data = {};
    Promise.resolve();
  }
}

class SplashScreenStub {
  hide() {}
}

class StatusBarStub {
  styleDefault(){}
}

class StorageServiceStub {
  write(){}
}


fdescribe('AppComponent', () => {

  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [AppComponent],
      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: StatusBar, useValue: StatusBarStub },
        { provide: SplashScreen, useValue: SplashScreenStub },
        { provide: Platform, useValue: PlatformStub },
        { provide: StorageService, useValue: StorageServiceStub }
      ],
      imports: [HttpClientTestingModule]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  // describe('Should initialize the app', () => {

  //   it('should initialize the app', async () => {
  //     TestBed.createComponent(AppComponent);

  //     const ready = spyOn((<any>component).Platform, 'ready');

  //     component.initializeApp()

  //     expect(ready).toHaveBeenCalled();
      
  //   });

  // })


});
>

El errror que me da karma

<AppComponent should create the app
TypeError: this.platform.ready is not a function
TypeError: this.platform.ready is not a function
    at AppComponent.ready [as initializeApp] (http://localhost:9876/_karma_webpack_/webpack:/src/app/app.component.ts:27:23)
    at new initializeApp (http://localhost:9876/_karma_webpack_/webpack:/src/app/app.component.ts:23:14)
    at createClass (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:22062:1)
    at createDirectiveInstance (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:21931:1)
    at createViewNodes (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23157:1)
    at createRootView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23071:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:24079:1)
    at Object.debugCreateRootView [as createRootView] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:23589:1)
    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:21410:1)
    at initComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:1916:1)>

Cristian Daniel Marquez Barrio

teacher•hace 6 años

Te recomiendo comenzar creando stubs para cada uno de los servicios que estas inyectando en el constructor y centrarte en completar el flujo principal de

initializeApp

El servicio
platform
debe tener un método
ready()
que retorne un
Promise.resolve('data')
;
Puedes utilizar el
HttpClientTestingModule
para resolver el
get
El
storageService
debe tener un método
write
El
statusBar
debe tener un método
styleDefault
El
splashScreen
debe tener un método
hide
En la primera prueba lo que debes esperar es que los métodos
write,
styleDefault
y
hide` sean llamados al crear la instancia del componente.

Diego Forero

Team Platzi•hace 6 años

Cuéntanos que problema te da para poder ayudarte.

Estoy intentando hacer las pruebas de este codigo, pero por mas que intento no consigo solucionarlo. Si alguien puede ayudarme <code>impo...

Curso de Unit Testing para MEAN con Jasmine

Curso de Unit Testing para MEAN con Jasmine