DEV: Update components tests (#250)

test/javascripts/integration/components/payment-options-test.gjs

@@ -0,0 +1,53 @@
+import { tracked } from "@glimmer/tracking";
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import PaymentOptions from "discourse/plugins/discourse-subscriptions/discourse/components/payment-options";
+
+module("Subscriptions | payment-options", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("payment options have no plans", async function (assert) {
+    await render(<template><PaymentOptions @plans={{false}} /></template>);
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe")
+      .doesNotExist("The plan buttons are not shown");
+  });
+
+  test("payment options has content", async function (assert) {
+    const plans = [
+      {
+        currency: "aud",
+        recurring: { interval: "year" },
+        amountDollars: "44.99",
+      },
+      {
+        currency: "gdp",
+        recurring: { interval: "month" },
+        amountDollars: "9.99",
+      },
+    ];
+
+    class State {
+      @tracked selectedPlan;
+    }
+
+    const testState = new State();
+
+    await render(<template>
+      <PaymentOptions
+        @plans={{plans}}
+        @selectedPlan={{testState.selectedPlan}}
+      />
+    </template>);
+
+    assert.dom(".btn-discourse-subscriptions-subscribe").exists({ count: 2 });
+
+    assert.strictEqual(
+      this.selectedPlan,
+      undefined,
+      "No plans are selected by default"
+    );
+  });
+});

test/javascripts/integration/components/payment-plan-test.gjs

@@ -0,0 +1,57 @@
+import { tracked } from "@glimmer/tracking";
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import PaymentPlan from "discourse/plugins/discourse-subscriptions/discourse/components/payment-plan";
+
+module("Subscriptions | payment-plan", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("Payment plan subscription button rendered", async function (assert) {
+    const plan = {
+      type: "recurring",
+      currency: "aud",
+      recurring: { interval: "year" },
+      amountDollars: "44.99",
+    };
+    let selectedPlan;
+
+    await render(<template>
+      <PaymentPlan @plan={{plan}} @selectedPlan={{selectedPlan}} />
+    </template>);
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe")
+      .exists("The payment button is shown");
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe:first-child .interval")
+      .hasText("Yearly", "The plan interval is shown -- Yearly");
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe:first-child .amount")
+      .hasText("$44.99", "The plan amount and currency is shown");
+  });
+
+  test("Payment plan one-time-payment button rendered", async function (assert) {
+    const plan = {
+      type: "one_time",
+      currency: "USD",
+      amountDollars: "3.99",
+    };
+
+    class State {
+      @tracked selectedPlan;
+    }
+
+    const testState = new State();
+
+    await render(<template>
+      <PaymentPlan @plan={{plan}} @selectedPlan={{testState.selectedPlan}} />
+    </template>);
+
+    assert
+      .dom(".btn-discourse-subscriptions-subscribe:first-child .interval")
+      .hasText("One-Time Payment", "Shown as one time payment");
+  });
+});