Merge pull request #913 from code-corps/tests/page-object-user-settin…

…gs-form

Use page objects for user-settings-form-test

tests/integration/components/user-settings-form-test.js

@@ -2,46 +2,46 @@ import Ember from 'ember';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { getFlashMessageCount } from 'code-corps-ember/tests/helpers/flash-message';
+import PageObject from 'ember-cli-page-object';
+import userSettingsFormComponent from '../../pages/components/user-settings-form';
 
-const { getOwner, RSVP } = Ember;
+const { getOwner, RSVP, set } = Ember;
+
+let page = PageObject.create(userSettingsFormComponent);
 
 moduleForComponent('user-settings-form', 'Integration | Component | user settings form', {
   integration: true,
   beforeEach() {
     getOwner(this).lookup('service:flash-messages').registerTypes(['success']);
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
   }
 });
 
-test('it renders', function(assert) {
-  assert.expect(1);
-
-  this.render(hbs`{{user-settings-form}}`);
-
-  assert.equal(this.$('.user-settings-form').length, 1);
-});
-
 let user = {
+  biography: 'A test user',
   firstName: 'Test',
   lastName: 'User',
   twitter: '@testuser',
-  website: 'example.com',
-  biography: 'A test user'
+  website: 'example.com'
 };
 
 test('it renders form elements properly', function(assert) {
   assert.expect(6);
 
-  this.set('user', user);
+  set(this, 'user', user);
 
-  this.render(hbs`{{user-settings-form user=user}}`);
+  page.render(hbs`{{user-settings-form user=user}}`);
 
-  assert.equal(this.$('input[name=firstName]').val(), 'Test');
-  assert.equal(this.$('input[name=lastName]').val(), 'User');
-  assert.equal(this.$('input[name=twitter]').val(), '@testuser');
-  assert.equal(this.$('input[name=website]').val(), 'example.com');
-  assert.equal(this.$('input[name=biography]').val(), 'A test user');
+  assert.equal(page.biographyValue, 'A test user');
+  assert.equal(page.firstNameValue, 'Test');
+  assert.equal(page.lastNameValue, 'User');
+  assert.equal(page.twitterValue, '@testuser');
+  assert.equal(page.websiteValue, 'example.com');
 
-  assert.equal(this.$('.save').length, 1);
+  assert.ok(page.saveVisible);
 });
 
 test('it calls save on user when save button is clicked', function(assert) {
@@ -52,11 +52,11 @@ test('it calls save on user when save button is clicked', function(assert) {
     return RSVP.resolve();
   };
 
-  this.set('user', user);
+  set(this, 'user', user);
 
-  this.render(hbs`{{user-settings-form user=user}}`);
+  page.render(hbs`{{user-settings-form user=user}}`);
 
-  this.$('.save').click();
+  page.clickSave();
 
   assert.equal(getFlashMessageCount(this), 1, 'A flash message was shown');
 });

tests/pages/components/user-settings-form.js

@@ -1,7 +1,9 @@
 import {
   clickable,
   fillable,
-  findElement
+  findElement,
+  isVisible,
+  value
 } from 'ember-cli-page-object';
 
 import fillInFileInput from '../../helpers/fill-in-file-input';
@@ -10,25 +12,33 @@ import removeDoubleQuotes from '../../helpers/remove-double-quotes';
 export default {
   scope: '.user-settings-form',
 
+  biography: fillable('input[name=biography]'),
   firstName: fillable('input[name=firstName]'),
   lastName: fillable('input[name=lastName]'),
   twitter: fillable('input[name=twitter]'),
   website: fillable('input[name=website]'),
-  biography: fillable('input[name=biography]'),
+
+  biographyValue: value('input[name=biography]'),
+  firstNameValue: value('input[name=firstName]'),
+  lastNameValue: value('input[name=lastName]'),
+  twitterValue: value('input[name=twitter]'),
+  websiteValue: value('input[name=website]'),
+
+  saveVisible: isVisible('.save'),
 
   clickSave: clickable('.save'),
 
   imageDrop: {
     scope: '.image-drop',
 
-    dropFile(content) {
-      fillInFileInput(`${this.scope} input[type=file]`, { name: 'file.png', content });
-    },
-
     backgroundImageData() {
       let $el = findElement(this);
       let backgroundImageData = $el.css('background-image');
       return removeDoubleQuotes(backgroundImageData);
+    },
+
+    dropFile(content) {
+      fillInFileInput(`${this.scope} input[type=file]`, { name: 'file.png', content });
     }
   }
 };