From b1361bcb8329c3d56b28ea4d64cc62c9d430b493 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Thu, 6 May 2021 09:00:37 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Applying=20PR=20suggeste?=
 =?UTF-8?q?d=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the changes suggested on the PR. Also modified tests to could test
the rendering of the componet without description field.
---
 .../components/rose/form/fieldset/index.hbs   | 21 ++++----
 .../components/rose/form/fieldset-test.js     | 50 +++++++++++++------
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/fieldset/index.hbs b/addons/rose/addon/components/rose/form/fieldset/index.hbs
index 685644822..d9bc73f2a 100644
--- a/addons/rose/addon/components/rose/form/fieldset/index.hbs
+++ b/addons/rose/addon/components/rose/form/fieldset/index.hbs
@@ -1,19 +1,20 @@
-<fieldset ...attributes class='rose-form-fieldset'>
+<fieldset ...attributes class='rose-form-fieldset' aria-describedby={{concat 'title-' this.id}}>
     <legend 
         id={{concat 'title-' this.id}}
-        aria-describedby={{concat 'description-' this.id}}
         class='rose-form-fieldset-title'
     >
         {{yield to='title'}}
     </legend>
-    <div
-        id={{concat 'description-' this.id}}
-        aria-labelledby={{concat 'title-' this.id}}
-        class='rose-form-fieldset-description'
-    >
-        {{yield to='description'}}
-    </div>
-
+    
+    {{#if (has-block "description")}}
+        <div
+            id={{concat 'description-' this.id}}
+            class='rose-form-fieldset-description'
+        >
+            {{yield to='description'}}
+        </div>
+    {{/if}}
+    
     <div class='rose-form-fieldset-body'>
         {{yield to='body'}}
     </div>
diff --git a/addons/rose/tests/integration/components/rose/form/fieldset-test.js b/addons/rose/tests/integration/components/rose/form/fieldset-test.js
index d2e2742c1..b6081077c 100644
--- a/addons/rose/tests/integration/components/rose/form/fieldset-test.js
+++ b/addons/rose/tests/integration/components/rose/form/fieldset-test.js
@@ -11,19 +11,29 @@ module('Integration | Component | rose/form/fieldset', function (hooks) {
   this.mockDescription = 'Description';
   this.mockBody = 'Rest of the form';
 
-  hooks.beforeEach(async function () {
-    // Render the component before each test
-    await render(hbs`
+  // Wrap the rendering in a function to avoid repeat code
+  async function renderComponent(noDescription) {
+    if (noDescription === true) {
+      return render(hbs`
+        <Rose::Form::Fieldset>
+          <:title>{{this.mockTitle}}</:title>
+          <:body>{{this.mockBody}}</:body>
+        </Rose::Form::Fieldset>
+    `);
+    }
+
+    return render(hbs`
       <Rose::Form::Fieldset>
         <:title>{{this.mockTitle}}</:title>
         <:description>{{this.mockDescription}}</:description>
         <:body>{{this.mockBody}}</:body>
       </Rose::Form::Fieldset>
     `);
-  });
+  }
 
-  test('it renders', async function (assert) {
+  test('it renders the full component', async function (assert) {
     assert.expect(4);
+    await renderComponent(false);
     assert.ok(find('.rose-form-fieldset'));
     assert.equal(
       find('.rose-form-fieldset-title').textContent.trim(),
@@ -39,21 +49,31 @@ module('Integration | Component | rose/form/fieldset', function (hooks) {
     );
   });
 
-  test('it supports aria description for title', async function (assert) {
-    assert.expect(2);
-    const titleElement = find('.rose-form-fieldset-title');
-    const descriptionElement = find('.rose-form-fieldset-description');
-
+  test('it render with no description', async function (assert) {
+    assert.expect(4);
+    await renderComponent(true);
+    assert.ok(find('.rose-form-fieldset'));
     assert.equal(
-      titleElement.getAttribute('aria-describedBy'),
-      descriptionElement.id,
-      'Title is described by description'
+      find('.rose-form-fieldset-title').textContent.trim(),
+      this.mockTitle
     );
+    assert.notOk(find('.rose-form-fieldset-description'));
+    assert.equal(
+      find('.rose-form-fieldset-body').textContent.trim(),
+      this.mockBody
+    );
+  });
+
+  test('it supports aria description for fieldset', async function (assert) {
+    assert.expect(1);
+    await renderComponent(false);
+    const titleElement = find('.rose-form-fieldset-title');
+    const fieldsetElement = find('.rose-form-fieldset');
 
     assert.equal(
-      descriptionElement.getAttribute('aria-labelledBy'),
+      fieldsetElement.getAttribute('aria-describedby'),
       titleElement.id,
-      'Description is labelled by title'
+      'Fieldset is described by legend'
     );
   });
 });