Leadfoot component objects example

Component.js

'use strict';

/**
 * Base component driver
 *
 * Related docs:
 *   https://theintern.github.io/leadfoot/Command.html
 *   https://theintern.github.io/leadfoot/Element.html
 *
 * @param {leadfoot/Command} remote
 * @param {Object} options
 * @param {string=} options.hostSelector - host matches this selector
 * @param {string=} options.contextSelector - host context matches this selector
 */
function Component(remote, options) {
  options = options || {};
  this.remote = remote;
  this.hostSelector = options.hostSelector;
  this.contextSelector = options.contextSelector;
}
Component.prototype.constructor = Component;

module.exports = Component;

/* Locators
 * ========================================================================== */

/**
 * Find the component's host element
 * Note: the leadfoot/Element is assigned to 'this.host'; it is not a live
 * reference to the document Element.
 *
 * @return {Promise.<leadfoot/Element>}
 */
Component.prototype.findHost = function () {
  var contextSelector = this.contextSelector ? this.contextSelector : '';
  var selector = (contextSelector + ' ' + this.hostSelector).trim();

  return this.remote
    .setFindTimeout(20000)
    .findByCssSelector(selector)
    .then(function (element) {
      return element;
    });
};

/**
 * Find an element within the host
 *
 * @param {String} selector - CSS selector
 * @return {Promise.<leadfoot/Element>}
 */
Component.prototype.findElement = function (selector) {
  return this.findHost().then(function (host) {
    return host.findByCssSelector(selector);
  });
};

/**
 * Find elements within the host
 *
 * @param {String} selector - CSS selector
 * @return {Promise.<Array.<leadfoot/Element>>}
 */
Component.prototype.findElements = function (selector) {
  return this.findHost().then(function (host) {
    return host.findAllByCssSelector(selector);
  });
};

/* Actions
 * ========================================================================== */

/**
 * @return {Promise.<void>}
 */
Component.prototype.click = function () {
  return this.findHost().then(function (element) {
    element.click();
  });
};

element.js

'use strict';

/**
 * Returns a callback for leadfoot's 'then'
 *
 * Before:
 *
 * .then(function (element) {
 *   return element.methodName('methodArg');
 * });
 *
 * After:
 *
 * .then(utils.element('methodName', 'methodArg'));
 *
 * @param {String} methodName - method on the leadfoot/Element prototype
 * @param {String|Array} methodArg - argument to the method
 * @return {Function}
 */
function element(methodName, methodArg) {
  /**
   * @param {leadfoot/Element} el - leadfoot element
   * @return {Promise}
   */
  return function (el) {
    return el[methodName](methodArg);
  };
}

module.exports = element;

example-component-driver.js

'use strict';

var utils = require('.');

var Component = utils.Component;
var extend = utils.extend;

var selector = {
  host: '.ExampleComponent',
  count: '.ExampleComponent-count',
  icon: '.ExampleComponent-icon'
};

/**
 * ExampleComponent driver
 *
 * @param {leadfoot/Command} remote
 * @param {Object} options
 */
function ExampleComponent(remote, options) {
  options = options || {};
  options.hostSelector = options.hostSelector || selector.host;
  Component.call(this, remote, options);
}
utils.extend(ExampleComponent, Component);

module.exports = ExampleComponent;

/* Locators
 * ========================================================================== */

/**
 * @return {Promise.<leadfoot/Element>}
 */
ExampleComponent.prototype.findIcon = function () {
  return this.findElement(selector.icon);
};

/**
 * @return {Promise.<leadfoot/Element>}
 */
ExampleComponent.prototype.findCount = function () {
  return this.findElement(selector.count);
};

example-test.js

'use strict';

var ExampleComponent = require('../ExampleComponent');

suite('suite name', function () {
  var page, remote;

  before(function () {
    remote = this.remote;
    page = remote.get('http://example.com/some/page');
    example = new ExampleComponent(remote);
  });

  test('clicking FollowButton opens SignUpSheet', function () {
    return page.then(function () {
      return example.click();
    }).then(function () {
      return remote.getCurrentUrl();
    }).then(function (url) {
      return assert.eventually.equal(url, 'http://example.com/home');
    });
  });
});

extend.js

'use strict';

/**
 * @param {Function} Ctor - contructor
 * @param {Function} Base - base contructor to extend
 */
function extend(Ctor, Base) {
  Ctor.prototype = Object.create(Base.prototype);
  Ctor.prototype.constructor = Ctor;
}

module.exports = extend;

index.js

'use strict';

var Component = require('./Component');
var element = require('./element');
var extend = require('./extend');

module.exports = {
  Component: Component,
  element: element,
  extend: extend
};