Merge pull request #1628 from code-corps/rewrite-integration-tests-for-donation-goals-activation-test-component

Rewrite integration tests for donation-goals-activation-test component

Author: Dave Connis

app/templates/components/donation-goals-activation.hbs

@@ -7,7 +7,7 @@
 
       <section>
         <p>You've added goals. Just say the word and start accepting donations now.</p>
-        <button class="default activate-donations" {{action (action activateDonations)}}>Turn on donations</button>
+        <button class="default activate-donations" data-test-activate-donations {{action (action activateDonations)}} >Turn on donations</button>
       </section>
     </section>
   </div>

tests/integration/components/donation-goals-activation-test.js

@@ -1,6 +1,19 @@
 import { set } from '@ember/object';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import PageObject from 'ember-cli-page-object';
+import donationGoalsActivation from 'code-corps-ember/tests/pages/component/donation-goals-activation';
+
+let page = PageObject.create(donationGoalsActivation);
+
+function renderPage() {
+  page.render(hbs`
+    {{donation-goals-activation
+      activateDonations=activateDonationsHandler
+      canActivateDonations=canActivateDonations
+    }}
+  `);
+}
 
 function setHandlers(context, { activateDonationsHandler = function() {} } = {}) {
   set(context, 'activateDonationsHandler', activateDonationsHandler);
@@ -9,7 +22,11 @@ function setHandlers(context, { activateDonationsHandler = function() {} } = {})
 moduleForComponent('donation-goals-activation', 'Integration | Component | donation goals activation', {
   integration: true,
   beforeEach() {
+    page.setContext(this);
     setHandlers(this);
+  },
+  afterEach() {
+    page.removeContext();
   }
 });
 
@@ -23,28 +40,19 @@ test('it allows activating donations if canActivateDonations is true', function(
   setHandlers(this, { activateDonationsHandler });
   set(this, 'canActivateDonations', true);
 
-  this.render(hbs`
-    {{donation-goals-activation
-      activateDonations=activateDonationsHandler
-      canActivateDonations=canActivateDonations
-    }}
-  `);
+  renderPage();
 
-  assert.equal(this.$('.activate-donations').length, 1, 'The "activate donations" button is rendered');
+  assert.ok(page.activateDonationsButton.isVisible, 'The "activate donations" button is rendered');
 
-  this.$('.activate-donations').click();
+  page.activateDonationsButton.click();
 });
 
 test('it prevents activating donations if canActivateDonations is false', function(assert) {
   assert.expect(1);
 
   set(this, 'canActivateDonations', false);
 
-  this.render(hbs`
-    {{donation-goals-activation
-      canActivateDonations=canActivateDonations
-    }}
-  `);
+  renderPage();
 
-  assert.equal(this.$('.activate-donations').length, 0, 'The "activate donations" button is not rendered');
+  assert.notOk(page.activateDonationsButton.isVisible, 'The "activate donations" button is not rendered');
 });

tests/pages/component/donation-goals-activation.js

@@ -0,0 +1,7 @@
+export default {
+  scope: '.donation-goals-activation',
+
+  activateDonationsButton: {
+    scope: '[data-test-activate-donations]'
+  }
+};