Fixes #727 with organization-profile page object

tests/integration/components/organization-profile-test.js

@@ -1,11 +1,19 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import stubService from 'code-corps-ember/tests/helpers/stub-service';
+import PageObject from 'ember-cli-page-object';
+import component from 'code-corps-ember/tests/pages/components/organization-profile';
+
+let page = PageObject.create(component);
 
 moduleForComponent('organization-profile', 'Integration | Component | organization profile', {
   integration: true,
   beforeEach() {
     stubService(this, 'credentials');
+    page.setContext(this);
+  },
+  afterEach() {
+    page.removeContext();
   }
 });
 
@@ -34,21 +42,20 @@ let organization = {
 };
 
 test('it renders all its elements', function(assert) {
-  assert.expect(9);
+  assert.expect(8);
 
   this.set('organization', organization);
 
-  this.render(hbs`{{organization-profile organization=organization}}`);
+  page.render(hbs`{{organization-profile organization=organization}}`);
 
-  assert.equal(this.$('.organization-profile').length, 1, 'The component itself renders');
-  assert.equal(this.$('.organization-header').length, 1, 'The header component renders');
-  assert.ok(this.$('.organization-header').hasClass('expanded'), 'The header is expanded');
-  assert.equal(this.$('.organization-menu').length, 1, 'The menu component renders');
-  assert.equal(this.$('.project-list').length, 1, 'The projects list renders');
-  assert.equal(this.$('.organization-members').length, 1, 'The members component renders');
+  assert.ok(page.organizationHeader.isVisible, 'The header component renders');
+  assert.ok(page.organizationHeader.isExpanded, 'The header is expanded');
+  assert.ok(page.organizationMenu.isVisible, 'The menu component renders');
+  assert.ok(page.projectList.isVisible, 'The projects list renders');
+  assert.ok(page.organizationMembers.isVisible, 'The members component renders');
 
   // Test components populate with right data
-  assert.equal(this.$('.organization-header h2').text().trim(), 'Test Organization', 'The header has data');
-  assert.equal(this.$('.project-list .project-item').length, 3, 'The projects render');
-  assert.equal(this.$('.organization-members li').length, 3, 'The members render');
+  assert.equal(page.organizationHeader.title.text, 'Test Organization', 'The header has data');
+  assert.equal(page.projectList.items().count, 3, 'The projects render');
+  assert.equal(page.organizationMembers.members().count, 3, 'The members render');
 });

tests/integration/components/organization-settings-test.js

@@ -24,6 +24,6 @@ test('it renders properly', function(assert) {
 
   page.render(hbs`{{organization-settings}}`);
 
-  assert.ok(page.header.isVisible);
-  assert.ok(page.menu.isVisible);
+  assert.ok(page.organizationHeader.isVisible);
+  assert.ok(page.organizationMenu.isVisible);
 });

tests/pages/components/organization-header.js

@@ -0,0 +1,18 @@
+import {
+  hasClass,
+  isVisible,
+  text
+} from 'ember-cli-page-object';
+
+export default {
+  scope: '.organization-header',
+
+  isExpanded: hasClass('expanded'),
+
+  isVisible: isVisible(),
+
+  title: {
+    scope: 'h2',
+    text: text()
+  }
+};

tests/pages/components/organization-menu.js

@@ -0,0 +1,8 @@
+import {
+  isVisible
+} from 'ember-cli-page-object';
+
+export default {
+  scope: '.organization-menu',
+  isVisible: isVisible()
+};

tests/pages/components/organization-profile.js

@@ -1,3 +1,13 @@
+import organizationHeader from 'code-corps-ember/tests/pages/components/organization-header';
+import organizationMembers from 'code-corps-ember/tests/pages/components/organization-members';
+import organizationMenu from 'code-corps-ember/tests/pages/components/organization-menu';
+import projectList from 'code-corps-ember/tests/pages/components/project-list';
+
 export default {
-  scope: '.organization-profile'
+  scope: '.organization-profile',
+
+  organizationHeader,
+  organizationMembers,
+  organizationMenu,
+  projectList
 };

tests/pages/components/organization-settings.js

@@ -1,15 +1,7 @@
-import {
-  isVisible
-} from 'ember-cli-page-object';
+import organizationHeader from 'code-corps-ember/tests/pages/components/organization-header';
+import organizationMenu from 'code-corps-ember/tests/pages/components/organization-menu';
 
 export default {
-  header: {
-    scope: '.organization-header',
-    isVisible: isVisible()
-  },
-
-  menu: {
-    scope: '.organization-menu',
-    isVisible: isVisible()
-  }
+  organizationHeader,
+  organizationMenu
 };

tests/pages/components/project-list.js

@@ -1,11 +1,14 @@
 import {
   attribute,
-  collection
+  collection,
+  isVisible
 } from 'ember-cli-page-object';
 
 export default {
   scope: '.project-list',
 
+  isVisible: isVisible(),
+
   items: collection({
     itemScope: '.project-item',
     item: {