From 328238967537fc2e4df33fc7b7f02c01f9b37805 Mon Sep 17 00:00:00 2001 From: Sarup Banskota Date: Thu, 22 Dec 2016 20:02:47 +0200 Subject: [PATCH] Use page object for user skills input --- app/components/user-skills-input.js | 86 +++---- tests/acceptance/onboarding-test.js | 8 +- .../components/user-skills-input-test.js | 225 +++++++++--------- tests/pages/components/user-skills-input.js | 64 ++++- 4 files changed, 219 insertions(+), 164 deletions(-) diff --git a/app/components/user-skills-input.js b/app/components/user-skills-input.js index 2fe729665..c8cbf8147 100644 --- a/app/components/user-skills-input.js +++ b/app/components/user-skills-input.js @@ -4,10 +4,12 @@ const { Component, computed, computed: { alias, and, equal, not, notEmpty }, + get, inject: { service }, isEmpty, + observer, run: { once }, - observer + set } = Ember; export default Component.extend({ @@ -33,30 +35,30 @@ export default Component.extend({ }), keyDown(e) { - this.set('keyCode', e.keyCode); + set(this, 'keyCode', e.keyCode); - let cursorAt = this.get('cursorAt'); - let isCommaKey = this.get('_isCommaKey'); - let isDownKey = this.get('_isDownKey'); - let isEnterKey = this.get('_isEnterKey'); - let isEscKey = this.get('_isEscKey'); - let isUpKey = this.get('_isUpKey'); + let cursorAt = get(this, 'cursorAt'); + let isCommaKey = get(this, '_isCommaKey'); + let isDownKey = get(this, '_isDownKey'); + let isEnterKey = get(this, '_isEnterKey'); + let isEscKey = get(this, '_isEscKey'); + let isUpKey = get(this, '_isUpKey'); if (isDownKey) { e.preventDefault(); this._setPosition(++cursorAt); - this.set('hidden', false); + set(this, 'hidden', false); } else if (isUpKey) { e.preventDefault(); this._setPosition(--cursorAt); - this.set('hidden', false); + set(this, 'hidden', false); } else if (isCommaKey || isEnterKey) { e.preventDefault(); this._selectSkill(); } else if (isEscKey) { - this.set('hidden', true); + set(this, 'hidden', true); } else { - this.set('hidden', false); + set(this, 'hidden', false); } }, @@ -67,25 +69,25 @@ export default Component.extend({ _isUpKey: equal('keyCode', 38), _isNewQuery: not('_sameQuery'), _sameQuery: computed('queryString', 'lastQuery', function() { - return this.get('queryString') === this.get('lastQuery'); + return get(this, 'queryString') === get(this, 'lastQuery'); }), actions: { blur() { - this.set('hidden', true); + set(this, 'hidden', true); }, focus() { - this.set('hidden', false); + set(this, 'hidden', false); }, hoverSkill(skill) { - this.get('results').forEach((item, index) => { + get(this, 'results').forEach((item, index) => { if (item === skill) { - this.set('cursorAt', index); - item.set('selected', true); + set(this, 'cursorAt', index); + set(item, 'selected', true); } else { - item.set('selected', false); + set(item, 'selected', false); } }); }, @@ -96,34 +98,34 @@ export default Component.extend({ }, _reset() { - this.set('results', []); - this.set('queryString', ''); + set(this, 'results', []); + set(this, 'queryString', ''); this.$('input').focus(); }, _search() { - let limit = this.get('limit'); - let queryString = this.get('queryString'); - let store = this.get('store'); + let limit = get(this, 'limit'); + let queryString = get(this, 'queryString'); + let store = get(this, 'store'); if (isEmpty(queryString)) { - this.set('results', []); - } else if (this.get('_isNewQuery')) { - this.set('lastQuery', queryString); + set(this, 'results', []); + } else if (get(this, '_isNewQuery')) { + set(this, 'lastQuery', queryString); store.query('skill', { query: queryString, limit }).then((skills) => { - this.set('results', skills); - this.set('cursorAt', 0); + set(this, 'results', skills); + set(this, 'cursorAt', 0); this._updateSelected(); }); } }, _selectSkill() { - if (this.get('hasResults')) { - let cursorAt = this.get('cursorAt'); - let results = this.get('results'); + if (get(this, 'hasResults')) { + let cursorAt = get(this, 'cursorAt'); + let results = get(this, 'results'); let skill = results.objectAt(cursorAt); - let userSkills = this.get('userSkills'); + let userSkills = get(this, 'userSkills'); let foundSkill = userSkills.findUserSkill(skill); @@ -138,18 +140,18 @@ export default Component.extend({ }, _setPosition(position) { - let numberOfResults = this.get('numberOfResults'); + let numberOfResults = get(this, 'numberOfResults'); let numberOfResultsIndexed = numberOfResults - 1; - this.set('cursorWas', this.get('cursorAt')); + set(this, 'cursorWas', get(this, 'cursorAt')); if (numberOfResults > 0) { if (position < 0) { - this.set('cursorAt', numberOfResultsIndexed); + set(this, 'cursorAt', numberOfResultsIndexed); } else if (position > numberOfResultsIndexed) { - this.set('cursorAt', 0); + set(this, 'cursorAt', 0); } else { - this.set('cursorAt', position); + set(this, 'cursorAt', position); } } @@ -157,13 +159,13 @@ export default Component.extend({ }, _updateSelected() { - let cursorAt = this.get('cursorAt'); + let cursorAt = get(this, 'cursorAt'); - this.get('results').forEach((item, index) => { + get(this, 'results').forEach((item, index) => { if (index === cursorAt) { - item.set('selected', true); + set(item, 'selected', true); } else { - item.set('selected', false); + set(item, 'selected', false); } }); } diff --git a/tests/acceptance/onboarding-test.js b/tests/acceptance/onboarding-test.js index 3c6b1ddc4..3713f41be 100644 --- a/tests/acceptance/onboarding-test.js +++ b/tests/acceptance/onboarding-test.js @@ -101,8 +101,8 @@ test('A user can onboard as expected', function(assert) { andThen(() => { onboardingPage.userSkillsInput.focus(); - assert.equal(onboardingPage.userSkillsInput.dropdown(0).text, 'Ruby'); - onboardingPage.userSkillsInput.dropdown(0).click(); + assert.equal(onboardingPage.userSkillsInput.inputItems(0).text, 'Ruby'); + onboardingPage.userSkillsInput.inputItems(0).click(); }); andThen(() => { @@ -117,8 +117,8 @@ test('A user can onboard as expected', function(assert) { andThen(() => { onboardingPage.userSkillsInput.focus(); - assert.equal(onboardingPage.userSkillsInput.dropdown(0).text, 'Ruby'); - onboardingPage.userSkillsInput.dropdown(0).click(); + assert.equal(onboardingPage.userSkillsInput.inputItems(0).text, 'Ruby'); + onboardingPage.userSkillsInput.inputItems(0).click(); }); andThen(() => { diff --git a/tests/integration/components/user-skills-input-test.js b/tests/integration/components/user-skills-input-test.js index 1655ae64f..e98834fe8 100644 --- a/tests/integration/components/user-skills-input-test.js +++ b/tests/integration/components/user-skills-input-test.js @@ -1,14 +1,19 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; import Ember from 'ember'; -import jQuery from 'jquery'; import stubService from 'code-corps-ember/tests/helpers/stub-service'; +import PageObject from 'ember-cli-page-object'; +import userSkillsInputComponent from '../../pages/components/user-skills-input'; +import wait from 'ember-test-helpers/wait'; const { Object, - RSVP + RSVP, + set } = Ember; +let page = PageObject.create(userSkillsInputComponent); + let mockStore = { query() { return RSVP.resolve([ @@ -32,162 +37,164 @@ moduleForComponent('user-skills-input', 'Integration | Component | user skills i beforeEach() { stubService(this, 'store', mockStore); stubService(this, 'user-skills', mockUserSkillsService); + page.setContext(this); + }, + afterEach() { + page.removeContext(); } }); -let pressCommaKey = jQuery.Event('keydown', { - keyCode: 188, - which: 188 -}); - -let pressDownKey = jQuery.Event('keydown', { - keyCode: 40, - which: 40 -}); - -let pressEnterKey = jQuery.Event('keydown', { - keyCode: 13, - which: 13 -}); - -let pressEscKey = jQuery.Event('keydown', { - keyCode: 27, - which: 27 -}); - -let pressRKey = jQuery.Event('keydown', { - keyCode: 82, - which: 82 -}); - -let pressUpKey = jQuery.Event('keydown', { - keyCode: 38, - which: 38 -}); - test('it does nothing when pressing a random key', function(assert) { assert.expect(1); - this.render(hbs`{{user-skills-input}}`); + page.render(hbs`{{user-skills-input}}`); - this.$('input').trigger(pressRKey); + page.pressRKey(); - assert.equal(this.$('input').val().trim(), ''); + assert.equal(page.inputValue, ''); }); test('it fetches results when changing the input', function(assert) { assert.expect(5); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); - this.$('input').focus(); - this.set('query', 'ruby ra'); + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); - assert.equal(this.$('input').val().trim(), 'ruby ra'); - this.$('input').keydown(); + assert.equal(page.inputValue, 'ruby ra'); + page.keydown(); - let firstItemHtml = 'Ruby'; - assert.equal(this.$('.dropdown-menu li:eq(0) a').html().trim(), firstItemHtml); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true); + assert.equal(page.inputItems(0).highlightedStrings(0).text, 'Ruby'); + assert.equal(page.inputItems(0).listItemIsSelected, true); - let secondItemHtml = 'Ruby on Rails'; - assert.equal(this.$('.dropdown-menu li:eq(1) a').html().trim(), secondItemHtml); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false); + assert.equal(page.inputItems(1).highlightedStrings(1).text, 'Ra'); + assert.equal(page.inputItems(1).listItemIsSelected, false); + + done(); + }); }); test('it changes the selection when arrowing up or down', function(assert) { assert.expect(10); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); + + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); + page.keydown(); - this.$('input').focus(); - this.set('query', 'ruby ra'); - this.$('input').keydown(); + assert.equal(page.inputItems(0).listItemIsSelected, true); + assert.equal(page.inputItems(1).listItemIsSelected, false); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false); + page.pressDownKey(); + assert.equal(page.inputItems(0).listItemIsSelected, false); + assert.equal(page.inputItems(1).listItemIsSelected, true); - this.$('input').trigger(pressDownKey); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), false); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), true); + page.pressDownKey(); + assert.equal(page.inputItems(0).listItemIsSelected, true); + assert.equal(page.inputItems(1).listItemIsSelected, false); - this.$('input').trigger(pressDownKey); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false); + page.pressUpKey(); + assert.equal(page.inputItems(0).listItemIsSelected, false); + assert.equal(page.inputItems(1).listItemIsSelected, true); - this.$('input').trigger(pressUpKey); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), false); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), true); + page.pressUpKey(); + assert.equal(page.inputItems(0).listItemIsSelected, true); + assert.equal(page.inputItems(1).listItemIsSelected, false); - this.$('input').trigger(pressUpKey); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false); + done(); + }); }); test('it hides when hitting esc key', function(assert) { assert.expect(2); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); - this.$('input').focus(); - this.set('query', 'ruby ra'); - this.$('input').keydown(); + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); + page.keydown(); - assert.equal(this.$('.dropdown-menu').length, 1); + assert.ok(page.dropdownMenuVisible); - this.$('input').trigger(pressEscKey); + page.pressEscKey(); - assert.equal(this.$('.dropdown-menu').length, 0); + assert.notOk(page.dropdownMenuVisible); + done(); + }); }); test('it changes the selection when hovering', function(assert) { assert.expect(4); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); - this.$('input').focus(); - this.set('query', 'ruby ra'); - this.$('input').keydown(); + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); + page.keydown(); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), true); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), false); + assert.equal(page.inputItems(0).listItemIsSelected, true); + assert.equal(page.inputItems(1).listItemIsSelected, false); - this.$('.dropdown-menu li:eq(1)').trigger('mouseenter'); - assert.equal(this.$('.dropdown-menu li:eq(0)').hasClass('selected'), false); - assert.equal(this.$('.dropdown-menu li:eq(1)').hasClass('selected'), true); + page.mouseenterDropdownFirstItem(); + assert.equal(page.inputItems(0).listItemIsSelected, false); + assert.equal(page.inputItems(1).listItemIsSelected, true); + done(); + }); }); test('it selects the skill when hitting enter', function(assert) { assert.expect(2); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); - this.$('input').focus(); - this.set('query', 'ruby ra'); - this.$('input').keydown(); - this.$('input').trigger(pressEnterKey); + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); + page.keydown(); + page.pressEnterKey(); - assert.equal(this.$('input').val().trim(), ''); - assert.equal(this.$('.dropdown-menu li').length, 0); + assert.equal(page.inputValue, ''); + assert.ok(page.dropdownMenuItemsHidden); + done(); + }); }); test('it selects the skill when hitting comma', function(assert) { assert.expect(2); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); - this.$('input').focus(); - this.set('query', 'ruby ra'); - this.$('input').trigger(pressCommaKey); + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); + page.pressCommaKey(); - assert.equal(this.$('input').val().trim(), ''); - assert.equal(this.$('.dropdown-menu li').length, 0); + assert.equal(page.inputValue, ''); + assert.ok(page.dropdownMenuItemsHidden); + done(); + }); }); test('it selects the skill when clicking it', function(assert) { assert.expect(2); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); - this.$('input').focus(); - this.set('query', 'ruby ra'); - this.$('input').keydown(); - this.$('.dropdown-menu li').trigger('mousedown'); + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); + page.keydown(); + page.mousedownDropdownItem(); - assert.equal(this.$('input').val().trim(), ''); - assert.equal(this.$('.dropdown-menu li').length, 0); + assert.equal(page.inputValue, ''); + assert.ok(page.dropdownMenuItemsHidden); + done(); + }); }); test('it does nothing when there are no results', function(assert) { @@ -196,14 +203,18 @@ test('it does nothing when there are no results', function(assert) { let query = function() { return RSVP.resolve([]); }; - this.set('store.query', query); + set(this, 'store.query', query); - this.render(hbs`{{user-skills-input query=query}}`); + let done = assert.async(); + page.render(hbs`{{user-skills-input query=query}}`); - this.$('input').focus(); - this.set('query', 'ruby ra'); - this.$('input').keydown(); - this.$('input').trigger(pressEnterKey); + wait().then(() => { + set(this, 'query', 'ruby ra'); + page.focus(); + page.keydown(); + page.pressEnterKey(); - assert.equal(this.$('input').val().trim(), 'ruby ra'); + assert.equal(page.inputValue, 'ruby ra'); + done(); + }); }); diff --git a/tests/pages/components/user-skills-input.js b/tests/pages/components/user-skills-input.js index 2c4126d12..82169e14b 100644 --- a/tests/pages/components/user-skills-input.js +++ b/tests/pages/components/user-skills-input.js @@ -1,24 +1,66 @@ import { - clickable, - collection, - fillable, - text, - triggerable + collection, fillable, isVisible, isHidden, triggerable, value } from 'ember-cli-page-object'; +import userSkillsInputItem from './user-skills-input-item'; export default { scope: '.user-skills-input', fillIn: fillable('input'), focus: triggerable('focus', 'input'), + inputValue: value('input'), + dropdownMenuVisible: isVisible('.dropdown-menu'), + dropdownMenuItemsHidden: isHidden('.dropdown-menu li'), - dropdown: collection({ - scope: '.dropdown-menu', - itemScope: 'li', + mousedownDropdownItem: triggerable('mousedown', '.dropdown-menu li'), + mouseenterDropdownFirstItem: triggerable('mouseenter', '.dropdown-menu li:eq(1)'), - item: { - text: text(), - click: clickable() + keydown: triggerable('keydown', 'input'), + + pressCommaKey: triggerable('keydown', 'input', { + eventProperties: { + keyCode : 188, + which : 188 + } + }), + + pressDownKey: triggerable('keydown', 'input', { + eventProperties: { + keyCode : 40, + which : 40 + } + }), + + pressEnterKey: triggerable('keydown', 'input', { + eventProperties: { + keyCode : 13, + which : 13 + } + }), + + pressEscKey: triggerable('keydown', 'input', { + eventProperties: { + keyCode : 27, + which : 27 + } + }), + + pressRKey: triggerable('keydown', 'input', { + eventProperties: { + keyCode : 82, + which : 82 } + }), + + pressUpKey: triggerable('keydown', 'input', { + eventProperties: { + keyCode : 38, + which : 38 + } + }), + + inputItems: collection({ + item: userSkillsInputItem, + itemScope: userSkillsInputItem.scope }) };