diff --git a/plugin.rb b/plugin.rb
index 88bb096..8d972f7 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-# name: Discourse Patrons
+# name: discourse-patrons
 # about: Integrates Stripe into Discourse to allow visitors to make payments
 # version: 1.0.0
 # url: https://github.com/rimian/discourse-patrons
diff --git a/test/javascripts/components/donation-form-test.es6 b/test/javascripts/components/donation-form-test.es6
new file mode 100644
index 0000000..c030f73
--- /dev/null
+++ b/test/javascripts/components/donation-form-test.es6
@@ -0,0 +1,47 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("donation-form", { integration: true });
+
+componentTest("Discourse Patrons donation form has content", {
+  template: `{{donation-form}}`,
+
+  beforeEach() {
+    this.registry.register(
+      "component:stripe-card",
+      Ember.Component.extend({ tagName: "dummy-component-tag" })
+    );
+  },
+
+  async test(assert) {
+    assert.ok(
+      find(".discourse-patrons-section-columns").length,
+      "The card section renders"
+    );
+    assert.ok(
+      find("dummy-component-tag").length,
+      "The stripe component renders"
+    );
+  }
+});
+
+componentTest("donation form has a confirmation", {
+  template: `{{donation-form confirmation=confirmation}}`,
+
+  beforeEach() {
+    this.registry.register("component:stripe-card", Ember.Component.extend());
+  },
+
+  async test(assert) {
+    this.set("confirmation", { card: { last4: "4242" } });
+
+    const confirmExists = find(".discourse-donations-confirmation").length;
+
+    assert.ok(confirmExists, "The confirmation form renders");
+
+    const last4 = find(".discourse-donations-last4")
+      .text()
+      .trim();
+
+    assert.equal(last4, ".... .... .... 4242", "The last 4 digits are correct");
+  }
+});
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..14cfd2e
--- /dev/null
+++ b/test/javascripts/components/donation-row-test.js.es6
@@ -0,0 +1,33 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("donation-row", { integration: true });
+
+componentTest("Discourse Patrons donation-row", {
+  template: `{{donation-row currency=3 amount=21 period='monthly'}}`,
+
+  test(assert) {
+    assert.equal(find(".donation-row-currency").text(), "3", "It has currency");
+    assert.equal(find(".donation-row-amount").text(), "21", "It has an amount");
+    assert.equal(
+      find(".donation-row-period").text(),
+      "monthly",
+      "It has a period"
+    );
+  }
+});
+
+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,
+      "It has a subscription"
+    );
+  }
+});
diff --git a/test/javascripts/components/stripe-card-test.js.es6 b/test/javascripts/components/stripe-card-test.js.es6
new file mode 100644
index 0000000..5858dd9
--- /dev/null
+++ b/test/javascripts/components/stripe-card-test.js.es6
@@ -0,0 +1,40 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("stripe-card", { integration: true });
+
+componentTest("Discourse Patrons stripe card success", {
+  template: `{{stripe-card handleConfirmStripeCard=onSubmit}}`,
+
+  beforeEach() {
+    window.Stripe = () => {
+      return {
+        createPaymentMethod() {
+          return new Ember.RSVP.Promise(resolve => {
+            resolve({});
+          });
+        },
+        elements() {
+          return {
+            create() {
+              return {
+                on() {},
+                card() {},
+                mount() {}
+              };
+            }
+          };
+        }
+      };
+    };
+  },
+
+  async test(assert) {
+    assert.expect(1);
+
+    this.set("onSubmit", () => {
+      assert.ok(true, "payment method created");
+    });
+
+    await click(".btn-payment");
+  }
+});