428 lines
12 KiB
JavaScript
428 lines
12 KiB
JavaScript
'use strict';
|
|
|
|
/* eslint-env jasmine */
|
|
|
|
var wd = require('yiewd');
|
|
var colors = require('colors');
|
|
var expect = require('chai').expect;
|
|
var f = require('util').format;
|
|
var env = process.env;
|
|
|
|
var browser;
|
|
var caps;
|
|
|
|
browser = (process.env.BROWSER || 'chrome').split(':');
|
|
|
|
caps = {
|
|
name: f('[%s] typeahead.js ui', browser.join(' , ')),
|
|
browserName: browser[0]
|
|
};
|
|
|
|
setIf(caps, 'version', browser[1]);
|
|
setIf(caps, 'platform', browser[2]);
|
|
setIf(caps, 'tunnel-identifier', env['TRAVIS_JOB_NUMBER']);
|
|
setIf(caps, 'build', env['TRAVIS_BUILD_NUMBER']);
|
|
setIf(caps, 'tags', env['CI'] ? ['CI'] : ['local']);
|
|
|
|
function setIf(obj, key, val) {
|
|
val && (obj[key] = val);
|
|
}
|
|
|
|
describe('jquery-typeahead.js', function() {
|
|
var driver;
|
|
var body;
|
|
var input;
|
|
var hint;
|
|
var dropdown;
|
|
var allPassed = true;
|
|
|
|
this.timeout(300000);
|
|
|
|
before(function(done) {
|
|
var host = 'ondemand.saucelabs.com';
|
|
var port = 80;
|
|
var username;
|
|
var password;
|
|
|
|
if (env['CI']) {
|
|
host = 'localhost';
|
|
port = 4445;
|
|
username = env['SAUCE_USERNAME'];
|
|
password = env['SAUCE_ACCESS_KEY'];
|
|
}
|
|
|
|
driver = wd.remote(host, port, username, password);
|
|
driver.configureHttp({
|
|
timeout: 30000,
|
|
retries: 5,
|
|
retryDelay: 200
|
|
});
|
|
|
|
driver.on('status', function(info) {
|
|
console.log(info.cyan);
|
|
});
|
|
|
|
driver.on('command', function(meth, path, data) {
|
|
console.log(' > ' + meth.yellow, path.grey, data || '');
|
|
});
|
|
|
|
driver.run(function*() {
|
|
yield this.init(caps);
|
|
yield this.get((env['TEST_HOST'] || 'http://localhost:8080') + '/test/integration/test.html');
|
|
|
|
body = this.elementByTagName('body');
|
|
input = yield this.elementById('states');
|
|
hint = yield this.elementByClassName('aa-hint');
|
|
dropdown = yield this.elementByClassName('aa-dropdown-menu');
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
beforeEach(function(done) {
|
|
driver.run(function*() {
|
|
yield body.click();
|
|
yield this.execute('$("#states").autocomplete("val", "")');
|
|
done();
|
|
});
|
|
});
|
|
|
|
afterEach(function() {
|
|
allPassed = allPassed && (this.currentTest.state === 'passed');
|
|
});
|
|
|
|
after(function(done) {
|
|
driver.run(function*() {
|
|
yield this.quit();
|
|
yield driver.sauceJobStatus(allPassed);
|
|
done();
|
|
});
|
|
});
|
|
|
|
function testSuite () {
|
|
describe('on blur', function() {
|
|
it('should close dropdown', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
expect(yield dropdown.isDisplayed()).to.equal(true);
|
|
|
|
yield body.click();
|
|
expect(yield dropdown.isDisplayed()).to.equal(false);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should clear hint', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
expect(yield hint.getValue()).to.equal('michigan');
|
|
|
|
yield body.click();
|
|
expect(yield hint.getValue()).to.equal('');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on query change', function() {
|
|
it('should open dropdown if suggestions', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
expect(yield dropdown.isDisplayed()).to.equal(true);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should position the dropdown correctly', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
var inputPos = yield input.getLocation();
|
|
var dropdownPos = yield dropdown.getLocation();
|
|
|
|
expect(inputPos.x >= dropdownPos.x - 2 && inputPos.x <= dropdownPos.x + 2).to.equal(true);
|
|
expect(dropdownPos.y > inputPos.y).to.equal(true);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should close dropdown if no suggestions', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('huh?');
|
|
|
|
expect(yield dropdown.isDisplayed()).to.equal(false);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should render suggestions if suggestions', function(done) {
|
|
driver.run(function*() {
|
|
var suggestions;
|
|
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
suggestions = yield dropdown.elementsByClassName('aa-suggestion');
|
|
|
|
expect(suggestions).to.have.length('4');
|
|
expect(yield suggestions[0].text()).to.equal('Michigan');
|
|
expect(yield suggestions[1].text()).to.equal('Minnesota');
|
|
expect(yield suggestions[2].text()).to.equal('Mississippi');
|
|
expect(yield suggestions[3].text()).to.equal('Missouri');
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should show hint if top suggestion is a match', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
expect(yield hint.getValue()).to.equal('michigan');
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should not show hint if top suggestion is not a match', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('ham');
|
|
|
|
expect(yield hint.getValue()).to.equal('');
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should not show hint if there is query overflow', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('this is a very long value so deal with it otherwise');
|
|
|
|
expect(yield hint.getValue()).to.equal('');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on up arrow', function() {
|
|
it('should cycle through suggestions', function(done) {
|
|
driver.run(function*() {
|
|
var suggestions;
|
|
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
suggestions = yield dropdown.elementsByClassName('aa-suggestion');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Up arrow']);
|
|
expect(yield input.getValue()).to.equal('Missouri');
|
|
expect(yield suggestions[3].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Up arrow']);
|
|
expect(yield input.getValue()).to.equal('Mississippi');
|
|
expect(yield suggestions[2].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Up arrow']);
|
|
expect(yield input.getValue()).to.equal('Minnesota');
|
|
expect(yield suggestions[1].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Up arrow']);
|
|
expect(yield input.getValue()).to.equal('Michigan');
|
|
expect(yield suggestions[0].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Up arrow']);
|
|
expect(yield input.getValue()).to.equal('mi');
|
|
expect(yield suggestions[0].getAttribute('class')).to.equal('aa-suggestion');
|
|
expect(yield suggestions[1].getAttribute('class')).to.equal('aa-suggestion');
|
|
expect(yield suggestions[2].getAttribute('class')).to.equal('aa-suggestion');
|
|
expect(yield suggestions[3].getAttribute('class')).to.equal('aa-suggestion');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on down arrow', function() {
|
|
it('should cycle through suggestions', function(done) {
|
|
driver.run(function*() {
|
|
var suggestions;
|
|
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
suggestions = yield dropdown.elementsByClassName('aa-suggestion');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
expect(yield input.getValue()).to.equal('Michigan');
|
|
expect(yield suggestions[0].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
expect(yield input.getValue()).to.equal('Minnesota');
|
|
expect(yield suggestions[1].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
expect(yield input.getValue()).to.equal('Mississippi');
|
|
expect(yield suggestions[2].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
expect(yield input.getValue()).to.equal('Missouri');
|
|
expect(yield suggestions[3].getAttribute('class')).to.equal('aa-suggestion aa-cursor');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
expect(yield input.getValue()).to.equal('mi');
|
|
expect(yield suggestions[0].getAttribute('class')).to.equal('aa-suggestion');
|
|
expect(yield suggestions[1].getAttribute('class')).to.equal('aa-suggestion');
|
|
expect(yield suggestions[2].getAttribute('class')).to.equal('aa-suggestion');
|
|
expect(yield suggestions[3].getAttribute('class')).to.equal('aa-suggestion');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on escape', function() {
|
|
it('should close dropdown', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
expect(yield dropdown.isDisplayed()).to.equal(true);
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Escape']);
|
|
expect(yield dropdown.isDisplayed()).to.equal(false);
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should clear hint', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
expect(yield hint.getValue()).to.equal('michigan');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Escape']);
|
|
expect(yield hint.getValue()).to.equal('');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on tab', function() {
|
|
it('should autocomplete if hint is present', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Tab']);
|
|
expect(yield input.getValue()).to.equal('Michigan');
|
|
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('should select if cursor is on suggestion', function(done) {
|
|
driver.run(function*() {
|
|
var suggestions;
|
|
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
suggestions = yield dropdown.elementsByClassName('aa-suggestion');
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
yield input.type(wd.SPECIAL_KEYS['Tab']);
|
|
|
|
expect(yield dropdown.isDisplayed()).to.equal(false);
|
|
expect(yield input.getValue()).to.equal('Minnesota');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on right arrow', function() {
|
|
it('should autocomplete if hint is present', function(done) {
|
|
driver.run(function*() {
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
yield input.type(wd.SPECIAL_KEYS['Right arrow']);
|
|
expect(yield input.getValue()).to.equal('Michigan');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on suggestion click', function() {
|
|
it('should select suggestion', function(done) {
|
|
if (browser[0] === 'firefox') {
|
|
// crazy Firefox issue, skip it
|
|
done();
|
|
return;
|
|
}
|
|
driver.run(function*() {
|
|
var suggestions;
|
|
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
suggestions = yield dropdown.elementsByClassName('aa-suggestion');
|
|
yield suggestions[1].click();
|
|
|
|
expect(yield dropdown.isDisplayed()).to.equal(false);
|
|
expect(yield input.getValue()).to.equal('Minnesota');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('on enter', function() {
|
|
it('should select if cursor is on suggestion', function(done) {
|
|
driver.run(function*() {
|
|
var suggestions;
|
|
|
|
yield input.click();
|
|
yield input.type('mi');
|
|
|
|
suggestions = yield dropdown.elementsByClassName('aa-suggestion');
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
yield input.type(wd.SPECIAL_KEYS['Down arrow']);
|
|
yield input.type(wd.SPECIAL_KEYS['Return']);
|
|
|
|
expect(yield dropdown.isDisplayed()).to.equal(false);
|
|
expect(yield input.getValue()).to.equal('Minnesota');
|
|
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
testSuite();
|
|
describe('appendTo', function () {
|
|
before('all', function*() {
|
|
yield this.execute("buildAutocomplete({hint: false, appendTo: 'body'})");
|
|
});
|
|
|
|
testSuite();
|
|
});
|
|
});
|