What is causing my method chain to return a Promise<Promise<boolean?>> when using browser.wait(ExpectedConditions.presenceOf())?

Currently, I am in the process of creating some protractor tests that look like this:

import { browser, element, by, ExpectedConditions } from 'protractor';

export class SomePage {
  private elements: any = {};

  navigateToUpdate(name: string) {
    return browser.get(`/pages/${name}`)
      .then(() => browser.waitForAngular())
      .then(() => browser.wait(this.statusIsPresent))
      .then(() => this.initElements());
  }

  private initElements(): Promise<void> {
      // Implement functionality here
      return Promise.resolve();
  }

  private get statusIsPresent(): Function {
    return ExpectedConditions.presenceOf(element(by.id('status')));
  }  
}

After incorporating the wait() function, I noticed that navigateToUpdate() now returns

Promise<Promise<void>>
. This is causing confusion for me as to why it behaves this way, and whether or not it could potentially lead to bugs that may be difficult to identify.

Despite the return type of browser.wait(), shouldn't

Promise.resolve().then(() => browser.wait()).then(() => something())
simply return the result of something(), rather than a Promise containing the result of something()?

Answer №1

Protractor utilizes its own promise library (although they are actually implemented in the selenium module, it doesn't make a significant difference), and the definitions do not properly unwrap default promises (the built-in ones). When protractor promises are used, the outcome is as anticipated:

private initializeElements(): promise.Promise<void> {
    // Perform actions here
    return promise.fullyResolved(null)
}
navigateToUpdate(name: string) { // return type is automatically inferred to be promise.Promise<void>
    return browser.get(`/policies/${name}`)
    .then(() => browser.waitForAngular())
    .then(() => browser.wait(this.statusIsPresent))
    .then(() => this.initializeElements());
}

It also functions correctly with async/await

async navigateToUpdate(name: string) {// return type is inferred to be promise.Promise<void>
    await browser.get(`/policies/${name}`);
    await browser.waitForAngular();
    await browser.wait(this.statusIsPresent);
    await this.initializeElements();
}

If someone attempts to access the promise return type, errors will occur because the implementation unwraps the promise while the type system is unaware of this, resulting in the misconception that the result of a promise is another promise when it is not.

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

Inject components in Angular using dependency injection

Can components in Angular be dependency injected? I am interested in a solution similar to injecting services, like the example below: my.module.ts: providers: [ { provide: MyService, useClass: CustomService } ] I attempted using *ngIf= ...

What is the process of compiling TypeScript code?

When attempting to use tsc, I encountered issues. Even when having typescript but lacking tsc, the problem persisted. What steps should I take next? https://i.sstatic.net/Djgqb.png ...

An issue has occurred where all parameters for the DataService in the D:/appangular/src/app/services/data.service.ts file cannot be resolved: (?, [object Object])

Upon running the command ng build --prod, an error is encountered. Error in data.service.ts: import { BadInput } from './../common/bad-input'; import { AppError } from './../common/app-error'; import { Injectable } from '@angular ...

Reversing ngModel modifications does not accurately display changes in the view

Presently, my table contains editable cells, with the functionality to undo changes to each cell. To achieve this, I initially created a duplicate of each object in the array. Upon initialization, I mapped the array to create a new array with old values s ...

How can I pass DOCUMENT in Angular?

In my directive, I use dependency injection to access the DOCUMENT and set up an event listener: constructor(@Inject(DOCUMENT) private document: Document) {} ngOnInit() { this.document.addEventListener('click', this.clicked, true); } @Bound ...

Is React Typescript compatible with Internet Explorer 11?

As I have multiple React applications functioning in Internet Explorer 11 (with polyfills), my intention is to incorporate TypeScript into my upcoming projects. Following the same technologies and concepts from my previous apps, I built my first one using ...

Traversing beyond the login screen with Protractor

I am in the process of setting up an E2E test for a webpage that mandates login credentials. I'm utilizing browser.get to access the login page followed by inputting the username and password via protractor. Next, I make use of browser.get once more t ...

Set the styling of a div element in the Angular template when the application is first initialized

I have a question about this specific div element: <div class="relative rounded overflow-clip border w-full" [style.aspect-ratio]="media.value.ratio"> <img fill priority [ngSrc]="media.value.src || ftaLogo" ...

Retrieve the element from a nested repeater in Protractor by utilizing the text in the row

Below is the structure of the table I am working with: <table class="table"> <thead> <tr> <th class="checkbox-column"></th> <th class="main-column main-column--checkbox">Name</th> </tr> ...

How to efficiently filter an array containing nested objects using TypeScript

I'm currently working with a list of menus and submenus: [ { "NUA_ID_Menu": 1, "TXT_Nom_Menu": "Menu 1", "Liste_Sous_Menus": [ { "TXT_Nom_Menu": ...

Mocked observables are returned when testing an Angular service that includes parameters

I'm currently exploring various types of unit testing and find myself struggling with a test for a service once again. Here is the function in my service that I need to test: Just to clarify: this.setParams returns an object like {name: 'Test&ap ...

The value of type 'string' cannot be assigned to type '"menu" | "selectedMenu" | undefined' as it is not compatible with the specified types

I'm working on creating a multiple select feature using TypeScript, material-ui, and React. I am encountering an error when trying to set MenuProps.variant = 'menu'. The error message reads: "Type '{ variant: string; PaperProps: { styl ...

Creating a hyperlink dynamically within an Angular TypeScript file can be easily achieved

I am looking to create a dynamic hyperlink within the component (in the .ts file) using a for loop inside a function. I understand that this can be achieved by utilizing *ngFor loop in the template. For instance - <div *ngFor="let rec of item.R ...

Typescript PDFjs encountering loading issues with corrupt files

In my Vue.js application, I have the following TypeScript class: /** Taken from https://github.com/VadimDez/ng2-pdf-viewer/blob/master/src/app/pdf-viewer/pdf-viewer.component.ts */ import { Component, Vue } from 'vue-property-decorator'; import ...

Steps for accessing the camera within a custom Ionic app

Currently, I am working on a unique custom application built using Ionic and Typescript. I have encountered an issue with opening the camera to capture a picture. While my app successfully opens the native camera for capturing photos, it unfortunately tak ...

Developing applications using the combination of Vue.js, JSX, and

While I have no issues using TypeScript with single file components (.vue files), I encountered problems when attempting to use it with JSX files. Two errors arise, one in my index.ts file. I'm uncertain if there was a mistake made in my configuration ...

The functionality of ZoneAwarePromise has been modified within the Meteor framework

After updating to the latest Angular 2.0.1 release on Meteor 1.4.1.1, I'm facing an error that says: Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten I've attempted running meteor update and meteor reset, b ...

What could be causing the strange output from my filtered Object.values() function?

In my Vue3 component, I created a feature to showcase data using chips. The input is an Object with keys as indexes and values containing the element to be displayed. Here is the complete code documentation: <template> <div class="row" ...

Expanding a JSON data structure into a list of items

In my Angular service script, I am fetching customer data from a MongoDB database using Django: getConsumersMongodb(): Observable<any> { return this.httpClient.get(`${this.baseMongodbApiUrl}`); } The returned dictionary looks like this: { &q ...

Can you explain the concept of a selenium server?

Just starting with selenium and protractor here. Can someone explain to me if the selenium server acts like a compiler for javascript? And why is it necessary to run it before running the tests? ...