getItemForm does not make a second promise call

I have a scenario where my function calls the api.send service twice, however when I run a test expecting it to resolve both promises, only res1 is returned and not res2. How can I ensure that both promises are resolved successfully?

Here is my function:

handleItems = () => {
              this.api.send('filter', 'get', { lang: 'ES', filter: { id: this.item['id'] } }).then(res1 => {
                this.item = res1['data'][0];
                this.api.send('filter', 'get', { lang: 'EN', filter: { id: this.item['id'] } }).then(res2 => {
                  let itemEng = res2['data'][0];
                });
              });
            };

This is my test case:

it('should invoke api.send with English result', () => {
            
            component.formDef = [{ field_id: 57, field_key: "name1", field_name: 'test1' }];
            let res1 = { data: [{ id: 1, name: 'test1' }, { id: 2, name: 'test1' }] };
            let res2 = { data: [{ id: 1, name: 'test2' }, { id: 2, name: 'test' }] };
            component.item = let item = {id:1, count: 1, data:[{id: 1, tacticas: {95: [135]}}]};

            let spy1 = spyOn(api, 'send').and.returnValues(Promise.resolve(res1), Promise.resolve(res2));

            component.itemToForm();

            expect(spy1).toHaveBeenCalled();
            expect(spy1).toHaveBeenCalledTimes(2);

Answer №1

It is imperative that the implementation of your function be altered. Currently, it does not return anything, and it is unclear how you are accessing res1. Consider revising it as follows:

getItemForm = async () => {
              const res1 = await this.api.send('filter', 'get', { lang: 'ES', filter: { id: this.item['id'] } }),
                    res2 = await this.api.send('filter', 'get', { lang: 'EN', filter: { id: this.item['id'] } })     
               return {res1, res2};         
};

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

The 'append' property is not present in the 'Headers' type in Angular 2

import { HttpClient, HttpHeaders } from '@angular/common/http'; export class LoginService { let headers: HttpHeaders = new HttpHeaders(); headers = headers.set('Content-Type', 'application/json'); } I encounter ...

angular2 utilize rxjs to search for threads based on user input

Hey there! I'm working on creating a mini forum inspired by stackoverflow and I'm currently in the process of adding a basic text filter for thread titles. I've recently delved into rxjs and pipes, and this is what I've come up with so ...

Using discord.js to conveniently set up a guild along with channels that are equipped with custom

When Discord devs introduced this feature, I can't seem to wrap my head around how they intended Discord.GuildManager#create to function. How could they possibly have expected it to work with Discord.GuildCreateOptions#channels[0], for instance, { ...

Struggling to grasp how to implement Redux and React-router together in one component

I have recently embarked on learning TypeScript and encountered a confusing behavior. Upon encountering this error: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> ...

Leveraging the power of React's callback ref in conjunction with a

I'm currently working on updating our Checkbox react component to support the indeterminate state while also making sure it properly forwards refs. The existing checkbox component already uses a callback ref internally to handle the indeterminate prop ...

Issue when retrieving child elements in Next.js server-side component

"use client"; -- Imports and interfaces const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => { const [data, setData] = useState<SubscriptionData>({}); -- Functions return <> ...

Angular is unable to find any matching routes

I am currently working with two components: •QuestionsComponent •QuestionComponent Within app.module.ts, I have defined my routes using the following code: import { Component, NgModule } from '@angular/core'; import { BrowserModule } from &a ...

Internationalization of deferred-loaded modules within the JHipster application

I created My App using JHipster, which utilizes the JhiLanguageService in the ng-jhipster library. This service relies on the JhiConfigService to configure ngx-translate without requiring manual imports and configuration of the TranslateModule in my app.mo ...

Struggling to get the bindings to work in my Angular 2 single-page application template project

I have recently started using the latest SPA template within Visual Studio 2017: https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp.net-core-with-javascriptservices/ The template project is functioning properly. ...

Retrieving Vue component properties as a data type

I'm facing a dilemma with my Vue components. I want to extract the props from one component and use them as a type instead of a value in another component. Specifically, I have a component where I need to take in an array of props from a different com ...

Modifying the response header in a node.js middleware: A step-by-step guide

I've been researching this question extensively on Google, but unfortunately, none of the solutions seem to work for me. The issue I'm facing is related to adding a specific property to the response header called "isAuth," which needs to be set ...

Unit Testing in Angular with spyOn().and.callThrough() does not execute the actual function

I am new to unit testing using Jasmine in Angular and currently exploring how to test a service with the function loadSomething(id) and added a console.info statement in it. My Service Code: function loadSomething(id) { console.info('this is a t ...

Ways to resolve the angular error "Encountering an unhandled exception: Unable to locate module 'typescript' "?

I'm encountering errors when running ng serve. I've attempted the following code as well, but I'm still facing the same error: npm install -g typescript Error displayed in text format D:\xampp\htdocs\angular\axen>ng ...

Troubleshooting font color issues with PrimeNG charts in Angular

I have a chart and I am looking to modify the color of the labels The gray labels on the chart need to be changed to white for better readability Here is my code snippet: HTML5: <div class="box-result"> <h5 class="title-resul ...

Enhance Vue TypeScript components with custom component-level properties

In my vue2 project, I am utilizing vue-class-component along with vue-property-decorator. My goal is to implement component-level security validation for each component when it loads. I imagine implementing it with a signature like this: @Component @Secur ...

Encountering Issues with TypeScript Strict in Visual Studio Code Problems Panel

I have discovered that I can optimize my TypeScript compilation process by utilizing the --strict flag, which enhances type checking and more. Typically, I compile my TypeScript code directly from Visual Studio Code with a specific task that displays the c ...

Is it possible for a React selector to retrieve a particular data type?

As a newcomer to React and Typescript, I am currently exploring whether a selector can be configured to return a custom type. Below is a basic selector that returns a user of type Map<string, any>: selectors/user.ts import { createSelector } from ...

Make the text in the SCSS file placeholder bold

Within my Angular front end application, there is a form containing a textarea: <mat-form-field class="full-width"> <textarea class="left-aligned" formcontrolname="x1" matInput placeholder="some text"/> </mat-form-field> In the co ...

Encountered a Runtime Error: Uncaught promise rejection - couldn't locate removeView

I am facing an issue with calling two API calls on the same page. When I use only one API call, everything works fine. However, when I try to make two API calls on the same page, I encounter the following error at runtime: Error Uncaught (in promise): r ...

Ways of invoking a component method from a service in Angular 2

I have a concept for creating a unique service that is capable of interacting with one specific component. In my application, all other components should have the ability to call upon this service and then have it interact with the designated component in ...