Rewrite integration tests for user-dropdown component to use page objects (#1585)

* created user-dropdown page object

* added user-dropdown component page object and changed integration test to include it

* fixed indentation

Author: Dave Connis

tests/integration/components/user-dropdown-test.js

@@ -1,10 +1,23 @@
 import { computed } from '@ember/object';
-import { run } from '@ember/runloop';
 import { moduleForComponent, test } from 'ember-qunit';
+import PageObject from 'ember-cli-page-object';
 import hbs from 'htmlbars-inline-precompile';
+import userDropdownComponent from 'code-corps-ember/tests/pages/component/user-dropdown';
+
+let page = PageObject.create(userDropdownComponent);
+
+function renderPage() {
+  page.render(hbs`{{user-dropdown user=user action='hide'}}`);
+}
 
 moduleForComponent('user-dropdown', 'Integration | Component | user dropdown', {
-  integration: true
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
 });
 
 const stubUser = {
@@ -23,10 +36,11 @@ const stubUser = {
 
 test('it renders', function(assert) {
   assert.expect(1);
+
   this.set('user', stubUser);
-  this.render(hbs`{{user-dropdown user=user}}`);
+  renderPage();
 
-  assert.equal(this.$('.dropdown-menu').length, 1, 'The component renders');
+  assert.ok(page.isVisible, 'The component renders');
 });
 
 test('it triggers the hide action when clicked', function(assert) {
@@ -36,6 +50,8 @@ test('it triggers the hide action when clicked', function(assert) {
   this.on('hide', function() {
     assert.ok(true, 'It triggers the hide action when clicked');
   });
-  this.render(hbs`{{user-dropdown user=user action='hide'}}`);
-  run(() => this.$('.dropdown-menu').click());
+
+  renderPage();
+  page.click();
+
 });

tests/pages/component/user-dropdown.js

@@ -0,0 +1,11 @@
+import {
+  clickable,
+  hasClass
+} from 'ember-cli-page-object';
+
+export default {
+  scope: '.dropdown-menu',
+
+  clickDropdownMenu: clickable('.dropdown-menu'),
+  dropdownIsHidden: hasClass('menu-hidden')
+};