Dealt with and dismissed commitments in a personalized Jasmine Matcher

Question

Dealt with and dismissed commitments in a personalized Jasmine Matcher

The Tale:

A unique jasmine matcher has been crafted by us, with the ability to perform 2 key tasks:

hover over a specified element
verify the presence of a tooltip displaying the expected text

Execution:

toHaveTooltip: function() {
    return {
        compare: function(elm, expectedTooltip) {
            var tooltipPage = requirePO("tooltip");

            browser.actions().mouseMove(elm).perform();
            browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "The tooltip is not yet visible.");

            return {
                pass: tooltipPage.tooltip.getText().then(function(actualTooltip) {
                    return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                }),
                message: "Missing expected tooltip '" + expectedTooltip + "'."
            };
        }
    };
},

Moreover, the tooltipPage serves as a separately defined Page Object:

var Tooltip = function () {
    this.tooltip = element(by.css(".tooltip"));
};

module.exports = new Tooltip();

This utility has proven to be handy for us, upholding the DRY principle in maintaining our test codebase clear and comprehensible:

expect(page.fromDateInput).toHaveTooltip("After");

The Challenge and Inquiry:

Presently, I am aiming to enhance the matcher's functionality to handle two distinct scenarios separately:

absence of any tooltip displayed upon hovering (essentially, when the browser.wait() promise is rejected)
presence of a tooltip that doesn't match the expected one

How could the matcher be refined to address these issues individually and report distinct errors?

Evaluating Solutions Attempted:

toHaveTooltip: function() {
    return {
        compare: function(elm, expectedTooltip) {
            var tooltipPage = requirePO("tooltip");

            browser.actions().mouseMove(elm).perform();

            return browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "The tooltip is still invisible.").then(function () {
                return {
                    pass: tooltipPage.tooltip.getText().then(function(actualTooltip) {
                        return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                    }),
                    message: "Element lacks the expected tooltip '" + expectedTooltip + "'."
                };
            }, function () {
                return {
                    pass: false,
                    message: "No tooltip appeared upon hovering over the element"
                }
            });
        }
    };
},

An attempt was made to explicitly handle the browser.wait() operation and distinguish between the "success" and "error" outcomes. However, this led to a Jasmine Spec timeout and a lengthy red error message on the console:

Expected ({ ptor_: ({ setFileDetector: Function, ...
5 minutes scrolling here
... InnerHtml: Function, getId: Function, getRawId: Function }) to have tooltip 'After'.

It appears challenging to return a promise from the "compare" function.

javascript selenium jasmine promise protractor

Answer 1

Answer №1

According to jasminewd2 (An adapter for Jasmine-to-WebDriverJS. Utilized by Protractor), the following code snippet explains:

An expectation resolves any promises provided for actual and expected values, as well as the pass property of the result object.

If there is an async function or a promise that needs resolution in a custom matcher/expectation, it must be wrapped with the result.pass value so that protractor waits for the promise to resolve.

In cases where a jasmine spec timeout error occurs due to protractor not recognizing a promise that needs resolving before an operation, one can either pass the async function directly in the expect statement or to the pass value within the result object. Below is an example code snippet demonstrating this concept:

toHaveTooltip: function() {
  return {
      compare: function(elm, expectedTooltip) {
          var tooltipPage = requirePO("tooltip");

          browser.actions().mouseMove(elm).perform();

              return {
                  pass: browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "Tooltip is still not visible.").then(function () {
                            tooltipPage.tooltip.getText().then(function(actualTooltip) {
                                return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                            }),
                        }, function () {
                            return false;
                        }),
                  message: "Error Occurred"
              }
      }
  };
},

One limitation of the above code is the inability to create a custom error message. To address this, explicitly returning the result object allows for customization of error messages as needed. Here's an illustration:

var result = {};
result.pass = browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "Tooltip is still not visible.").then(function () {
                  tooltipPage.tooltip.getText().then(function(actualTooltip) {
                      result.message = "Element does not have the tooltip '" + expectedTooltip + "'.";
                      return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                  }),
              }, function () {
                  result.message = "No tooltip shown on mouse over the element";
                  return false;
              });
return result;

Note: In absence of the message property within the result object, protractor will automatically generate a generic error message containing the promise object information (Evidenced by a lengthy message starting with - { ptor_: ... }).

Hopefully, this explanation proves helpful.

Answer 2

According to jasminewd2 (An adapter for Jasmine-to-WebDriverJS. Utilized by Protractor), the following code snippet explains:

An expectation resolves any promises provided for actual and expected values, as well as the pass property of the result object.

If there is an async function or a promise that needs resolution in a custom matcher/expectation, it must be wrapped with the result.pass value so that protractor waits for the promise to resolve.

In cases where a jasmine spec timeout error occurs due to protractor not recognizing a promise that needs resolving before an operation, one can either pass the async function directly in the expect statement or to the pass value within the result object. Below is an example code snippet demonstrating this concept:

toHaveTooltip: function() {
  return {
      compare: function(elm, expectedTooltip) {
          var tooltipPage = requirePO("tooltip");

          browser.actions().mouseMove(elm).perform();

              return {
                  pass: browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "Tooltip is still not visible.").then(function () {
                            tooltipPage.tooltip.getText().then(function(actualTooltip) {
                                return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                            }),
                        }, function () {
                            return false;
                        }),
                  message: "Error Occurred"
              }
      }
  };
},

One limitation of the above code is the inability to create a custom error message. To address this, explicitly returning the result object allows for customization of error messages as needed. Here's an illustration:

var result = {};
result.pass = browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "Tooltip is still not visible.").then(function () {
                  tooltipPage.tooltip.getText().then(function(actualTooltip) {
                      result.message = "Element does not have the tooltip '" + expectedTooltip + "'.";
                      return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                  }),
              }, function () {
                  result.message = "No tooltip shown on mouse over the element";
                  return false;
              });
return result;

Note: In absence of the message property within the result object, protractor will automatically generate a generic error message containing the promise object information (Evidenced by a lengthy message starting with - { ptor_: ... }).

Hopefully, this explanation proves helpful.

Answer 3

Answer №2

While recalling what I've read previously, it seems that jasmine 2 may not support the type of matcher you are attempting to use (with an async function inside), and returning promises. I will make an effort to locate the source and provide an update here. Additionally, performing mouse actions within the matcher is not recommended as it deviates from the intended purpose of matchers.

Therefore, my suggestion is as follows: For cleaner code, consider exporting the following into a function and invoking it.

var checkToolTipVisibility = function(elm, expectedTooltip) {
    browser.actions().mouseMove(elm).perform();
    browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "Tooltip is still not visible."); // Optionally handle timeout or other conditions here...
    expect(tooltipPage.tooltip.getText()).toEqual(expectedTooltip);
}

checkToolTipVisibility(page.fromDateInput, "After"); // Example usage

This approach offers a straightforward and neat solution without the need for custom matchers. It aligns with the conventions of Jasmine (avoiding async functions in matchers). Personally, I typically store such functions in a 'utils.js' file and require it as necessary in my code.

I hope this explanation proves helpful, and I will continue searching for the original source of information supporting my initial statement!

Answer 4

While recalling what I've read previously, it seems that jasmine 2 may not support the type of matcher you are attempting to use (with an async function inside), and returning promises. I will make an effort to locate the source and provide an update here. Additionally, performing mouse actions within the matcher is not recommended as it deviates from the intended purpose of matchers.

Therefore, my suggestion is as follows: For cleaner code, consider exporting the following into a function and invoking it.

var checkToolTipVisibility = function(elm, expectedTooltip) {
    browser.actions().mouseMove(elm).perform();
    browser.wait(EC.visibilityOf(tooltipPage.tooltip), 5000, "Tooltip is still not visible."); // Optionally handle timeout or other conditions here...
    expect(tooltipPage.tooltip.getText()).toEqual(expectedTooltip);
}

checkToolTipVisibility(page.fromDateInput, "After"); // Example usage

This approach offers a straightforward and neat solution without the need for custom matchers. It aligns with the conventions of Jasmine (avoiding async functions in matchers). Personally, I typically store such functions in a 'utils.js' file and require it as necessary in my code.

I hope this explanation proves helpful, and I will continue searching for the original source of information supporting my initial statement!

Answer 5

Answer №3

Having trouble getting this code snippet to function properly within the Karma/Angular 2+ environment. I resorted to utilizing Jasmine's global fail method directly inside the promise:

const _global: any = (typeof window === 'undefined' ? global : window);

const customMatchers: jasmine.CustomMatcherFactories = {
  toPassA11y: () => {
    return {
      compare: (el: any): any => {
        const axe = require('axe-core');
        const result: any = {
          message: '',
          pass: true
        };

        axe.run((error: Error, results: any) => {
          if (error) throw error;
          if (results.violations.length > 0) {
            _global.fail('Expected element to pass accessibility checks.');
          }
        });

        return result;
      }
    };
  }
};

_global.beforeEach(() => {
  jasmine.addMatchers(customMatchers);
});

In the test suite:

describe('Home component', () => {
  it('should verify accessibility compliance', async(() => {
    expect(document).toPassA11y();
  }));
});

Answer 6

Having trouble getting this code snippet to function properly within the Karma/Angular 2+ environment. I resorted to utilizing Jasmine's global fail method directly inside the promise:

const _global: any = (typeof window === 'undefined' ? global : window);

const customMatchers: jasmine.CustomMatcherFactories = {
  toPassA11y: () => {
    return {
      compare: (el: any): any => {
        const axe = require('axe-core');
        const result: any = {
          message: '',
          pass: true
        };

        axe.run((error: Error, results: any) => {
          if (error) throw error;
          if (results.violations.length > 0) {
            _global.fail('Expected element to pass accessibility checks.');
          }
        });

        return result;
      }
    };
  }
};

_global.beforeEach(() => {
  jasmine.addMatchers(customMatchers);
});

In the test suite:

describe('Home component', () => {
  it('should verify accessibility compliance', async(() => {
    expect(document).toPassA11y();
  }));
});

Answer 7

Answer №4

After studying @Girish Sortur's excellent answer on Stack Overflow, I have curated the complete code for a matcher that now successfully handles both scenarios of missing tooltips and varying tooltip text:

checkTooltip: function() {
    return {
        validate: function(element, expectedTooltip) {
            var tooltipComponent = requirePO("tooltip"),
                output = {};

            // hover over the element
            browser.actions().mouseMove(element).perform();

            // wait for the tooltip to display and manage possible errors
            output.pass = browser.wait(EC.visibilityOf(tooltipComponent.tooltip), 5000).then(function () {
                return tooltipComponent.tooltip.getText().then(function(actualTooltip) {
                    output.message = "Expected tooltip: '" + expectedTooltip + "'. Actual tooltip: '" + actualTooltip + "'.";
                    return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                })
            }, function () {
                output.message = "No tooltip appeared upon hovering over the element";
                return false;
            });
            return output;
        }
    };
},

Answer 8

After studying @Girish Sortur's excellent answer on Stack Overflow, I have curated the complete code for a matcher that now successfully handles both scenarios of missing tooltips and varying tooltip text:

checkTooltip: function() {
    return {
        validate: function(element, expectedTooltip) {
            var tooltipComponent = requirePO("tooltip"),
                output = {};

            // hover over the element
            browser.actions().mouseMove(element).perform();

            // wait for the tooltip to display and manage possible errors
            output.pass = browser.wait(EC.visibilityOf(tooltipComponent.tooltip), 5000).then(function () {
                return tooltipComponent.tooltip.getText().then(function(actualTooltip) {
                    output.message = "Expected tooltip: '" + expectedTooltip + "'. Actual tooltip: '" + actualTooltip + "'.";
                    return jasmine.matchersUtil.equals(actualTooltip, expectedTooltip);
                })
            }, function () {
                output.message = "No tooltip appeared upon hovering over the element";
                return false;
            });
            return output;
        }
    };
},

Dealt with and dismissed commitments in a personalized Jasmine Matcher

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using a straightforward approach with v-model in vue.js on an href element instead of a select

Problem with the property `className` not adding correctly on `$scope.eventSource`

Using multiple header tags in HTML

Retrieving ng-model using ng-change in AngularJS

Monitoring changes in session storage with AngularJS

Click Event for Basic CSS Dropdown Menu

Post a message utilizing javascript

Using JavaScript's document.write method to display HTML code, along with a variable retrieved from a Flash application

Encountering an "Unspecified Reference Error" while attempting to retrieve data from an API in your

Attempting to iterate over the array of objects in order to discover a match

What is the best way to manage a session using JavaScript?

What is the best way to extract the text inside a div element based on the input value in a

PhoneGap and jQuery prove ineffective in fetching json results from Twitter

JavaScript and AJAX: Dynamically Create URLs

Steps for displaying an image link on an aspx webpage

The "main" entry for ts-node is not valid when running ts-node-dev

Unleashing the power of real-time communication with XMPP using AngularJS

Difficulty encountered when consolidating intricate data attributes into a single array

When using the transition mode "out-in" in Vue, the returned ref element may be undefined

The resetFields() function fails to execute