The issue with routerLink not functioning properly in e2e testing with Protractor within an Angular 2 environment

I have implemented an angular2 routerLink that allows users to navigate to the editComponent by passing the userId as a parameter.

<a [routerLink]="['/edit',user._id]" (click)="returnUser(user._id)" id="redirect" class="btn" name="user-{{i}}">
        <i class="fa fa-eye fa-fw"></i>
    </a>

I am trying to test this functionality using Protractor, but after executing the click event, the link does not redirect to the editComponent as expected.

Below is my testing code:

it('should redirect to edit', () => {
    element(by.id("redirect")).evaluate("user._id").then(
      function (userId) {
        browser.get('/edit/' + userId);
        browser.waitForAngular();
      }, function (err) {
        console.log(err);
      })
    });

Additionally, I am encountering the following error:

asynchronous script timeout: result was not received in 30 seconds

Can anyone point out what mistake I might be making here?

Any suggestions or insights would be greatly appreciated. Thank you!

javascriptangulartypescriptprotractore2e-testing

Answer №1

Make sure to actually click on the link.

it('should go to edit page', () => {
      element(by.id("redirect")).evaluate("user._id").then(function (userId) {
       element(by.id("redirect")).click(); //make sure to click on the edit link
       browser.waitForAngular();  //wait for the page to load
       expect(browser.getCurrentUrl()).toContain('/edit/' + userId); //if using jasmine framework, assert current url
  }, function (err) {
      console.log(err);
  })
});

Answer №2

  1. Would you like to attempt this?

Execute the following code: element(by.id("redirect")).click().then(

  1. Additionally, verify if you should also click on this element.

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 to routing within the same component in Angular?

In the scenario where I have multiple lists of users with IDs such as (1, 2, 3, 4, 5...), the desired functionality is that upon clicking a button, the details for each respective user should be displayed. For example, clicking on the first user's det ...

angular

Encountering an issue during the registration of reducers with ActionReducerMap: "does not match the type 'ActionReducerMap<AppState, Action>'"

Here is a simplified version of my Angular 5 application. I have a reducer that needs to be registered in the root module. The problem arises in LINE A where I encounter the following error: ERROR in src/app/store/app.reducers.ts(7,14): error TS2322: Type ...

angulartypescriptngrxngrx-store

Add an item to an array that contains objects within an array of other objects

How can I properly push the values "label" and "link" into an object within "data" based on the id match with the "parent" value of another object? The goal is to insert these values into the "children" property of the corresponding target object, but it d ...

javascriptnode.js

Found within the ProductsModule NgModule.imports, a reference that could not be resolved to a valid NgModule class was discovered

I am currently working on a multi-module Angular project and have developed my own ImagegalleryComponent to be used across multiple modules. However, every time I try to import it in different modules, I encounter various issues. Even when I import it in t ...

angularangular-materialangular-ngmodel

What is the correct way to use a Higher Order Component to wrap the child components of a parent and display them in React?

Starting with a simple example that can be easily solved using React.cloneElement, but wanting more freedom and complexity in the project, I am looking for an alternative solution. The goal is to enhance the children of a Parent component with additional ...

javascriptreactjshigher-order-components

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

cssangularprimengng-deep

"Utilizing AJAX for Data Retrieval in a Form with Dynamically Generated

Hey there, I'm trying to figure out how to make my ajax data call dynamic. Here's what I've attempted: var opt_name = $(".NAME").data('opt_name'); var opt_business = $(".BUSINESS").data('opt_business&ap ...

javascriptjqueryajaxajaxformjqueryform

Minimize/Maximize Swagger Response Model Class View

After successfully integrating Swagger API documentation with my rest services, I encountered a challenge. The Swagger page appears too lengthy due to the numerous response classes in my project, requiring users to scroll extensively to find information. ...

javascriptjqueryswaggerswagger-ui

Validating phone numbers in Saudi Arabia for both mobile and landlines

I've been struggling to validate a Saudi Arabia phone number on my Bootstrap form, but I keep running into an invalid error. Here is the current regex pattern I am using: /^(009665|9665|\+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/ function ch ...

javascriptregexformsbootstrap-4

What is the best way to ensure all my borders are uniform in size?

As I work on a JavaScript project that organizes words into blocks based on their size, I encountered an issue with inconsistent border thickness in certain areas. I'm using spans to contain each word, but I can't figure out how to make the borde ...

javascripthtmlcss

Create typings for object properties in TypeScript

I am inexperienced with TypeScript and am looking to set up types for my object keys. I have explored a few methods to accomplish this, but I am encountering an issue where an error is not triggered when assigning a value of a different type. For example: ...

typescriptclassinterfacetypescript-typings

Creating a HTML element that functions as a text input using a div

I am encountering an issue with using a div as text input where the cursor flashes at the beginning of the string on a second attempt to edit the field. However, during the initial attempt, it does allow me to type from left to right. Another problem I am ...

htmlangulartypescript

update and rejuvenate session information using Node.js and express-session

Currently, I am working with Node.js in conjunction with express-session. Within my codebase, there is session data containing user information. req.session.user Upon updating the user's information, I update the session with the new data and then r ...

javascriptnode.jssession

JavaScript function for submitting form data using AJAX and performing validation

This is the code I have been working on: $(function () { $('.contact-form').submit(function (event) { $(this).find("input , textarea").each(function () { var input = $(this); if (input.val() == "") { ...

javascriptjqueryhtmlajax

Defaulting summernote to display in italics

Looking for a way to italicize a series of summernote inputs by default? I have removed all toolbar options except the italics button. Here's the HTML generating these inputs: <div style="width:250px;"> < ...

javascriptcssasp.net-mvcsummernote

What is the best way to execute a function once a timeout is finished? This timeout should be initiated by a click event in Typescript

I need to ensure that 'this.breakCheck();' is called only once after the timeout is complete, not with every iteration. Right now I have it set up to call on each iteration, which works but is not ideal. public startBreak(){ for(let i = this.b ...

typescript

Retrieving image URL from JSON in the latest version of NextJS

I created a getData.ts file for fetching data in a certain format: export async function getData(){ const res = await fetch("http://localhost:3001/projects") return res.json() } The data structure I was aiming to retrieve looks like th ...

jsontypescriptimagefetch-apinext.js13

What is the best way to organize HTML Collections by child elements using basic Javascript?

<div class="transaction-row" id= "transaction-row"> <div class="name">Name 1</div> <div class="transaction-type"> Category 1</div> <div class="date"& ...

javascript

`Text field value doesn't update correctly when using keyup event`

My current challenge involves dynamically adding rows to a page and calculating the total Monday input data to display in a specific box. The numbers entered can be whole or in increments of .25, .50, or .75, automatically rounding up if necessary. Althou ...

javascriptjquery

What is the best way to consistently resolve URLs in relation to the root of my web application?

My web application includes a JavaScript file with the following line of code: var arrowimages = { down: ['downarrowclass', 'images/AppNavDownArrow.gif', 23], right: ['rightarrowclass', 'images/AppNavRightArrow.gif' ...

javascriptasp.neturlreference