test button click

assets/javascripts/discourse/components/payment-options.js.es6

@@ -0,0 +1,7 @@
+export default Ember.Component.extend({
+  actions: {
+    clickPlan(plan) {
+      this.selectPlan(plan);
+    }
+  }
+});

assets/javascripts/discourse/controllers/s-subscribe-show.js.es6

@@ -9,7 +9,10 @@ export default Ember.Controller.extend({
     );
     const elements = this.get("stripe").elements();
 
-    this.set("cardElement", elements.create("card", { hidePostalCode: true, disabled: true }));
+    this.set(
+      "cardElement",
+      elements.create("card", { hidePostalCode: true, disabled: true })
+    );
   },
 
   actions: {

assets/javascripts/discourse/templates/components/payment-options.hbs

@@ -1,8 +1,8 @@
 
-<button class="btn btn-primary btn-discourse-subscriptions-subscribe">
+<button class="btn btn-primary">
   Purchase a subscription
 </button>
-<button class="btn btn-discourse-subscriptions-subscribe">
+<button class="btn">
   Make just one payment
 </button>
 
@@ -11,10 +11,14 @@
 <p>Select subscription period</p>
 
 <div id="subscribe-buttons">
-  {{#each plans as plan}}
-    <button class="btn btn-discourse-subscriptions-subscribe">
+  {{#each plans as |plan|}}
+    {{#d-button
+      action="clickPlan"
+      actionParam=plan
+      class="btn btn-discourse-subscriptions-subscribe"
+    }}
       <div>Monthly</div>
       AUD $5.00
-    </button>
+    {{/d-button}}
   {{/each}}
 </div>

assets/stylesheets/common/subscribe.scss

@@ -1,4 +1,3 @@
-
 #subscribe-buttons {
   display: flex;
   justify-content: space-around;

test/javascripts/components/payment-options-test.js.es6

@@ -2,28 +2,28 @@ import componentTest from "helpers/component-test";
 
 moduleForComponent("payment-options", { integration: true });
 
-componentTest("Discourse Subscriptions has no plans", {
+componentTest("Discourse Subscriptions payment options have no plans", {
   template: `{{payment-options plans=plans}}`,
 
   async test(assert) {
-    this.set('plans', false);
+    this.set("plans", false);
 
     assert.equal(
-      find("#subscribe-buttons .btn-discourse-subscriptions-subscribe").length,
+      find(".btn-discourse-subscriptions-subscribe").length,
       0,
       "The plan buttons are not shown"
     );
   }
 });
 
-componentTest("Discourse Subscriptions has content", {
+componentTest("Discourse Subscriptions payment options has content", {
   template: `{{payment-options plans=plans}}`,
 
   async test(assert) {
-    this.set('plans', [1, 2]);
+    this.set("plans", [1, 2]);
 
     assert.equal(
-      find("#subscribe-buttons .btn-discourse-subscriptions-subscribe").length,
+      find(".btn-discourse-subscriptions-subscribe").length,
       2,
       "The plan buttons are shown"
     );
@@ -34,3 +34,20 @@ componentTest("Discourse Subscriptions has content", {
     );
   }
 });
+
+componentTest("Discourse Subscriptions payment options plan is selected", {
+  template: `{{payment-options plans=plans selectPlan=selectPlan}}`,
+
+  beforeEach() {},
+
+  async test(assert) {
+    assert.expect(1);
+    this.set("plans", [1, 2]);
+
+    this.set("selectPlan", function(plan) {
+      assert.equal(plan, 1, "the plan is selected");
+    });
+
+    await click(".btn-discourse-subscriptions-subscribe:first-child");
+  }
+});