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

Issue opening react modal dialogue box

I'm encountering an issue while trying to implement the headless ui modal. I'm attempting to trigger the modal.js script from my home.js file. In my home.js file, I have the following code snippet: function Home() { const [isOpen, setIsOpen] = ...

javascriptreactjsheadless-ui

One way to display a table is by populating it with data from an API. If the table does

Within my Angular 6 application, there exists a table that displays data fetched from a web api. Additionally, I have incorporated some ngIf containers. One of these containers is programmed to exhibit a message in case the web api data turns out to be emp ...

angulartypescript

Unable to retrieve values using any = {} in TypeScript Angular 8

import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { enableProdMode } from '@angular/core'; enableProdMode(); @Component({ selector: 'app-home', templat ...

angulartypescripttslint

Using multiple `setState` calls without synchronization can lead to issues, especially when one of them uses a value obtained from `

In my discovery: When there are two instances of setState The first one is invoked with a value obtained from await Both calls occur in the same thread It results in a scenario where one state is updated while the other remains unchanged. For instance: ...

javascriptreactjs

I am getting text content before the input element when I log the parent node. What is causing this issue with the childNodes

Does anyone know why 'text' is showing up as one of the childNodes when I console.log the parent's childNodes? Any tips on how to fix this issue? <div id="inputDiv"> <input type="text" id="name" placeholder="Enter the nam ...

javascripthtmlcssdomnodelist

Using framer-motion with Next.JS ensures that content remains consistent during navigation

I added a Link on my homepage that connects to the About Us page: <Link href="/about"><a>About us</a></Link> In my _app.js file, there is an AnimatePresence wrapper: <AnimatePresence exitBeforeEnter> <Component {...p ...

javascriptreactjsnext.jsframer-motion

The styles from bootstrap.css are not displaying in the browser

Currently in the process of setting up my angular 2 project alongside gulp by following this helpful tutorial: I've added bootstrap to the package.json, but unfortunately, it's not reflecting in the browser. I can see it in the node_modules and ...

node.jstwitter-bootstraptypescriptangulargulp

Tips for Converting a JavaScript Array into JSON

I am dealing with data structured like this: "team": "Yankees" "players": ["jeter", "babe ruth", "lou gehrig", "yogi berra"] In my code, I extract these values from a form where they ar ...

javascriptjsonreactjs

Passing data from child to parent in Angular using EventEmitter

I have integrated a child grid component into my Angular application's parent component, and I am facing an issue with emitting data from the child to the parent. Despite using event emitter to transmit the value to the parent, the variable containing ...

javascriptangulareventemitter

Encountering a syntax error with the spread operator while attempting to deploy on Heroku

I'm encountering an error when attempting to deploy my app on Heroku: remote: SyntaxError: src/resolvers/Mutation.js: Unexpected token (21:16) remote: 19 | const user = await prisma.mutation.createUser({ remote: 20 | data: { r ...

javascriptnode.jsecmascript-6babeljs

I aim to break down a function into several functions using jQuery and AJAX for better organization and efficiency

I am working with a JavaScript file that includes an Ajax function to fetch data from a JSON file on a server. The goal is to interpret this data into a table, but I would like to break down the process into separate functions for generating links, dates, ...

javascriptjqueryhtmljsonajax

"Design a function that generates a return type based on the input array

Created a function similar to this one // window.location.search = "?id1=123&id2=ABC&id3=456" const { id1, id2, id3 } = readArgsFromURL("id1", {name: "id2", required: false}, {name: "id3", required: true}) ...

typescript

Suspend features for moving between pages in history

In the application, we have two main pages - Home.vue and Statistics.vue. The Home.vue page renders the TableFields.vue component. On the Home page, there are fields with numbers that have an initial value of "3" set upon page load. An interval running a c ...

javascriptvue.jsvue-router

Connect and interact with others through the Share Dialogues feature in the

Update - Edit I'm just starting to explore the concept of share dialogues and I want to integrate it into my website. On my site, there is a reaction timer game that shows the user's reaction time in seconds in a modal popup. I want users to be ...

javascripthtmljqueryfacebookshare

Utilize ngFor within a ng-template to display dynamic content in a table structure

Currently, I am attempting to loop through a list that is obtained from an API request and then populate the data into a table. The issue I am facing is that this table exists within an ng-template tag, and I am unsure of how to manage this situation. Thi ...

angularngforng-template

Incorporating a specific time to a JavaScript date object

In my Angular application, I am facing an issue with adding a time to a date. The appointmentDate from the date picker returns a JavaScript date while the appointmentTime is selected from a dropdown with options like "8:00", "8:30", "9:00", etc. I'm ...

javascriptangular

Discovering a specific URL link element within the DOM using webdriver.io

I am currently utilizing webdriver io for conducting tests on a webpage. I am in need of verifying the existence of an element with a specific href on the page. I have attempted to achieve this using the following snippet var client = webdriverio.remote ...

javascriptseleniumwebdriver-io

What is the recommended approach for managing state in React when multiple components are trying to access and modify its data at the same time?

Issue: I am experiencing difficulty in adding new keys and/or values to the JSON editor or YAML editor when they both share and update the same state. The parent component sends JSON data to the child component through props import * as React from 'r ...

reactjsjsontypescriptreact-hooksyaml

The REST API seems to be functioning correctly when accessed through Postman, but there are issues when attempting to call

When I include @PreAuthorize("hasRole('ROLE_SUPER_ADMIN')") in my controller and make a call from Angular, it doesn't work. However, it works fine when called from Postman. @GetMapping("/getAllOrgniz") @PreAuthorize("hasRole('ROLE_SUPE ...

angularspring-bootspring-security

When attempting to download a PDF file from Flask to the client, the file appears to be

I am encountering an issue with my Flask server that sends a PDF file using the send_file function. When testing this route on Postman, I am able to view and download the PDF successfully. However, when attempting to download it through my React frontend, ...

javascriptpythonreactjsflaskaxios