added country dropdown

app/components/payments/funds-recipient.js

@@ -13,6 +13,7 @@ export default Component.extend({
     set(this, 'dobDay', 1);
     set(this, 'dobMonth', 1);
     set(this, 'dobYear', 2016);
+    set(this, 'country', 'US');
     this._super(...arguments);
   },
 
@@ -33,7 +34,6 @@ export default Component.extend({
         'dobDay', 'dobMonth', 'dobYear',
         'address1', 'address2', 'city', 'state', 'country', 'zip'
       );
-
       this.sendAction('recipientInformationSubmitted', fundsRecipient);
     }
   }

app/components/select/country-select.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+const {
+  Component
+} = Ember;
+
+export default Component.extend({
+  classNames: ['select-country'],
+  countryOptions: [
+    { name: 'United States', id: 'US' }
+  ]
+});

app/templates/components/payments/funds-recipient.hbs

@@ -56,9 +56,7 @@
   </div>
   <div class="input-group">
     <label for="country">Country</label>
-    <select value=country name="country">
-      <option value="US">United States</option>
-    </select>
+    {{select/country-select country=country}}
   </div>
 </div>
 <div class="input-group">

app/templates/components/select/country-select.hbs

@@ -0,0 +1,5 @@
+{{#x-select value=country as |xs| }}
+  {{#each countryOptions as |countryOption|}}
+    {{#xs.option value=countryOption.id}}{{countryOption.name}}{{/xs.option}}
+  {{/each}}
+{{/x-select}}

tests/integration/components/select/country-select-test.js

@@ -0,0 +1,31 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import Ember from 'ember';
+import hbs from 'htmlbars-inline-precompile';
+import selectCountry from '../../../pages/components/select/country-select';
+import PageObject from 'ember-cli-page-object';
+
+const {
+  get,
+  set
+} = Ember;
+
+let page = PageObject.create(selectCountry);
+
+moduleForComponent('select/country-select', 'Integration | Component | select/country select', {
+  integration: true,
+  beforeEach() {
+    page.setContext(this);
+  },
+  afterEach() {
+    page.setContext(this);
+  }
+});
+
+test('it sets the correct country', function(assert) {
+  assert.expect(1);
+  set(this, 'country', 'US');
+  page.render(hbs`{{select/country-select country=country}}`);
+  page.country.fillIn('US');
+  let country = get(this, 'country');
+  assert.equal(country, 'US');
+});

tests/pages/components/select/country-select.js

@@ -0,0 +1,12 @@
+import {
+  selectable
+} from 'ember-cli-page-object';
+
+export default {
+  scope: '.select-country',
+
+  country: {
+    scope: 'select:eq(0)',
+    fillIn: selectable()
+  }
+};