diff --git a/assets/javascripts/discourse/templates/components/donation-row.hbs b/assets/javascripts/discourse/templates/components/donation-row.hbs
index d37abb4..0e6d17a 100644
--- a/assets/javascripts/discourse/templates/components/donation-row.hbs
+++ b/assets/javascripts/discourse/templates/components/donation-row.hbs
@@ -2,11 +2,11 @@
   <span>{{i18n 'discourse_donations.invoice_prefix'}}</span>
 {{/if}}
 
-<span>{{currency}}</span>
+<span class="donation-row-currency">{{currency}}</span>
 
-<span>{{amount}}</span>
+<span class="donation-row-amount">{{amount}}</span>
 
-<span>{{period}}</span>
+<span class="donation-row-period">{{period}}</span>
 
 {{#if invoice}}
   <a href='{{data.invoiceLink}}' target='_blank'>({{i18n 'discourse_donations.invoice'}})</a>
@@ -14,15 +14,17 @@
 
 {{#if currentUser}}
   {{#if subscription}}
-    {{#if updating}}
-      {{loading-spinner size='small'}}
-    {{else}}
-      {{#unless canceled}}
-        <a {{action 'cancelSubscription'}}>
-          {{i18n 'cancel'}}
-        </a>
-      {{/unless}}
-    {{/if}}
+    <span class="donation-row-subscription">
+      {{#if updating}}
+        {{loading-spinner size='small'}}
+      {{else}}
+        {{#unless canceled}}
+          <a {{action 'cancelSubscription'}}>
+            {{i18n 'cancel'}}
+          </a>
+        {{/unless}}
+      {{/if}}
+    </span>
   {{/if}}
 {{/if}}
 
diff --git a/test/javascripts/acceptance/discourse-donations-test.es6 b/test/javascripts/acceptance/discourse-donations-test.es6
deleted file mode 100644
index 885e4dc..0000000
--- a/test/javascripts/acceptance/discourse-donations-test.es6
+++ /dev/null
@@ -1,15 +0,0 @@
-import { acceptance } from 'helpers/qunit-helpers';
-
-acceptance('Discourse Donations', {
-  loggedIn: true,
-  settings: {
-    discourse_donations_enabled: true,
-    discourse_donations_types: '',
-    discourse_donations_amounts: '1',
-  },
-});
-
-QUnit.test("donate page has a form on it", async assert => {
-  await visit("/donate");
-  assert.ok(exists(".donations-page-donations"));
-});
diff --git a/test/javascripts/components/donation-row-test.js.es6 b/test/javascripts/components/donation-row-test.js.es6
new file mode 100644
index 0000000..ae17141
--- /dev/null
+++ b/test/javascripts/components/donation-row-test.js.es6
@@ -0,0 +1,26 @@
+import componentTest from 'helpers/component-test';
+
+moduleForComponent('donation-row', { integration: true });
+
+componentTest('donation-row', {
+  template: `{{donation-row currency=3 amount=21 period='monthly'}}`,
+
+  test(assert) {
+    assert.equal(find('.donation-row-currency').text(), '3');
+    assert.equal(find('.donation-row-amount').text(), '21');
+    assert.equal(find('.donation-row-period').text(), 'monthly');
+  },
+});
+
+componentTest('donation-row cancels subscription', {
+  template: `{{donation-row currentUser=currentUser subscription=subscription}}`,
+
+  beforeEach() {
+    this.set('currentUser', true);
+    this.set('subscription', true);
+  },
+
+  async test(assert) {
+    assert.ok(find('.donation-row-subscription').length);
+  },
+});