Struggling to properly test the functionality of my NgForm call in Angular2+

I've been trying to test the login functionality by inputting username and password in an NgForm, but I keep encountering unsuccessful attempts. Is there a vital step that I may be overlooking?

Currently, I'm facing this error message:

Chrome 67.0.3396 (Mac OS X 10.13.5) LoginComponent should call auth.login when passed a valid form with correct credentials onSubmit FAILED
    Expected spy login to have been called.
        at UserContext.<anonymous> src/app/components/login/login.component.spec.ts:87:26)
        at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)
        at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke node_modules/zone.js/dist/zone-testing.js:288:1)
        at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:387:1)
javascriptangulartypescriptangularjs-ng-form

Answer №1

With valuable assistance from @trichetriche, I discovered a solution that involved ensuring my spyOn function had a return value.

Additionally, it was necessary to include the valid: true option in the NgForm json that would be passed:

const validFormGoodCreds = <NgForm>{
    valid: true,
    value: {
      username: "someUsername",
      password: "somePassword"
    }
  };

Since my focus was solely on verifying whether the function was called or not, rather than what it returned, I decided to modify the following line:

authLoginSpy = spyOn(component['authService'], 'login');

to 

authLoginSpy = spyOn(component['authService'], 'login').and.callThrough();

This change ensured that the function would run completely, allowing it to reach the call to login().

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

"Exploring the World of Android WebView with JavaScript

My app has a minimum API of 16, and I need to run some javascript on a web view. However, when I try to use mWebView.evaluateJavascript("(function()...)"); I receive a compile error indicating that this feature is only available in API 19 and higher. Ho ...

javajavascriptandroidwebview

The code to trigger the button with the ID 'Button' using Document.getElementById() is not executing the associated code-behind

Having just started coding in javascript/VB.NET, I am struggling to get my Button2 onClick event to work properly. The Code-Behind Click Event for Button1 in Page.aspx.vb: Protected Sub _lnbComments_Click(ByVal sender As Object, ByVal e As System.EventAr ...

javascriptasp.netvb.net

Display information retrieved from a PHP request on an AngularJS webpage

I could really use some assistance upfront! I am facing issues with displaying the data retrieved from PHP on an AngularJS website. I have reviewed previous discussions on this topic, but unfortunately, none of them have proven helpful. From what I can te ...

javascriptphpangularjs

Eslint is actively monitoring files specified in the eslintignore to ensure they meet the set

I am currently working on a TypeScript project that is bundled by Webpack. I want to integrate Eslint into the project, but I have encountered an issue where Eslint watches compiled files even if they are listed in the .eslintignore file. .eslintignore: . ...

javascripttypescriptwebpackeslint

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

javascripthtmlangularjsradio-button

Explore the intricacies of RxJS catchError

I am a beginner in RxJS and I am struggling to understand how the parameters are passed in this code snippet: import { catchError, map, Observable, of } from 'rxjs'; let obs$ = of(1,2,3,4,5); obs$.pipe( map(n => { if (n === 4) { ...

typescriptrxjs

I encountered an issue with the "props map error" while working on this

Hello everyone, I am currently in the process of learning React by creating a toggle button for switching between light and dark modes. However, I have encountered an issue when attempting to map through the state and display the data in card format (altho ...

javascriptreactjsreact-propsreact-map-gl

What causes the canLoad function to create an endless loop when rerouting?

Utilizing Angular's canLoad function in my AuthGuard to authenticate a lazy loaded module at the root of my application. If the user is not authenticated, the module will not load and the user will be directed to the login page. This process works sm ...

angulartypescriptauthenticationlazy-loadinginfinite-loop

What is the reason behind the decision for Google Chart API to display a legend only for pie charts

I have encountered an issue while attempting to display a pie chart on an ASP.NET webpage using the provided URL: . Despite passing valid values in the URL parameters, only the legend of the chart is displayed and not the chart itself. Can anyone provide i ...

javascriptasp.netchartsgoogle-visualization

Can you explain the significance of triple brackets (e.g. {{{ content }}}) in the context of Javascript/Typescript?

As I delve into the code of a fresh project in which I hope to contribute, I have come across numerous methods defined with triple brackets, like so: deinitialize() {{{ this.destroyed = true; $(window).off("resize", this.resize as () => void); ...

javascriptreactjstypescript

HammerJS swipe functionality does not seem to be functioning properly on elements that have the overflow CSS

UPDATE: The code snippet works smoothly when embedded in the question, but encounters issues when edited. This led me to discover that the problem lies with underlying containers that require scrolling... After testing it on my phone, I found that Hammer f ...

angularprogressive-web-appshammer.js

Is there an equivalent to Tomcat specifically designed for Node.js applications?

Looking for an application server that offers an administration interface to deploy node.js applications, access log files, and manage running applications with options to start, stop, restart, and monitor? ...

javascriptnode.jstomcatnpmdeployment

Click to be redirected to the same page on a different store

I have been working on a Shopify project where I implemented a pop-up that appears when the page loads, prompting users to choose between the US and UK websites. Once a user clicks on one of the options, the pop-up either closes (UK) or redirects them to ...

javascript

How does one distinguish between the uses of "any" and "any[ ]"?

Exploring the Difference Between any and any[ ] An Illustrative Example (Functioning as Expected) variable1: any; variable2: any[]; this.variable1 = this.variable2; Another Example (Also Functioning as Intended) variable1: any; v ...

arraysangulartypescripttypesany

Information failed to load into the datatable

i've implemented this code snippet to utilize ajax for loading data into a datatable. However, I'm encountering an issue where the data is not being loaded into the database. $('#new_table').DataTable({ "processing": true, "ser ...

javascriptjqueryajaxdatatable

StopPropagation() method in Ng-class not functioning properly in Angular for parent element

I am facing an issue with 2 nested ng-repeats. The parent one is supposed to add a class based on ng-click, but even when I click the child, it still triggers when I don't want it to. <div class="add-filter-tags" data-filter="{{f1}}" ng-class="{&a ...

javascriptangularjs

Silence in Angular NGRX Effects

I am currently utilizing ngrx Effects to send a http call to my server, but for some reason the effect is not triggered. My goal is to initiate the http call when the component loads. I have tried using store.dispatch in ngOnInit, however, nothing seems to ...

angulartypescriptrxjsngrxngrx-effects

Ways to obtain the <a> using the title attribute

Is there a way to remove 3 classes from a specific <a> element that is dynamically generated? The only constant is the title. How can I locate an element based on its title? I've searched online but haven't found exactly what I'm looki ...

javascriptjquerycss

The consistent failure of the 201 status node express API is causing major

I am currently working on creating an API using Express. However, when I receive a response from the server, it shows '201 created'. The issue arises when I attempt to make an HTTP request through promises and encounter a false interpretation of ...

javascriptnode.jsexpresshttp

Angular 5 - Creating a dynamic function that generates a different dynamic function

One of my latest projects involved creating a versatile function that generates switch-case statements dynamically. export function generateReducer(initialState, reducerName: ReducerName, adapter: EntityAdapter<any>): (state, initialState) => ISt ...

javascriptangulartypescriptngrxangular2-aot