lundi 27 juin 2016

Failing custom jasmine matcher

The Story:

We've been using a custom jasmine matcher to expect an element to have a hand/pointer cursor:

beforeEach(function() {
    jasmine.addMatchers({
        toHaveHandCursor: function() {
            return {
                compare: function(actual) {
                    return {
                        pass: actual.getCssValue("cursor").then(function(cursor) {
                            return cursor === "pointer";
                        })
                    };
                }
            };
        },
    });
});

It works great and makes the tests readable:

expect(queuePage.sortByButton).toHaveHandCursor();

The problem:

When the expectation fails, currently we get a completely unreadable huge chunk of red text on the console in a form:

  • Expected ElementFinder({ ptor_: Protractor({ getProcessedConfig: Function, forkNewDriverInstance: Function, restart: Function, controlFlow: Function, schedule: Function, setFileDetector: Function, getSession: Function, getCapabilities: Function, quit: Function, actions: Function, touchActions: Function, executeScript: Function, executeAsyncScript: Function, call: Function, wait: Function, sleep: Function, getWindowHandle: Function, getAllWindowHandles: Function, getPageSource: Function, close: Function, getCurrentUrl: Function, getTitle: Function, findElementInternal_: Function, findElementsInternal_ ... 10 minutes of scrolling ... , click: Function, sendKeys: Function, getTagName: Function, getCssValue: Function, getAttribute: Function, getText: Function, getSize: Function, getLocation: Function, isEnabled: Function, isSelected: Function, submit: Function, clear: Function, isDisplayed: Function, getOuterHtml: Function, getInnerHtml: Function, getId: Function, getRawId: Function, serialize: Function, takeScreenshot: Function }) to have hand cursor.

The Question:

Why is it happening? How can we improve the matcher and output a user-friendly error instead? Something like:

Expected 'auto' to be equal to 'pointer' cursor value.


From what I understand, we would need to provide a message value for a custom matcher, but I'm not completely sure how to pass an actual element's cursor CSS value into the message.

Aucun commentaire:

Enregistrer un commentaire