Testing reactive streams with marble diagrams and functions

Upon returning an object from the Observable, one of its properties is a function.
Even after assigning an empty function and emitting the object, the expectation using toBeObservable fails due to a non-deep match.

For testing purposes, I am utilizing rxjs-marbles/jest. Below is a sample test case:

it('...', marbles(m => {
  const source = m.cold('(a|)');
  const expected = m.cold('(b|)', { b: {
    label: 'A',
    action: () => { }
  } });

  const destination = source.pipe(
    map(() => ({
      label: 'A',
      action: () => { }
    }))
  );
  m.expect(destination).toBeObservable(expected);
}));

The outcome looks like this:

expect(received).toEqual(expected) // deep equality

Expected: [{"frame": 0, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"action": [Function action], "label": "A"}}}, {"frame": 0, "notification": {"error": undefined, "hasValue": false, "kind": "C", "value": undefined}}]
Received: serializes to the same string

All I really need to verify is if the action is defined in the object. Is this achievable?

Answer №1

It appears that defining expected can be done in the following way:

const expected = m.cold('(b|)', { b: {
    label: 'A',
    action: expect.any(Function)
  } });

Interestingly, this method produces the desired result.

Strangely enough, I vaguely recall attempting this a few days ago and encountering difficulties, but perhaps my approach was slightly different back then.

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

It appears there was a mistake with [object Object]

Hey there, I'm currently working with Angular 2 and trying to log a simple JSON object in the console. However, I keep encountering this issue https://i.stack.imgur.com/A5NWi.png UPDATE... Below is my error log for reference https://i.stack.imgur.c ...

My NodeJS MongoDB application is being bombarded by an infinite loop of "Sending request..." messages from the Postman

This is the complete code for my chatbot application const express = require('express'); const app = express(); const MongoClient = require('mongodb').MongoClient; const assert = require('assert'); const bodyParser = require(& ...

Automatically update and reload Express.js routes without the need to manually restart the server

I experimented with using express-livereload, but I found that it only reloaded view files. Do you think I should explore other tools, or is there a way to configure express-livereload to monitor my index.js file which hosts the server? I've come ac ...

The error message indicates a change in the binding value within the template, resulting in an

This is the structure of my component A : <nb-tab tabTitle="Photos" [badgeText]="centerPictures?.pictures?.length" badgePosition="top right" badgeStatus="info"> <app-center-pictures #centerPictures [center]="center"> ...

The Angular firestore is showing an error stating that the property 'toDate' is not found in the 'Date' type

I am currently working on converting a timestamp object from Firestore to a Date object in TypeScript by utilizing the toDate() method. import { AngularFirestore } from '@angular/fire/firestore'; ... constructor(private database?: AngularFirestor ...

Introducing the concept of type-specific name inclusion

I am currently developing my Angular app using TypeScript with the goal of preventing redundancy through some form of generic handling. Here is where I am starting: class BaseProvider { api_url = 'http://localhost:80/api/FILL_OUT_PATH/:id&apo ...

Steps to initiate a slideUp animation on a div using jQuery

Is there a way to make a div slide up from the bottom of the page to cover 30% of the screen when a user clicks a button, and then slide back down when the button is clicked again? Any suggestions on how I can achieve this? Thank you! EDIT 1) $(document ...

Browsers seem to only respond to the FileReader onload event on the second try

Currently I am working on implementing in-browser image processing using HTML5 and encountering a strange issue specifically in Chrome. The problem lies with the onload event handler for the File API FileReader class, as the file is only processed correctl ...

How can I incorporate a standalone Vuetify component into my Nuxt.js project?

Using Vuetify with nuxt.js specifically for the dashboard layout - how can I achieve this in my nuxt.config.js file? modules: [ //['nuxt-leaflet', { /* module options */}], 'bootstrap-vue/nuxt', '@nuxtjs/ax ...

Discover the method of obtaining the post id within an Ajax callback in the Wordpress

Currently, I am using the Add to cart Ajax callback, but I am facing difficulty in retrieving the post Id from it. MY OBJECTIVE: My intention is to apply the add_filter only on a specific page. Here is the PHP code in functions.php file: add_filter( &apos ...

Unexpected Issue Encountered in JQuery Integration

I recently added jQuery to my HTML file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> After that, I included a link to my JavaScript file: <script src="public/javascripts/new_javascript.js" type ...

What should I designate as the selector when customizing dialog boxes?

I am attempting to change the title bar color of a dialog box in CSS, but I am running into issues. Below is the HTML code for the dialog box and the corresponding CSS. <div id="picture1Dialog" title = "Title"> <p id="picture1Text"> ...

Exploring VSCode Debugger with Typescript: Traversing through Step Over/Into leads to JavaScript file路径

Just starting out with VSCode and using it to debug node.js code written in Typescript. One thing that's been bothering me is that when I stop at a breakpoint and try to "Step Over" or "Step Into", the debugger takes me to the compiled Javascript file ...

Modifying the return type of an observable using the map operator

I have been investigating how to modify the return type of an Observable. My current framework is Angular 5. Let's take a look at this example: public fetchButterflyData(): Observable<Butterfly[]> { return http.get<Larva[]>('u ...

Add a hyperlink within a button element

I am looking to add a route to my reusable 'button' component in order to navigate to another page. I attempted using the <Link> </Link> tags, but it affected my CSS and caused the 'button' to appear small. The link works if ...

Retrieve the content following a successful loading of the remote URL

I have been utilizing this function to retrieve content from a Remote URL function fetchContent($url) { $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $scrapedPage = curl_exec($ch); curl_close($ch); $content = $scrapedPage; return ...

Steps for creating a dropdown menu that opens when hovering over a selection using Bootstrap Vue

Is there a way to activate the <select> or <b-form-select> dropdown menu when hovering over it, without relying on JQuery or any third-party plugin except for Vue.js? ...

Angular UI directive for modal confirmation

Looking to create a custom Angular directive using angular-bootstrap that mimics the confirm() function. Check out the visual result and desired behavior in this plunk: http://embed.plnkr.co/27fBNbHmxx144ptrCuXV/preview Now, I want to implement a directi ...

block the UI when a certain amount of time has passed

When I click on a button, I implement the following code: $(document).ready(function () { $('.find').click(function () { $.blockUI({ message: '<table><tr><td><img src="images/pleas ...

Is there a way to retrieve the requested data in useEffect when using next.js?

As a newcomer to next.js and TypeScript, I am facing an issue with passing props from data retrieved in useEffect. Despite my attempts, including adding 'return scheduleList' in the function, nothing seems to work. useEffect((): (() => void) = ...