Add total sums of EUR/USD expenses

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);

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}}

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 {
         }
       }

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 });
+}

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);
+  });
 });

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');
+  });
+});