Skip to content

@shellygo/cypress-test-utils - v4.1.3 / Modules / Assertable

Class: Assertable<T>

Assertable wraps Cypress.Chainable so that your tests are as decoupled as possible from Cypress. By using the Assertable class, you can use the same assertions in your tests, regardless of the testing framework you use. All you need to do if you wish to replace Cypress with another testing framework and keep your tests, is to replace the implementation of the Assertable class. You can also add assertions of your own, by extending Assertable class.

Example

import { Assertable, CypressHelper, then } from "@shellygo/cypress-test-utils";

class MyAssertable<T> extends Assertable<T> {
  private styleFromWindow = (win: Window) => {
    const styleItem = win.localStorage.getItem(`style`);
    return JSON.parse(styleItem || "");
  };

  public shouldEqualToStoredStyle = () =>
    then(
      new CypressHelper().get.window().then((win) => {
         const style = styleFromWindow(win);
         then(this.chainable).shouldDeepNestedInclude(style);
      })
    );
}

class Driver {
 public given = {
   // your code here
 };
 public when = {
   // your code here
 };
 public get = {
   // your code here
 };
 public then = (chainable: Cypress.Chainable<any>) => new MyAssertable(chainable);
}

Type parameters

Name
T

Table of contents

Constructors

Properties

Methods

Constructors

constructor

• new Assertable<T>(chainable)

Type parameters

Name
T

Parameters

Name Type Description
chainable Chainable<T> private

Properties

chainable

• Protected Readonly chainable: Chainable<T>

private

Methods

should

▸ should(chainer, ...rest): Chainable<T>

Parameters

Name Type
chainer string
...rest any[]

Returns

Chainable<T>

shouldBeAccessible

▸ shouldBeAccessible(options?): void

Assert that there are no A11y violations. This will run axe against the document at the point in which it is called. This means you can call this after interacting with your page and uncover accessibility issues introduced as a result of rendering in response to user actions

Parameters

Name Type Description
options A11yOptions Set of options passed into rules or checks, temporarily modifying them. This enabled you to see violations while allowing your tests to pass. This should be used as a temporary measure while you address accessibility violations

Returns

void

Example

then(get.element("html")).shouldBeAccessible()

Example

then(get.elementByTestId("selector")).shouldBeAccessible({
 includedImpacts: ["critical", "minor"],
 rules: {
   "landmark-one-main": { enabled: false }
 }
})

shouldBeChecked

▸ shouldBeChecked(): Chainable<T>

Assert that at least one element of the selection is checked, using .is(':checked').

Returns

Chainable<T>

Example

   then(get.elementByTestId("checkbox-selector")).shouldBeChecked()

shouldBeDisabled

▸ shouldBeDisabled(): Chainable<T>

Assert that at least one element of the selection is disabled, using .is(':disabled').

Returns

Chainable<T>

Example

   then(get.elementByTestId("selector")).shouldBeDisabled()

shouldBeEnabled

▸ shouldBeEnabled(): Chainable<T>

Assert that at least one element of the selection is enabled, using .is(':enabled').

Returns

Chainable<T>

Example

   then(get.elementByTestId("selector")).shouldBeEnabled()

shouldBeFocused

▸ shouldBeFocused(): Chainable<T>

Assert that at least one element of the selection is focused.

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldBeFocused()

shouldBeGreaterThan

▸ shouldBeGreaterThan(value): Chainable<T>

Asserts that the target is a number or a date greater than the given number or date n respectively. However, it's often best to assert that the target is equal to its expected value.

Parameters

Name Type
value number

Returns

Chainable<T>

Example

   then(get.numberOfElements("radio")).shouldBeGreaterThan(5);

shouldBeGreaterThanOrEqual

▸ shouldBeGreaterThanOrEqual(value): Chainable<T>

Asserts that the target is a number or a date greater than or equal to the given number or date n respectively. However, it's often best to assert that the target is equal to its expected value.

Parameters

Name Type
value number

Returns

Chainable<T>

Example

  then(get.numberOfElements("radio")).shouldBeGreaterThanOrEqual(5);

shouldBeLessThan

▸ shouldBeLessThan(value): Chainable<T>

Asserts that the target is a number or a n date less than or equal to the given number or date n respectively. However, it's often best to assert that the target is equal to its expected value.

Parameters

Name Type
value number

Returns

Chainable<T>

Example

   then(get.numberOfElements("radio")).shouldBeLessThen(5);

shouldBeLessThanOrEqual

▸ shouldBeLessThanOrEqual(value): Chainable<T>

Asserts that the target is a number or a date less than or equal to the given number or date n respectively. However, it's often best to assert that the target is equal to its expected value.

Parameters

Name Type
value number

Returns

Chainable<T>

Example

then(get.numberOfElements('list-item')).shouldBeLessThanOrEqual(5)

shouldBeSelected

▸ shouldBeSelected(): Chainable<T>

Assert that at least one element of the selection is selected, using .is(':selected').

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldBeSelected()

shouldBeVisible

▸ shouldBeVisible(): Chainable<T>

Assert that at least one element of the selection is visible, using .is(':visible').

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldBeVisible()

shouldContainText

▸ shouldContainText(text): Chainable<T>

Assert that the text of the first element of the selection partially contains the given text, using .text().

Parameters

Name Type
text string

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldContainText("test")

shouldDeepEqual

▸ shouldDeepEqual(value): Chainable<T>

Causes all .equal, .include, .members, .keys, and .property assertions that follow in the chain to use deep equality instead of strict (===) equality. See the deep-eql project page for info on the deep equality algorithm: https://github.com/chaijs/deep-eql.

Parameters

Name Type
value any

Returns

Chainable<T>

Example

then(
  get.fixture("user")).shouldDeepEqual({
    name: "Jane Doe",
    id: "1234"
})

shouldDeepNestedInclude

▸ shouldDeepNestedInclude(value): Chainable<T>

Asserts that the target has a property with the given key name.

Parameters

Name Type
value any

Returns

Chainable<T>

Example

then(
  get.fixture("user")).shouldDeepNestedInclude({
    name: "Jane Doe",
    id: "1234",
    nested: {
      attr1: "something",
      attr2: "the other thing"
  }
})

shouldEndWith

▸ shouldEndWith(value): Chainable<string>

Asserts that text ends with value

Parameters

Name Type
value string

Returns

Chainable<string>

Example

  then(helper.get.elementsText('selector)).shouldEndWith('test')

shouldEqual

▸ shouldEqual(value): Chainable<T>

Asserts that the target is strictly (===) equal to the given val.

Parameters

Name Type
value any

Returns

Chainable<T>

Example

   then(get.inputValue("name-input")).shouldEqual("John")

shouldExist

▸ shouldExist(): Chainable<T>

Assert that the selection is not empty. Note that this overrides the built-in chai assertion. If the object asserted against is not a jQuery object, the original implementation will be called.

Returns

Chainable<T>

Example

  then(get.elementByTestId("selector")).shouldExist()

shouldHaveAttribute

▸ shouldHaveAttribute(attribute, expectedValue): Chainable<T>

Assert that the first element of the selection has the given attribute, using .attr(). Optionally, assert a particular value as well. The return value is available for chaining.

Parameters

Name Type
attribute string
expectedValue string

Returns

Chainable<T>

Example

 then(get.elementByTestId("selector")).shouldHaveAttribute("test")

shouldHaveBeenCalled

▸ shouldHaveBeenCalled(): Chainable<T>

Asserts spy was called ate least once

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldHaveBeenCalled()

shouldHaveBeenCalledOnce

▸ shouldHaveBeenCalledOnce(): Chainable<T>

Asserts spy was called exactly once

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldHaveBeenCalledOnce()

shouldHaveBeenCalledThrice

▸ shouldHaveBeenCalledThrice(): Chainable<T>

Asserts spy was called exactly thrice

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldHaveBeenCalledThrice()

shouldHaveBeenCalledTimes

▸ shouldHaveBeenCalledTimes(n): Chainable<T>

Asserts spy was called exactly n times

Parameters

Name Type Description
n number number of times spy should have been called

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldHaveBeenCalledTimes(5)

shouldHaveBeenCalledTwice

▸ shouldHaveBeenCalledTwice(): Chainable<T>

Asserts spy was called exactly twice

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldHaveBeenCalledTwice()

shouldHaveBeenCalledWith

▸ shouldHaveBeenCalledWith(...args): Chainable<T>

Assert spy was called at least once with the provided arguments.

Parameters

Name Type
...args any[]

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldHaveBeenCalledWith({ id: 1 })

shouldHaveBeenCalledWithMatch

▸ shouldHaveBeenCalledWithMatch(...args): Chainable<T>

Assert spy was called with matching arguments (and possibly others).

Parameters

Name Type
...args any[]

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldHaveBeenCalledWithMatch(match({ id: 1 }))

Example

 it('should call the get method of the HTTP client with a URL with query param filter = status', () => {
  healthService.fetchHealthResults(status);
  then(get.mock.httpClientService().get).shouldHaveBeenCalledWith(
    match(baseURL),
    match.hasNested(
      'params.updates[0]',
      match({ param: 'filter', value: `status eq ${status}` })
    )
  );
});

shouldHaveClass

▸ shouldHaveClass(value): Chainable<T>

Assert that the selection has the given CSS class.

Parameters

Name Type
value string

Returns

Chainable<T>

Example

  then(get.elementByTestId("selector")).shouldHaveClass("test")

shouldHaveCss

▸ shouldHaveCss(property, expectedValue): Chainable<T>

Assert that an element has a css property with the given value.

Parameters

Name Type
property string
expectedValue string

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldHaveCss("color", "rgb(102, 102, 102)"")

shouldHaveLength

▸ shouldHaveLength(length): Chainable<T>

Asserts that the target's length property is equal to the given number n..

Parameters

Name Type
length number

Returns

Chainable<T>

Example

   then(get.elementByTestId("selector")).shouldHaveLength(3)

shouldHaveProp

▸ shouldHaveProp(property, expectedValue): Chainable<T>

Assert that the first element of the selection has the given attribute, using .prop(). Optionally, assert a particular value as well. The return value is available for chaining.

Parameters

Name Type
property string
expectedValue string | boolean

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldHaveProperty("test")

shouldHaveText

▸ shouldHaveText(value): Chainable<T>

Assert that the text of the first element of the selection is equal to the given text, using .text().

Parameters

Name Type
value string

Returns

Chainable<T>

Example

 then(get.elementByTestId("selector")).shouldHaveText("test")

shouldHaveValue

▸ shouldHaveValue(value): Chainable<T>

Assert that the first element of the selection has the given value, using .val().

Parameters

Name Type
value string

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldHaveValue("test")
 ```

___

### shouldInclude

▸ **shouldInclude**(`value`): `Chainable`<`T`\>

When the target is a string, `.include` asserts that the given string val is a substring of the target.

#### Parameters

| Name | Type |
| :------ | :------ |
| `value` | `any` |

#### Returns

`Chainable`<`T`\>

**`Example`**

```ts
   then(helper.get.elementsText('selector)).shouldContain('test')

shouldNotBeChecked

▸ shouldNotBeChecked(): Chainable<T>

Assert that at least one element of the selection is not checked, using .is(':checked').

Returns

Chainable<T>

Example

  then(get.elementByTestId("checkbox-selector")).shouldNotBeChecked()

shouldNotBeFocused

▸ shouldNotBeFocused(): Chainable<T>

Assert that no element of the selection is focused.

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldNotBeFocused()

shouldNotBeSelected

▸ shouldNotBeSelected(): Chainable<T>

Assert that at least one element of the selection is not selected, using .is(':selected').

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldNotBeSelected()

shouldNotBeVisible

▸ shouldNotBeVisible(): Chainable<T>

Assert that at least one element of the selection is not visible, using .is(':visible').

Returns

Chainable<T>

Example

then(get.elementByTestId("selector")).shouldNotBeVisible()

shouldNotContain

▸ shouldNotContain(value): Chainable<T>

When the target is a string, shouldNotInclude asserts that the given string val is not a substring of the target.

Parameters

Name Type
value any

Returns

Chainable<T>

Example

   then(helper.get.elementsText('selector)).shouldNotInclude('test')

shouldNotExist

▸ shouldNotExist(): Chainable<T>

Assert that the selection is empty. Note that this overrides the built-in chai assertion. If the object asserted against is not a jQuery object, the original implementation will be called.

Returns

Chainable<T>

Example

   then(get.elementByTestId("selector")).shouldNotExist()

shouldNotHaveAttribute

▸ shouldNotHaveAttribute(attribute): Chainable<T>

Assert that the first element of the selection does not has the given attribute, using .attr(). Optionally, assert a particular value as well. The return value is available for chaining.

Parameters

Name Type
attribute string

Returns

Chainable<T>

Example

 then(get.elementByTestId("selector")).shouldNotHaveAttribute("test")

shouldNotHaveBeenCalled

▸ shouldNotHaveBeenCalled(): Chainable<T>

Asserts spy was not called

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldNotHaveBeenCalled()

shouldNotHaveBeenCalledTimes

▸ shouldNotHaveBeenCalledTimes(n): Chainable<T>

Asserts spy was NOT called exactly n times

Parameters

Name Type Description
n number number of times spy should NOT have been called

Returns

Chainable<T>

Example

then(get.spy("onSomething")).shouldNotHaveBeenCalledTimes(5)

shouldNotHaveText

▸ shouldNotHaveText(value): Chainable<T>

shouldNotHaveText asserts that the given string val is not a substring of the target.

Parameters

Name Type
value string

Returns

Chainable<T>

Example

   then(helper.get.elementsText('selector)).shouldNotHaveText('test')

shouldNotInclude

▸ shouldNotInclude(value): Chainable<T>

When the target is a string, not.include asserts that the given string val is not a substring of the target.

Parameters

Name Type
value any

Returns

Chainable<T>

Example

   then(helper.get.elementsText('selector)).shouldNotContain('test')

shouldNotThrow

▸ shouldNotThrow(value?): Chainable<T>

When no arguments are provided, shouldThrow invokes the target function and asserts that no error is thrown. When one argument is provided, and it's a string, shouldThrow invokes the target function and asserts that no error is thrown with a message that contains that string.

Parameters

Name Type
value? string | RegExp

Returns

Chainable<T>

Example

function badFn() { console.log('Illegal salmon!') }
then(() => badFn()).shouldNotThrow()
then(() => badFn()).shouldNotThrow('salmon')
then(() => badFn()).shouldNotThrow(/salmon/)

shouldStartWith

▸ shouldStartWith(value): Chainable<string>

Asserts that text starts with value

Parameters

Name Type
value string

Returns

Chainable<string>

Example

  then(helper.get.elementsText('selector)).shouldStartWith('test')

shouldThrow

▸ shouldThrow(value?): Chainable<T>

When no arguments are provided, shouldThrow invokes the target function and asserts that an error is thrown. When one argument is provided, and it's a string, shouldThrow invokes the target function and asserts that an error is thrown with a message that contains that string.

Parameters

Name Type
value? string | RegExp

Returns

Chainable<T>

Example

function badFn() { throw new TypeError('Illegal salmon!') }
then(() => badFn()).shouldThrow()
then(() => badFn()).shouldThrow('salmon')
then(() => badFn()).shouldThrow(/salmon/)