salix/e2e/helpers/extensions.js

import config from './config.js';
import Nightmare from 'nightmare';
import {URL} from 'url';

Nightmare.action('login', function(userName, done) {
    this.goto(`${config.url}auth/?apiKey=salix`)
    .wait(`vn-login input[name=user]`)
    .write(`vn-login input[name=user]`, userName)
    .write(`vn-login input[name=password]`, 'nightmare')
    .click(`vn-login input[type=submit]`)
    // FIXME: Wait for dom to be ready: https://github.com/segmentio/nightmare/issues/481
    .wait(1000)
    .then(done);
});

Nightmare.action('changeLanguageToEnglish', function(done) {
    this.wait('#lang')
    .evaluate(selector => {
        return document.querySelector(selector).title;
    }, '#lang')
    .then(title => {
        if (title === 'Change language') {
            this.then(done);
        } else {
            this.click('#lang')
            .click('vn-main-menu [vn-id="langs-menu"] ul > li[name="en"]')
            .then(done);
        }
    });
});

Nightmare.action('waitForLogin', function(userName, done) {
    this.login(userName)
    .waitForURL('#!/')
    .url()
    .changeLanguageToEnglish()
    .then(done);
});

Nightmare.action('parsedUrl', function(done) {
    this.url()
    .then(url => {
        done(null, new URL(url));
    });
});

Nightmare.action('getProperty', function(selector, property, done) {
    this.evaluate_now((selector, property) => {
        return document.querySelector(selector)[property];
    }, done, selector, property);
});

Nightmare.action('waitProperty', function(selector, property, done) {
    this.wait((selector, property) => {
        let element = document.querySelector(selector);
        return element && element[property] != null && element[property] !== '';
    }, selector, property)
    .getProperty(selector, property)
    .then(result => done(null, result), done);
});

Nightmare.action('getInnerText', function(selector, done) {
    this.wait(selector)
    .evaluate_now(function(elementToSelect) {
        return document.querySelector(elementToSelect).innerText;
    }, done, selector);
});

Nightmare.action('getInputValue', function(selector, done) {
    this.wait(selector)
    .evaluate_now(function(elementToSelect) {
        return document.querySelector(elementToSelect).value;
    }, done, selector);
});

Nightmare.action('clearInput', function(selector, done) {
    let backSpaces = [];
    for (let i = 0; i < 50; i += 1) {
        backSpaces.push('\u0008');
    }
    this.wait(selector)
    .type(selector, backSpaces.join(''))
    .then(done);
});

Nightmare.action('write', function(selector, text, done) {
    this.wait(selector)
    .type(selector, text)
    .then(done);
});

Nightmare.action('waitToClick', function(selector, done) {
    this.wait(selector)
    .click(selector)
    .then(done);
});

Nightmare.action('isVisible', function(selector, done) {
    this.wait(selector)
    .evaluate_now(elementSelector => {
        const selectorMatches = document.querySelectorAll(elementSelector);
        const element = selectorMatches[0];
        if (selectorMatches.length > 1) {
            throw new Error(`multiple matches of ${elementSelector} found`);
        }
        let isVisible = false;
        if (element) {
            const eventHandler = event => {
                event.preventDefault();
                isVisible = true;
            };
            element.addEventListener('mouseover', eventHandler);
            const elementBoundaries = element.getBoundingClientRect();
            const x = elementBoundaries.left + element.offsetWidth / 2;
            const y = elementBoundaries.top + element.offsetHeight / 2;
            const elementInCenter = document.elementFromPoint(x, y);
            const elementInTopLeft = document.elementFromPoint(elementBoundaries.left, elementBoundaries.top);
            const elementInBottomRight = document.elementFromPoint(elementBoundaries.right, elementBoundaries.bottom);
            const e = new MouseEvent('mouseover', {
                view: window,
                bubbles: true,
                cancelable: true
            });
            if (elementInCenter) {
                elementInCenter.dispatchEvent(e);
            }
            if (elementInTopLeft) {
                elementInTopLeft.dispatchEvent(e);
            }
            if (elementInBottomRight) {
                elementInBottomRight.dispatchEvent(e);
            }
            element.removeEventListener('mouseover', eventHandler);
        }
        return isVisible;
    }, done, selector);
});

Nightmare.action('selectText', function(selector, done) {
    this.wait(selector)
    .evaluate(elementToSelect => {
        const range = document.createRange();
        range.selectNodeContents(document.querySelector(elementToSelect));
        const sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }, selector)
    .mouseup(selector)
    .then(done);
});

Nightmare.action('countElement', function(selector, done) {
    this.evaluate_now(selector => {
        return document.querySelectorAll(selector).length;
    }, done, selector);
});

Nightmare.action('waitForNumberOfElements', function(selector, count, done) {
    this.wait((resultSelector, expectedCount) => {
        return document.querySelectorAll(resultSelector).length === expectedCount;
    }, selector, count)
    .then(done);
});

Nightmare.action('waitForClassNotPresent', function(selector, className, done) {
    this.wait(selector)
    .wait((resultSelector, targetClass) => {
        if (!document.querySelector(resultSelector).classList.contains(targetClass)) {
            return true;
        }
    }, selector, className)
    .then(done);
});

Nightmare.action('waitForClassPresent', function(selector, className, done) {
    this.wait(selector)
    .wait((resultSelector, targetClass) => {
        if (document.querySelector(resultSelector).classList.contains(targetClass)) {
            return true;
        }
    }, selector, className)
    .then(done);
});

Nightmare.action('waitForTextInElement', function(selector, name, done) {
    this.wait(selector)
    .wait((resultSelector, expectedText) => {
        return document.querySelector(resultSelector).innerText.toLowerCase().includes(expectedText.toLowerCase());
    }, selector, name)
    .then(done);
});

Nightmare.action('waitForTextInInput', function(selector, name, done) {
    this.wait(selector)
    .wait((resultSelector, expectedText) => {
        return document.querySelector(resultSelector).value.toLowerCase().includes(expectedText.toLowerCase());
    }, selector, name)
    .then(done);
});

Nightmare.action('waitForInnerText', function(selector, done) {
    this.wait(selector)
    .wait(selector => {
        let innerText = document.querySelector(selector).innerText;
        return innerText != null && innerText != '';
    }, selector)
    .evaluate_now(selector => {
        return document.querySelector(selector).innerText;
    }, done, selector);
});

Nightmare.action('waitForEmptyInnerText', function(selector, done) {
    this.wait(selector => {
        return document.querySelector(selector).innerText == '';
    }, selector)
    .then(done);
});

Nightmare.action('waitForURL', function(hashURL, done) {
    this.wait(hash => {
        return document.location.hash.includes(hash);
    }, hashURL)
    .then(done);
});

Nightmare.action('waitForShapes', function(selector, done) {
    this.wait(selector)
    .evaluate_now(selector => {
        let shapes = document.querySelectorAll(selector);
        let shapesList = [];

        for (let shape of shapes) {
            shapesList.push(shape.innerText);
        }

        return shapesList;
    }, done, selector);
});

Nightmare.action('waitForSnackbar', function(done) {
    this.wait(500).waitForShapes('vn-snackbar .shape .text')
    .then(shapes => {
        done(null, shapes);
    });
});

Nightmare.action('waitForLastShape', function(selector, done) {
    this.wait(selector)
    .evaluate_now(selector => {
        let shape = document.querySelector(selector);

        return shape.innerText;
    }, done, selector);
});

Nightmare.action('waitForLastSnackbar', function(done) {
    this.wait(500).waitForLastShape('vn-snackbar .shape .text')
    .then(shapes => {
        done(null, shapes);
    });
});