add validated form test

tests/dummy/app/components/validated-form.js

@@ -6,8 +6,11 @@ import { ValidatedChangeset } from 'ember-changeset';
 import { object, string } from 'yup';
 
 const FormSchema = object({
-  name: string().required(),
-  email: string().email(),
+  cid: string().required(),
+  user: object({
+    name: string().required(),
+    email: string().email(),
+  })
 });
 
 class Address {
@@ -20,9 +23,8 @@ class Address {
 
 class Foo {
   user = {
-    aliases: ['someone'],
     name: 'someone',
-    email: 'something',
+    email: 'something@gmail.com',
   };
 
   addresses = [new Address(), new Address({ city: 'Woods' })];
@@ -32,14 +34,14 @@ class Foo {
   @tracked
   growth = 0;
 
-  notifications = {
-    email: false,
-    sms: true,
-  };
+  // notifications = {
+  //   email: false,
+  //   sms: true,
+  // };
 
-  get doubleGrowth() {
-    return this.growth * 2;
-  }
+  // get doubleGrowth() {
+  //   return this.growth * 2;
+  // }
 }
 
 export default class ValidatedForm extends Component {
@@ -51,20 +53,22 @@ export default class ValidatedForm extends Component {
   }
 
   @action
-  setChangesetProperty(path, evt) {
+  async setChangesetProperty(path, evt) {
     this.changeset.set(path, evt.target.value);
+    try {
+      await this.changeset.validate((changes) => {
+        return FormSchema.validate(changes);
+      });
+      this.changeset.removeError(path);
+    } catch (e) {
+      this.changeset.addError(e.path, { value: this.changeset.get(e.path), validation: e.message });
+    }
   }
 
   @action
   async submitForm(changeset, event) {
     event.preventDefault();
 
-    try {
-      await changeset.validate((changes) => {
-        FormSchema.validate(changes)
-      });
-    } catch (e) {
-      changeset.addError(e.path, { value: e.value.age, validation: e.message });
-    }
+    changeset.execute();
   }
 }

tests/dummy/app/templates/components/validated-form.hbs

@@ -4,15 +4,10 @@
 <h2>Validated Changeset cid: <span data-test-changeset-cid>{{this.changeset.cid}}</span></h2>
 <h2>Validated Changeset Email: <span data-test-changeset-user-email>{{changeset-get this.changeset "user.email"}}</span></h2>
 <h2>Validated Changeset Name: <span data-test-changeset-user-name>{{changeset-get this.changeset "user.name"}}</span></h2>
-<h2>Validated Changeset notifications email: <span data-test-changeset-notifications-email>{{changeset-get this.changeset "notifications.email"}}</span></h2>
-<h2>Validated Changeset notifications sms: <span data-test-changeset-notifications-sms>{{changeset-get this.changeset "notifications.sms"}}</span></h2>
 <br />
 <h2>Model Name: <span data-test-model-user-name>{{this.model.user.name}}</span></h2>
 <h2>Model Email: <span data-test-model-user-email>{{this.model.user.email}}</span></h2>
 <h2>Model cid: <span data-test-model-cid>{{this.model.cid}}</span></h2>
-<h2>Model notifications email: <span data-test-model-notifications-email>{{this.model.notifications.email}}</span></h2>
-<h2>Model notifications sms: <span data-test-model-notifications-sms>{{this.model.notifications.sms}}</span></h2>
-<h2>Doubled: {{this.model.doubleGrowth}}</h2>
 
 {{#each this.model.addresses as |address idx|}}
   <h2 data-test-address={{idx}}>{{address.street}} {{address.city}}</h2>
@@ -34,7 +29,7 @@
     <input
       data-test-user-name
       type="text"
-      value={{get this.changeset "user.name"}}
+      value={{this.changeset.user.name}}
       {{on "input" (fn this.setChangesetProperty "user.name")}}
     >
   </div>
@@ -60,11 +55,11 @@
   <div>
     <input
       type="number"
-      value={{changeset-get this.changeset "growth"}}
-      {{on "input" (action (changeset-set this.changeset "growth") value="target.value")}}
+      value={{this.changeset.growth}}
+      {{on "input" (fn this.setChangesetProperty "growth")}}
     />
   </div>
 
-  <button data-test-submit type="submit" disabled={{this.changeset.isInvalid}}>Submit form 1</button>
+  <button data-test-submit type="submit" disabled={{this.changeset.isInvalid}}>Submit</button>
 
 </form>

tests/integration/components/validated-form-test.js

@@ -0,0 +1,105 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { click, find, fillIn, render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | validated-form', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders form', async function (assert) {
+    await render(hbs`<ValidatedForm />`);
+
+    // start filling in some data to test states of form
+    await fillIn('[data-test-user-email]', 'foo');
+    await fillIn('[data-test-cid]', 2);
+
+    assert.dom('[data-test-cid]').hasValue('2', 'has cid input value');
+    assert.dom('[data-test-user-email]').hasValue('foo', 'has email input value');
+    assert.dom('[data-test-user-name]').hasValue('someone', 'has name input value');
+
+    assert.true(find('[data-test-submit]').disabled, 'button disabled due to invalid email');
+
+    assert.dom('[data-test-model-user-email]').hasText('[email protected]', 'has old email still b/c input not valid');
+
+    await fillIn('[data-test-user-email]', '[email protected]');
+
+    assert.false(find('[data-test-submit]').disabled, 'button not disabled after valid email');
+
+    // submit - now enabled with valid email
+    await click('[data-test-submit]');
+
+    // toggle submit valid state
+    await fillIn('[data-test-user-email]', 'bar ');
+
+    assert.true(find('[data-test-submit]').disabled, 'button disabled due to new invalid email');
+
+    await fillIn('[data-test-user-email]', '[email protected]');
+
+    assert.false(find('[data-test-submit]').disabled, 'button not disabled b/c valid email was input-ed');
+
+    await fillIn('[data-test-user-name]', 'makers');
+
+    // submit - still enabled
+    assert.false(find('[data-test-submit]').disabled, 'button not disabled');
+
+    assert.dom('[data-test-model-cid]').hasText('2', 'has cid after submit');
+    assert.dom('[data-test-model-user-email]').hasText('[email protected]', 'has email after submit');
+    assert.dom('[data-test-changeset-user-email]').hasText('[email protected]', 'changeset has email after submit');
+    assert.dom('[data-test-cid]').hasValue('2', 'still has cid input value');
+    assert.dom('[data-test-user-email]').hasValue('[email protected]', 'still has email input value');
+    assert.dom('[data-test-user-name]').hasValue('makers', 'still has name input value');
+
+    await fillIn('[data-test-user-name]', 'bar');
+
+    assert.dom('[data-test-changeset-user-name]').hasText('bar', 'has user name after fill in');
+    assert
+      .dom('[data-test-changeset-user-email]')
+      .hasText('[email protected]', 'has correct email even when changing related properties');
+    assert
+      .dom('[data-test-model-user-email]')
+      .hasText('[email protected]', 'has correct email even when changing related properties');
+    assert.dom('[data-test-changeset-cid]').hasText('2', 'has correct cid even when changing related properties');
+    assert.dom('[data-test-model-cid]').hasText('2', 'has correct cid even when changing related properties');
+    assert.dom('[data-test-cid]').hasValue('2', 'has cid input value');
+    assert.dom('[data-test-user-email]').hasValue('[email protected]', 'has email input value in final state');
+    assert.dom('[data-test-user-name]').hasValue('bar', 'has name input value in final state');
+  });
+
+  test('it correctly toggle boolean values', async function (assert) {
+    await render(hbs`<ChangesetForm />`);
+
+    assert.dom('[data-test-changeset-notifications-email]').hasText('false', 'has initial value');
+    await click('[data-test-notifications-email]');
+    assert.dom('[data-test-changeset-notifications-email]').hasText('true', 'has updated value');
+    await click('[data-test-notifications-email]');
+    assert.dom('[data-test-changeset-notifications-email]').hasText('false', 'has original value again');
+
+    assert.dom('[data-test-changeset-notifications-sms]').hasText('true', 'has initial value');
+    await click('[data-test-notifications-sms]');
+    assert.dom('[data-test-changeset-notifications-sms]').hasText('false', 'has updated value');
+    await click('[data-test-notifications-sms]');
+    assert.dom('[data-test-changeset-notifications-sms]').hasText('true', 'has original value again');
+  });
+
+  test('it handles array of addresses', async function (assert) {
+    await render(hbs`<ChangesetForm />`);
+
+    assert.dom('[data-test-address="0"]').hasText('123 Yurtville', 'address 1 model value');
+    assert.dom('[data-test-address="1"]').hasText('123 Woods', 'address 2 model value');
+
+    assert.dom('[data-test-address-street="0"]').hasValue('123', 'street 1 initial value');
+    assert.dom('[data-test-address-city="0"]').hasValue('Yurtville', 'city 1 initial value');
+    assert.dom('[data-test-address-street="1"]').hasValue('123', 'street 2 initial value');
+    assert.dom('[data-test-address-city="1"]').hasValue('Woods', 'city 2 initial value');
+
+    await fillIn('[data-test-address-street="0"]', '456');
+
+    assert.dom('[data-test-address="0"]').hasText('123 Yurtville', 'address 1 model keeps value');
+    assert.dom('[data-test-address="1"]').hasText('123 Woods', 'address 2 model keeps value');
+
+    assert.dom('[data-test-address-street="0"]').hasValue('456', 'street 1 new value');
+    assert.dom('[data-test-address-city="0"]').hasValue('Yurtville', 'city 1 initial value');
+    assert.dom('[data-test-address-street="1"]').hasValue('123', 'street 2 initial value');
+    assert.dom('[data-test-address-city="1"]').hasValue('Woods', 'city 2 initial value');
+  });
+});