Angular 6 encountered an error: It is unable to perform XHR requests during a simulated asynchronous test. The specific URL causing the issue is https://mlj0xk2yy.com/latest/static

Could you please guide me on resolving this particular issue?

login.component.spec.ts

 const mockModel = {
        url: 'login',
        model: {
            handle: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9aeeffe9eedaeeffe9eeb4f9f5f7">[email protected]</a>',
            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('successfully logging in', 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...

Answer №1

Test with fakeAsyncTest does not support XMLHttpRequests (XHR) because it is not considered a time-critical task. To test XHR, you should use Mock HTTP libraries like Angular's HttpTestController. If you need to test the actual XHR behavior (which is usually not recommended), you can use Jasmine's done function.

Answer №2

This solution has been effective for me.

 it('testing a successful login functionality', () => {
        let httpCommonService = fixture.debugElement.injector.get(HttpCommonService);
        let httpCommonResponse = {
            isValid: true
        };
        spyService = spyOn(httpCommonService, 'post').and.callFake(() => {
            return of(httpCommonResponse);
        });
        component.login(mockModel.model);
        expect(spyService).toHaveBeenCalledTimes(1);
    });

Answer №3

Insight into Angular 6+ problem-solving.

To tackle the issue with Angular 6+, utilizing Interceptors is essential. Developing a service that implements HttpInterceptor and overriding the 'intercept' method is pivotal, ensuring it returns an Observer with any desired value.

Encountering the same issue myself, my approach was as follows:

@Injectable()
class TestHttpRequestInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler):
        Observable<HttpEvent<any>> {
            return new Observable<any>(observer => {
                observer.next({} as HttpEvent<any>);
            });
    }
}

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [SharedModule, RouterTestingModule,
            StoreModule.forRoot(fromReducers.reducer))
        ],
        declarations: [],
        providers: [
            LocalStorageService, 
            {
                provide: HTTP_INTERCEPTORS, useClass: TestHttpRequestInterceptor, multi: true
            }
        ],
        schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
    })
    .compileComponents();
}));

Hopefully, this code snippet proves helpful in addressing similar issues.

This response was originally shared on Cannot make XHRs from within a fake async test (initially posted in the wrong tab).

Answer №4

To enhance your fakeAsync testing, make sure to include the tick() function and experiment with increasing the timer duration in the tick function to verify its functionality (e.g., tick(15000) for 15 seconds).

For more information, check out this helpful reference.

Answer №5

fakeAsyncTest does not handle XHR requests as it is not designed to manage time-sensitive tasks.

To resolve this issue, you will need to eliminate the usage of fakeAsync and tick(). The function tick() is specifically meant for use with fakeAsync.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on Implementing satellite.js in an Angular 8 Application

Looking to incorporate the SGP4/SDP4 calculations from the satellite.js library in order to convert a TLE String and generate a Satellite Orbit map. Question is, what's the best way to integrate this library into my project? Tried installing satel ...

Developing a Location instance with TypeScript

Struggling with redirecting my app outside of Angular to the logout page. I've tried using $window.location.href, but it doesn't work in Firefox. Someone recommended using $window.location directly, but I'm writing in TypeScript so I need t ...

Encountered an issue while saving a blob in NativeScript: "Unable to convert object to [B at index

I have a Nativescript Angular application that is downloading a PDF from a Rails server in Blob Uint8Array format. When I attempt to save it, I encounter the following error: JS: /data/user/0/com.asset.management/files/result.pdf JS: ERROR Error: Uncaught ...

Issues with Angular2 Router functionality not functioning as expected

I have been facing an issue while trying to set up a basic Angular2 application with login functionality using Typescript. Despite defining the Router, I encounter an error when trying to access the specified URL in a browser. The error message reads: Can ...

What is the best approach for handling a type that must be initialized as an empty object prior to making http requests?

Here is a scenario where I have a specific type defined: export type User = { id: string [prop: string]: any } I would like this type to also be able to store an empty object. However, when I attempt to do so like this: const user: User = {} I encou ...

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

Setting up Angular2 webpack to run behind a reverse proxy on a subpath

I am looking to configure angular2-webpack-starter behind an Apache reverse proxy with URLs starting with a fixed prefix like /angular2-webpack-starter/. I came across this setting: output: { publicPath:"angular2-webpack-starter", ... Is this the cor ...

What are some effective methods for troubleshooting unidentified JavaScript functions within Chrome's performance analyzer?

Currently, I am utilizing Angular 4 and incorporating numerous anonymous arrow functions (() => {}). I am curious if it is feasible to identify these functions in Chrome's performance analyzer without assigning them names. Below is an example of t ...

Disrupting methods on a dependency within QUnit can cause tests against that dependency to fail

Currently, in my Google Apps Script project, I am unit-testing an application using QUnit for test-driven development purposes. Code Under Test The function I am currently focusing on testing and developing is the creation of a Sheet from a long string o ...

Varied perspectives for Angular on Desktop versus mobile devices

In my current project, I'm creating an application that requires two completely different views for Desktop and Mobile. Due to the entirely different content, using CSS alone is not an option. What steps have been taken so far? I've checked whe ...

The speed of Nuxt build on Mac with M1 Chip is unacceptably slow

I'm having issues with the build speed of my Nuxt project on my new M1 chip Machine(Mac). The compilation process is taking too long. I have installed nodenv into my project and I am using version v12.9.0. The package manager (npm/yarn) in the projec ...

Tips for incorporating a mesh into Forge Viewer v6 with Typescript

Is there a way to add meshes to Forge Viewer v6 using Type script? I've tried various methods that worked with v4, but I'm encountering issues now. private wallGeometry: THREE.BoxBufferGeometry; drawWalls() { ...

Having trouble creating two bar charts with different data sets in ng2-charts using Angular 8

I attempted to display two charts simultaneously on a single page by utilizing the following code in HTTP: <div class="chk-block-content"> <canvas height="100" width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options ...

Getting a pdf error while loading in angular application?

I need to add a link to my application that, when clicked, will download a PDF file stored in the assets folder. However, after clicking the link and downloading the PDF, I am encountering the following error upon trying to open it: Failed to load pdf ...

Guide on Sending Cognito JWT Token through HttpInterceptor in Angular

I am currently utilizing Cognito for user login and authentication in my application. Here is the code snippet for user authentication: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import Amplify, ...

Storing a reference globally in React and Typescript: Best practices

In my application, I have multiple instances of a specific component called <Item>. Each <Item> needs to display a dynamic tooltip when hovered over. To achieve this, I am utilizing semantic-ui-react and its Popup component. The conventional m ...

How do I assign a default value to an optional parameter in a derived class in Typescript?

One of my classes is called ClientBase: export class ClientBase { constructor(private uri: string, private httpClient: HttpClient) { } // Contains Various Methods } I have multiple subclasses that are derived from the ClientBase For instance: @I ...

The Primeng ConfirmDialog does not close when either the Yes, No, or Close(X) buttons are clicked

When using the PrimeNg ConfirmDialog (p-confirmDialog) in a P-table to delete a record, I am experiencing an issue where the confirm dialog does not close after clicking Yes/No/close(X). Below is the method that I am calling when clicking on delete: conf ...

npm WARNING: The package @angular-devkit/[email protected] is in need of a peer dependency xxxx, however no installation for this dependency has

Attempting to launch an angular project and encountering the following errors: $ npm install npm WARN @angular-devkit/[email protected] requires a peer of @angular/compiler-cli@^14.0.0 but none is installed. You must install peer dependencies yoursel ...

Using the Promise function with callback to map the JSON payload object into an object

I received a JSON payload with the following structure: { "name": "Reports", "subject": "Monthly Reports", "attachments":[ { "attachment":{ "name": "Month1.pdf", "type": "application/pdf", "path": "h ...