From 4abc1593cbd0ef11cd4c0eba69c434866db4c1dc Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Wed, 30 Sep 2020 16:04:53 +0200
Subject: [PATCH] Add total sums of EUR/USD expenses

---
 app/components/add-reimbursement/component.js | 20 +++++++++
 app/components/add-reimbursement/template.hbs | 42 ++++++++++++++-----
 app/styles/_forms.scss                        |  8 ++++
 tests/helpers/create-component.js             |  8 ++++
 .../add-reimbursement/component-test.js       | 10 ++---
 .../unit/components/add-reimbursement-test.js | 42 +++++++++++++++++++
 6 files changed, 113 insertions(+), 17 deletions(-)
 create mode 100644 tests/helpers/create-component.js
 create mode 100644 tests/unit/components/add-reimbursement-test.js

diff --git a/app/components/add-reimbursement/component.js b/app/components/add-reimbursement/component.js
index 78a6446..fdbf91a 100644
--- a/app/components/add-reimbursement/component.js
+++ b/app/components/add-reimbursement/component.js
@@ -33,6 +33,26 @@ export default class AddReimbursementComponent extends Component {
     return this.isValidTotal ? 'valid' : '';
   }
 
+  get totalEUR () {
+    const expenses = this.expenses.filterBy('currency', 'EUR');
+    if (expenses.length > 0) {
+      return expenses.mapBy('amount')
+                     .reduce((summation, current) => summation + current);
+    } else {
+      return 0;
+    }
+  }
+
+  get totalUSD () {
+    const expenses = this.expenses.filterBy('currency', 'USD');
+    if (expenses.length > 0) {
+      return expenses.mapBy('amount')
+                     .reduce((summation, current) => summation + current);
+    } else {
+      return 0;
+    }
+  }
+
   get submitButtonEnabled () {
     return this.isValidTotal &&
            (this.expenses.length > 0);
diff --git a/app/components/add-reimbursement/template.hbs b/app/components/add-reimbursement/template.hbs
index 4964fc3..e6270fc 100644
--- a/app/components/add-reimbursement/template.hbs
+++ b/app/components/add-reimbursement/template.hbs
@@ -13,17 +13,37 @@
       </select>
     </p>
   </label>
-  <label>
-    <p class="label">Total amount (WBTC):</p>
-    <p>
-      {{input type="text"
-              placeholder="500"
-              value=this.total
-              required=true
-              pattern="([0-9]*[.])?[0-9]+"
-              class=this.totalInputClass}}
-    </p>
-  </label>
+  <fieldset class="horizontal thirds total-amounts">
+    <label>
+      <p class="label">Total amount (WBTC):</p>
+      <p>
+        {{input type="text"
+                placeholder="0.0015"
+                value=this.total
+                required=true
+                pattern="([0-9]*[.])?[0-9]+"
+                class=this.totalInputClass}}
+      </p>
+    </label>
+    <label>
+      <p class="label">EUR total</p>
+      <p>
+        {{input type="text"
+                name="total-eur"
+                value=this.totalEUR
+                disabled=true}}
+      </p>
+    </label>
+    <label>
+      <p class="label">USD total</p>
+      <p>
+        {{input type="text"
+                name="total-usd"
+                value=this.totalUSD
+                disabled=true}}
+      </p>
+    </label>
+  </fieldset>
 
   <h3>Expense items</h3>
   {{#if this.expenses}}
diff --git a/app/styles/_forms.scss b/app/styles/_forms.scss
index 696c530..35cfc90 100644
--- a/app/styles/_forms.scss
+++ b/app/styles/_forms.scss
@@ -53,6 +53,14 @@ section#signup {
         grid-template-columns: 1fr 1fr;
         grid-gap: 2rem;
 
+        &.thirds {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        &.total-amounts {
+          grid-template-columns: 2fr 1fr 1fr;
+        }
+
         label {
         }
       }
diff --git a/tests/helpers/create-component.js b/tests/helpers/create-component.js
new file mode 100644
index 0000000..8f16dad
--- /dev/null
+++ b/tests/helpers/create-component.js
@@ -0,0 +1,8 @@
+import { getContext } from '@ember/test-helpers';
+
+export default function createComponent(lookupPath, named = {}) {
+  let { owner } = getContext();
+  let componentManager = owner.lookup('component-manager:glimmer');
+  let { class: componentClass } = owner.factoryFor(lookupPath);
+  return componentManager.createComponent(componentClass, { named });
+}
diff --git a/tests/integration/components/add-reimbursement/component-test.js b/tests/integration/components/add-reimbursement/component-test.js
index 082af77..a35da24 100644
--- a/tests/integration/components/add-reimbursement/component-test.js
+++ b/tests/integration/components/add-reimbursement/component-test.js
@@ -6,10 +6,8 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | add-reimbursement', function(hooks) {
   setupRenderingTest(hooks);
 
-  // test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-    // await render(hbs`<AddReimbursement />`);
-  //   assert.equal(this.element.textContent.trim(), '');
-  // });
+  test('it works', async function(assert) {
+    await render(hbs`<AddReimbursement />`);
+    assert.ok(true);
+  });
 });
diff --git a/tests/unit/components/add-reimbursement-test.js b/tests/unit/components/add-reimbursement-test.js
new file mode 100644
index 0000000..dad0289
--- /dev/null
+++ b/tests/unit/components/add-reimbursement-test.js
@@ -0,0 +1,42 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import createComponent from 'kredits-web/tests/helpers/create-component';
+
+const expenses = [
+  {
+    title: "Server rent",
+    description: "Dedicated server: andromeda.kosmos.org, April 2020",
+    currency: "EUR",
+    amount: 39.00,
+    date: "2020-05-06",
+    url: "https://wiki.kosmos.org/Infrastructure#Hetzner",
+    tags: ["infrastructure", "server", "hetzner"]
+  },
+  {
+    title: "Server rent",
+    description: "Dedicated server: centaurus.kosmos.org, April 2020",
+    currency: "EUR",
+    amount: 32.00,
+    date: "2020-05-06",
+    url: "https://wiki.kosmos.org/Infrastructure#Hetzner",
+    tags: ["infrastructure", "server", "hetzner"]
+  },
+  {
+    title: "Domain name kosmos.org",
+    currency: "USD",
+    amount: 59.00,
+    date: "2020-05-07",
+    tags: ["domain"]
+  }
+];
+
+module('Unit | Component | add-reimbursement', function(hooks) {
+  setupTest(hooks);
+
+  test('total sums of expenses in EUR and USD', function(assert) {
+    let component = createComponent('component:add-reimbursement');
+    component.expenses = expenses;
+    assert.equal(component.totalEUR, '71');
+    assert.equal(component.totalUSD, '59');
+  });
+});