From d3eed3546d037e2004c4d5d7bb08d0dcf2dea91e Mon Sep 17 00:00:00 2001
From: Rimian Perkins <hello@rimian.com.au>
Date: Fri, 6 Dec 2019 14:33:38 +1100
Subject: [PATCH] test button click

---
 .../components/payment-options.js.es6         |  7 +++++
 .../controllers/s-subscribe-show.js.es6       |  5 +++-
 .../templates/components/payment-options.hbs  | 14 +++++----
 assets/stylesheets/common/subscribe.scss      |  1 -
 .../components/payment-options-test.js.es6    | 29 +++++++++++++++----
 5 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/assets/javascripts/discourse/components/payment-options.js.es6 b/assets/javascripts/discourse/components/payment-options.js.es6
index e69de29..c312853 100644
--- a/assets/javascripts/discourse/components/payment-options.js.es6
+++ b/assets/javascripts/discourse/components/payment-options.js.es6
@@ -0,0 +1,7 @@
+export default Ember.Component.extend({
+  actions: {
+    clickPlan(plan) {
+      this.selectPlan(plan);
+    }
+  }
+});
diff --git a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6 b/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
index 5d03e60..e90b52e 100644
--- a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
+++ b/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: {
diff --git a/assets/javascripts/discourse/templates/components/payment-options.hbs b/assets/javascripts/discourse/templates/components/payment-options.hbs
index a66f111..46ff10b 100644
--- a/assets/javascripts/discourse/templates/components/payment-options.hbs
+++ b/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>
diff --git a/assets/stylesheets/common/subscribe.scss b/assets/stylesheets/common/subscribe.scss
index 00cc06b..acc9540 100644
--- a/assets/stylesheets/common/subscribe.scss
+++ b/assets/stylesheets/common/subscribe.scss
@@ -1,4 +1,3 @@
-
 #subscribe-buttons {
   display: flex;
   justify-content: space-around;
diff --git a/test/javascripts/components/payment-options-test.js.es6 b/test/javascripts/components/payment-options-test.js.es6
index 5783f08..b8c79f8 100644
--- a/test/javascripts/components/payment-options-test.js.es6
+++ b/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");
+  }
+});