Add form addresses test

ref #551
adopted-ember-addons · Oct 10, 2020 · 5222f03 · 5222f03
1 parent 97696b0
commit 5222f03
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/tests/dummy/app/components/changeset-form.js b/tests/dummy/app/components/changeset-form.js
@@ -22,14 +22,22 @@ function dummyValidator({ key, newValue, oldValue, changes, content }) {
   }
 }
 
+class Address {
+  constructor(args) {
+    Object.assign(this, args);
+  }
+  street = '123';
+  city = 'Yurtville';
+}
+
 class Foo {
   user = {
     aliases: ['someone'],
     name: 'someone',
     email: 'something',
   };
 
-  address = null;
+  addresses = [new Address(), new Address({ city: 'Woods' })];
 
   cid = '1';
 

diff --git a/tests/dummy/app/templates/components/changeset-form.hbs b/tests/dummy/app/templates/components/changeset-form.hbs
@@ -11,9 +11,11 @@
 <h2>Model notifications sms: <span data-test-model-notifications-sms>{{this.model.notifications.sms}}</span></h2>
 <h2>Doubled: {{this.model.doubleGrowth}}</h2>
 
-<form
-  {{on "submit" (fn this.submitForm this.changeset)}}
->
+{{#each this.model.addresses as |address idx|}}
+  <h2 data-test-address={{idx}}>{{address.street}} {{address.city}}</h2>
+{{/each}}
+
+<form {{on "submit" (fn this.submitForm this.changeset)}}>
   <div>
     <label>cid</label>
     <input
@@ -61,6 +63,14 @@
     >
   </div>
 
+  <div>
+    <h3>Addresses</h3>
+    {{#each this.changeset.addresses as |address index|}}
+      <input type="text" value={{address.street}} data-test-address-street={{index}}>
+      <input type="text" value={{address.city}} data-test-address-city={{index}}>
+    {{/each}}
+  </div>
+
   <div>
     <input
       type="number"

diff --git a/tests/integration/components/changeset-form-test.js b/tests/integration/components/changeset-form-test.js
@@ -112,4 +112,26 @@ module('Integration | Component | changeset-form', function (hooks) {
       'has original value again'
     );
   });
+
+  test('it handles array of addresses', async function (assert) {
+    await render(hbs`<ChangesetForm />`);
+
+    assert.equal(find('[data-test-address="0"]').textContent.trim(), '123 Yurtville', 'address 1 model value');
+    assert.equal(find('[data-test-address="1"]').textContent.trim(), '123 Woods', 'address 2 model value');
+
+    assert.equal(find('[data-test-address-street="0"]').value, '123', 'street 1 initial value');
+    assert.equal(find('[data-test-address-city="0"]').value, 'Yurtville', 'city 1 initial value');
+    assert.equal(find('[data-test-address-street="1"]').value, '123', 'street 2 initial value');
+    assert.equal(find('[data-test-address-city="1"]').value, 'Woods', 'city 2 initial value');
+
+    await fillIn('[data-test-address-street="0"]', '456');
+
+    assert.equal(find('[data-test-address="0"]').textContent.trim(), '123 Yurtville', 'address 1 model keeps value');
+    assert.equal(find('[data-test-address="1"]').textContent.trim(), '123 Woods', 'address 2 model keeps value');
+
+    assert.equal(find('[data-test-address-street="0"]').value, '456', 'street 1 new value');
+    assert.equal(find('[data-test-address-city="0"]').value, 'Yurtville', 'city 1 initial value');
+    assert.equal(find('[data-test-address-street="1"]').value, '123', 'street 2 initial value');
+    assert.equal(find('[data-test-address-city="1"]').value, 'Woods', 'city 2 initial value');
+  });
 });