revise donation-container test to handle its own state

Author: Scott Batson

app/components/donation/donation-container.js

@@ -9,10 +9,10 @@ const {
 } = Ember;
 
 export default Component.extend({
-  // canAddCard: true,
   classNames: ['donation-container'],
   donationAmount: 0,
   projectTitle: null,
+  isAddingCard: null,
 
   canAddCard: computed('hasCards', 'isAddingCard', function() {
     let { hasCards, isAddingCard } = this.getProperties('hasCards', 'isAddingCard');

tests/integration/components/donation/donation-container-test.js

@@ -35,39 +35,31 @@ test('it renders correctly', function(assert) {
   assert.ok(page.creditCardIsRendered, 'Credit card component is rendered.');
 });
 
-test('it handles clicking card submit button correctly', function(assert) {
-  assert.expect(1);
-
-  this.set('amount', 100);
-  this.set('projectTitle', 'CodeCorps');
+test('properly renders card list and donation button', function(assert) {
+  assert.expect(2);
 
-  let expectedProps = {
-    cardNumber: '1234-5678-9012-3456',
-    cvc: '123',
-    month: '12',
-    year: '2020'
-  };
+  let cards = [ { foo: 'bar '}, { foo: 'baz' } ];
 
-  function donateHandler(actualProps) {
-    assert.deepEqual(actualProps, expectedProps, 'Card parameters were passed correctly.');
-  }
+  this.set('cards', cards);
+  page.render(hbs`{{donation/donation-container donate=(action donateHandler) cards=cards}}`);
+  assert.ok(page.cardListIsRendered, 'credit card list is rendered');
+  assert.ok(page.donateButtonRendered, 'donation button is rendered');
+});
 
-  stubService(this, 'stripe', {
-    card: {
-      validateCardNumber: () => true,
-      validateCVC: () => true,
-      validateExpiry: () => true
-    }
-  });
+test('properly hides card list and donation button', function(assert) {
+  assert.expect(3);
 
-  setHandler(this, 'donate', donateHandler);
+  this.set('cards', []);
+  page.render(hbs`{{donation/donation-container donate=(action donateHandler) cards=cards}}`);
+  assert.notOk(page.cardListIsRendered, 'credit card list is rendered');
+  assert.ok(page.creditCardIsRendered, 'Credit card component is rendered.');
+  assert.notOk(page.donateButtonRendered, 'donation button is hidden');
+});
 
-  page.render(hbs`{{donation/donation-container donate=(action donateHandler) donationAmount=amount projectTitle=projectTitle}}`);
+test('properly hides card list', function(assert) {
+  assert.expect(1);
 
-  page.creditCard
-      .cardNumber(expectedProps.cardNumber)
-      .cardMonth(expectedProps.month)
-      .cardYear(expectedProps.year)
-      .cardCVC(expectedProps.cvc)
-      .clickSubmit();
+  this.set('responseError', { message: 'foo' });
+  page.render(hbs`{{donation/donation-container donate=(action donateHandler) responseError=responseError}}`);
+  assert.ok(page.errorsRendered, 'response error is properly shown');
 });

tests/pages/components/donation/donation-container.js

@@ -7,7 +7,10 @@ export default {
   creditCard,
 
   creditCardIsRendered: isVisible('.credit-card-form'),
+  cardListIsRendered: isVisible('.card-list'),
 
   donationAmountText: text('.donation-amount'),
+  donateButtonRendered: isVisible('button.donate'),
+  errorsRendered: isVisible('.error-formatter'),
   paymentInformationText: text('.payment-information')
 };