[Test]: mutating underlying complex objects should not be possible (#555

)

* [Test]: mutating underlying complex objects should not be possible

close #539

* Add form addresses test

ref #551

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

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"

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

tests/unit/changeset-test.js

@@ -119,6 +119,8 @@ module('Unit | Utility | changeset', function (hooks) {
     dummyChangeset.set('name', 'a');
 
     assert.deepEqual(get(dummyChangeset, 'change'), expectedResult, 'should return changes object');
+    assert.deepEqual(dummyChangeset.name, 'a', 'should return new value');
+    assert.deepEqual(dummyModel.name, undefined, 'should return original value');
   });
 
   test('#change supports `undefined`', async function (assert) {
@@ -137,10 +139,16 @@ module('Unit | Utility | changeset', function (hooks) {
   test('#change works with arrays', async function (assert) {
     let dummyChangeset = Changeset(dummyModel);
     const newArray = [...exampleArray, 'new'];
-    let expectedResult = { exampleArray: newArray };
+    let expectedResult = { exampleArray: newArray, name: 'a' };
+
+    dummyChangeset.set('name', 'a');
     dummyChangeset.set('exampleArray', newArray);
 
-    assert.deepEqual(get(dummyChangeset, 'change'), expectedResult, 'should return changes object');
+    assert.deepEqual(get(dummyChangeset, 'change'), expectedResult, 'should return new changes');
+    assert.deepEqual(dummyChangeset.exampleArray, expectedResult.exampleArray, 'should return changes object');
+    assert.deepEqual(dummyChangeset.name, 'a', 'should return new value');
+    assert.deepEqual(dummyModel.exampleArray, [], 'should keep original array');
+    assert.deepEqual(dummyModel.name, undefined, 'should keep original array');
   });
 
   /**
@@ -826,6 +834,25 @@ module('Unit | Utility | changeset', function (hooks) {
     assert.deepEqual(actual, expectedResult, 'removes nested changes');
   });
 
+  test('#set operating on complex properties should be functional', async function (assert) {
+    const model = {
+      id: 1,
+      label: 'Reason',
+      options: ['test1', 'test2', 'test3'],
+    };
+    let dummyChangeset = Changeset(model);
+
+    let options = dummyChangeset.options;
+    options = options.filter((o, i) => (i === options.indexOf('test2') ? false : true));
+    dummyChangeset.set('options', [...options]);
+
+    assert.deepEqual(model.options, ['test1', 'test2', 'test3'], 'should keep original');
+    let expectedChanges = [{ key: 'options', value: ['test1', 'test3'] }];
+    let changes = get(dummyChangeset, 'changes');
+    assert.deepEqual(changes, expectedChanges, 'should add change');
+    assert.deepEqual(dummyChangeset.options, expectedChanges[0].value, 'should have new values');
+  });
+
   test('it works with setProperties', async function (assert) {
     let dummyChangeset = Changeset(dummyModel);
     let expectedResult = [