Timing and framing challenges arise when working with Jasmine-marbles and incorporating hot and cold features

If you want to check out a quick demo, feel free to download it here: https://stackblitz.com/edit/angular-vczzqp. Simply hit export in the top right corner and then in your preferred terminal run install and ng test with your favorite browser.

It seems like the internal timings of Jasmine are not aligning properly for the objects.

Below is a test along with the specific error that I encountered. You can find the full test class example under app/Test.

it('should return a GET_GENERIC_FAILED when the services throws', () => {
    const action = new genericActions.GetAllGenericAction();

    genericsService.getAllGenerics.and.returnValue(Observable.throw({}));

    actions$.stream = hot('a', { a: action });
    const expected = cold('b', { b: new genericActions.GetGenericFailedAction() });

    expect(effects.getAllGenerics).toBeObservable(expected);
});

And here's the error message:

Expected
    [Object({
        frame: 0,
        notification: Notification({
            kind: 'N',
            value: GetGenericFailedAction({
                type: '[GENERIC] Get Generic Failed'
            }),
            error: undefined,
            hasValue: true
        })
    }), Object({
        frame: 0,
        notification: Notification({
            kind: 'C',
            value: undefined,
            error: undefined,
            hasValue: false
        })
    })]
    to equal
    [Object({
        frame: 0,
        notification: Notification({
            kind: 'N',
            value: GetGenericFailedAction({
                type: '[GENERIC] Get Generic Failed'
            }),
            error: undefined,
            hasValue: true
        })
    })].

Your guidance on this matter would be highly appreciated.

Answer №1

There seems to be a problem related to how errors are being handled.

To resolve this issue, it was necessary to include the | symbol to indicate completion of the observable and also use () to group the expected observable for the operation.

actions$.stream = hot('a|', { a|: action });
const expected = cold('(b|)', { b: new genericActions.GetGenericFailedAction() });

You can find more information on the syntax here, but the documentation aimed at internal maintainers may be easier to understand.

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

Encountering continuous loops during the resolution of sinon, hindering the ability to conduct proper unit testing in node

In an attempt to implement unit testing in Nodejs using sinon, I have recently installed the following libraries: 1 npm i mocha [2] npm i chai [3] npm i sinon Below is the code that I am working with: unitTest-app.js var sinon = require('sinon&a ...

What causes the "This expression is not callable..." errors to occur in TypeScript and React JS?

As a newcomer to typescript, I am unsure why I am encountering this error while working with my data list array: const { data: CUData = { cu: [] as Array<CuType> }, } = useGetCUQuery(); let CUDataArray = CUData && CUData.cu ? CUDat ...

Angular's virtual scroll feature can be a little wonky and j

While utilizing Angular Material Virtual scroll, I've encountered an issue where the items load correctly into the DOM, but during scrolling, it jumps around and suddenly moves to the end. <cdk-virtual-scroll-viewport #scrollViewport (scrolled ...

Is it necessary to wait for the resolve function when using hooks in SvelteKit?

i have implemented this handle function for SvelteKit hooks and since it returns a promise of response, the resolve function does not necessarily need to be awaited. This is because it is a function that either directly returns a value or returns a promise ...

Can anyone clarify what the term 'this' is referring to in this particular snippet of code?

Upon analyzing the following code snippet: export abstract class CustomError extends Error { abstract statusCode: number; constructor(message: string) { super(message); Object.setPrototypeOf(this, CustomError.prototype); } abstract seri ...

Essential typing techniques required for manipulating data retrieved from GraphQL

My headless CMS is responsible for generating all types in my GraphQL schema. Upon querying, I receive a result that contains an array which I can manipulate. However, when attempting to use filter, map, or find methods on the returned array, an error me ...

Enhancing TypeScript Data Objects

I'm looking to expand a data object in TypeScript by introducing new fields. Although I know it's a common practice in JavaScript, I'm struggling to get it to compile without making bar optional in the provided snippet. I am interested in f ...

issue with angular material mat-accordion on click event not scrolling to the top

When the expansion panel header in Angular Material is clicked, the onExpand function is supposed to be called. However, at that time, the window scroll should move to the top or change position but this functionality is not working as expected. onExpan ...

The 'isLoading' property is not found in the type 'UseMutationResult<AxiosResponse<any, any>, Error, void, unknown>'.ts(2339)

I'm currently working on implementing a delete functionality that displays a loading state using the useMutate function from tanstackquery. However, I encountered an issue where the loading state is not shown when I click the delete button, even after ...

Conceal a division based on its numerical position

I'm having trouble figuring out how to hide multiple divs based on an index that I receive. The code snippet below hides only the first div with the id "medicalCard", but there could be more than one div with this id. document.getElementById("medical ...

When starting the application, Angular 6's RouterStateSnapshot state.url initially reflects as '/dashboard'

My app has routes structured like this: const routes: Routes = [ { path: '', component: MainComponent, canActivate: [AuthGuard], children: [ { path: '', redirectTo: 'dashboard' ...

Encountering a WebPack Issue During the Upgrade from Ionic 4 to Ionic 6

My current Ionic project version is 4.1, and I want to update it to the latest version. Although I have reinstalled all the packages, when I attempt to run ng serve, I encounter an error: <e> [webpack-dev-middleware] HookWebpackError: Transform faile ...

Conceal optional navigation bar options once a user has logged in - utilizing Angular 8

I need assistance with hiding certain links in my navbar once a user has logged in. Below are the current navbar menus: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav ...

What is the best way to determine if a value from my array is present within a different object?

I have an array with oid and name data that I need to compare against an object to see if the oid value exists within it. Here is the array: const values = [ { "oid": "nbfwm6zz3d3s00", "name": "" ...

Exploring TypeScript: Navigating the static methods within a generic class

I am trying to work with an abstract class in TypeScript, which includes an enum and a method: export enum SingularPluralForm { SINGULAR, PLURAL }; export abstract class Dog { // ... } Now, I have created a subclass that extends the abstract cla ...

Having trouble running Jest tests with three objects in my Vite Vue TypeScript project

Here is a snippet of code that I am testing: import {Line} from "../src/modules/objs/line"; import {SceneWrapper} from "../src/modules/scene/sceneWrapper"; import * as THREE from "three"; import {Dr ...

The Angular Fire Firestore module does not include the 'FirestoreSettingsToken' in its list of exported members

When I initially compiled my project, this issue occurred. The error message displayed is as follows: Module '".../node_modules/@angular/fire/firestore/angular-fire-firestore"' has no exported member 'FirestoreSettingsToken' In my a ...

Tips for adding and verifying arrays within forms using Angular2

Within my JavaScript model, this.profile, there exists a property named emails. This property is an array composed of objects with the properties {email, isDefault, status}. Following this, I proceed to define it as shown below: this.profileForm = this ...

I need to adjust the print layout so that the material extends beyond the confines of an A4 page

I created a chalan format with 3 copies, however only 2 of them are printing correctly on the same page. The third copy is not displaying properly. Take a look at this screenshot: ...

Issues with Observable<boolean> functionality

Can anyone lend a hand? I'm facing a challenge with this function that is crucial for the application. Typescript File get $approved(): Observable<boolean> { return this.$entries.map(entries => { if (entries.length > 0) { ret ...