Testing the unit: when subscribing to an observable, the returned value is

Currently, I am working on developing an application with Ionic and Angular. However, I encountered a problem during unit testing where the return value is undefined, even though the app runs correctly.

In my code:

auth.service.ts

login(email: string, password: string) {
return this.http
  .post<AuthResponseData>(
    `https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=${
      environment.firebaseAPIKey
    }`,
    { email: email, password: password }
  ).pipe(tap(this.setUserData.bind(this)));}

auth.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { AuthService } from './auth.service';

let server: AuthService;

describe('AuthService', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [HttpClientTestingModule], 
providers: [AuthService]
}));
beforeEach(() =>  server = TestBed.get(AuthService));

it('fail ', done =>{
const e = 'INVALID_PASSWORD';
let result;
server.login('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a192a3944090507">[email protected]</a>', '987456').subscribe(
    good =>  {
    },
    errRes => {
      result = errRes.error.error.message;
    }
);
expect(result).toEqual(e);
done();
});
});

karma

I am looking for some guidance to resolve this issue =(

Answer №1

Kindly ensure to provide your code directly within the question instead of attaching screenshots, as it makes it easier for others to assist you without having to transcribe the code...

Furthermore, make sure to place the test code INSIDE the error block so that it runs after the observable emits:

errRes => {
   expect(errRes.error.error.message).toEqual(e);
   done();
}

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

Altering the parent component's output depending on a boolean value established in the child component within Angular

Recently I began learning Angular and find myself in need of some assistance when it comes to managing a specific situation with Angular 16. In our project, we have two different versions of the site header represented by two components - one as the defaul ...

Emitting events from a parent component to a child component

In the scenario mentioned above, using (click)="toggleSideBar()" in side-bar.component.ts does not close the sidebar. Is there a solution to this issue? ...

Incorporating HttpClient in the ngOnInit method of Angular allows for the seamless retrieval of JSON data and its conversion into

Whenever I initialize the HttpClient(this.http) to retrieve data in the ngOnInit() method: ngOnInit(): void { this.http.get('http://127.0.0.1:3000/getData').subscribe((data) => { const type = this.route.snapshot.paramMap.get(' ...

Adding a badge to a div in Angular 6: What you need to know!

How can I add a badge to a specific div in Angular 6? I have dynamic div elements in my HTML. I want to increase the counter for a specific div only, rather than increasing it for all divs at once. For example, I have five divs with IDs div1, div2, div3, ...

What could be causing this TypeScript class to not perform as anticipated?

My goal with this code snippet is to achieve the following: Retrieve a template using $.get(...), Attach an event listener to the input element within the template I am using webpack to transpile the code without encountering any issues. The actual cod ...

Setting model value in Angular 2 and 4 from loop index

Is it possible to assign a model value from the current loop index? I've tried, but it doesn't seem to be working. Any suggestions on how to achieve this? Check out this link for my code <p *ngFor="let person of peoples; let i = index;"& ...

Maintain user authentication in Firebase as long as the localStorage object remains active

I am currently working on an app using Ionic, Angular2, and Firebase. My approach involves saving the auth.currentUser information in the localStorage when a user logs in or registers. However, I recently discovered that having the user variable set in th ...

What causes @typescript-eslint to retain old types/files in its cache and prevent successful compilation?

When I kick off my Typescript application using tsc -b -w, I always encounter an issue with @typescript-eslint not reacting to file changes accurately. It flags invalid types/syntax errors where there are none. Restarting the process sometimes doesn't ...

I am attempting to selectively add or remove a line-through style to a single item using Angular

I am facing an issue with my todo list app where I want to apply a line-through style to a specific item only, but currently, the line-through is being applied to all the items in the list instead of just the one I clicked on. HTML <input type="te ...

Collaborating on projects using TypeScript, Node.js, and Angular

Currently, I am in the process of setting up a project that requires an angular client with a minimal node server on the backend using typescript. Ideally, I envision a folder structure as follows: / /dist : Angular client (production) files /server: Nod ...

The 'append' property is not present in the 'Headers' type in Angular 2

import { HttpClient, HttpHeaders } from '@angular/common/http'; export class LoginService { let headers: HttpHeaders = new HttpHeaders(); headers = headers.set('Content-Type', 'application/json'); } I encounter ...

Ways to steer clear of utilizing subscriptions and BehaviorSubject.value through a declarative method within rxjs

As I refactor my Angular application, my goal is to eliminate all subscriptions and rely solely on the async pipe provided by Angular for a declarative approach instead of an imperative one. I encounter difficulties implementing a declarative approach whe ...

Remove the parent component's tag

In my HTML template, I have included a <table> element and inserted a custom-component within one of its rows, as shown below: <table> <thead> .... </thead> <tbody> <tr> <CustomComponent>< ...

Angular application hosted on Apache2 with SSL configured to communicate with a Spring Boot API running on port 8080

After developing a small application using Angular and an API with Spring Boot that includes an embedded Tomcat server, I decided to deploy them on a Raspberry Pi while configuring an SSL certificate with Let's Encrypt. The deployment process involve ...

Exploring Array Iteration in a subscribe and ngOnInit Function

I'm facing a challenge where I need to iterate through an .subscribe() method placed inside an ngOnInit() method: ngOnInit() { this.service.getEmployees().subscribe( (listBooks) => { this.books = listBooks var events: C ...

Managing Multiple Authorizations with Angular 4.3 HttpClient

I am seeking advice on how to utilize HttpClientModule for multiple Authorization scenarios. When using the HttpInterceptor Provider, I am able to implement it for one case only. For example: Api 1 has token A Api 2 has token B Is there a way to configu ...

Is Angular File API Support Compatible with HTML5?

When checking for HTML5 File API browser support in my code: private hasHtml5FileApiSupport; constructor(@Optional() @Inject(DOCUMENT) document: Document) { const w = document.defaultView; this.hasHtml5FileApiSupport = w.File && w.FileReader & ...

Validation is a must in Angular 2

I am facing an issue with the default required validator in angular forms. My form has one input field and a submit button. There are two important files: example.form.ts example.form.template.html Here is my code setup: In the .ts file, I create ...

Is it possible to create an Angular 2 service instance without relying on the constructor method?

I'm struggling to utilize my ApiService class, which handles API requests, in another class. Unfortunately, I am encountering a roadblock as the constructor for ApiService requires an HttpClient parameter. This means I can't simply create a new i ...

Eliminate duplicate dropdown options in Angular 2 using a filter function

Is there a way to filter reporting results in an Angular 2 dropdown list? I am currently attempting to do so within the *ngFor template but haven't had any success. I will also try using a custom pipe. The data is coming from a JSON array. Specificall ...