Angular 6 Error: Cannot make XHRs from within a fake async test. Request URL: https://mlj0xk2yy.com/latest/static/videos

angular typescript unit-testing karma-jasmine testbed
Sampath picture Sampath · Aug 25, 2018 · Viewed 7.2k times · Source

Can you tell me how to solve this issue?

login.component.spec.ts

 const mockModel = {
        url: 'login',
        model: {
            handle: '[email protected]',
            password: '123456789'
        }
    }

    export class HttpCommonServiceMock {

        public post(url: any, model: any): any { }

    }

describe('LoginComponent', () => {
    let component: LoginComponent;
    let fixture: ComponentFixture<LoginComponent>;

 beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [ReactiveFormsModule, FormsModule, CoreModule, HttpModule],
            declarations: [],
            providers: [
                { provide: APP_BASE_HREF, useValue: '/' },
                { provide: HttpCommonService, useClass: HttpCommonServiceMock },
              ]
        });
     }));

    beforeEach(() => {
        fixture = TestBed.createComponent(LoginComponent);
        component = fixture.componentInstance;
        component.ngOnInit();
    });

 it('should create component', () => {
        expect(component instanceof LoginComponent).toBe(true);//This is working fine
    });

it('a successful login', fakeAsync(() => {//This is NOT working

 let httpCommonService = fixture.debugElement.injector.get(HttpCommonService);

        let httpCommonResponse = {
            isValid: true
        };

        spyOn(httpCommonService,'post').and.returnValue(of(httpCommonResponse));

        component.login(mockModel.model);

        tick();

        expect(httpCommonResponse).toBe(true);
    }));


});

login.component.ts

@Component({
  selector: "login",
  templateUrl: "./login.component.html"
})
export class LoginComponent implements OnInit {
  form: FormGroup;
  message: string;
  constructor(private fb: FormBuilder,
    private router: Router,
    private notification: SiteNotificationService,
    private session: UserSessionService,
    private httpCommonService: HttpCommonService,
    private getStaticComponent: GetStaticComponent
  ) { }

  ngOnInit() {
    if (!isDevMode()) Mixpanel.trackEvent("View Screen", { "Screen Name": "Login" });
    if (this.session.isActive()) {
      this.router.navigate(["my-invites"], { replaceUrl: true });
    }
    this.createForm();
  }

  //create Form
  createForm() {
    this.form = this.fb.group({
      handle: ["", Validators.compose([Validators.required, Validators.pattern(RegexValidators.email)])],
      password: ["", Validators.required]
    });
  }

  //login
  login(model) {
    this.httpCommonService.post("login", model).subscribe(
      response => {
        const tokenData = { user: model.handle, token: response.token };
        this.session.store("Session", tokenData);
        this.getStaticComponent.getStaticContent();
        this.httpCommonService.get("mydownline").subscribe(response => {
          localStorage.setItem("mydownline", JSON.stringify(response));
        });
        Mixpanel.trackEvent("Login");
        Mixpanel.identifyPerson(response.token);
        if (!response.isLocationSet || (response.profilePicUrl && response.profilePicUrl.slice(0, 6) === "assets")) {
          this.router.navigate(["accounts"], { replaceUrl: true });
          this.notification.showInfo("Please upload your profile pic and add your location.");
        } else if (!response.isLocationSet) {
          this.router.navigate(["accounts"], { replaceUrl: true });
          this.notification.showInfo("Please add your location");
        } else if (!response.profilePicUrl || response.profilePicUrl.slice(0, 6) === "assets") {
          this.router.navigate(["accounts"], { replaceUrl: true });
          this.notification.showInfo("Please upload your profile pic");
        } else {
          let redirectPage = localStorage.getItem("redirectPage");
          if (!redirectPage) redirectPage = "my-invites";
          this.router.navigate([redirectPage], { replaceUrl: true });
        }
      },
      err => {
        if (err.error) {
          this.notification.showError(err.error.reason);
        }
        this.createForm();
      }
    );
  }
}

httpcommon.service.ts

@Injectable()
export class HttpCommonService {
    appUrl: string;
    options: any;
    headers;
    requestOptions;
    constructor(
        private commonServiceProvider: CommonServiceProvider,
        private http: HttpClient) {
        this.appUrl = environment.baseApiUrl;
    }

    //post
    post(url: any, model: any): Observable<any> {
        return this.http.post(this.appUrl + url, model);
    }
}

Error:

Error: Cannot make XHRs from within a fake async test. Request URL: https://mlj0xk2naws.com/latest/static/videos
    at FakeAsyncTestZoneSpec.push../node_modules/zone.js/dist/fake-async-test.js.FakeAsyncTestZoneSpec.onScheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/fake-async-test.js:434:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onScheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/proxy.js:144:1)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:401:1)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:232:1)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:255:1)
    at scheduleMacroTaskWithCurrentZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1114:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:3001:1
    at XMLHttpRequest.proto.(anonymous function) (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:1394:1)
    at XMLHttpRequest.send (http://localhost:9876/_karma_webpack_/webpack:/node_modules/raven-js/src/raven.js:1423:1)
    at Observable._subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/common/fesm5/http.js:1639:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:42:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:28:1)
    at DoOperator.push../node_modules/rxjs/_esm5/internal/operators/tap.js.DoOperator.call (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/tap.js:18:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:23:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/util/subscribeTo.js:21:1
    at subscribeToResult (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/util/subscribeToResult.js:6:1)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:70:1)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:67:1)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:50:1)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:54:1)
    at Observable._subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/observable/scalar.js:5:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:42:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:28:1)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/mergeMap.js:28:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:23:1)
    at FilterOperator.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/filter.js:15:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:23:1)
    at GetStaticComponent../src/app/services/static-video/get-static-component.service.ts.GetStaticComponent.getStaticContent (http://localhost:9876/_karma_webpack_/webpack:/src/app/services/static-video/get-static-component.service.ts:26:18)
    at SafeSubscriber._next (http://localhost:9876/_karma_webpack_/webpack:/src/app/login/login.component.ts:48:33)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:195:1)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:133:1)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:77:1)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:54:1)
    at Observable._subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/observable/scalar.js:5:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:42:1)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Observable.js:28:1)
    at LoginComponent../src/app/login/login.component.ts.LoginComponent.login (http://localhost:9876/_karma_webpack_/webpack:/src/app/login/login.component.ts:44:49)
    at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/login/login.component.spec.ts:207:19)
    at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/fake-async-test.js:593:1)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:388:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/proxy.js:128:1)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:387:1)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:138:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/jasmine-patch.js:145:1)
    at Object.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/jasmine-patch.js:160:1)
    at attemptSync (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:3898:24)
    at ZoneQueueRunner.QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:3887:9)
    at http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:3924:18
    at http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:3848:9
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/async-test.js:218:1

Answer

jiali passion picture jiali passion · Aug 25, 2018

fakeAsyncTest not support XHR, because it is not a time sensitive task, you need to use Mock Http such as Angular HttpTestController to test XHR. Or if you want to test the real XHR (which I think in the most case you should not), you need to use jasmine done.

Related questions

Unit Testing/mocking Window properties in Angular2 (TypeScript)

I'm building some unit tests for a service in Angular2. Within my Service I have the following code: var hash: string; hash = this.window.location.hash; However when I run a test which contains this code, it will fail. It'd …

Read More
How to change value of a select box in angular2 unit test?

I have an Angular2 component that contains a select box that looks like <select [(ngModel)]="envFilter" class="form-control" name="envSelector" (ngModelChange)="onChangeFilter($event)"> <option *ngFor="let env of envs" [ngValue]="env">{{env}}</option> </…

Read More
ngx-translate: Translate string in Unit Testing

I can get the value if it's a static test, but whenever I'm trying to get the translated value (using ngx-translate), it's empty. <div id="header-title"> <h1>{{ 'MENU_TITLE' | translate | uppercase }}</h1> </div&…

Read More