Fixes #739 with project-header page object

app/templates/components/project-details.hbs

@@ -6,7 +6,6 @@
   </div>
 
   <div class="project__header__details">
-
     <h2 class="project__header__title">
       {{#link-to 'project.index' project}}
         {{project.title}}

app/templates/components/project-header.hbs

@@ -1,5 +1,3 @@
-{{! is this template used at all? }}
-
 <img class="icon" src={{project.iconThumbUrl}} alt={{project.title}} />
 <h2>
   {{project.title}}

tests/integration/components/project-header-test.js

@@ -1,8 +1,18 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import PageObject from 'ember-cli-page-object';
+import component from 'code-corps-ember/tests/pages/components/project-header';
+
+let page = PageObject.create(component);
 
 moduleForComponent('project-header', 'Integration | Component | project header', {
-  integration: true
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
+  }
 });
 
 test('it displays the right title, icon, description', function(assert) {
@@ -15,9 +25,9 @@ test('it displays the right title, icon, description', function(assert) {
   };
   this.set('project', project);
 
-  this.render(hbs`{{project-header project=project}}`);
+  page.render(hbs`{{project-header project=project}}`);
 
-  assert.equal(this.$('img.icon').attr('src'), project.iconThumbUrl, 'Icon is rendered');
-  assert.equal(this.$('h2').text().trim(), project.title, 'Title is rendered');
-  assert.equal(this.$('p').text().trim(), project.description, 'Description is rendered');
+  assert.equal(page.icon.src, project.iconThumbUrl, 'Icon is rendered');
+  assert.equal(page.title.text, project.title, 'Title is rendered');
+  assert.equal(page.description.text, project.description, 'Description is rendered');
 });

tests/pages/components/project-header.js

@@ -0,0 +1,21 @@
+import {
+  attribute,
+  text
+} from 'ember-cli-page-object';
+
+export default {
+  description: {
+    scope: 'p',
+    text: text()
+  },
+
+  icon: {
+    scope: 'img.icon',
+    src: attribute('src')
+  },
+
+  title: {
+    scope: 'h2',
+    text: text()
+  }
+};