test: 💍 Add click tests for radiofield group

Add tests for changes to radiofield group attribute: selectedValue

addons/rose/addon/components/rose/form/radio/group.js

@@ -5,7 +5,7 @@ import layout from '../../../../templates/components/rose/form/radio/group';
  * A `<input type="radio" name="radio-group">` element.
  *
  * @example
- * <Rose::Form::Radio::Group @name="color" @variable="green" as |radioGroup|>
+ * <Rose::Form::Radio::Group @name="color" @selectedValue="green" as |radioGroup|>
  *   <radioGroup.radio
  *     @id="red-radio"
  *     @label="Red"

addons/rose/addon/components/rose/form/radio/radio.js

@@ -3,7 +3,7 @@ import layout from '../../../../templates/components/rose/form/radio/radio';
 
 /**
  * A `<input type="radio">` element.
- * `value` and `variable` must be equal to select
+ * `value` and `selectedValue` must be equal to select
  *  radiofield.
  *
  * @example
@@ -12,7 +12,7 @@ import layout from '../../../../templates/components/rose/form/radio/radio';
  *   @label="label"
  *   @error={{true}}
  *   @value="fieldValue"
- *   @variable="fieldValue"
+ *   @selectedValue="fieldValue"
  *   @disabled={{true}}
  *   />
  */

addons/rose/addon/templates/components/rose/form/radio/group.hbs

@@ -1,3 +1,3 @@
 {{yield (hash
-  radio=(component 'rose/form/radio/radio' name=@name variable=@variable)
+  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue)
 )}}

addons/rose/addon/templates/components/rose/form/radio/radio.hbs

@@ -7,7 +7,7 @@
     type="radio"
     @name={{@name}}
     @value={{@value}}
-    @groupValue={{@variable}}
+    @groupValue={{@selectedValue}}
     @disabled={{@disabled}}/>
 
   <label class="rose-form-radio-label" for={{@id}}>

addons/rose/stories/form/radio/group.stories.js

@@ -7,7 +7,7 @@ export default {
 
 export const Normal = () => ({
   template: hbs`
-    <Rose::Form::Radio::Group @name={{name}} @variable={{variable}} as |radioGroup|>
+    <Rose::Form::Radio::Group @name={{name}} @selectedValue={{selectedValue}} as |radioGroup|>
       <radioGroup.radio
         @id="firstField"
         @label={{firstFieldLabel}}
@@ -27,7 +27,7 @@ export const Normal = () => ({
   `,
   context: {
     name: text('name', 'Groupname'),
-    variable: text('variable', 'disagree'),
+    selectedValue: text('selectedValue', 'disagree'),
 
     firstFieldLabel: text('first radiofield label', 'Agree'),
     firstFieldValue: text('first radiofield value', 'agree'),

addons/rose/stories/form/radio/radio.stories.js

@@ -12,7 +12,7 @@ export const Normal = () => ({
       @label={{label}}
       @error={{error}}
       @value={{value}}
-      @variable={{variable}}
+      @selectedValue={{selectedValue}}
       @disabled={{disabled}}
       />
   `,
@@ -20,10 +20,10 @@ export const Normal = () => ({
     id: text('id', 'radio-1'),
     label: text('text', 'Radiofield'),
     error: boolean('error', false),
-    value: text('value', 'value and variable must match to select radiofield'),
-    variable: text(
-      'variable',
-      'value and variable must match to select radiofield'
+    value: text('value', 'value and selectedValue must match to select radiofield'),
+    selectedValue: text(
+      'selectedValue',
+      'value and selectedValue must match to select radiofield'
     ),
     disabled: boolean('disabled', false),
   },

addons/rose/tests/integration/components/rose/form/radio/group-test.js

@@ -27,9 +27,9 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     assert.equal(findAll('input')[1].name, 'bird');
   });
 
-  test('it renders with @variable value selected', async function (assert) {
+  test('it renders with @selectedValue value selected', async function (assert) {
     await render(hbs`
-      <Rose::Form::Radio::Group @name="bird" @variable="flamingo" as |radioGroup|>
+      <Rose::Form::Radio::Group @name="bird" @selectedValue="flamingo" as |radioGroup|>
         <radioGroup.radio
           @id="bird-1"
           @label="Pegion"
@@ -51,4 +51,62 @@ module('Integration | Component | rose/form/radio/group', function (hooks) {
     assert.equal(find('#bird-1').checked, true);
     assert.equal(find('#bird-2').checked, false);
   });
+
+  test('it reflects active radiofield value in @selectedValue', async function (assert) {
+    await render(hbs`
+      <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
+        <radioGroup.radio
+          @id="bird-1"
+          @label="Pegion"
+          @value="pegion"
+        />
+        <radioGroup.radio
+          @id="bird-2"
+          @label="flamingo"
+          @value="flamingo"
+        />
+      </Rose::Form::Radio::Group>
+    `);
+
+    assert.notOk(this.selectedValue);
+
+    await click(find('#bird-1'));
+    assert.equal(this.selectedValue, 'pegion');
+
+    await click(find('#bird-2'));
+    assert.equal(this.selectedValue, 'flamingo');
+  });
+
+  test('it uses @selectedValue value to set active radiofield', async function (assert) {
+    this.set('selectedValue', 'cat');
+    await render(hbs`
+      <Rose::Form::Radio::Group @name="bird" @selectedValue={{this.selectedValue}} as |radioGroup|>
+        <radioGroup.radio
+          @id="bird-1"
+          @label="Pegion"
+          @value="pegion"
+        />
+        <radioGroup.radio
+          @id="bird-2"
+          @label="flamingo"
+          @value="flamingo"
+        />
+      </Rose::Form::Radio::Group>
+    `);
+
+    assert.equal(find('#bird-1').checked, false);
+    assert.equal(find('#bird-2').checked, false);
+
+    this.set('selectedValue', 'flamingo');
+    assert.equal(find('#bird-1').checked, false);
+    assert.equal(find('#bird-2').checked, true);
+
+    this.set('selectedValue', 'pegion');
+    assert.equal(find('#bird-1').checked, true);
+    assert.equal(find('#bird-2').checked, false);
+
+    this.set('selectedValue', 'dog');
+    assert.equal(find('#bird-1').checked, false);
+    assert.equal(find('#bird-2').checked, false);
+  });
 });

addons/rose/tests/integration/components/rose/form/radio/radio-test.js

@@ -17,22 +17,22 @@ module('Integration | Component | rose/form/radio/radio', function (hooks) {
     assert.equal(await find('label').textContent.trim(), 'Label');
   });
 
-  test('it is checked when @value and @variable values match', async function (assert) {
+  test('it is checked when @value and @selectedValue values match', async function (assert) {
     await render(
-      hbs`<Rose::Form::Radio::Radio @value="tree" @variable="tree"/>`
+      hbs`<Rose::Form::Radio::Radio @value="tree" @selectedValue="tree"/>`
     );
     assert.equal(await find('input').checked, true);
   });
 
-  test('it is not checked when @value and @variable values are different', async function (assert) {
+  test('it is not checked when @value and @selectedValue values are different', async function (assert) {
     await render(hbs`<Rose::Form::Radio::Radio @value="tree"/>`);
     assert.equal(await find('input').checked, false);
 
-    await render(hbs`<Rose::Form::Radio::Radio @variable="tree"/>`);
+    await render(hbs`<Rose::Form::Radio::Radio @selectedValue="tree"/>`);
     assert.equal(await find('input').checked, false);
 
     await render(
-      hbs`<Rose::Form::Radio::Radio @value="root" @variable="tree"/>`
+      hbs`<Rose::Form::Radio::Radio @value="root" @selectedValue="tree"/>`
     );
     assert.equal(await find('input').checked, false);
   });