Jasmine test confirms that momentJS objects with the same values do not match

Question

Jasmine test confirms that momentJS objects with the same values do not match

In my angular-cli project, I have a set of Jasmine tests that include various assertions. One particular assertion looks like this:

expect(dispatchSpy).toHaveBeenCalledWith({
  type: 'SET_RANGE', payload: { value: 'Weekly', start: moment('2017-04-24'), end: moment() }
});

However, upon running the test, I encounter the following error message:

Expected spy dispatch to have been called with [ Object({ type: 'SET_RANGE', payload: Object({ value: 'Weekly', start: Mon Apr 24 2017 00:00:00 GMT+0100, end: Sat Apr 29 2017 00:00:00 GMT+0100 }) }) ] but actual calls were [ Object({ type: 'SET_RANGE', payload: Object({ value: 'Weekly', start: Mon Apr 24 2017 00:00:00 GMT+0100, end: Sat Apr 29 2017 00:00:00 GMT+0100 }) }) ]

This issue seems to stem from mismatched properties within the momentJS object. In other scenarios, I've resolved similar problems by comparing formatted date values like so:

expect(moment('2017-01-01').format()).toEqual(moment('2017-01-01').format())

Unfortunately, when using ).toHaveBeenCalledWith(, I can't implement the same format() method. Any ideas on how to approach this situation?

angular typescript jasmine momentjs karma-jasmine

Answer 1

Answer №1

To check for partial object equality, you can utilize the jasmine.objectContaining feature. As noted by @Dave Bush, moment objects require manual verification. You can create a custom matcher for this using jasmine custom matcher along with moment().isSame.

Below is an example of a JavaScript test using Jasmine 2:

describe('Moment containing object', function () {   

    beforeEach(function () {
        jasmine.addMatchers({
            toBeEqualMoment: function () {
                return {
                    compare: function (actual, expected) {
                        let result = {};
                        result.pass = actual.isSame(expected);
                        return result;
                    }
                };
            }
        });
    });

    it('is equal to moment containg object', function () {
        let input = {type: 'SET_RANGE', payload: { value: 'Weekly', start: moment('2017-04-24'), end: moment() }};
        let fooSpy = jasmine.createSpy('foo');

        fooSpy(input);

        let joc = jasmine.objectContaining;
        expect(fooSpy).toHaveBeenCalledWith(joc({type: 'SET_RANGE', payload: joc({value: 'Weekly'})}));
        let spyCallParam = fooSpy.calls.mostRecent().args[0];
        expect(spyCallParam.payload.start).toBeEqualMoment(input.payload.start);
        expect(spyCallParam.payload.end).toBeEqualMoment(input.payload.end);
    });

});

View on JSFiddle

For further insights on custom matchers, I recommend reading this article by @boriscoder.

Answer 2

To check for partial object equality, you can utilize the jasmine.objectContaining feature. As noted by @Dave Bush, moment objects require manual verification. You can create a custom matcher for this using jasmine custom matcher along with moment().isSame.

Below is an example of a JavaScript test using Jasmine 2:

describe('Moment containing object', function () {   

    beforeEach(function () {
        jasmine.addMatchers({
            toBeEqualMoment: function () {
                return {
                    compare: function (actual, expected) {
                        let result = {};
                        result.pass = actual.isSame(expected);
                        return result;
                    }
                };
            }
        });
    });

    it('is equal to moment containg object', function () {
        let input = {type: 'SET_RANGE', payload: { value: 'Weekly', start: moment('2017-04-24'), end: moment() }};
        let fooSpy = jasmine.createSpy('foo');

        fooSpy(input);

        let joc = jasmine.objectContaining;
        expect(fooSpy).toHaveBeenCalledWith(joc({type: 'SET_RANGE', payload: joc({value: 'Weekly'})}));
        let spyCallParam = fooSpy.calls.mostRecent().args[0];
        expect(spyCallParam.payload.start).toBeEqualMoment(input.payload.start);
        expect(spyCallParam.payload.end).toBeEqualMoment(input.payload.end);
    });

});

View on JSFiddle

For further insights on custom matchers, I recommend reading this article by @boriscoder.

Answer 3

Answer №2

The issue at hand is the comparison of two separate pointers, rather than two distinct values.

My preferred approach in such scenarios involves creating the object before setting expectations...


let date = moment('2017-01-01');
expect(date).toEqual(date);

If you can manipulate the object intended for use with toHaveBeenCalledWith(), adjust the code to compare pointers.

Alternatively, consider accessing the parameter passed using calls.argsFor(index) and comparing it to format() as customary.

Answer 4

The issue at hand is the comparison of two separate pointers, rather than two distinct values.

My preferred approach in such scenarios involves creating the object before setting expectations...


let date = moment('2017-01-01');
expect(date).toEqual(date);

If you can manipulate the object intended for use with toHaveBeenCalledWith(), adjust the code to compare pointers.

Alternatively, consider accessing the parameter passed using calls.argsFor(index) and comparing it to format() as customary.

Jasmine test confirms that momentJS objects with the same values do not match

Answer №1

Answer №2

Similar questions

What is the process for developing an interface adapter using TypeScript?

Extracting arrays from JSON in Angular: A step-by-step guide

Vue.js is unable to recognize this type when used with TypeScript

Guide on implementing an enum as a type by attaching it to a class as a static variable

The server is showing a discrepancy in date comparisons with MomentJS

Using the Vuex Module Decorator: A guide on accessing the store from a module

Error: Unable to generate MD5 hash for the file located at 'C:....gradle-bintray-plugin-1.7.3.jar' in Ionic framework

The error message "HighCharts Sankey + NextJS: TypeError: Unable to access property 'Core/Series/Point.js' of undefined" occurred

Adjust the icon's color after it has been clicked

Retrieving text content from a file using React

Efficient Typescript ambient modules using shorthand notation

Sorting the table in Angular Material is proving to be a challenge

Creating a specialized Docker image for Angular 9 production deployment

Is data binding not functioning properly in Angular 8?

Building Components on the Fly with Angular 5

I am developing a JWT authentication and authorization service for my Angular application. However, I am running into issues when trying to implement observables

Leveraging Array.map within Angular Interpolation

Effective ways of making mat-toolbar react to Angular modifications

Primeng could not locate the material theme

I'm having trouble with the @Input() binding in my custom directive and it's not working as intended