From b8f7d133f2546314c8b6cabbd265a88bb6185a07 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 8 May 2020 14:46:09 -0400
Subject: [PATCH] =?UTF-8?q?test:=20=F0=9F=92=8D=20Add=20click=20tests=20fo?=
 =?UTF-8?q?r=20radiofield=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add tests for changes to radiofield group attribute: selectedValue
---
 .../addon/components/rose/form/radio/group.js |  2 +-
 .../addon/components/rose/form/radio/radio.js |  4 +-
 .../components/rose/form/radio/group.hbs      |  2 +-
 .../components/rose/form/radio/radio.hbs      |  2 +-
 .../rose/stories/form/radio/group.stories.js  |  4 +-
 .../rose/stories/form/radio/radio.stories.js  | 10 +--
 .../components/rose/form/radio/group-test.js  | 62 ++++++++++++++++++-
 .../components/rose/form/radio/radio-test.js  | 10 +--
 8 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/group.js b/addons/rose/addon/components/rose/form/radio/group.js
index 9ad393cd2..a9508a084 100644
--- a/addons/rose/addon/components/rose/form/radio/group.js
+++ b/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"
diff --git a/addons/rose/addon/components/rose/form/radio/radio.js b/addons/rose/addon/components/rose/form/radio/radio.js
index 6d0083cc2..f32a6835e 100644
--- a/addons/rose/addon/components/rose/form/radio/radio.js
+++ b/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}}
  *   />
  */
diff --git a/addons/rose/addon/templates/components/rose/form/radio/group.hbs b/addons/rose/addon/templates/components/rose/form/radio/group.hbs
index 4fa7ab5fa..6aa52cf50 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/group.hbs
+++ b/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)
 )}}
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
index 09e492f7d..088853d5b 100644
--- a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs
+++ b/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}}>
diff --git a/addons/rose/stories/form/radio/group.stories.js b/addons/rose/stories/form/radio/group.stories.js
index 9a084b07c..8c64c7016 100644
--- a/addons/rose/stories/form/radio/group.stories.js
+++ b/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'),
diff --git a/addons/rose/stories/form/radio/radio.stories.js b/addons/rose/stories/form/radio/radio.stories.js
index b97194478..72bac02d3 100644
--- a/addons/rose/stories/form/radio/radio.stories.js
+++ b/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),
   },
diff --git a/addons/rose/tests/integration/components/rose/form/radio/group-test.js b/addons/rose/tests/integration/components/rose/form/radio/group-test.js
index 56452c7c7..b3aa9d2f9 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/group-test.js
+++ b/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);
+  });
 });
diff --git a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js b/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
index a3b7d7a0b..f3aa7df11 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/radio-test.js
+++ b/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);
   });