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