Unit testing Angular components can often uncover errors that would otherwise go unnoticed in production. One common

I need assistance writing a simple test in Angular using Shallow render. In my HTML template, I am utilizing the Async pipe to display an observable. However, I keep encountering the following error:

Error: InvalidPipeArgument: '() => this.referenceDataService.getRoutes() 
    .pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_5__["map"])((routes) => { debugger; return routes || []; }))' for pipe 'AsyncPipe'

Component:

routes$: Observable<RouteModel[]>;
   routes$ = () => this.referenceDataService.getRoutes()
    .pipe(map((routes: RouteModel[]) => {
        debugger;
        return routes || [];
    }));

test:

beforeEach(() => {
    routes = [
        { routeId: 1, prefix:'/test1', route:'/test1' }, 
        { routeId: 2, prefix:'/test2', route:'/test2' }
    ]

    dataServiceMock = {
        getRoutes: () => of(routes)
    };

    shallowComponent = new Shallow(RouteComponent, AppModule)
    .provideMock([
        { provide: ReferenceDataService, useValue: dataServiceMock}
    ])
    .dontMock([FormBuilder]);
});

it('should create',  async () => {
    const { instance } = await shallowComponent.render();
    expect(instance).toBeTruthy();
});

If anyone could provide insight into what the issue might be, I would greatly appreciate it.

Thank you

Answer №1

Have you tested the code by running npm start?

The issue lies in the use of parentheses (). The async pipe is designed to bind to an Observable, not a function that returns an Observable. It is not recommended to call the function in the HTML as it will slow down the application, triggering the function every time change detection occurs.

Consider this revised approach:

// remove the () =>
routes$ = this.referenceDataService.getRoutes()
    .pipe(map((routes: RouteModel[]) => {
        debugger;
        return routes || [];
    }));

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

Leveraging the power of NestJS in conjunction with Apollo Server version 2

I recently delved into learning nestjs and decided to give this graphql example a try. The issue I encountered is that the example was originally designed for apollo-server version 1, and I'm having difficulty adapting it to work with apollo-server v ...

An issue with the validation service has been identified, specifically concerning the default value of null in

Using Angular 10 and Password Validator Service static password(control: AbstractControl) { // {6,100} - Check if password is between 6 and 100 characters // (?=.*[0-9]) - Ensure at least one number is present in the strin ...

Disable the loader for a specific method that was implemented in the Interceptor

Custom Loader Interceptor A loader has been implemented within an Interceptor. I have a specific requirement where the loader should not be triggered during the upload() function. It should not be applied to that particular method only. ...

Angular: failure to update a specific portion of the view

I'm currently working on a directive template that features the following code snippet: <div class="colorpicker"> <div>Chosen color</div> <div class="color_swatch" style="background-color: {{ngModel}}">&nbsp;</div> & ...

Encountering ReferenceError when attempting to declare a variable in TypeScript from an external file because it is not defined

Below is the typescript file in question: module someModule { declare var servicePort: string; export class someClass{ constructor(){ servicePort = servicePort || ""; //ERROR= 'ReferenceError: servicePort is not defined' } I also attempted t ...

Achieving asynchronous results in the parent function with TypeScript: a guide

The code structure provided is as follows: import {socket} from './socket'; class A{ Execute(...args[]){ //logic with Promises SomeAsyncMethod1().then(fulfilled1); function fulfilled1(){ SomeAsyncMethod2(args).then(fulfilled2); ...

Unshifting values in a JavaScript array only if they exist in another array

I have two arrays of objects - one containing selected data and the other containing general data that needs to be displayed General data for display const arr = [ { id: "1", name: "Skoda - Auto" }, { id: "2" ...

Error TS2304: The identifier 'Map' cannot be found in version 5.1.0 of Node.js, TypeScript version 1.6.2, and WebStorm 11

While utilizing the filewatchers in my WebStorm 11, I encountered a TS2304 error related to ts-compiler 1.62. The error message reads: TS2304: Cannot find name 'Map' By deactivating the filewatcher and running the command tsc --target es6 app ...

The lack of invocation of Angular 4's ngOnInit function following a call to router

In my Angular application, I have 3 tabs where one tab displays a table listing employees. Initially, everything works well when the data is loaded for the first time in ngOnInit using an HTTP get request. However, after adding a new employee through a for ...

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

Step-by-step guide on uploading an image file using Nextjs

I am attempting to achieve the following: Upload an image file to a Next.js application Process it using cjwbw/real-esrgan:d0ee3d708c9b911f122a4ad90046c5d26a0293b99476d697f6bb7f2e251ce2d4 Retrieve the enhanced version of the image Is there anyone who can ...

TypeScript recursive object mapping utility

I am currently developing a type-safe object mapper in TypeScript. So far, I have successfully implemented this at a single level of depth using this playground. enum TransformerActions { Delete = 'delete', } type TransformerMap<S> = ...

Is there a way to determine if a route, or any of its nested routes, are currently active

Consider the following route examples: <Routes> <Route path="admin"> <Route path="users"> <Route index element={<UserList />} /> <Route path="create" element={<UserDetails ...

Angular is throwing a RangeError due to exceeding the maximum call stack size

Encountering a stackOverflow error in my Angular app. (see updates at the end) The main issue lies within my component structure, which consists of two components: the equipment component with equipment information and the socket component displaying conn ...

Add a class individually for each element when the mouse enters the event

How can I apply the (.fill) class to each child element when hovering over them individually? I tried writing this code in TypeScript and added a mouseenter event, but upon opening the file, the .fill class is already applied to all elements. Why is this ...

Angular's ng-select fails to select the value when generating the dynamic control

Currently, I am working on dynamically adding cities using ng-select in order to have search functionality while entering city names. For example, if I have two city names saved in a form and need to display them in separate ng-select controls when editing ...

RC7 is missing the necessary HTTP_PROVIDERS for the resolveAndCreate HTTP method in Angular2

During the time of RC4, I was able to create my own custom http instance using a function like this: export function createHTTP(url:string, headers?:Headers){ let injector = ReflectiveInjector.resolveAndCreate([ myHttp, {provide:'defaultUrl ...

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

Is there a way to import a $lib into my svelte project without encountering typescript errors in vscode? The project is building and running smoothly. import ThemeSwitch from '$lib/ThemeSwitch/ThemeSwitch.svelte'; The error message says "Canno ...

Employ material-ui default prop conditionally

I am implementing a StepLabel component in material ui. Depending on the props passed to the parent, I may need to make changes to the icon property of the StepLabel: interface Props { customClasses?: ClassNameMap; customIcon?: ReactNode; } const MySt ...

Enabling Javascript compilation while overlooking typescript errors

Currently, I am working in VS Code with create-react-app using TypeScript. Whenever there are type errors, they show up in the browser and prevent compilation by TypeScript. I am looking for a way to only see these errors in the Google console and termin ...