Best approach for linking Promises/Observables together in functional testing situations

Currently, I have an example of a test within a project that I am actively working on:

AppPage.lastnameInput().clear().then(function () {
  AppPage.lastnameInput().sendKeys(lastname).then(function () {
    AppPage.firstnameInput().clear().then(function () {
      AppPage.firstnameInput().sendKeys(firstname).then(function () {
        AppPage.ibanInput().clear().then(function () {
          AppPage.ibanInput().sendKeys(IBAN).then(function () {
            $('body').click().then(function () {
              callback();
            });
          });
        });
      });
    });
  });
});

I believe that this code could be simplified and flattened to something like:

foo(
  AppPage.lastnameInput().clear(),
  AppPage.lastnameInput().sendKeys(lastname),
  AppPage.firstnameInput().clear(),
  AppPage.firstnameInput().sendKeys(firstname),
  AppPage.ibanInput().clear(),
  AppPage.ibanInput().sendKeys(IBAN),
  $('body').click(),
).then(() => callback())

I attempted to use forkJoin(), but it didn't seem to wait for the completion of the first Observable before moving on to the next one.

While I could create my own function for this operation, it seems quite generic. Therefore, I am curious if there is already a more standardized function available for this purpose.

Answer №1

To run multiple observables one after the other (instead of simultaneously like forkJoin()), you can utilize the concat() function.

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

"Trouble arises with the implementation of the routerLink directive

I have been developing an Angular2 application that involves routing with the component router. Currently, I am using angular-2.0.0-beta.3. When trying to use the routerlink directive in a child component, my template looks like this: <a [routerLink] ...

Custom input in Angular 2 rc.5: Form control is missing a value accessor for an unspecified name

My custom input component is designed as follows: import {Component, Provider, forwardRef} from "@angular/core"; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"; const noop = () => {}; const CUSTOM_INPUT_CONT ...

Hosting asynchronous bindings in Angular 2

I'm currently working on a component with the following code: @Component({ selector: 'my-selector', template: `<div>html code goes here</div> `, host: { '[style.background]': "'url(' ...

When running the command `npm start`, an error message is generated

Hey everyone, I've been trying to learn some basic AngularJS 2.0 skills through a tutorial. Unfortunately, when I tried running the command npm run start, it didn't work as expected. I'm currently using Git Bash on Windows 10 OS. If you hav ...

Unlinked Typescript blob file name

Is there a way to set the file name for a blob in typescript? I have found a solution for IE, but it seems impossible for Chrome. I need something similar to this solution, but in typescript. downloadFile(data: any) { var blob = new Blob([data], {type ...

Exploring the issue of nested subscriptions causing bugs in Angular

My current challenge involves nesting subscriptions within "subscribe" due to the dependency of some data on the response of the previous subscription. This data flows down the subscription chain until it is stored in an array. Starting with an array of I ...

The npm build encountered an issue: An unexpected value of 'undefined' was declared by the module

I am encountering issues while attempting to construct my Angular 5 project that ultimately leads to failure. Here is an overview of the dependency tree: simple-kaishi <- kaishi <- ngx-admin-lte ngx-admin-lte: (develop branch) represents the ...

Angular ReactiveForms not receiving real-time updates on dynamic values

I'm using reactive forms in Angular and I have a FormArray that retrieves all the values except for product_total. <tbody formArrayName="products"> <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i"> ...

Showing an image from AWS S3 in Angular 6

Hey there! I recently started working with Angular 6 and I've encountered an issue trying to fetch images, documents, or Excel files from an AWS S3 bucket. Here's the code I'm using: var S3 = new AWS.S3(); const params = { Bucket: ...

Using ngIf for binding

Trying to bind values based on conditions specified in *ngIf. However, when using the && operator within *ngIf, it seems to be behaving mysteriously. Sample Code: <div *ngIf="days.sunday == true"> <p class="circle ml-3" ...

Ensure that the input remains within the viewport at all times on a page that has a variable height

On my website, there is a form that displays errors above it when you type something. While this works fine on desktop with big screens, the issue arises on mobile devices where multiple errors can push the input field off the screen. You can see the prob ...

Angular protects routes by using tokens stored in cookies

I typically store the user token in local storage and use the "token" key in local storage as a method to protect certain routes in my application. If the key is present, I allow the user to access the page, but if it's not, I redirect them to the log ...

Eliminate the need to input the complete URL every time when making server calls

Currently, my springbok application has a React-Typescript frontend that is functioning well. I am using the request-promise library to make requests like this: get('http://localhost:8080/api/items/allItems', {json: true}). However, I would like ...

What is the proper method for specifying the path to my index.tsx file within a React application?

After using npx create-react-app my-app --template typescript to generate my React app, I decided to reorganize the files by moving them to /src/client and relocating my Express backend to /src/server. However, upon running the relocated React app, I encou ...

Angular encountered an issue while attempting to differentiate '[object Object]'. The permissible types for differentiation are limited to arrays and iterables

I need help iterating through an Object received from a service call and displaying it in a table using *ngFor. Unfortunately, I encounter the following error during this process: Error trying to diff '[object Object]'. Only arrays and iterables ...

react-hook-form replaces the onChange function causing delays in updating the value

Recently, I created a unique Select component utilizing useState and onChange. I attempted to integrate this custom component with the powerful react-hook-form. Allow me to share the code snippet for the bespoke Select component. const Select = forwardRef ...

Is there a way to retrieve the resolved data within the route definition in Angular?

I am looking to execute some actions within the route definition once the lazyloaded module is loaded. The route includes a resolver called UserDataResolverService. How can I retrieve and utilize the resolved data within the route definition? { ...

Despite declaring a default export, the code does not include one

Software decays over time. After making a small modification to a GitHub project that was three years old, the rebuild failed due to automatic security patches. I managed to fix everything except for an issue with a default import. The specific error mess ...

Zod's nativeEnum function verifies the value of an enum

Utilizing a zod schema to validate an object containing an enum field: enum Colour { red: 'Red', blue: 'Blue', } const schema = z.object({ colour: z.nativeEnum(Colour), }); Received data from an API includes color values a ...

Having trouble connecting Nextjs with ChromaDB?

I am encountering issues while trying to establish a connection with the Chromadb vector database in Nextjs. The objective is to store user-generated content in Chromadb. Below is the code snippet I am utilizing along with its dependencies: Dependencies V ...