Merge pull request #1598 from code-corps/rewrite-integration-tests-for-task-comment-list-component-to-use-page-objects

rewrite-integration-tests-for-task-comment-list-component-to-use-page-objects

Author: joshsmith

tests/acceptance/task-comments-test.js

@@ -22,7 +22,7 @@ test('Task comments are displayed correctly', function(assert) {
   });
 
   andThen(() => {
-    assert.equal(taskPage.comments().count, 4, 'The correct number of task comments is rendered');
+    assert.equal(taskPage.taskCommentList.comments().count, 4, 'The correct number of task comments is rendered');
   });
 });
 
@@ -50,7 +50,7 @@ test('A comment can be added to a task', function(assert) {
 
   andThen(() => {
     assert.equal(server.schema.comments.all().models.length, 1, 'A new comment was created');
-    assert.equal(taskPage.comments().count, 1, 'The comment is being rendered');
+    assert.equal(taskPage.taskCommentList.comments().count, 1, 'The comment is being rendered');
     let [comment] = server.schema.comments.all().models;
 
     assert.equal(comment.markdown, 'Test markdown', 'New comment has the correct markdown');

tests/integration/components/task-comment-list-test.js

@@ -2,22 +2,36 @@ import RSVP from 'rsvp';
 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 taskCommentList from 'code-corps-ember/tests/pages/components/task-comment-list';
+
+let page = pageObject.create(taskCommentList);
+
+function renderPage() {
+  page.render(hbs`
+  {{task-comment-list comments=comments}}`
+  );
+}
 
 moduleForComponent('task-comment-list', 'Integration | Component | task comment list', {
   integration: true,
   beforeEach() {
+    page.setContext(this);
     stubService(this, 'store', {
       query() {
         return RSVP.resolve([]);
       }
     });
+  },
+  afterEach() {
+    page.removeContext();
   }
 });
 
 test('it renders', function(assert) {
   assert.expect(1);
-  this.render(hbs`{{task-comment-list}}`);
-  assert.equal(this.$('.task-comment-list').length, 1, 'The component\'s element renders');
+  renderPage();
+  assert.ok(page.isVisible, 'The component\'s element renders');
 });
 
 test('It renders a list of comments if there are comments', function(assert) {
@@ -30,14 +44,13 @@ test('It renders a list of comments if there are comments', function(assert) {
   ];
 
   this.set('comments', comments);
-  this.render(hbs`{{task-comment-list comments=comments}}`);
-
-  assert.equal(this.$('.comment-item').length, 3, 'The correct number of comments is rendered');
+  renderPage();
+  assert.equal(page.comments().count, 3, 'The correct number of comments is rendered');
 });
 
 test('it renders nothing when there are no comments', function(assert) {
   assert.expect(1);
   this.set('comments', []);
-  this.render(hbs`{{task-comment-list comments=comments}}`);
-  assert.equal(this.$('.comment-item').length, 0, 'No comments are rendered');
+  renderPage();
+  assert.equal(page.comments().count, 0, 'No comments are rendered');
 });

tests/pages/components/task-comment-list.js

@@ -0,0 +1,10 @@
+import {
+  collection
+} from 'ember-cli-page-object';
+
+export default {
+  comments: collection({
+    scope: '.task-comment-list',
+    itemScope: '.comment-item'
+  })
+};

tests/pages/project/tasks/task.js

@@ -10,20 +10,17 @@ import {
 import commentItem from '../../components/comment-item';
 import createCommentForm from '../../components/create-comment-form';
 import skillsTypeahead from 'code-corps-ember/tests/pages/components/skills-typeahead';
+import taskCommentList from 'code-corps-ember/tests/pages/components/task-comment-list';
 
 export default create({
   commentItem,
   createCommentForm,
+  taskCommentList,
 
   visit: visitable(':organization/:project/tasks/:number'),
 
   clickSave: clickable('.save'),
 
-  comments: collection({
-    scope: '.task-comment-list',
-    itemScope: '.comment-item'
-  }),
-
   editor: {
     scope: '.editor-with-preview',