@helpscout/cyan/dist/types/Cyan.interface.types.d.ts

Cypress-like Testing for React + JSDOM

import CyanEventInterface from './Cyan.event.interface.types';
export declare type Selector = any;
export declare type CySelector = string;
export declare type StyleOrStyleProp = Object | string | number | null;
export interface CyanInterface extends CyanEventInterface {
    /**
     * The number of matched DOM elements.
     *
     * @returns {number} The number of matched DOM elements.
     *
     * @example
     * cy.get('li').length
     */
    length: number;
    /**
     * Get the DOM elements with a selector.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul')
     */
    get(selector: Selector): this;
    /**
     * Get the DOM elements with a [data-cy] selector.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.getByCy('ul')
     */
    getByCy(selector: CySelector): this;
    /**
     * Get the DOM elements with a text match.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.getByText('Hello')
     */
    getByText(text: string): this;
    /**
     * Get the DOM elements the main DOM element collection.
     *
     * @returns {Array<Element>} Collection of DOM elements.
     *
     * @example
     * cy.get('ul > li').getNodes()
     */
    getNodes(): Array<Element>;
    /**
     * Get the first DOM element from the main DOM element collection.
     *
     * @returns {Element} A single DOM element.
     *
     * @example
     * cy.get('li').getNode()
     */
    getNode(): Element;
    /**
     * Checks a DOM element. Typically used for `<input />`.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('input[type=checkbox]').check()
     */
    check(): this;
    /**
     * Clear the value of a DOM element. Typically used for `<input />`.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('input[type=text]').clear()
     */
    clear(): this;
    /**
     * Triggers an Event for a DOM element.
     *
     * @param {string} event The name of the event.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('textarea').trigger('focus')
     */
    trigger(event: string): this;
    /**
     * Types characters/commands into a DOM element. Typically used for `<input />`.
     *
     * @param {string} value The characters/commands to type.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('input[type=text]').type('Hello')
     */
    type(command: string): this;
    /**
     * Unchecks a DOM element. Typically used for `<input />`.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('input[type=checkbox]').uncheck()
     */
    uncheck(): this;
    /**
     * Check if DOM element contains specified content.
     *
     * @param {string} content Content to check within the DOM element innerHTML.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('section').content('Hello')
     */
    contains(content: string): boolean;
    /**
     * Check if DOM element exists.
     *
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('section').exists()
     */
    exists(): boolean;
    /**
     * Check if an attribute/property from the main DOM element exists.
     *
     * @alias hasAttr
     * @param {string} attribute Attribute to check from the DOM element.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('section').hasAttribute('id')
     */
    hasAttribute(attribute: string): boolean;
    /**
     * Check if an attribute/property from the main DOM element exists.
     *
     * @param {string} attribute Attribute to check from the DOM element.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('section').hasAttr('id')
     */
    hasAttr(attribute: string): boolean;
    /**
     * Check if a className from the main DOM element exists.
     *
     * @alias hasClass
     * @param {string} className Class name to check from the DOM element.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('section').hasClassName('hello')
     */
    hasClassName(className: string): boolean;
    /**
     * Check if a className from the main DOM element exists.
     *
     * @param {string} className Class name to check from the DOM element.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('section').hasClass('hello')
     */
    hasClass(className: string): boolean;
    /**
     * Check if the main DOM element's tagName matches.
     *
     * @alias isTag
     * @param {string} tagName Tag name to match against the DOM element.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('.hello').isTagName('section')
     */
    isTagName(tagName: string): boolean;
    /**
     * Check if the main DOM element's tagName matches.
     *
     * @param {string} tagName Tag name to match against the DOM element.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('.hello').isTag('section')
     */
    isTag(tagName: string): boolean;
    /**
     * Check if the main DOM element's checked property is true.
     *
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('input').isChecked()
     */
    isChecked(): boolean;
    /**
     * Check if the main DOM element's is disabled.
     *
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('input').isDisabled()
     */
    isDisabled(): boolean;
    /**
     * Check if the main DOM element matches a selector.
     *
     * @alias is
     * @param {string} selector The selector to used for matching.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('input').matches('.input.is-main')
     */
    matches(): boolean;
    /**
     * Check if the main DOM element matches a selector.
     *
     * @param {string} selector The selector to used for matching.
     * @returns {boolean} The result.
     *
     * @example
     * cy.get('input').is('.input.is-main')
     */
    is(): boolean;
    /**
     * Logs the outerHTML of main DOM element.
     *
     * @param {string} selector A DOM selector to query and debug.
     * @param {Object} options Options for printing (js-beautify).
     *
     * @example
     * cy.get('section').debug()
     */
    debug(selector?: string, options?: any): void;
    /**
     * Get the outerHTML of main DOM element.
     *
     * @example
     * cy.get('section').html()
     */
    html(): string;
    /**
     * Get an attribute/property from the main DOM element.
     *
     * @alias getAttr
     * @alias attr
     * @param {string} attribute The attribute to get.
     * @returns {any} The attribute/property.
     *
     * @example
     * cy.get('section').getAttribute('id')
     */
    getAttribute(attribute: string): any;
    /**
     * Get an attribute/property from the main DOM element.
     *
     * @param {string} attribute The attribute to get.
     * @returns {any} The attribute/property.
     *
     * @example
     * cy.get('section').getAttr('id')
     */
    getAttr(attribute: string): any;
    /**
     * Get an attribute/property from the main DOM element.
     *
     * @param {string} attribute The attribute to get.
     * @returns {any} The attribute/property.
     *
     * @example
     * cy.get('section').attr('id')
     */
    attr(attribute: string): any;
    /**
     * Get the computed styles from the main DOM element.
     *
     * @alias style
     * @param {string} style The style property to get.
     * @returns {Object | string | number | null} The style Object, or style value.
     *
     * @example
     * cy.get('section').getComputedStyle()
     */
    getComputedStyle(style?: string): StyleOrStyleProp;
    /**
     * Get the computed styles from the main DOM element.
     *
     * @param {string} style The style property to get.
     * @returns {Object | string | number | null} The style Object, or style value.
     *
     * @example
     * cy.get('section').style()
     */
    style(style?: string): StyleOrStyleProp;
    /**
     * Get the id from the main DOM element.
     *
     * @alias id
     * @returns {string | null} The id.
     *
     * @example
     * cy.get('section').getId()
     */
    getId(): string | null;
    /**
     * Get the id from the main DOM element.
     *
     * @returns {string | null} The id.
     *
     * @example
     * cy.get('section').id()
     */
    id(): string | null;
    /**
     * Get the tagName (lowercase) from the main DOM element.
     *
     * @alias getTag
     * @alias tag
     * @returns {string} The tagName.
     *
     * @example
     * cy.get('.hello').getTagName()
     */
    getTagName(): string;
    /**
     * Get the tagName (lowercase) from the main DOM element.
     *
     *
     * @example
     * cy.get('.hello').getTag()
     */
    getTag(): string;
    /**
     * Get the tagName (lowercase) from the main DOM element.
     *
     *
     * @example
     * cy.get('.hello').tag()
     */
    tag(): string;
    /**
     * Get the value from the main DOM element. Typically used for form elements.
     *
     * @alias value
     * @returns {string | null} The value.
     *
     * @example
     * cy.get('.hello').getValue()
     */
    getValue(): string | null;
    /**
     * Get the value from the main DOM element. Typically used for form elements.
     *
     * @returns {string | null} The value.
     *
     * @example
     * cy.get('.hello').value()
     */
    value(): string | null;
    /**
     * Get the text content from the main DOM element.
     *
     * @alias text
     * @returns {string | null} The text content.
     *
     * @example
     * cy.get('.hello').getText()
     */
    getText(): string | null;
    /**
     * Get the text content from the main DOM element.
     *
     * @returns {string | null} The text content.
     *
     * @example
     * cy.get('.hello').text()
     */
    text(): string | null;
    /**
     * Get the children DOM elements from the main DOM element.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul').children()
     */
    children(): this;
    /**
     * Get the first closest DOM element with a matching selector from the main DOM element.
     *
     * @param {string} selector A selector used to find a matching DOM element.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('div').closest('main')
     */
    closest(): this;
    /**
     * Iterate through the main DOM elements.
     *
     * @param {Function<Element, number>} callback A callback invoked with the iterating DOM elements.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('div').each((node, index) => {
     *   node.classList.add(`item-${index}`)
     * })
     */
    each(callback: (element: Element, index: number) => void): this;
    /**
     * Get a DOM element based on it's index number.
     *
     * @param {number} index A number indicating the index of the element to get.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul > li').eq(2)
     */
    eq(index: number): this;
    /**
     * Get the DOM elements that match a specific selector.
     *
     * @param {string} selector A selector used for filter matching.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul > li').filter('.item')
     */
    filter(selector: string): this;
    /**
     * Get descendent DOM elements that match a specific selector.
     *
     * @param {string} selector A selector used for descendent matching.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul').find('li.item')
     */
    find(selector: string): this;
    /**
     * Get descendent DOM elements that match a specific selector.
     *
     * @param {string} selector A selector used for descendent matching.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul').findByCy('Item')
     */
    findByCy(selector: string): this;
    /**
     * Get the first DOM element from the main DOM elements.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul > li').first()
     */
    first(): this;
    /**
     * Get the last DOM element from the main DOM elements.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul > li').last()
     */
    last(): this;
    /**
     * Get the next sibling DOM element from the main DOM element.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul > li').eq(3).next()
     */
    next(): this;
    /**
     * Filter DOM elements from the main DOM elements.
     *
     * @param {string} selector A selector used for filter matching.
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul > li').not('.item')
     */
    not(selector: string): this;
    /**
     * Get the parent DOM element from the main DOM element.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('li').parent()
     */
    parent(): this;
    /**
     * Get the previous sibling DOM element from the main DOM element.
     *
     * @returns {Cyan} The Cyan instance.
     *
     * @example
     * cy.get('ul > li').eq(3).prev()
     */
    prev(): this;
}
export default CyanInterface;