diff --git a/tests/dummy/app/components/validated-form.js b/tests/dummy/app/components/validated-form.js index 5b5f783b..3c67f577 100644 --- a/tests/dummy/app/components/validated-form.js +++ b/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(); } } diff --git a/tests/dummy/app/templates/components/validated-form.hbs b/tests/dummy/app/templates/components/validated-form.hbs index d866e8cc..74950d7a 100644 --- a/tests/dummy/app/templates/components/validated-form.hbs +++ b/tests/dummy/app/templates/components/validated-form.hbs @@ -4,15 +4,10 @@

Validated Changeset cid: {{this.changeset.cid}}

Validated Changeset Email: {{changeset-get this.changeset "user.email"}}

Validated Changeset Name: {{changeset-get this.changeset "user.name"}}

-

Validated Changeset notifications email: {{changeset-get this.changeset "notifications.email"}}

-

Validated Changeset notifications sms: {{changeset-get this.changeset "notifications.sms"}}


Model Name: {{this.model.user.name}}

Model Email: {{this.model.user.email}}

Model cid: {{this.model.cid}}

-

Model notifications email: {{this.model.notifications.email}}

-

Model notifications sms: {{this.model.notifications.sms}}

-

Doubled: {{this.model.doubleGrowth}}

{{#each this.model.addresses as |address idx|}}

{{address.street}} {{address.city}}

@@ -34,7 +29,7 @@ @@ -60,11 +55,11 @@
- + diff --git a/tests/integration/components/validated-form-test.js b/tests/integration/components/validated-form-test.js new file mode 100644 index 00000000..a3cab353 --- /dev/null +++ b/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``); + + // 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('something@gmail.com', 'has old email still b/c input not valid'); + + await fillIn('[data-test-user-email]', 'foo@gmail.com'); + + 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]', 'foo@gmail.com'); + + 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('foo@gmail.com', 'has email after submit'); + assert.dom('[data-test-changeset-user-email]').hasText('foo@gmail.com', 'changeset has email after submit'); + assert.dom('[data-test-cid]').hasValue('2', 'still has cid input value'); + assert.dom('[data-test-user-email]').hasValue('foo@gmail.com', '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('foo@gmail.com', 'has correct email even when changing related properties'); + assert + .dom('[data-test-model-user-email]') + .hasText('foo@gmail.com', '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('foo@gmail.com', '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``); + + 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``); + + 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'); + }); +});