feat(cfb-radio-input): add reset button

packages/form/addon/components/cf-field/input/radio.hbs

@@ -6,13 +6,12 @@
   >
     <input
       class="uk-radio uk-margin-small-right"
-      id={{option.slug}}
       type="radio"
       name={{@field.pk}}
       value={{option.slug}}
       checked={{eq option.slug @field.answer.value}}
       disabled={{or option.disabled @disabled}}
-      {{on "change" this.updatSelection}}
+      {{on "change" (fn @onSave option.slug)}}
     />
     {{#if (and option.disabled (not @disabled))}}
       <del
@@ -24,9 +23,9 @@
     {{/if}}
   </label>
 {{/each}}
-{{#if (and (eq @field.question.raw.isRequired "false") this.checkedValue)}}
+{{#if (and (eq @field.question.raw.isRequired "false") @field.answer.value)}}
   <br />
-  <a href="#" {{on "click" this.resetSelected}}>{{t
+  <a data-test-radio-reset href="#" {{on "click" (fn @onSave null)}}>{{t
       "caluma.form.power-select.reset"
     }}</a>
 

packages/form/package.json

@@ -35,6 +35,7 @@
     "ember-math-helpers": "^4.0.0",
     "ember-power-select": "^7.2.0",
     "ember-resources": "^6.4.2",
+    "ember-truth-helpers": "^4.0.3",
     "ember-uikit": "^9.0.0",
     "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",

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

@@ -86,32 +86,32 @@ module("Integration | Component | cf-field/input/radio", function (hooks) {
   });
 
   test("it triggers save on click", async function (assert) {
-    assert.expect(1);
-    this.set("field", {
-      question: {
-        raw: {
-          isRequired: "false",
-        },
-        __typename: "ChoiceQuestion",
-      },
-      answer: {
-        value: "",
-      },
-      options: [
-        {
-          slug: "option-1",
-          label: "Option 1",
-        },
-      ],
+    this.set("value", false);
+    this.set("raw", { isRequired: "false" });
+    this.set("onSave", (value) => {
+      this.set("value", value);
+      assert.step("save");
     });
-    this.set("save", (value) => assert.strictEqual(value, "option-1"));
 
-    await render(
-      hbs`<CfField::Input::Radio @onSave={{this.save}} @field={{this.field}} />`,
-    );
+    await render(hbs`<CfField::Input::Radio
+      @onSave={{this.onSave}}
+      @field={{hash
+        options=(array (hash slug="option-1" label="Option 1"))
+        answer=(hash value=this.value)
+        question=(hash __typename="ChoiceQuestion" slug="test" raw=this.raw)
+      }}
+    />`);
+
+    await click("label:nth-of-type(1) input");
+    await click("[data-test-radio-reset]");
+
+    assert.verifySteps(["save", "save"]);
 
+    this.set("raw", { isRequired: "true" });
     await click("label:nth-of-type(1) input");
-    assert.equal(true, true);
+
+    assert.verifySteps(["save"]);
+    assert.dom("[data-test-radio-reset]").isNotVisible();
   });
 
   test("it renders disabled options", async function (assert) {