Custom matchers in Angular Jasmine

Mostafa Saadatnia
Webtips
Published in
4 min readJun 28, 2020
Custom matchers in Angular Jasmine

Creating array.matcher.ts

Often a project will want to encapsulate custom matching code for use across multiple specs. Here is how to create a Jasmine-compatible custom matcher.

A custom matcher at its root is a comparison function that takes an actual value and expected value. This factory is passed to Jasmine, ideally in a call to beforeEach, and will be in scope and available for all of the specs inside a given call to describe. Custom matchers are torn down between specs. The name of the factory will be the name of the matcher exposed to the return value of the call to expect.

This object has a custom matcher named “toBeSorted”.

Matcher Factories

Custom matcher factories are passed two parameters: util, which has a set of utility functions for matchers to use (see: matchersUtil.js for the current list) and customEqualityTesters which need to be passed in if util.equals is ever called. These parameters are available for use when the matcher is called.

The factory method should return an object with a compare function that will be called to check the expectation.

A Function to compare

The compare function receives the value passed to expect() as the first argument — the actual — and the value (if any) passed to the matcher itself as second argument.

toBeSorted takes an optional expected argument, so define it here if not passed in.

Result

The compare function must return a result object with a pass property that is a boolean result of the matcher. The pass property tells the expectation whether the matcher was successful (true) or unsuccessful (false). If the expectation is called/chained with .not, the expectation will negate this to determine whether the expectation is met.

toBeSorted tests for true sorting of the actual’s array cells to see if it matches with a DESC sorted array the expectation.

Failure Messages

If left undefined, the expectation will attempt to craft a failure message for the matcher. However, if the return value has a message property it will be used for a failed expectation.

The matcher succeeded, so the custom failure message should be present in the case of a negative expectation — when the expectation is used with .not.

The matcher failed, so the custom failure message should be present in the case of a positive expectation.

Return the result of the comparison.

Custom negative comparators

If you need more control over the negative comparison (the not case) than the simple boolean inversion above, you can also have your matcher factory include another key, negativeCompare alongside compare, for which the value is a function to invoke when .not is used. This function/key is optional.

Registration and Usage

Register the custom matchers with Jasmine. All properties on the object passed in will be available as custom matchers (e.g., in this case toBeSorted).

Once a custom matcher is registered with Jasmine, it is available on any expectation.

Creating array.matcher.d.ts

The compiler needs to declaration file contains declaring module jasmine, and inside a generic interface Matchers, and inside that we sould write our custome matchers signature.

Usage custome-test.spec.ts

You can use your own custom matchers as easy as built-in matchers.but you should register the matchers in a section inside your test for example beforeEach() method.

Also, you should refer your test spec to that array.matcher.d.ts at the top of your file.

All you need is Here.very go:

--

--