I have noticed that my unit test case does not include coverage for the if statement

Here is the function I have in my TypeScript file:

routeToIndividualPortal(sessionToken: string) {
    let redirectUrl = this.relayState;
    console.log("Pre-source-check Indivual URL : " + redirectUrl);
    let url = "";
    if(redirectUrl.includes(this.envSvc.environment.peakAppId)){
      url = this.sessionTokenUrl + sessionToken + "&redirectUrl=" + this.relayState;
      console.log("peak url : " + url);
    }
    else{
      url = this.sessionTokenUrl + sessionToken + "&redirectUrl=" +this.individualLoginRouterUrl + "&requestedUrl=" + redirectUrl
      console.log("C4 url : " + url);
    }
    console.log("window.location.href : " + url);
    window.open(url);
  }

And here is the test case that I have written, it is passing but only covering the else part and not the if part:

it('test routeToIndividualPortal', () => {
    envSvc = new EnvironmentService(window);
    envSvc.environment = new Environment();
    envSvc.environment.peakAppId = 'RelayState=0oartebbbbs4KnvOK0h7';
    let sessionToken = "randomstuffljbn";
    let redirectUrl = "";
    expect(component.relayState).toEqual(redirectUrl);

    spyOn(window, 'open');
    component.ngOnInit();
    component.routeToIndividualPortal(sessionToken);
    fixture.detectChanges();
    expect(component.loginInvalid).toBeTruthy();
  });

I am unsure of what I might be missing here, so any assistance in identifying where I went wrong would be greatly appreciated!

angulartypescriptunit-testingkarma-jasmine

Answer №1

It's difficult to provide a definitive answer without a live example on a platform like stackblitz, as we can't see the exact values in your code. One suggestion is to run the test in a debugger and set a breakpoint at the if statement, or use console.log to output all the values.

However, judging from the snippet you shared:

let redirectUrl = "";
expect(component.relayState).toEqual(redirectUrl);

it seems that relayState is an empty string. Therefore, when you assign it to the variable redirectUrl in your function:

let redirectUrl = this.relayState

it will also be an empty string, causing the condition:

redirectUrl.includes(this.envSvc.environment.peakAppId)

to always evaluate to false.

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

Guide on updating a table row upon clicking the edit button in an Angular 12 template-driven form

Currently, I have set up a table where the data can be edited by clicking on a hyperlink and then saving the changes with a button. The issue I am facing is that when I click on the edit link, all rows become editable instead of just the specific row I cli ...

htmlangulartypescriptangular2-templateangular12

Angular2 app fails to update after emitting an event

I need help with a child component responsible for updating phone numbers on a webpage. The goal is for the application to automatically display the changed phone number once the user hits the 'save' button. Here's a visual of how the appli ...

angulartypescript

Transferring information using TypeScript

My issue arises when transferring data from HTML in the following format Karbohidrat :{{karbohidrat}} <button ion-button (click)="cekHalamanMakanan('karbohidrat')">View carbohydrate foods</button> <br> Then, I retrieve the kar ...

angulartypescript

Using a static enum in a different class in TypeScript: A guide

After referencing this question and answer on Stack Overflow about setting a static enum inside a TypeScript class, I decided to create my own enum and implement it as a static property in my class. Here is how I did it: /* Input.ts */ enum INPUT_TYPE { T ...

typescript

Break down a data structure into a type that includes multiple options

Is it possible for Typescript to support type or interface "destructuring" (if that's the right term)? I am attempting to achieve something similar to the code snippet below: type SomeRandomType = { propertyOne: string; propertyTwo: number; ...

javascripttypescript

Troubles arise when trying to compile Typescript and React with esbuild

I set out to create a new package and upload it to npm, starting with a demo package first. I began by using this repository as a foundation: https://github.com/wobsoriano/vite-react-tailwind-starter After that, I made updates to the build script: " ...

javascriptreactjstypescript

Guide to adding a custom font to your Angular 5 project

I am looking to integrate a new font into my Angular 5 project. So far, I have attempted: 1) Moving the file to assets/fonts/ 2) Including it in the styles section of .angular-cli.json However, it seems that the file is not a regular .css file; it is a ...

angularfonts

Error message indicating that the function 'slice' is not defined for the data variable

I've already searched for solutions to a similar issue, but none of them worked for me. I'm dealing with an object that fetches a list of cities including their names, populations, and states. Here is my HTTP service request: cidadesUrl = 'h ...

htmlangulartypescript

Typescript encounters difficulty locating the Express module

My venture into creating my debut NodeJS application has hit a roadblock. Following advice from multiple blogs, I have been attempting to build my first nodejs app in typescript by following the steps below: npm install -g express-generator npm install - ...

node.jsexpresstypescript

Is React 18 compatible with both react-redux and react-router?

At present, my react application is running on the following versions: react 17.0.x react-dom 17.0.x react-redux 7.2.x react-router-dom 5.x.x react-scripts 4.0.x redux 4.x.x My initial step towards upgrading to react@18 involved updating react-scripts to ...

reactjstypescriptreact-reduxreact-router

Enhance your FullCalendar experience with React by displaying extra information on your calendar

I am new to using React and FullCalendar, and I have a page layout similar to the image linked below. https://i.sstatic.net/MooTR.png Additionally, I have a list of events structured as shown: id: "9", eventId: "1", ...

javascriptreactjstypescriptfullcalendar

Display or conceal a button in Angular 6 based on certain conditions

In my current project, I am facing a challenge where I need to disable a button while a task is running and then activate it once the task is complete. Specifically, I want a syncing icon to spin when the task status is 'In_progress' and then hid ...

javascriptangulartypescript

Doughnut Chart with Color Gradients in ng2-charts

Currently, I am exploring the world of Chart.js and ng2-Charts within Angular. Specifically, I am experimenting with Doughnut Charts and have a desire to create a Multi Level Chart. However, I am facing an issue where I am unable to customize the colors fo ...

angulartypescriptchart.jsng2-charts

The Angular error dialog triggered by the ErrorHandler fails to show any information when encountering a TypeError

I've managed to get a lot of this example up and running with help from other sources, but I'm still facing one lingering issue. When I deliberately throw an error, the Error Dialog functions as expected. It also works correctly when throwing an ...

angulardialogierrorhandler

Using Angular in conjunction with Azure Durable Functions to implement a retry mechanism for HTTP responses

In my Angular 10 application, I am attempting to integrate Azure Functions. The key is to simplify the Azure function protocol by using a single Observable. Executing an Azure function requires the following steps: Initiate a POST request to the Azure fu ...

angularazurerxjsazure-functionsazure-durable-functions

The data type '{}' cannot be assigned to the type 'WebElement'

Background: I am in the process of updating the end-to-end tests to utilize async/await functionality. However, when attempting to modify the function (with a return type promise.Promise < WebElement>) to be asynchronous and calling it from the test, ...

typescriptselenium-webdriverpromiseprotractor

Changing the color of a Chart.js chart in Angular: A step-by-step guide

I've been struggling to change the color of my chart without success. Any assistance on this matter would be greatly appreciated. Despite trying to assign color values to datasets, I am still unable to achieve the desired result. This is a snippet f ...

angulartypescriptchart.jsangular7

Enhancing Code Completion Feature for Multiline Strings in Visual Studio Code

When attempting to include HTML code in a multiline string using backticks within TypeScript, I've noticed that VS Code doesn't offer auto-completion for the HTML tags. Take this example: @Component({ selector: 'app-property-binding&ap ...

typescriptvisual-studio-codemultiline

Tips for implementing lazy loading for a section of a template in Angular 2

I have an Angular 2 component that has several sub-components within it. Some of these sub-components are expensive to load and may not always be necessary, especially if the user doesn't scroll far enough down the page. Although I am familiar with l ...

javascriptangulartypescriptlazy-loadingviewport

Issue customizing static method of a subclass from base class

Let me illustrate a simplified example of my current code: enum Type {A, B} class Base<T extends Type> { constructor(public type: T) {} static create<T extends Type>(type: T): Base<T> { return new Base(type); } } class A exte ...

typescriptinheritancestatic