Testing of the route.data.subscribe() function using Jasmine

I am currently working on a component that includes two methods.

How can I test the ngOnInit() method to ensure that the nameList() method is called with the students parameter?

constructor(route: ActivatedRoute, location: Location) { 
}

ngOnInit() {
    this.route.data
    subscribe((data: { students: Students }) => {
       const students: Students = data.students;
       this.nameList(students);
    });
}

nameList(students: Student) {
  .....
}

Here is what I have come up with so far:

describe('ngOnInit', () => {
    it('should extract data from route', () => {

      component = fixture.componentInstance;

      spyOn(component.route.data, 'subscribe').and.callFake((data: { students: Students }) => { } );
      component.ngOnInit();
      fixture.detectChanges();

      expect(component.nameList).toHaveBeenCalledWith(students);

    });
  });

Answer №1

The key to resolving my issue is to avoid monitoring the route.

I anticipate that the method nameList() was invoked with accurate information.

Therefore, one should directly monitor nameList().

surveillanceOf(element, 'nameList');
element.initialize();

ensure(element.nameList).hasReceived(mockData);

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

Retrieving JSON Information in HTML using Angular 4

Is it possible to retrieve specific data from a JSON file in my HTML using Angular 4's MatCellDef? Specifically, I am interested in accessing the FROM, TO, PERCENT, and SUBTRACT values of the RateBands Array. JSON Data Sample: [ { "year ...

Error encountered during Jasmine unit testing for the ng-redux @select directive

Here is a snippet from my component.ts file: import { Component, OnInit } from '@angular/core'; import { select } from 'ng2-redux'; import { Observable } from 'rxjs/Observable'; import { PersonalDetailsComponent } from ' ...

Displaying the default value in a Material-UI v5 select component

I am looking to display the default value in case nothing has been selected yet for the mui v5 select component below, but currently it appears empty... <StyledCustomDataSelect variant='outlined' labelId='demo-simple- ...

Execute the render function of the components that have been passed as

I've been grappling with a challenge lately - figuring out how to invoke a passed component's render function within another function. Let's say I have two functions named A and B: export const A = (value: any) => { return ( <div& ...

Issue: The Karma plugin in Angular CLI >6.0 is now exported from "@angular-devkit/build-angular" instead

Issue: I'm encountering an error in Angular CLI version 6.0 or higher where the Karma plugin is now exported by "@angular-devkit/build-angular". // Below is the Karma configuration file, you can find more information at // module.exports = function ...

Issue with Bootstrap Angular dropdown menu malfunctioning within ChildRoute

Recently, I have been working on integrating admin bootstrap html with Angular. As part of this integration, I added CSS and JS files in angular.json as shown below: "styles": [ "src/styles.css", "src/assets/goo ...

Is SignalR affected by the CORS same-origin policy?

After enabling CORS in my .NET core app, regular http requests are functioning properly. However, I am encountering CORS issues with SignalR when running my Angular app. Any suggestions or solutions would be greatly appreciated. Thank you in advance. Cros ...

Using a function from one class within another class by passing it as a prop

Below are the methods found in my Search.tsx class. renderSuggestion(suggestion) { <div className="buttons"> <button className="button">View Location</button> <button className="button whitebutton" onClick={this.h ...

Tips for utilizing the onClick handler when mapping through items in React

Currently, I am a student learning about react. During the course of working on a project, I encountered a problem that left me with a question. {pages.map((page, idx) => ( <li key={page.page_id} id={`${idx + 1}`} css={CSSCarouselItem}> < ...

Searching for an Angular 7 alternative to Vue.js's "nextTick" function

In my Angular 7 project, I'm facing a situation where I need to automatically scroll to a specific section on the page after it has been fully rendered. The section is initially hidden using ngif and should only be scrolled to once it is visible in th ...

Why won't Angular 4 create the node_modules folder when using ng new to initialize a new project?

Recently reinstalled Angular and began a new project using ng new. However, I encountered issues when trying to run ng serve after creating the project and changing into its directory. On my Mac Mini, I can simply navigate to the project folder and run ng ...

Discovering all imported dependencies in a TypeScript project: A step-by-step guide

Currently, I am attempting to consolidate external libraries into a vendor bundle through webpack. Instead of manually listing dependencies, I would like to automate this process by scanning all TypeScript files in the directory and generating an array of ...

Encountering a problem with the click handler when trying to log in with Google on

Currently, I am working on integrating social login with Google into my Angular project Below is the relevant HTML code for the login: <button (click)="prepareLoginButton()" #googleSignUp >Login Using Google</button> And here is the ...

Angular application designed to identify the origin of the user

I am managing 3 distinct angular applications, each with its own unique URL. Login application Launcher application Content application Users are required to navigate through the applications in the following sequence: login > launcher > content. W ...

When I apply both `*ngIf` and `*ngFor` to the same element, why does `*ngFor` insert a null item into the array that I am iterating over?

Custom Design, Visualization. Switching from the *ngIf directive to the [hidden] property greatly improves the appearance and eliminates any null items. ...

The term 'BackgroundGeolocationPlugin' is being used as a value in this context, even though it typically represents a type

I am currently working on an application in Ionic and my goal is to incorporate a background-geolocation plugin using npm. In the past, I had no issues with version 2 of the plugin as it allowed me to import it into NgModule seamlessly. However, due to cer ...

Angular 2 Error: Unable to access the property 'value' as it is undefined

Whenever I click on the Submit button, this error pops up in the browser console. https://i.sstatic.net/57a5N.jpg In my application, I am attempting to retrieve information about the code uploaded by a Student. I am at a loss as to why this error is bein ...

Develop customizable enumerations for use in expandable interfaces

Situation: My objective is to devise a strategy for building scalable state machines in TypeScript using the TypeState library. TypeState offers a typesafe state machine for Typescript, which while not directly related to my current issue, serves as a good ...

Deriving values in Typescript based on a subset of a union for conditional typing

Can someone provide assistance with type inference in TypeScript to narrow a union based on a conditional type? Our API validates a set of parameters by normalizing all values for easier processing. One parameter can be either an array of strings or an ar ...

Facing issues while trying to update Angular from version 12 to 13 due to conflicting peer dependencies

I'm in the process of upgrading an Angular project from version 12 to 13, following the guidelines provided on the Angular update website https://update.angular.io/?v=12.0-13.0. Before starting the upgrade procedure, this is how the package.json file ...