Difficulty in detecting variable modifications during testing - Angular2+

After successful login, I expect a certain variable to be updated with the appropriate value. However, during testing, all I see is 'undefined' returned.

This variable does change when interacting with the app, showing an error message like 'Either username or password were incorrect' when logging in with wrong credentials.

Why am I unable to observe the changes in the errorMessage variable?

UPDATE: Upon further investigation by adding console.log messages at various points in the code, it seems that the issue lies in the const body within the auth > login() file, which should be returning a value but isn't.

javascriptangulartypescript

Answer №1

To test the errorMessage being set inside the component file, you can simply mock the login() service and have it return an error. There is no need to make a call to the actual login() function during testing.

it('should trigger login on valid form with incorrect credentials but receive an error message', () => {
    // Use spying to mimic login() and throw an error
    spyOn(component.authService, 'login').and.throwError('Unable to get Token'); 
    component.onSubmit(validFormBadCreds);
    expect(component.errorMessage).toEqual('Either username or password were incorrect');
}

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

I need assistance with this ajax/javascript/php

I am currently working on creating a dynamic chained list. The idea is to have the user make selections from the first four dropdown lists, and based on their choices, a fifth dropdown list should appear. However, I am facing some issues with my code as th ...

phpjavascriptajaxdrop-down-menu

Warning: npm is resolving peer dependency conflicts during the installation process

Upon running npm install for my React application, I encountered the following warnings in the logs. Despite that, the npm installation completed successfully and the dependencies were added under node_modules. My app even starts up without any issues. I ...

javascriptreactjsnpmreact-dom

Tips on implementing jQuery in a JavaScript file referenced in angular.json

Currently, I am utilizing a JavaScript file that incorporates jQuery within it. In order to employ this JavaScript file, I have included it in the scripts array within the angular.json file. Additionally, I have also included jQuery in the same array befor ...

javascriptjqueryangularangular8

Retrieve the ultimate content of a text field when a key is pressed, only if the click action is permitted to proceed

Is there a method to prevent users from entering certain characters into a text box based on the resulting text in the textbox? One possible approach is outlined below: <input type="text" id="test" /> document.getElementById(&qu ...

javascripthtmladdeventlistenerkeypresskeyup

The technique for accessing nested key-value pairs in a JSON object within an Angular application

After receiving the response from the backend, I have retrieved a nested hash map structure where one hash map is nested within another: hmap.put(l,hmaps); //hmap within hmap When returning the response to the frontend, I am using the ResponseEntity meth ...

javascriptangulartypescriptfor-loop

javascript - substitute the dash (hyphen) with a blank space

For quite some time now, I've been on the lookout for a solution that can transform a dash (hyphen) into a space. Surprisingly, despite finding numerous responses for changing a space into a dash, there seems to be a scarcity of information going in t ...

javascriptregex

Set the root of Ionic OneSignal Push Notification instead of pushing it from the Home page to Another Page

Experiencing some trouble with my OneSignal push notifications and page redirection. While the app is open, tapping on a notification pushes the news-detail page onto the stack from the current home page. (This behavior is desired when the app is closed.) ...

angularroutercapacitoronesignalionic6

creating reactive images with Vue

The original code utilized an image in a menu as shown below: <img :alt="$t('more')" class="mobile-plus-content visible-xs" src="../../../assets/img/plus79.png" /> This results in: src="data:image/png;base64,the image" I made a mo ...

javascriptvue.js

I'm currently working on creating an online store using Next.js and TypeScript, but I'm struggling to effectively incorporate my fake product data array into the site

"using client" import Container from "@/components/Container"; import ProductDetails from "./ProductDetails"; import ListRating from "./ListRating"; import { products } from "@/utils/products"; interface I ...

reactjstypescriptnext.jse-commerce

The DataTable is becoming distorted following the Axios get request update

I am encountering an issue with my data table while populating the tbody using Axios get call. The pagination does not work properly and sometimes the displayed row count is incorrect. For example, even if the new data only consists of 10 rows, it might sh ...

javascriptajaxdatatableaxios

I attempted to initiate a transition using JavaScript, but unfortunately it failed to execute

Hey there! I'm just starting out with HTML, CSS, and JavaScript, and I've been trying to make a transition work using JavaScript. The element I'm working with is a "menu-icon" which is a span tag with a small image nested inside another div ...

javascriptcsscss-transitionstransform

I am encountering an issue where body-parser is not functioning properly with typescript. Whenever I make a request, the request.body is returning as undefined

Below is the code snippet for my Express application using TypeScript version 3.7.4: import bodyParser from "body-parser"; import config from "config"; import cookieParser from "cookie-parser"; import express from "express"; import mongoose from "mongoose ...

javascriptnode.jstypescriptexpressbody-parser

Using JavaScript to Parse JSON with Carriage Returns and Line Breaks

Utilizing the script below in JavaScript, I am able to extract a JSON string from a different JS file: // code to retrieve JSON data from another JS module var jsonMatch = data.match( /\/\*JSON\[\*\/([\s\S]*?)\/&bso ...

javascriptjqueryjsonparsing

Adjust the border color of Material UI's DatePicker

https://i.sstatic.net/ZvNOA.png Hello everyone, I am currently working with a DatePicker component from Material UI. My main goal is to change the border color of this component. I have attempted various methods such as modifying classes, adjusting the th ...

javascriptreactjsmaterial-ui

Tips for emphasizing matches within a string using JSX

I've implemented a custom autocomplete feature that suggests options based on user input. I want to highlight the characters in the suggestions list that match the input value. For example, if the suggestion list includes "alligator", "lima", and "li ...

javascriptreactjs

Verify if the JSON attribute is empty

My input contains the following: { "headers": { ... }, "body": { "RequestInfo": { ... , "Identificator": null } } <filter regex="false" source="boolean($ctx:Identificator)"> - check if it exists (even when it's ...

javascriptjsonxpathwso2

Angular ngModel failing to accurately reflect changes in input value

I am facing an issue with implementing a smart number input component that can toggle between allowing or disallowing negative numbers. I have an event listener for the (input) on the <input> element, triggering a function that applies various regex ...

angulartypescript

Enhancing elements with fade-in effects upon hovering

Is there a way to incorporate a subtle fade in/fade out effect when hovering over items on this webpage: http://jsfiddle.net/7vKFN/ I'm curious about the best approach to achieve this using jQuery. var $container = $("#color-container"), ...

javascriptjqueryhtmlcss

Ensure the proper sequence of field initialization within a TypeScript class constructor

Is there a way to ensure the proper initialization order of class fields in TypeScript (4.0) constructors? In this example (run), this.x is accessed in the method initY before it's initialized in the constructor: class A { readonly x: number rea ...

typescript

PHP form headaches: issues with submitting and posting

I'm having trouble with the submit button in my PHP code. Here's what I have so far (it's for a website where users can rate things): <form method="POST> <input type="radio" name="person" value="1" /> <input type="radio" name ...

javascriptphphtmlforms