Как проверить функцию в жасмине -- javascript поле с участием angular поле с участием testing поле с участием jasmine пол Связанный проблема

how to test a function in jasmine


0
vote

проблема

русский

Может кто-нибудь помочь мне, пожалуйста? Я пытаюсь проверить функцию, которая вызывает функции FireBase, но когда я вызываю основную функцию и начните управлять функциями FireBase, я получил ошибку

 <код> err TypeError: Cannot read property 'emailPasswordLoginAsPromise' of null   

Я не знаю, что происходит, следуйте моим коде:

 <Код> fdescribe('UserLoginContentComponent', () => {    let component: UserLoginContentComponent;    let fixture: ComponentFixture<UserLoginContentComponent>;    let loginComponent = new UserLoginContentComponent(null,null,null,null,null,null,null);        beforeAll(      async(() => {        TestBed.configureTestingModule({          imports: [            SharedModule,            AngularFireModule.initializeApp(environment.firebase),            RouterTestingModule,            BrowserAnimationsModule          ],          declarations: [UserLoginContentComponent],          providers: [             AuthService,            AngularFireAuth,            AngularFirestore,            LogService,            LogPublishersService,            HttpClient,            HttpHandler          ]        }).compileComponents();          fixture = TestBed.createComponent(UserLoginContentComponent);        component = fixture.componentInstance;        fixture.detectChanges();          spyOn(loginComponent, 'onSubmit').and.callThrough();        loginComponent.loginModel.email = 'correct email';        loginComponent.loginModel.password = 'correct password';      })    );      it('component should be create', () => {      expect(component).toBeTruthy();    });      it('Correct login',function(){      loginComponent.onSubmit().then((x) => {        console.log('ok:',x)        //expect something ..      }).catch((err) => {        console.log('err',err)      })    });        });  

Моя функция, которую я звоню:

 <Код> onSubmit() {      //i'm setting my loginModel in the test with email and password      console.log('this.loginModel',this.loginModel)        return new Promise((res,rej) => {        this.authService.emailPasswordLoginAsPromise(this.loginModel).then(userCredential => {        // do something..          this.authService.createOrUpdateUserDataFirestore(userCredential, null, avaliacaoChecklist, null, null).then(s =>           //updating my user or create one          }).catch(e => {            //catch if this doesn't update or create            });          });          res('login OK')        }).catch(e => {          //open a diaglog if happen something wrong...          rej('login Fail')        });      })    }  

в моем authService, мой эмаиллогинаспромисс такой:

 <Код>   emailPasswordLoginAsPromise(login) {        return new Promise((resolveEPL, rejectEPL) => {          this.angularFireAuth.auth.signInWithEmailAndPassword(login.email, login.password)          .then(credential => {            this.updateUserWithAuth(credential.user);            resolveEPL(credential.user);          }).catch(e => {            console.error('emailPasswordLogin', e);            rejectEPL(e);          });      });    }  

Это мой первый раз с тестированием жасмина, я изучал, но я не знаю, как я могу решить эту проблему, как позвонить Async Func и получить возврат.

Английский оригинал

can anyone help me please? I'm trying to test a function that call a firebase functions, but when I call the main function and start to run a firebase functions, I got a error

err TypeError: Cannot read property 'emailPasswordLoginAsPromise' of null 

i don't know what is happen, follow my code:

fdescribe('UserLoginContentComponent', () => {    let component: UserLoginContentComponent;    let fixture: ComponentFixture<UserLoginContentComponent>;    let loginComponent = new UserLoginContentComponent(null,null,null,null,null,null,null);        beforeAll(      async(() => {        TestBed.configureTestingModule({          imports: [            SharedModule,            AngularFireModule.initializeApp(environment.firebase),            RouterTestingModule,            BrowserAnimationsModule          ],          declarations: [UserLoginContentComponent],          providers: [             AuthService,            AngularFireAuth,            AngularFirestore,            LogService,            LogPublishersService,            HttpClient,            HttpHandler          ]        }).compileComponents();          fixture = TestBed.createComponent(UserLoginContentComponent);        component = fixture.componentInstance;        fixture.detectChanges();          spyOn(loginComponent, 'onSubmit').and.callThrough();        loginComponent.loginModel.email = 'correct email';        loginComponent.loginModel.password = 'correct password';      })    );      it('component should be create', () => {      expect(component).toBeTruthy();    });      it('Correct login',function(){      loginComponent.onSubmit().then((x) => {        console.log('ok:',x)        //expect something ..      }).catch((err) => {        console.log('err',err)      })    });        });

my Function that I'm calling:

onSubmit() {      //i'm setting my loginModel in the test with email and password      console.log('this.loginModel',this.loginModel)        return new Promise((res,rej) => {        this.authService.emailPasswordLoginAsPromise(this.loginModel).then(userCredential => {        // do something..          this.authService.createOrUpdateUserDataFirestore(userCredential, null, avaliacaoChecklist, null, null).then(s =>           //updating my user or create one          }).catch(e => {            //catch if this doesn't update or create            });          });          res('login OK')        }).catch(e => {          //open a diaglog if happen something wrong...          rej('login Fail')        });      })    }

in my authService, my emailloginasPromise is like that :

  emailPasswordLoginAsPromise(login) {        return new Promise((resolveEPL, rejectEPL) => {          this.angularFireAuth.auth.signInWithEmailAndPassword(login.email, login.password)          .then(credential => {            this.updateUserWithAuth(credential.user);            resolveEPL(credential.user);          }).catch(e => {            console.error('emailPasswordLogin', e);            rejectEPL(e);          });      });    }

it's my first time with testing jasmine, I studied, but i don't know how I can solve this problem, how call a async func and getting the return.

</div
           
       
       

Список ответов

1
 
vote
vote
Лучший ответ
 

Я основал проблему, следуйте за исправлением:

authService не предоставляет, когда я создаю позицию моего класса, поэтому теперь я использую компонент:

 <код> component = fixture.componentInstance;   

с этим компонентом теперь я звоню моим методом, и все провайдеры работают.

Следуй за моим описанием:

 <Код> import { ComponentFixture, TestBed } from '@angular/core/testing';  import { SharedModule } from '../../shared/shared.module';  import { UserLoginContentComponent } from './user-login-content.component';  import { AngularFireModule } from '@angular/fire';  import { environment } from 'src/environments/environment';  import { RouterTestingModule } from '@angular/router/testing';  import { AuthService } from 'src/app/core';  import { AngularFireAuth } from '@angular/fire/auth';  import { AngularFirestore } from '@angular/fire/firestore';  import { LogService } from 'src/app/shared/logger/log.service';  import { LogPublishersService } from 'src/app/shared/logger/log-publishers.service';  import { HttpClient, HttpHandler } from '@angular/common/http';  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    fdescribe('UserLoginContentComponent', () => {    let component: UserLoginContentComponent;    let fixture: ComponentFixture<UserLoginContentComponent>;        beforeAll(function(){        TestBed.configureTestingModule({          imports: [            SharedModule,            AngularFireModule.initializeApp(environment.firebase),            RouterTestingModule,            BrowserAnimationsModule          ],          declarations: [UserLoginContentComponent],          providers: [             AuthService,            AngularFireAuth,            AngularFirestore,            LogService,            LogPublishersService,            HttpClient,            HttpHandler          ]        }).compileComponents();          fixture = TestBed.createComponent(UserLoginContentComponent);        component = fixture.componentInstance;        fixture.detectChanges();        });        });  

и как проверить этот компонент?

Я использую следующие тесты:

 <Код> it('COrrect login',(async(done) => {      component.loginModel.email = 'correctemail@gmail.com';      component.loginModel.password = 'correctpassword';        await component.onSubmitTest().then((x) => {        expect(x).toBe('login OK');      });      done();    }));        it('Wrong login (email)',(async(done) => {      component.loginModel.email = 'wrongemail@gmail.com';      component.loginModel.password = 'correctpassword';        await component.onSubmitTest().then(() => {})      .catch((err) => {        expect(err).toBe('login Fail');      })      done();    }));  

Мой класс Следуйте:

 <Код> onSubmitTest() {      return new Promise((res,rej) => {        this.authService.emailPasswordLoginAsPromise(this.loginModel).then(() => {          res('login OK')        }).catch(e => {          rej('login Fail')        });      })    }  

и мой authсервис:

 <Код> emailPasswordLoginAsPromise(login) {        return new Promise((resolveEPL, rejectEPL) => {          this.angularFireAuth.auth.signInWithEmailAndPassword(login.email, login.password)          .then(credential => {            resolveEPL(credential.user);          }).catch(e => {            rejectEPL(e);          });      });    }  

А теперь все мои тестирования работают с асинхронным методом с методами FireBase

 

i founded the problem, follow the fix:

The authService isn't provide when i'm creating a stance of my class, so now i'm using the component:

component = fixture.componentInstance; 

with this component now I'm calling my method and all providers is working.

Follow my describe:

import { ComponentFixture, TestBed } from '@angular/core/testing';  import { SharedModule } from '../../shared/shared.module';  import { UserLoginContentComponent } from './user-login-content.component';  import { AngularFireModule } from '@angular/fire';  import { environment } from 'src/environments/environment';  import { RouterTestingModule } from '@angular/router/testing';  import { AuthService } from 'src/app/core';  import { AngularFireAuth } from '@angular/fire/auth';  import { AngularFirestore } from '@angular/fire/firestore';  import { LogService } from 'src/app/shared/logger/log.service';  import { LogPublishersService } from 'src/app/shared/logger/log-publishers.service';  import { HttpClient, HttpHandler } from '@angular/common/http';  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    fdescribe('UserLoginContentComponent', () => {    let component: UserLoginContentComponent;    let fixture: ComponentFixture<UserLoginContentComponent>;        beforeAll(function(){        TestBed.configureTestingModule({          imports: [            SharedModule,            AngularFireModule.initializeApp(environment.firebase),            RouterTestingModule,            BrowserAnimationsModule          ],          declarations: [UserLoginContentComponent],          providers: [             AuthService,            AngularFireAuth,            AngularFirestore,            LogService,            LogPublishersService,            HttpClient,            HttpHandler          ]        }).compileComponents();          fixture = TestBed.createComponent(UserLoginContentComponent);        component = fixture.componentInstance;        fixture.detectChanges();        });        });

and how to test this component?

I'm using the follow tests:

it('COrrect login',(async(done) => {      component.loginModel.email = 'correctemail@gmail.com';      component.loginModel.password = 'correctpassword';        await component.onSubmitTest().then((x) => {        expect(x).toBe('login OK');      });      done();    }));        it('Wrong login (email)',(async(done) => {      component.loginModel.email = 'wrongemail@gmail.com';      component.loginModel.password = 'correctpassword';        await component.onSubmitTest().then(() => {})      .catch((err) => {        expect(err).toBe('login Fail');      })      done();    }));

My class follow:

onSubmitTest() {      return new Promise((res,rej) => {        this.authService.emailPasswordLoginAsPromise(this.loginModel).then(() => {          res('login OK')        }).catch(e => {          rej('login Fail')        });      })    }

and my authService:

emailPasswordLoginAsPromise(login) {        return new Promise((resolveEPL, rejectEPL) => {          this.angularFireAuth.auth.signInWithEmailAndPassword(login.email, login.password)          .then(credential => {            resolveEPL(credential.user);          }).catch(e => {            rejectEPL(e);          });      });    }

And now all my testing is working with asynchronous method with firebase methods

</div
 
 

Связанный проблема

11  Rx JS понимает метод подъема  ( Rx js understanding the lift method ) 
Я хочу создать новый оператор, и я нахожу в Документация То, что один из способов сделать что-то подобное: <код> class MyObservable extends Observable { ...

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...

0  Нужен React Router Pro, чтобы помочь мне  ( Need a react router pro to help me ) 
Итак, сегодня я играл с маршрутизатором RACT и попытался изменить это Пример . Я хочу достичь этого: . Боковой NAV отображает только имена Когда пол...

3  Как реализовать автономный компонент в React Redux?  ( How to implement a self contained component in react redux ) 
Я создаю базу файлового менеджера Webui основы на React Redux (моя цель - это управлять React и Redux через этот проект) Как вы знаете, файловый менеджер ну...

21  Angularjs NG-модель внутри NG-Repeat имеет плохую производительность  ( Angularjs ng model inside ng repeat has poor performance ) 
У меня проблема с производительностью с угловой в следующем сценарии: <код> <div ng-repeat="a in array"> <input ng-model="something"> </div> Я писал к...

3  Рисование круга с помощью кинетических js  ( Drawing a circle using kinetic js ) 
Я пытаюсь построить очень базовую покраску, используя каркас kinetic JS. Все все идут хорошо, пока не попытался включить функцию формы, которая позволяет поль...

0  Запустить функцию JavaScript с использованием C #  ( Trigger javascript function using c sharp ) 
Я должен написать класс C #, который получает содержимое HTML-страницы (страница публичная) и запускает функцию JavaScript, которая загружает файл. Моя цель...

0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild]  ( Jquery slider throwing error could not convert javascript argument arg 0 ns ) 
Наш сайт Dev Dev имеет ползунок отлично работает здесь: http://allblacks.01dev.co.nz/index.cfm layout = dnahome Однако мы просто поставили сайт Live, и ...

12  Синтаксисная ошибка в видом на бритву при прохождении свойств модели в качестве параметров на функцию JavaScript  ( Syntax error in razor view when passing model properties as parameters to javasc ) 
Я получаю <код> Syntax error на каждой запятой (<код> , ) и на последнем кронштейне (<код> ) ) в следующем коде: <код> <script type="text/javascript"> ...

5  Экспорт SVG в PDF в автономном TideSDK WebApp  ( Exporting svg to pdf in a offline tidesdk webapp ) 
У меня есть приложение Offline HTML5 / CSS / JS, построенное с TIDESDK, в котором гистограмма нарисована с HighCharts в качестве SVG «Tag», используя данные, ...

1  Обработка ошибок METEOR для шаблона именования ошибок опечатки  ( Meteor error handling for template naming typo errors ) 
Недавно у меня была ошибка с именем, используемым в файле помощников. Поскольку используемое имя шаблона было недействительным, все мои глобальные помощники п...

1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки  ( Angular js validation function returns before the api call for validation is com ) 
<код> if (!validate()) { return; }; function validate() { var nameIsValid = ...

0  Попытка вернуть массив объектов для просмотра, получить «10 $ digest () итераций  ( Trying to return array of objects to view get 10 digest iterations reached ) 
Я пытаюсь создать токенизатор, где пользователь вводится в форматную строку, а пользовательский интерфейс дает им предварительный просмотр анализатора. Когда ...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...

3  Angularjs: Как активировать первый ненулевой элемент в Ngrepeat?  ( Angularjs how to activate first non zero item in ngrepeat ) 
для объекта, такого как <код> notification: { "text":0, "image":2, "video":0 } У меня есть <код> ng-repeat ввиду <код> <div ng-repeat="items...

Связанный проблема

11  Rx JS понимает метод подъема 
1  jquery адрес плагин 
0  Нужен React Router Pro, чтобы помочь мне 
3  Как реализовать автономный компонент в React Redux? 
21  Angularjs NG-модель внутри NG-Repeat имеет плохую производительность 
3  Рисование круга с помощью кинетических js 
0  Запустить функцию JavaScript с использованием C # 
0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild] 
12  Синтаксисная ошибка в видом на бритву при прохождении свойств модели в качестве параметров на функцию JavaScript 
5  Экспорт SVG в PDF в автономном TideSDK WebApp 
1  Обработка ошибок METEOR для шаблона именования ошибок опечатки 
1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки 
0  Попытка вернуть массив объектов для просмотра, получить «10 $ digest () итераций 
0  Почему это работает над сафари и Firefox, но не на хроме? 
3  Angularjs: Как активировать первый ненулевой элемент в Ngrepeat?