Merge pull request #8552 from jrjohnson/i6159-validation-state

Validate Before Displaying Errors

Author: dartajax

packages/frontend/tests/integration/components/curriculum-inventory/report-header-test.gjs

@@ -107,4 +107,26 @@ module('Integration | Component | curriculum-inventory/report-header', function
     );
     await component.finalize();
   });
+
+  test('#i6159 validation status', async function (assert) {
+    this.set('report', this.report);
+    await render(
+      <template>
+        <ReportHeader @report={{this.report}} @canUpdate={{true}} @finalize={{(noop)}} />
+      </template>,
+    );
+    assert.ok(component.name.isVisible);
+    assert.strictEqual(component.name.value, 'Report name');
+    await component.name.edit();
+    await component.name.set('');
+    await component.name.save();
+    assert.ok(component.name.hasError);
+    await component.name.cancel();
+    assert.strictEqual(component.name.value, 'Report name');
+    await component.name.edit();
+    assert.notOk(component.name.hasError);
+    assert.strictEqual(component.name.inputValue, 'Report name');
+    await component.name.blur();
+    assert.notOk(component.name.hasError);
+  });
 });

packages/frontend/tests/pages/components/curriculum-inventory/report-header.js

@@ -1,12 +1,14 @@
 import {
   attribute,
+  blurrable,
   clickable,
   create,
   fillable,
   isPresent,
   isVisible,
   property,
   text,
+  value,
 } from 'ember-cli-page-object';
 
 const definition = {
@@ -22,6 +24,8 @@ const definition = {
     save: clickable('.done'),
     cancel: clickable('.cancel'),
     hasError: isPresent('[data-test-name-validation-error-message]'),
+    inputValue: value('input'),
+    blur: blurrable('input'),
   },
   downloadLink: {
     scope: '[data-test-download]',

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/header.js

@@ -1,4 +1,12 @@
-import { create, clickable, fillable, text, isVisible } from 'ember-cli-page-object';
+import {
+  blurrable,
+  create,
+  clickable,
+  fillable,
+  text,
+  isVisible,
+  value,
+} from 'ember-cli-page-object';
 import publicationMenu from './publication-menu';
 import publicationStatus from '../publication-status';
 const definition = {
@@ -10,6 +18,8 @@ const definition = {
     set: fillable('input'),
     save: clickable('.done'),
     cancel: clickable('.cancel'),
+    inputValue: value('input'),
+    blur: blurrable('input'),
     hasError: isVisible('.validation-error-message'),
   },
   academicYear: text('[data-test-academic-year]'),

packages/ilios-common/addon/classes/yup-validations.js

@@ -128,9 +128,10 @@ export default class YupValidations {
     element.addEventListener(
       'focusout',
       () => {
+        this.#validate();
         this.makeErrorsVisibleFor.perform([field]);
       },
-      { passive: true },
+      { passive: true, once: true },
     );
     element.addEventListener(
       'input',

packages/test-app/tests/integration/components/course/header-test.gjs

@@ -147,4 +147,25 @@ module('Integration | Component | course/header', function (hooks) {
     await render(<template><Header @course={{this.course}} @editable={{true}} /></template>);
     assert.strictEqual(component.academicYear, '2021 - 2022');
   });
+
+  test('#i6159 validation status', async function (assert) {
+    const course = this.server.create('course');
+    const courseModel = await this.store.findRecord('course', course.id);
+    this.set('course', courseModel);
+    await render(<template><Header @course={{this.course}} @editable={{true}} /></template>);
+
+    assert.ok(component.title.isVisible);
+    assert.strictEqual(component.title.value, 'course 0');
+    await component.title.edit();
+    await component.title.set('');
+    await component.title.save();
+    assert.ok(component.title.hasError);
+    await component.title.cancel();
+    assert.strictEqual(component.title.value, 'course 0');
+    await component.title.edit();
+    assert.notOk(component.title.hasError);
+    assert.strictEqual(component.title.inputValue, 'course 0');
+    await component.title.blur();
+    assert.notOk(component.title.hasError);
+  });
 });