2017-07-21 1 views
0

Je construis ma première application Ionic et je m'efforce de suivre TDD. J'ai heurté une pierre d'achoppement avec la promesse Platform.ready que fournit Ionic. Je ne peux pas, pour la vie de moi, comprendre comment le déclencher pendant les tests. Dans les démos ioniques, il apparaît dans la fonction initializeApp comme ceci:Comment déclencher Ionic's Platform.ready en test?

initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     this.statusBar.styleDefault(); 
     this.splashScreen.hide(); 
    }); 
} 

Dans un test simple Je vérifie pour voir si la méthode styleDefault de statusBar a été appelé, mais je dois encore comprendre comment déclencher platform.ready pour résoudre. EDIT: Incluant l'ensemble du fichier de test pour éviter les questions sur ce qui est ou non dans le fichier.

import { async, TestBed } from '@angular/core/testing'; 
import { IonicModule } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { SplashScreenMock as SplashScreen, StatusBarMock as StatusBar, PlatformMock as Platform } from '../../test-config/mocks-ionic'; 
import { LoginPageMock as LoginPage } from "../../test-config/custom-mocks/login.mock" 

describe('App Component',() => { 
    let fixture, component, SB; 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations:[MyApp, LoginPage], 
      imports: [IonicModule.forRoot(MyApp)], 
      providers :[StatusBar, SplashScreen, Platform] 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(MyApp); 
     SB = TestBed.get(StatusBar); 
     spyOn(SB, 'styleDefault').and.callThrough(); 
     component = fixture.componentInstance; 
    }); 

    describe('general status before initialization',() => { 
     it('should be defined',() => { 
     expect(component).toBeDefined(); 
     }); 

     it('should be created',() => { 
      expect(component instanceof MyApp).toBe(true); 
     }); 

     it('should have a populated pages array',() => { 
      expect(component.pages.length).toBeGreaterThan(0); 
     }); 
    }); 

    describe('general status after initialization',() => { 
     it('should style the statusbar when the app is initialized', async((done) => { 
      component.initializeApp(); 
      expect(SB.styleDefault).toHaveBeenCalled(); 
      done(); 
     })); 
    }); 
}); 

Je suis probablement le tenant mal, ou peut-être même ne sais pas ce que je suis maintenant, mais à ce moment je ne sais pas ce qui est faux. Toutes les options seront considérées, et toute l'aide sera appréciée.

NOTE: Oui, j'ai essayé de mettre fixture.detectChanges() et/ou fixture.autoDetectChanges(true) et j'obtiens une erreur sur un rejet de promesse non géré et aucun facteur de composant trouvé pour LoginPage. J'essaie toujours de corriger cette erreur, mais je ne suis pas sûr que cela ait quelque chose à voir avec la résolution de la promesse. Si vous avez une solution pour ce petit hoquet, je serais heureux de le voir aussi.

Répondre

0

Je suis assez nouveau à cela aussi. J'ai pris des notes et je n'ai pas encore essayé.

import {TestBed, async, ComponentFixture} from '@angular/core/testing'; 
import {AppComponent} from './app.component'; 
import {TestComponent} from './test.component'; 
import {DebugElement} from '@angular/core'; 
import {By} from '@angular/platform-browser'; 

describe('AppComponent',() => { 

Vous devez avoir deux préambules beforeeach:

beforeEach(
    async(() => { 
    TestBed.ConfigureTestingModule({ 
     declarations: [ 
     ], 
     }).compileComponents(); 
    }) 
); 

Alors quelque chose comme:

beforeEach(() => { 
    fixture = TestBed.createComponent(AppComponent); 
    component = fixture.debugElement.componentInstance; 
    el = fixture.debugElement; 
    const testField = el.query(By.css('<myCSSFilter>')); 

    fixture.detectChanges(); //Force content projection 
}); 

Si un test échoue, vous pouvez la console LOGGUE.
Ne pas forcer La projection de contenu peut parfois vous faire trébucher.

if('<your test here>', async(() => { 
    console.log(testField.nativeElement.outerHTML); 
    expect(testField).query(By.css('<your filter here>'))).toBeTruthy(); 
})); 

-

}); 

- Permettez-moi de savoir si cela aide ..

PS .. IIRC Yor besoin premier Async beforeeach, car si async à travailler. C'est un autre gotcha commun.

+0

Désolé, mais non, cela n'aide pas et n'aborde pas le sujet de la question principale de la façon de provoquer la promesse de résoudre. Normalement, passer 'done', puis l'appeler le fait, mais pour une raison ou pour une autre, c'est ce qu'il ne fait pas. – MBielski

+0

Vous avez l'async dans votre beforeEach? et fixture.detectChanges()? – JGFMK

+0

J'ai laissé de côté la majeure partie de la configuration de test parce que c'est hors de propos, mais oui, mon premier beforeEach ressemble beaucoup au tien. L'utilisation de fixture.detectChanges sert à vérifier les modifications de l'interface utilisateur, et ce n'est pas ce que j'essaie de faire. Si je peux détecter cette méthode, je peux en détecter d'autres et je saurai que mon application fonctionne correctement, mais je ne peux même pas détecter celle-ci. – MBielski