// Generated by dts-bundle-generator v7.2.0 import { CypressImageSnapshotOptions } from '@simonsmith/cypress-image-snapshot/types'; import axe from 'axe-core'; import { Options as AxeOptions } from 'cypress-axe'; import { StringMatcher } from 'cypress/types/net-stubbing'; import { SinonStub } from 'cypress/types/sinon'; import { StubbedInstance as GenericStubbedInstance } from 'ts-stubber'; export type SnapshotOptions = { index?: number; dataTestID?: string; } & CypressImageSnapshotOptions; export type A11yOptions = { /** * Allows you to define a callback that receives the violations for custom side-effects, such as adding custom output to the terminal. */ violationCallback?: ((violations: axe.Result[]) => void) | undefined; /** * Disables assertions based on violations and only logs violations to the console output. */ skipFailures?: boolean; } & AxeOptions; export type StubbedInstance = GenericStubbedInstance; /** * Sinon matcher for stubs/spy comparison * @example * ```ts * // partial match of spy function params called with * let { given, when, get } = new CypressHelper(); * it("should partially match spy params", () => { * const obj = { * func: (param: Object) => {} * }; * given.spyOnObject(obj, "func"); * obj.func({ shelly: "go", inner: { attr: "value" } }); * then(get.spyFromFunction(obj.func)).shouldHaveBeenCalledWithMatch( * match({ inner: { attr: "value" } }) * ); * }); * ``` * For more information see [Sinon.match documentation](https://sinonjs.org/releases/latest/matchers/) */ export declare const match: import("cypress/types/sinon").SinonMatch; export declare class CypressHelperOptions { /** * default data attribute for elements selection */ defaultDataAttribute?: string; /** * slot dataTestID suffix (only relevant when handleSlotShadowDOM is set to true) */ shadowSlotSuffix?: string; /** * when set to true, cypress helper will automatically find the assigned dom element of elements with dataTestID * with `defaultShadowSlotSuffix` suffix */ handleSlotShadowDOM?: boolean; /** * when set to true, waits until elements are loaded before returning them */ waitForElementsToLoad?: boolean; /** * when set to true, injects Axe (A11y test tool) before all tests */ injectA11yChecker?: boolean; } /** * @class CypressHelper was designed to help you develop cypress tests faster. * @classdes CypressHelper exposes the following public properties: * @property given - The given property will hold methods which will allow us to set pre-conditions before something takes place. * This is a classic place to have methods which will set the inputs which are going to be passed down to our component. * @property when - The when property will hold methods of “events” which will take place like render, click, hover, etc. * @property get - The get property will hold methods which will give our tests access to the “output” of the component in a “black box” fashion */ export declare class CypressHelper { private readonly options; /** * * @param [options = { * defaultDataAttribute : "data-cy" , * shadowSlotSuffix : "slot", * handleSlotShadowDOM : true}] */ constructor(options?: CypressHelperOptions); /** @private */ private isGetter; /** @private */ private isSetter; /** @private */ private waitUntilLoadBeforeInvocation; /** @private */ private getShadowSlotElement; /** @private */ private getShadowSlotParent; /** @private */ private shouldHandleShadowDomSlot; beforeAndAfter: () => void; /** * @property given - The given property will hold methods which will allow us to set pre-conditions before something takes place. * This is a classic place to have methods which will set the inputs which are going to be passed down to our component. */ given: { /** * Use interceptAndMockResponse to stub and intercept HTTP requests and responses. * @example * ```ts * // adds token to response header * helper.given.interceptAndMockResponse({ * url: '** /sysmgmt/2015/bmc/session', * response: { * headers:{ * 'XSRF-Token': 'token', * }, * }, * alias: 'login' * }) * ``` * @example * ```ts * // mocks response to login request * helper.given.interceptAndMockResponse({ * method: "POST", * url: "** /login", * alias: "login", * response : { * token: 'token' * } * }) * ``` * * @example * ```ts * // mocks network error * helper.given.interceptAndMockResponse({ * method: "POST", * url: "** /avamars", * alias: "avamar", * response : { * forceNetworkError: true * } * }) * ``` * @example * ```ts * // mocks missing image * helper.given.interceptAndMockResponse({ * method: "POST", * url: "** /image.png", * alias: "image", * response: { statusCode: 404 } * }) * ``` * @example * ```ts * // using a fixture * helper.given.interceptAndMockResponse({ * url: "** /shellygo/whatever**", * response: { fixture: "user.json" }, * alias: "whatever" * }); * ``` */ interceptAndMockResponse: (options: { url: StringMatcher; response?: Object; alias?: string; method?: string; }) => void; /** Use intercept() to intercept HTTP requests and responses * @example * ```ts * helper.given.intercept("/streets/sprite.png", "streetSprite"); * ``` */ intercept: (url: StringMatcher, alias: string, method?: string) => void; /** * Sets specific environment variable's value * @example * // Changing an environment variable * * ```ts * helper.given.env("password", "changeMe@1"); * ``` */ env: (key: string, value: any) => void; /** * Load a fixture * @param filename * @param alias * @example * ```ts * let { given, when, get } = new CypressHelper(); * it("should get fixture", () => { * given.fixture("user.json", "user"); * then(get.fixture("user")).shouldDeepNestedInclude({ * name: "Jane Doe", * id: "1234", * nested: { * attr1: "something", * attr2: "the other thing" * } * }); *}); * ``` */ fixture: (filename: string, alias: string) => Cypress.Chainable; /** * Creates a new object with the given functions as the prototype and stubs all implemented functions. * * @example * ```ts * const serviceMock = helper.given.stubbedInstance(Service); * ``` * @example * ```ts * class Service { * public func1() {...} * public get prop1() {...} * } * const serviceMock = helper.given.stubbedInstance(Service, {prop1: 3}); * ``` * @example * ```ts * helper.given.stubbedInstance(Router, { events: new Observable() }) * ``` * @example * ```ts * helper.given.stubbedInstance( * PokemonService, * { * pokemonTypes: new BehaviorSubject([]), * pokemons: new BehaviorSubject([]), * } * ) * ``` */ stubbedInstance: (constructor: new (...args: any[]) => T, overrides?: Partial) => GenericStubbedInstance> & T; /** * Creates a new object with the given functions as the prototype and stubs all functions. * * @example * ```ts * const serviceMock = helper.given.stubbedInterface("IService"); * ``` * @example * ```ts * interface IService { * propertyFunc: (int: number) => number * get prop1() : number * } * const serviceMock = helper.given.stubbedInterface("IService", {prop1: 3}); * ``` */ stubbedInterface: (interfaceName: string, overrides?: Partial) => GenericStubbedInstance> & T_1; /** * Replace a function, record its usage and control its behavior. * @example * ```ts * given.stub("alias"); * then(get.spy("alias")).shouldHaveBeenCalled(); * ``` */ stub: (alias?: string) => Cypress.Agent>; /** * Stub an object's method and create an alias for the stub * @param obj object containing function to stub * @param method function to stub * @example * ```ts * //stubbing a service method * helper.given.stubObjectMethod(serviceMock, "functionName").returns(3); * * //stubbing setters and getters * helper.given.stubObjectMethod(serviceMock, "count").get(() => 3).set(() => {}); * ``` */ stubObjectMethod: (obj: T_2, method: keyof T_2) => Cypress.Omit, "withArgs"> & Cypress.SinonSpyAgent> & SinonStub; /** * Returns a new spy function, and creates an alias for the newly created spy * @param name - spy name */ spy: (name: string) => Cypress.Omit, "withArgs"> & Cypress.SinonSpyAgent> & import("cypress/types/sinon").SinonSpy; /** * Spy on a method and create an alias for the spy * @param obj object containing function to spy on * @param method function to spy on * @example * ```ts * given.spyOnObject(window, "alert"); * alert("whatever"); * then(helper.get.spyFromFunction(window.alert)).shouldHaveBeenCalledWith("whatever"); * // Or * then(helper.get.spy("alert")).shouldHaveBeenCalledTimes(1); * ``` * @example * ```ts * given.spyOnObject(serviceMock, "functionName"); * serviceMock.functionName(); * then(helper.get.spyFromFunction(serviceMock.functionName)).shouldHaveBeenCalledTimes(1); * ``` */ spyOnObject: (obj: T_3, method: keyof T_3) => Cypress.Omit, "withArgs"> & Cypress.SinonSpyAgent> & import("cypress/types/sinon").SinonSpy; /** * * @param width * @param height * Set viewport to the given resolution. * * @example * * // Set viewport to 550px x 750px * given.viewport(550, 750) */ viewport: (width: number, height: number) => void; }; /** * @property when - The when property will hold methods of “events” which will take place like render, click, hover, etc. */ when: { /** * Visit a given url */ visit: (url: string) => void; /** * Wait for a number of milliseconds. */ wait: (ms: number) => Cypress.Chainable; /** * Wait for a specific request to complete. * @param alias */ waitForResponse: (alias: string) => Cypress.Chainable>; /** * Wait for multiples requests to complete. * @param alias */ waitForResponses: (alias: string, responses: number) => Cypress.Chainable[]>; /** * Wait for a last request to complete. */ waitForLastCall: (alias: string, timeout?: number) => Cypress.Chainable | undefined>; /** * Wait for something to happen in the DOM. * Note! you should not have any asserts in the callback function. From cypress-wait-until documentation: * you cannot put assertions inside checkFunction. There is no way to avoid a test failure if an assertion throws an error. * You must manually check what the assertions would check for you. * The most common case is checking that an element exists or not * @example * ```ts * helper.when.waitUntil(() => * helper.get.elementByTestId('element-test-id', index) * ); * ``` */ waitUntil: (checkFunction: () => ReturnType_1 | Cypress.Chainable | PromiseLike, options?: WaitUntilOptions) => Cypress.Chainable; /** * Fires native system click event. * * @example * ```ts * * helper.when.realClick('move-right') * ``` */ realClick: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Click a DOM element. * * @example * ```ts * * helper.when.click('move-right') * ``` */ click: (dataTestID: string, index?: number) => Cypress.Chainable>; /** Fires when your app calls the global window.alert() method. * The alert will be closed. */ closeAlert: () => Cypress.Cypress; /** * * Fires when your app calls the global window.confirm() method. * The confirmation will be accepted. */ acceptConfirm: () => import("eventemitter2").EventEmitter2 | import("eventemitter2").Listener; /** * * Fires when your app calls the global window.confirm() method. * The confirmation will be canceled. */ cancelConfirm: () => Cypress.Cypress; /** * * Fires when your app calls the global window.prompt() method. * The prompt will be cancelled. */ cancelPrompt: () => import("eventemitter2").EventEmitter2 | import("eventemitter2").Listener; /** * * Double-click a DOM element. */ dblclick: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Right click a DOM element. * @param dataTestID * @param [index] */ rightclick: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * overrides native global functions related to time * allowing them to be controlled synchronously via helper.when.tick() * This includes controlling: * setTimeout * clearTimeout * setInterval * clearInterval * Date Objects * The clock starts at the unix epoch (timestamp of 0). * This means that when you instantiate new Date in your application, it will have a time of January 1st, 1970. */ clock: () => Cypress.Chainable; /** * Fires native hover event. Yes, it can test :hover preprocessor. * @example * ```ts * helper.when.hover('consent-terms-agree') * ``` */ hover: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Move time after overriding a native time function with helper.when.clock(). * helper.when.clock() must be called before helper.when.tick() * @example * ```ts * helper.when.clock(); * helper.when.click('login-button'); * helper.when.tick(2000); * ``` */ tick: (ms: number) => Cypress.Chainable; /** * Focus on a DOM element. * @example * ```ts * helper.when.focus('credentials-password') * ``` */ focus: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Blur a focused element. * This element must currently be in focus. * If you want to ensure an element is focused before blurring, * try using helper.when.focus() before helper.when.blur(). */ blur: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Clear the value of an input or textarea */ clear: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Type into a DOM element, not including special characters * @example * ```ts * helper.when.type('credentials-password', 'new password') * ``` */ type: (dataTestID: string, keys: string, index?: number) => Cypress.Chainable>; /** * Type into a DOM element, including special characters * @example * ```ts * helper.when.typeSpecialChar('credentials-password', '{backspace}') * ``` */ typeSpecialCharacter: (dataTestID: string, keys: string, index?: number) => Cypress.Chainable>; /** * Runs a sequence of native press event (via cy.press) Type event is global. Make sure that it is not attached to any field. */ realType: (dataTestID: string, keys: string, index?: number) => Cypress.Chainable; /** * Scroll to the bottom. */ scrollToBottom: () => Cypress.Chainable; /** * Scroll to the top. */ scrollToTop: () => Cypress.Chainable; /** * Check checkbox(es) or radio(s). * This element must be an html input element with type checkbox or radio. */ check: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Uncheck checkbox(es). */ uncheck: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * * Toggle radio(s) by dataTestID * This element must be an html input element with type radio. */ toggleRadioBySelector: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * * Check radio(s). * This element must be an html input element with type radio. */ toggle: (index: number) => Cypress.Chainable>; /** * Select an option with specific text, value, or index within a select html element. * @example * ```html * * ``` * ```ts * helper.when.selectOption('fruit-selection', 0).should('have.value', '456') * helper.when.selectOption('fruit-selection', 'oranges').should('have.value', '457') * helper.when.selectOption('fruit-selection', 458).should('have.value', '458') * ``` */ selectOption: (dataTestID: string, option: string | number, index?: number) => Cypress.Chainable>; /** * Drag an element and drop it in target element * @example * ```ts * helper.when.dragAndDrop( * helper.get.elementByTestId('selected-item', 2), * helper.get.elementByTestId('available-items') * ) * ``` * @param element element to be dragged * @param targetElement target of drag operation */ dragAndDrop: (element: Cypress.Chainable>, targetElement: Cypress.Chainable>) => void; /** * Scopes the execution of a function within an element * @example * helper.when.within(() => when.click('button-test-id'), 'button-row', 2) * @deprecated The method should not be used anymore. Use helper.when.doWithin instead. */ within: (fn: () => void, dataTestID: string, index?: number) => Cypress.Chainable>; /** * Scopes the execution of a function within an element * @example * helper.when.doWithin(() => when.click('button-test-id'), 'button-row', 2) */ doWithin: (fn: () => void, dataTestID: string, index?: number) => Cypress.Chainable>; }; /** * @property get - The get property will hold methods which will give our tests access to the “output” of the component in a “black box” fashion */ get: { /** * Get one or more DOM elements by selector. * @example * Get an element with shape="filter-grid" * ```ts * * helper.get.bySelector("filter-grid", "shape") * ``` * @param selector * @param [attribute = defaultDataAttribute (default is "data-cy")] */ bySelector: (selector: string, attribute?: string) => Cypress.Chainable>; /** * Get one or more DOM elements by selector. * Same as bySelector * @example * Get an element with shape="filter-grid" * ```ts * * helper.get.elementBySelector("filter-grid", "shape") * ``` * @param selector * @param [attribute = defaultDataAttribute (default is "data-cy")] */ elementBySelector: (selector: string, attribute?: string, index?: number) => Cypress.Chainable>; /** * Get one or more DOM elements by attribute. * @example * Get an element with shape="filter-grid" * ```ts * * helper.get.byAttribute("shape", "filter-grid") * ``` * @param selector * @param attribute */ elementByAttribute: (attribute: string, selector: string, index?: number) => Cypress.Chainable>; /** * Get A DOM element at a specific index from elements. * @example * // Get the 3rd checkbox * ```ts * helper.get.nthBySelector("checkbox", 3, "type") * ``` * @param selector * @param [index] * @param [attribute= defaultDataAttribute (default is "data-cy")] */ nthBySelector: (selector: string, index?: number, attribute?: string) => Cypress.Chainable>; /** * Returns specific environment variable or undefined * @example * // Keeping password in cypress.config file * ```ts * e2e: { * env: { * password: "Changeme@1", * } * } * ``` * // using password during test * ```ts * helper.get.env("password"); * ``` */ env: (key: string) => any; /** * Get the current URL of the page that is currently active. * @returns {Cypress.Chainable} */ currentLocation: () => Cypress.Chainable; /** * Capture a snapshot and compare it to baseline snapshot * Run Cypress with --env updateSnapshots=true in order to update the base image files for all of your tests. * @param name * @param {string} [dataTestID] * @param {number} [index] * @param {CypressImageSnapshotOptions} [rest] * @example * ```ts * // capture entire window * get.imageSnapshot("homepage"); * ``` * @example * ```ts * // capture an element by DataTestId, with threshold * get.imageSnapshot("radio-group", { * dataTestID: "radio-group", * failureThreshold: 0.2 * }); * ``` */ imageSnapshot: (name: string, { dataTestID, index, ...rest }?: SnapshotOptions) => Cypress.Chainable; /** * Returns element's style attribute * @example * ```ts * get.elementsStyleAttribute("button-data-hook", "background-color") * ``` * @param dataTestID * @param attributeName * @param [index] * @returns {Cypress.Chainable} */ elementsStyleAttribute: (dataTestID: string, attributeName: string, index?: number) => Cypress.Chainable>; /** * Get element's property value * @example * ```ts * get.elementsProperty("image", "height") * ``` * @param dataTestID * @param propertyName * @param [index] * @returns */ elementsProperty: (dataTestID: string, propertyName: keyof JQuery, index?: number) => Cypress.Chainable; /** * Returns element's computed style, including pseudo elements * @example * ```ts * helper.get.elementsComputedStyle('element-test-id', 0, ':before') * ``` * * @returns {Cypress.Chainable} */ elementsComputedStyle: (dataTestID: string, index?: number, pseudoElement?: string) => Cypress.Chainable; /** * Returns a specific style of an element, including pseudo elements if specified. * @example * ```ts * helper.get.elementSpecificStyle('element-test-id', 'backgroundImage') * ``` * * ```ts * helper.get.elementSpecificStyle('element-test-id', 'backgroundImage', {index: 3, pseudoElement: ':before'}) * ``` * @param dataTestID * @param styleProperty * @param [index] * @param [pseudoElement] */ elementComputedStyleProperty: (dataTestID: string, styleProperty: keyof CSSStyleDeclaration, { index, pseudoElement }?: { index?: number | undefined; pseudoElement?: string | undefined; }) => Cypress.Chainable string) | ((property: string) => string) | ((index: number) => string) | ((property: string) => string) | ((property: string, value: string | null, priority?: string | undefined) => void) | null>; /** * @example * ```ts * then(helper.get.elementsText("parent-job-name", 3)).shouldInclude("Job 3 Name") * ``` * @param dataTestID * @param [index] * @returns {Cypress.Chainable} */ elementsText: (dataTestID: string, index?: number) => Cypress.Chainable; /** * Get value of input element * @example * ```ts * then(helper.get.inputValue('credentials-password')).shouldEqual("initial password"); * ``` * @param dataTestID * @param [index] * @returns { Cypress.Chainable } */ inputValue: (dataTestID: string, index?: number) => Cypress.Chainable; /** * Get A DOM element at a specific index from elements. * @example * ```ts * helper.when.dragAndDrop( * helper.get.elementByTestId('selected-item', 2), * helper.get.elementByTestId('available-items') * ``` * @param dataTestID * @param [index] */ elementByTestId: (dataTestID: string, index?: number) => Cypress.Chainable>; /** * Get the element currently focused in the document. * @returns {Cypress.Chainable>} */ focusedElement: () => Cypress.Chainable>; /** * Get one or more DOM elements by selector. The querying behavior of this command matches exactly how $(…) works in jQuery. * *** Note! Using this method may lead to flakey tests! You should use get.elementByTestId *** * @example * ```ts * get.element('.list>li', 3) // Yield the
  • 's in <.list> * get.element('ul li:first') * get.element('.dropdown-menu') * ``` * @param selector * @param [index] */ element: (selector: string, index?: number) => Cypress.Chainable>; /** * Get the DOM element containing the text. * DOM elements can contain more than the desired text and still match. * Additionally, Cypress prefers some DOM elements over the deepest element found. * *** Note! Using this method may lead to flakey tests! You should use get.elementByTestId *** * @example * ```ts * then(helper.get.elementByText("Avamar")).shouldExist(); * ``` * @param content * @param [index] */ elementByText: (content: string | RegExp, index?: number) => Cypress.Chainable> | Cypress.Chainable; /** * Get number of elements with a specific dataTestID * @example * ```ts * then(helper.get.numberOfElements("migrated-vcenter")).shouldEqual(2); * ``` * @param dataTestID * @returns {Cypress.Chainable} */ numberOfElements: (dataTestID: string) => Cypress.Chainable; /** * Get number of outgoing request with a specific alias * @example * ```ts * then(helper.get.numberOfCalls("fetch-pokemon")).shouldEqual(2); * ``` * @param alias * @returns {Cypress.Chainable} */ numberOfRequests: (alias: string) => Cypress.Chainable; /** * @example * ```ts * then(helper.get.elementsAttribute('avatar-picture', 'style')).shouldInclude('background-image: url("assets/avatar/def-user-male.png")') * ``` * @param dataTestID * @param attributeName * @param [index] * @returns {Cypress.Chainable} */ elementsAttribute: (dataTestID: string, attributeName: string, index?: number) => Cypress.Chainable; /** * Get fixture * @param alias * @example * ```ts * given.fixture("user.json", "user"); * then( * get.fixture("user").shouldDeepNestedInclude({ * name: "Jane Doe", * id: "1234", * nested: { * attr1: "something", * attr2: "the other thing" * } * }) * ); * ``` */ fixture: (alias: string) => Cypress.Chainable; /** * Get intercepted response's header * @param alias * @returns { Cypress.Chainable<{ [key: string]: string | string[]}>} */ responseHeader: (alias: string) => Cypress.Chainable<{ [key: string]: string | string[]; }>; /** * Get intercepted response's body * If a JSON Content-Type was used and the body was valid JSON, this will be an object. * If the body was binary content, this will be a buffer. * @param alias * @returns {Cypress.Chainable} */ responseBody: (alias: string) => Cypress.Chainable; /** * Get intercepted request's body * If a JSON Content-Type was used and the body was valid JSON, this will be an object. * If the body was binary content, this will be a buffer. * @param alias * @returns {Cypress.Chainable} */ requestBody: (alias: string) => Cypress.Chainable; /** * Get intercepted request's url * @param alias * @returns {Cypress.Chainable} */ requestUrl: (alias: string) => Cypress.Chainable; /** * Get intercepted request's header * @param alias * @returns { Cypress.Chainable<{ [key: string]: string | string[]}>} */ requestHeader: (alias: string) => Cypress.Chainable<{ [key: string]: string | string[]; }>; /** * Get intercepted request's query param * @param alias * @param queryParam * @returns { Cypress.Chainable<{[k: string]: string;}>} */ requestQueryParams: (alias: string) => Cypress.Chainable<{ [k: string]: string; }>; /** * Get spy by alias * @param name * @returns */ spy: (name: string) => Cypress.Chainable>; /** * Get spy by function name alias * @param func * @returns */ spyFromFunction: (func: Function) => Cypress.Chainable>; /** * Get stub by alias * @param name * @returns */ stub: (name: string) => Cypress.Chainable>; /** * Get stub as Cypress.Chainable * @example * ```ts * const serviceMock : Service = helper.given.stubbedInstance(Service); * helper.get.assertableStub(serviceMock.function).should('have.been.called')); * ``` * @deprecated The method should not be used anymore, use `then` instead * ```ts * then(serviceMock.function).shouldHaveBeenCalled(); * ``` */ assertableStub: (stub: any) => Cypress.Chainable>; /** Get the window object of the page that is currently active. * @returns {Cypress.Chainable} * @example * ```ts * helper.get.window().then((win) => { win.localStorage.getItem("key")} * ``` */ window: () => Cypress.Chainable; }; } /** 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 * ```ts * import { Assertable, CypressHelper, then } from "@shellygo/cypress-test-utils"; * * class MyAssertable extends Assertable { * 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) => new MyAssertable(chainable); * } * ``` */ export declare class Assertable { /** private */ protected readonly chainable: Cypress.Chainable; constructor( /** private */ chainable: Cypress.Chainable); should: (chainer: string, ...rest: any[]) => Cypress.Chainable; /** * * 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. * @example * ```ts * then(get.elementByTestId("selector")).shouldExist() * ``` */ shouldExist: () => Cypress.Chainable; /** * 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. * @example * ```ts * then(get.elementByTestId("selector")).shouldNotExist() * ``` */ shouldNotExist: () => Cypress.Chainable; /** * Asserts that the target's length property is equal to the given number n.. * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveLength(3) * ``` */ shouldHaveLength: (length: number) => Cypress.Chainable; /** * When the target is a string, `.include` asserts that the given string val is a substring of the target. * @example * ```ts * then(helper.get.elementsText('selector)).shouldContain('test') * ``` */ shouldInclude: (value: any) => Cypress.Chainable; /** * When the target is a string, `not.include` asserts that the given string val is not a substring of the target. * @example * ```ts * then(helper.get.elementsText('selector)).shouldNotContain('test') * ``` */ shouldNotInclude: (value: any) => Cypress.Chainable; /** * Asserts that text ends with value * @example * ```ts * then(helper.get.elementsText('selector)).shouldEndWith('test') * ``` */ /** * When the target is a string, shouldNotInclude asserts that the given string val is not a substring of the target. * @example * ```ts * then(helper.get.elementsText('selector)).shouldNotInclude('test') * ``` */ shouldNotContain: (value: any) => Cypress.Chainable; /** * shouldNotHaveText asserts that the given string val is not a substring of the target. * @example * ```ts * then(helper.get.elementsText('selector)).shouldNotHaveText('test') * ``` */ shouldNotHaveText: (value: string) => Cypress.Chainable; /** * Asserts that text ends with value * @example * ```ts * then(helper.get.elementsText('selector)).shouldEndWith('test') * ``` */ shouldEndWith: (value: string) => Cypress.Chainable; /** * Asserts that text starts with value * @example * ```ts * then(helper.get.elementsText('selector)).shouldStartWith('test') * ``` */ shouldStartWith: (value: string) => Cypress.Chainable; /** * 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. * @example * ```ts * then( * get.fixture("user")).shouldDeepEqual({ * name: "Jane Doe", * id: "1234" * }) * ``` */ shouldDeepEqual: (value: any) => Cypress.Chainable; /** * Asserts that the target has a property with the given key `name`. * @example * ```ts * then( * get.fixture("user")).shouldDeepNestedInclude({ * name: "Jane Doe", * id: "1234", * nested: { * attr1: "something", * attr2: "the other thing" * } * }) * ``` */ shouldDeepNestedInclude: (value: any) => Cypress.Chainable; /** * * Assert that at least one element of the selection is focused. * @example * ```ts * then(get.elementByTestId("selector")).shouldBeFocused() * ``` */ shouldBeFocused: () => Cypress.Chainable; /** * * Assert that no element of the selection is focused. * @example * ```ts * then(get.elementByTestId("selector")).shouldNotBeFocused() * ``` */ shouldNotBeFocused: () => Cypress.Chainable; /** * * Assert that at least one element of the selection is visible, using .is(':visible'). * @example * ```ts * then(get.elementByTestId("selector")).shouldBeVisible() * ``` */ shouldBeVisible: () => Cypress.Chainable; /** * * Assert that at least one element of the selection is not visible, using .is(':visible'). * @example * ```ts * then(get.elementByTestId("selector")).shouldNotBeVisible() * ``` */ shouldNotBeVisible: () => Cypress.Chainable; /** * Assert that the text of the first element of the selection partially contains the given text, using .text(). * @example * ```ts * then(get.elementByTestId("selector")).shouldContainText("test") * ``` */ shouldContainText: (text: string) => Cypress.Chainable; /** Assert that at least one element of the selection is selected, using .is(':selected'). * @example * ```ts * then(get.elementByTestId("selector")).shouldBeSelected() * ``` */ shouldBeSelected: () => Cypress.Chainable; /** * Assert that at least one element of the selection is not selected, using .is(':selected'). * @example * ```ts * then(get.elementByTestId("selector")).shouldNotBeSelected() * ``` */ shouldNotBeSelected: () => Cypress.Chainable; /** Assert that the first element of the selection has the given value, using .val(). * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveValue("test") * ``` */ shouldHaveValue: (value: string) => Cypress.Chainable; /** * Assert that at least one element of the selection is disabled, using `.is(':disabled')`. * @example * ```ts * then(get.elementByTestId("selector")).shouldBeDisabled() * ``` */ shouldBeDisabled: () => Cypress.Chainable; /** * Assert that at least one element of the selection is enabled, using `.is(':enabled')`. * @example * ```ts * then(get.elementByTestId("selector")).shouldBeEnabled() * ``` */ shouldBeEnabled: () => Cypress.Chainable; /** * Asserts that the target is strictly (`===`) equal to the given `val`. * @example * ```ts * then(get.inputValue("name-input")).shouldEqual("John") * ``` */ shouldEqual: (value: any) => Cypress.Chainable; /** * 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. * @example * ```ts * then(get.numberOfElements("radio")).shouldBeGreaterThan(5); * ``` */ shouldBeGreaterThan: (value: number) => Cypress.Chainable; /** 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. * @example * ```ts * then(get.numberOfElements("radio")).shouldBeLessThen(5); * ``` */ shouldBeLessThan: (value: number) => Cypress.Chainable; /** 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. * @example * ```ts * then(get.numberOfElements("radio")).shouldBeGreaterThanOrEqual(5); * ``` */ shouldBeGreaterThanOrEqual: (value: number) => Cypress.Chainable; /** * 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. * @example * then(get.numberOfElements('list-item')).shouldBeLessThanOrEqual(5) */ shouldBeLessThanOrEqual: (value: number) => Cypress.Chainable; /** Assert that at least one element of the selection is checked, using .is(':checked'). * @example * ```ts * then(get.elementByTestId("checkbox-selector")).shouldBeChecked() * ``` */ shouldBeChecked: () => Cypress.Chainable; /** Assert that at least one element of the selection is not checked, using .is(':checked'). * @example * ```ts * then(get.elementByTestId("checkbox-selector")).shouldNotBeChecked() * ``` */ shouldNotBeChecked: () => Cypress.Chainable; /** * * 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 * @param options 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 * @example * ```ts * then(get.element("html")).shouldBeAccessible() * ``` * @example * ```ts * then(get.elementByTestId("selector")).shouldBeAccessible({ * includedImpacts: ["critical", "minor"], * rules: { * "landmark-one-main": { enabled: false } * } * }) * ``` */ shouldBeAccessible: (options?: A11yOptions) => void; /** * Assert that the text of the first element of the selection is equal to the given text, using .text(). * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveText("test") * ``` */ shouldHaveText: (value: string) => Cypress.Chainable; /** * Assert that the selection has the given CSS class. * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveClass("test") * ``` */ shouldHaveClass: (value: string) => Cypress.Chainable; /** * 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. * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveAttribute("test") * ``` */ shouldHaveAttribute: (attribute: string, expectedValue?: string) => Cypress.Chainable; /** * 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. * @example * ```ts * then(get.elementByTestId("selector")).shouldNotHaveAttribute("test") * ``` */ shouldNotHaveAttribute: (attribute: string) => Cypress.Chainable; /** * 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. * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveProperty("test") * ``` */ shouldHaveProp: (property: string, expectedValue: string | boolean) => Cypress.Chainable; /** * Assert that an element has a css property with the given value. * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveCss("color", "rgb(102, 102, 102)"") * ``` */ shouldHaveCss: (property: string, expectedValue: string) => Cypress.Chainable; /** * Assert spy was called at least once with the provided arguments. * @example * ```ts * then(get.spy("onSomething")).shouldHaveBeenCalledWith({ id: 1 }) * ``` */ shouldHaveBeenCalledWith: (...args: any[]) => Cypress.Chainable; /** Assert spy was called with matching arguments (and possibly others). * @example * ```ts * then(get.spy("onSomething")).shouldHaveBeenCalledWithMatch(match({ id: 1 })) * ``` * * @example * ```ts * 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}` }) * ) * ); * }); * ``` */ shouldHaveBeenCalledWithMatch: (...args: any[]) => Cypress.Chainable; /** Asserts spy was called ate least once * @example * ```ts * then(get.spy("onSomething")).shouldHaveBeenCalled() * ``` */ shouldHaveBeenCalled: () => Cypress.Chainable; /** Asserts spy was called exactly once * @example * ```ts * then(get.spy("onSomething")).shouldHaveBeenCalledOnce() * ``` */ shouldHaveBeenCalledOnce: () => Cypress.Chainable; /** Asserts spy was called exactly twice * @example * ```ts * then(get.spy("onSomething")).shouldHaveBeenCalledTwice() * ``` */ shouldHaveBeenCalledTwice: () => Cypress.Chainable; /** Asserts spy was called exactly thrice * @example * ```ts * then(get.spy("onSomething")).shouldHaveBeenCalledThrice() * ``` */ shouldHaveBeenCalledThrice: () => Cypress.Chainable; /** Asserts spy was called exactly n times * @param n number of times spy should have been called * @example * ```ts * then(get.spy("onSomething")).shouldHaveBeenCalledTimes(5) * ``` */ shouldHaveBeenCalledTimes: (n: number) => Cypress.Chainable; /** Asserts spy was NOT called exactly n times * @param n number of times spy should NOT have been called * @example * ```ts * then(get.spy("onSomething")).shouldNotHaveBeenCalledTimes(5) * ``` */ shouldNotHaveBeenCalledTimes: (n: number) => Cypress.Chainable; /** * Asserts spy was not called * @example * ```ts * then(get.spy("onSomething")).shouldNotHaveBeenCalled() * ``` */ shouldNotHaveBeenCalled: () => Cypress.Chainable; /*** * 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. * * @example * ```ts * function badFn() { console.log('Illegal salmon!') } * then(() => badFn()).shouldNotThrow() * then(() => badFn()).shouldNotThrow('salmon') * then(() => badFn()).shouldNotThrow(/salmon/) * ``` */ shouldNotThrow: (value?: string | RegExp | undefined) => Cypress.Chainable; /*** * 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. * * @example * ```ts * function badFn() { throw new TypeError('Illegal salmon!') } * then(() => badFn()).shouldThrow() * then(() => badFn()).shouldThrow('salmon') * then(() => badFn()).shouldThrow(/salmon/) * ``` */ shouldThrow: (value?: string | RegExp | undefined) => Cypress.Chainable; } /** Wraps Cypress.Chainable and returns Assertable, decoupling test code form cypress 'should' assertions. * This way you can add assertions of your own, by extending Assertable class. * @example * ```ts * then(get.elementByTestId("selector")).shouldHaveLength(3) * ``` * @example * ```ts * import { Assertable, then } from "@shellygo/cypress-test-utils/assertable"; * * class MyAssertable extends Assertable { * private styleFromWindow = (win: Window) => { * const styleItem = win.localStorage.getItem(`style`); * const obj = JSON.parse(styleItem || ""); * return obj; * }; * public shouldEqualToStoredStyle = () => * then( * new CypressHelper().get.window().then((win) => { * const style = styleFromWindow(win); * then(this.chainable).shouldDeepNestedInclude(style); * }) * ); * } * * class Driver { * public given = { * // methods for setting test pre-conditions * }; * public when = { * // methods for test "actions", such as click, darg & drop, etc. * }; * public get = { * // getter, for exploring the outcome, such as getting a text color a span * }; * public then = (chainable: Cypress.Chainable) => new MyAssertable(chainable); * } * ``` */ export declare const then: (subject: Cypress.Chainable | any) => Assertable; export {};