fix(form): trigger format validators on question validation

Author: anehx

packages/form/addon/components/document-validity.js

@@ -54,6 +54,10 @@ export default class DocumentValidity extends Component {
 
     for (const field of this.args.document.fields) {
       yield field.validate.linked().perform();
+
+      if (field.question.hasFormatValidators) {
+        yield field.save.linked().perform();
+      }
     }
 
     if (this.isValid) {

packages/form/addon/gql/fragments/field.graphql

@@ -15,12 +15,7 @@ fragment SimpleQuestion on Question {
     }
     placeholder
     formatValidators {
-      edges {
-        node {
-          slug
-          regex
-        }
-      }
+      totalCount
     }
     hintText
   }
@@ -33,12 +28,7 @@ fragment SimpleQuestion on Question {
     }
     placeholder
     formatValidators {
-      edges {
-        node {
-          slug
-          regex
-        }
-      }
+      totalCount
     }
     hintText
   }
@@ -50,6 +40,9 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on FloatQuestion {
@@ -61,6 +54,9 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on ChoiceQuestion {
@@ -79,6 +75,9 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on MultipleChoiceQuestion {
@@ -97,19 +96,31 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on DynamicChoiceQuestion {
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on DynamicMultipleChoiceQuestion {
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
       id
       value
     }
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on StaticQuestion {
@@ -120,6 +131,9 @@ fragment SimpleQuestion on Question {
     hintText
   }
   ... on FilesQuestion {
+    formatValidators {
+      totalCount
+    }
     hintText
   }
   ... on ActionButtonQuestion {

packages/form/addon/lib/question.js

@@ -192,4 +192,8 @@ export default class Question extends Base {
         ].includes(this.raw.__typename))
     );
   }
+
+  get hasFormatValidators() {
+    return (this.raw.formatValidators?.totalCount ?? 0) > 0;
+  }
 }

packages/form/package.json

@@ -67,6 +67,7 @@
     "ember-load-initializers": "3.0.1",
     "ember-qunit": "9.0.4",
     "ember-resolver": "13.1.1",
+    "ember-sinon-qunit": "7.5.0",
     "ember-source": "6.1.0",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "4.0.0",
@@ -75,6 +76,7 @@
     "qunit": "2.24.1",
     "qunit-dom": "3.5.0",
     "sass": "1.93.2",
+    "sinon": "21.0.0",
     "uikit": "3.23.13",
     "uuid": "13.0.0",
     "webpack": "5.101.3"

packages/form/tests/integration/components/cf-field/input/action-button-test.js

@@ -21,6 +21,8 @@ module(
       const validField = new (class {
         @tracked isValid = true;
 
+        question = { hasFormatValidators: false };
+
         @restartableTask
         *validate() {
           yield assert.step("validate");
@@ -35,7 +37,7 @@ module(
           return !this.isValid;
         }
 
-        question = { raw: { label: "foo" } };
+        question = { raw: { label: "foo" }, hasFormatValidators: false };
 
         @restartableTask
         validate() {

packages/form/tests/integration/components/document-validity-test.js

@@ -2,6 +2,7 @@ import { render, click, scrollTo, settled } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { setupMirage } from "ember-cli-mirage/test-support";
 import { module, test } from "qunit";
+import { stub } from "sinon";
 
 import { rawDocumentWithWorkItem } from "../../unit/lib/data";
 
@@ -100,4 +101,36 @@ module("Integration | Component | document-validity", function (hooks) {
     await click("button");
     await assert.verifySteps(["valid"]);
   });
+
+  test("it can be triggered manually", async function (assert) {
+    stub(this.field.question, "hasFormatValidators").get(() => true);
+    stub(this.field.save, "linked").returnsThis();
+    stub(this.field.save, "perform").callsFake(() => {
+      this.field._errors = [
+        {
+          type: "format",
+          context: { errorMsg: "Error!" },
+          value: "test",
+        },
+      ];
+
+      assert.step("save");
+    });
+
+    await render(hbs`<DocumentValidity @document={{this.document}} as |isValid validate|>
+  <p>
+    {{#if isValid}}
+      Valid
+    {{else}}
+      Invalid
+    {{/if}}
+  </p>
+  <button type="button" {{on "click" validate}}>Validate!</button>
+</DocumentValidity>`);
+
+    assert.dom("p").hasText("Valid");
+    await click("button");
+    assert.dom("p").hasText("Invalid");
+    assert.verifySteps(["save"]);
+  });
 });

packages/form/tests/test-helper.js

@@ -1,6 +1,7 @@
 import { setApplication } from "@ember/test-helpers";
 import { start, setupEmberOnerrorValidation } from "ember-qunit";
 import { loadTests } from "ember-qunit/test-loader";
+import setupSinon from "ember-sinon-qunit";
 import * as QUnit from "qunit";
 import { setup } from "qunit-dom";
 
@@ -13,4 +14,6 @@ setupEmberOnerrorValidation();
 loadTests();
 setup(QUnit.assert);
 
+setupSinon();
+
 start();