Add tests

Author: simonihmig

packages/ember-bootstrap-constraint-validations/src/components/bs-form/element.js

@@ -1,31 +1,43 @@
 import BaseBsFormElement from 'ember-bootstrap/components/bs-form/element';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
 
 export default class BsFormElement extends BaseBsFormElement {
   '__ember-bootstrap_subclass' = true;
 
+  constructor() {
+    super(...arguments);
+
+    assert(
+      'showMultipleErrors is not supported for native constraint validations',
+      this.args.showMultipleErrors !== true
+    );
+  }
+
   get controlElement() {
     return document.getElementById(this.formElementId);
   }
 
   @tracked
-  errors = [];
+  _invalidateErrors = 0;
+
+  get errors() {
+    let { controlElement, _invalidateErrors } = this;
+    return controlElement?.validity.valid
+      ? []
+      : [controlElement.validationMessage];
+  }
 
   get hasValidator() {
     return true;
   }
 
   @action
   showValidationOnHandler(...args) {
-    this._updateErrors();
+    // native validation state doesn't integrate with Ember's autotracking, so we need to invalidate our `errors` getter explicitly when an
+    // event occurs that could change the validation state
+    this._invalidateErrors++;
     super.showValidationOnHandler(...args);
   }
-
-  _updateErrors() {
-    let { controlElement } = this;
-    this.errors = controlElement.validity.valid
-      ? []
-      : [controlElement.validationMessage];
-  }
 }

packages/test-app/app/templates/application.hbs

@@ -2,7 +2,7 @@
 
   <BsForm @model={{this.model}} @onSubmit={{this.submit}} @onInvalid={{this.invalid}} as |form|>
     <form.element @label="Name" @property="name" as |el|>
-      <el.control required/>
+      <el.control required minlength="3"/>
     </form.element>
     <form.element @controlType="email" @label="Email" @property="email" />
     <form.submitButton>Submit</form.submitButton>

packages/test-app/tests/integration/components/bs-form-test.js

@@ -0,0 +1,158 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { hbs } from 'ember-cli-htmlbars';
+import {
+  render,
+  triggerEvent,
+  click,
+  fillIn,
+  focus,
+  blur,
+  findAll,
+  pauseTest,
+} from '@ember/test-helpers';
+
+module('Integration | Component | bs-form', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('form is submitted if valid', async function (assert) {
+    assert.expect(2);
+
+    let model = {
+      name: '1234',
+    };
+
+    this.set('model', model);
+    this.submitAction = function () {
+      assert.step('submit action has been called.');
+    };
+    this.invalidAction = function () {
+      assert.ok(false, 'Invalid action must not been called.');
+    };
+
+    await render(hbs`
+      <BsForm @model={{this.model}} @onSubmit={{this.submitAction}} @onInvalid={{this.invalidAction}} as |form|>
+        <form.element @label="Name" @property="name" as |el|>
+          <el.control required/>
+        </form.element>
+      </BsForm>
+    `);
+
+    await triggerEvent('form', 'submit');
+    assert.verifySteps(['submit action has been called.']);
+  });
+
+  test('validation errors are shown on submit', async function (assert) {
+    assert.expect(3);
+
+    let model = {
+      name: '',
+    };
+
+    this.set('model', model);
+    this.submitAction = function () {
+      assert.ok(false, 'submit action must not been called.');
+    };
+    this.invalidAction = function () {
+      assert.step('Invalid action has been called.');
+    };
+
+    await render(hbs`
+      <BsForm @model={{this.model}} @onSubmit={{this.submitAction}} @onInvalid={{this.invalidAction}} as |form|>
+        <form.element @label="Name" @property="name" as |el|>
+          <el.control required/>
+        </form.element>
+      </BsForm>
+    `);
+
+    await triggerEvent('form', 'submit');
+    assert.dom('input').hasClass('is-invalid', 'input has error class');
+    assert.verifySteps(['Invalid action has been called.']);
+  });
+
+  test('validation errors are shown after blur', async function (assert) {
+    this.set('model', { name: '' });
+
+    await render(hbs`
+      <BsForm @model={{this.model}} as |form|>
+        <form.element @label="Name" @property="name" as |el|>
+          <el.control required/>
+        </form.element>
+      </BsForm>
+    `);
+    assert.dom('input').doesNotHaveClass('is-invalid');
+
+    await focus('input');
+    await blur('input');
+    assert.dom('input').hasClass('is-invalid');
+  });
+
+  test('validation success is shown after blur', async function (assert) {
+    this.set('model', { name: 'Clara' });
+
+    await render(hbs`
+      <BsForm @model={{this.model}} as |form|>
+        <form.element @label="Name" @property="name" as |el|>
+          <el.control required/>
+        </form.element>
+      </BsForm>
+    `);
+    assert.dom('input').doesNotHaveClass('is-valid');
+
+    await focus('input');
+    await blur('input');
+    assert.dom('input').hasClass('is-valid');
+  });
+
+  test('validation errors are shown after user input', async function (assert) {
+    this.set('model', { name: '' });
+
+    await render(hbs`
+      <BsForm @model={{this.model}} as |form|>
+        <form.element @label="Name" @property="name" as |el|>
+          <el.control required pattern="[a-z]+"/>
+        </form.element>
+      </BsForm>
+    `);
+    assert.dom('input').doesNotHaveClass('is-invalid');
+
+    await fillIn('input', 'R');
+    assert
+      .dom('input')
+      .doesNotHaveClass(
+        'is-invalid',
+        'validation is not shown while user is typing'
+      );
+
+    await blur('input');
+    assert
+      .dom('input')
+      .hasClass('is-invalid', 'validation error is shown after focus out');
+  });
+
+  test('validation success is shown after user input', async function (assert) {
+    this.set('model', { name: '' });
+
+    await render(hbs`
+      <BsForm @model={{this.model}} as |form|>
+        <form.element @label="Name" @property="name" as |el|>
+          <el.control required pattern="[a-z]+"/>
+        </form.element>
+      </BsForm>
+    `);
+    assert.dom('input').doesNotHaveClass('is-valid');
+
+    await fillIn('input', 'abc');
+    assert
+      .dom('input')
+      .doesNotHaveClass(
+        'is-valid',
+        'validation is not shown while user is typing'
+      );
+
+    await blur('input');
+    assert
+      .dom('input')
+      .hasClass('is-valid', 'validation error is shown after focus out');
+  });
+});