(components): failing tests to show that Error is not added to aria-d…

…escribedby Some failing tests to show that Form components do not have their `aria-describedby` attribute updated when `F.Error` is dynamically rendered or added after first render.
hashicorp · Jun 20, 2024 · 689c0b5 · 689c0b5
1 parent cc264f6
commit 689c0b5
Show file tree

Hide file tree

Showing 12 changed files with 421 additions and 12 deletions.
diff --git a/showcase/tests/integration/components/hds/form/checkbox/group-test.js b/showcase/tests/integration/components/hds/form/checkbox/group-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, resetOnerror } from '@ember/test-helpers';
+import { render, resetOnerror, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | hds/form/checkbox/group', function (hooks) {
@@ -102,6 +102,46 @@ module('Integration | Component | hds/form/checkbox/group', function (hooks) {
       );
   });
 
+  test('it automatically provides all the ID relations between the elements even when Error is conditionally rendered', async function (assert) {
+    await render(
+      hbs`<Hds::Form::Checkbox::Group as |G|>
+            <G.Legend>This is the legend</G.Legend>
+            <G.HelperText>This is the group helper text</G.HelperText>
+            <G.CheckboxField checked="checked" @value="abc123" as |F|>
+              <F.Label>This is the control label</F.Label>
+              <F.HelperText>This is the control helper text</F.HelperText>
+              <F.Error>This is the control error</F.Error>
+            </G.CheckboxField>
+            {{#if this.showErrors}}
+              <G.Error>This is the group error</G.Error>
+            {{/if}}
+          </Hds::Form::Checkbox::Group>`
+    );
+
+    this.set('showErrors', true);
+    await settled();
+
+    // the IDs are dynamically generated
+    let groupHelperText = this.element.querySelector(
+      '.hds-form-group__helper-text'
+    );
+    let groupHelperTextId = groupHelperText.id;
+    let groupError = this.element.querySelector('.hds-form-group__error');
+    let groupErrorId = groupError.id;
+    let fieldHelperText = this.element.querySelector(
+      '.hds-form-field__helper-text'
+    );
+    let fieldHelperTextId = fieldHelperText.id;
+    let fieldError = this.element.querySelector('.hds-form-field__error');
+    let fieldErrorId = fieldError.id;
+    assert
+      .dom('input')
+      .hasAttribute(
+        'aria-describedby',
+        `${fieldHelperTextId} ${fieldErrorId} ${groupHelperTextId} ${groupErrorId}`
+      );
+  });
+
   // NAME
 
   test('it renders the defined name on all controls within a group', async function (assert) {

diff --git a/showcase/tests/integration/components/hds/form/file-input/field-test.js b/showcase/tests/integration/components/hds/form/file-input/field-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, resetOnerror } from '@ember/test-helpers';
+import { render, resetOnerror, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | hds/form/file-input/field', function (hooks) {
@@ -75,6 +75,33 @@ module('Integration | Component | hds/form/file-input/field', function (hooks) {
       .dom('.hds-form-field__error')
       .hasAttribute('id', `error-${controlId}`);
   });
+  test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    await render(
+      hbs`<Hds::Form::FileInput::Field @extraAriaDescribedBy="extra" as |F|>
+          <F.Label>This is the label</F.Label>
+          <F.HelperText>This is the helper text</F.HelperText>
+          {{#if this.showErrors}}
+            <F.Error>This is the error</F.Error>
+          {{/if}}
+        </Hds::Form::FileInput::Field>`
+    );
+    // the control ID is dynamically generated
+    let control = this.element.querySelector('.hds-form-field__control input');
+    let controlId = control.id;
+    assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
+    assert
+      .dom('.hds-form-field__helper-text')
+      .hasAttribute('id', `helper-text-${controlId}`);
+    assert
+      .dom('.hds-form-field__control input')
+      .hasAttribute(
+        'aria-describedby',
+        `helper-text-${controlId} error-${controlId} extra`
+      );
+    assert
+      .dom('.hds-form-field__error')
+      .hasAttribute('id', `error-${controlId}`);
+  });
 
   // REQUIRED AND OPTIONAL
 

diff --git a/showcase/tests/integration/components/hds/form/masked-input/field-test.js b/showcase/tests/integration/components/hds/form/masked-input/field-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { click, render, resetOnerror } from '@ember/test-helpers';
+import { click, render, resetOnerror, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module(
@@ -116,6 +116,42 @@ module(
         .dom('.hds-form-field__error')
         .hasAttribute('id', `error-${controlId}`);
     });
+    test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+      await render(
+        hbs`<Hds::Form::MaskedInput::Field @extraAriaDescribedBy="extra" as |F|>
+          <F.Label>This is the label</F.Label>
+          <F.HelperText>This is the helper text</F.HelperText>
+          <F.CharacterCount @maxLength={{10}}/>
+          {{#if this.showErrors}}
+            <F.Error>This is the error</F.Error>
+          {{/if}}
+        </Hds::Form::MaskedInput::Field>`
+      );
+
+      this.set('showErrors', true);
+      await settled();
+      // the control ID is dynamically generated
+      let control = this.element.querySelector(
+        '.hds-form-field__control input'
+      );
+      let controlId = control.id;
+      assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
+      assert
+        .dom('.hds-form-field__helper-text')
+        .hasAttribute('id', `helper-text-${controlId}`);
+      assert
+        .dom('.hds-form-field__control input')
+        .hasAttribute(
+          'aria-describedby',
+          `helper-text-${controlId} character-count-${controlId} error-${controlId} extra`
+        );
+      assert
+        .dom('.hds-form-field__character-count')
+        .hasAttribute('id', `character-count-${controlId}`);
+      assert
+        .dom('.hds-form-field__error')
+        .hasAttribute('id', `error-${controlId}`);
+    });
 
     // REQUIRED AND OPTIONAL
 

diff --git a/showcase/tests/integration/components/hds/form/radio-card/group-test.js b/showcase/tests/integration/components/hds/form/radio-card/group-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, resetOnerror } from '@ember/test-helpers';
+import { render, resetOnerror, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | hds/form/radio-card/group', function (hooks) {
@@ -89,6 +89,34 @@ module('Integration | Component | hds/form/radio-card/group', function (hooks) {
       .hasAttribute('aria-describedby', `${groupHelperTextId} ${groupErrorId}`);
   });
 
+  test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    await render(
+      hbs`<Hds::Form::RadioCard::Group as |G|>
+            <G.Legend>This is the legend</G.Legend>
+            <G.HelperText>This is the group helper text</G.HelperText>
+            <G.RadioCard/>
+            <G.RadioCard/>
+            {{#if this.showErrors}}
+              <G.Error>This is the group error</G.Error>
+            {{/if}}
+          </Hds::Form::RadioCard::Group>`
+    );
+
+    this.set('showErrors', true);
+    await settled();
+
+    // the IDs are dynamically generated
+    let groupHelperText = this.element.querySelector(
+      '.hds-form-group__helper-text'
+    );
+    let groupHelperTextId = groupHelperText.id;
+    let groupError = this.element.querySelector('.hds-form-group__error');
+    let groupErrorId = groupError.id;
+    assert
+      .dom('input')
+      .hasAttribute('aria-describedby', `${groupHelperTextId} ${groupErrorId}`);
+  });
+
   // ARGUMENT FORWARDING: NAME, ALIGNMENT, CONTROL POSITION, LAYOUT
 
   test('it should render the contextual components with CSS classes that reflect the arguments provided', async function (assert) {

diff --git a/showcase/tests/integration/components/hds/form/radio/field-test.js b/showcase/tests/integration/components/hds/form/radio/field-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, resetOnerror } from '@ember/test-helpers';
+import { render, resetOnerror, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | hds/form/radio/field', function (hooks) {
@@ -80,4 +80,34 @@ module('Integration | Component | hds/form/radio/field', function (hooks) {
       .dom('.hds-form-field__error')
       .hasAttribute('id', `error-${controlId}`);
   });
+  test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    await render(
+      hbs`<Hds::Form::Radio::Field @extraAriaDescribedBy="extra" as |F|>
+          <F.Label>This is the label</F.Label>
+          <F.HelperText>This is the helper text</F.HelperText>
+          {{#if this.showErrors}}
+            <F.Error>This is the error</F.Error>
+          {{/if}}
+        </Hds::Form::Radio::Field>`
+    );
+
+    this.set('showErrors', true);
+    await settled();
+    // the control ID is dynamically generated
+    let control = this.element.querySelector('.hds-form-field__control input');
+    let controlId = control.id;
+    assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
+    assert
+      .dom('.hds-form-field__helper-text')
+      .hasAttribute('id', `helper-text-${controlId}`);
+    assert
+      .dom('.hds-form-field__control input')
+      .hasAttribute(
+        'aria-describedby',
+        `helper-text-${controlId} error-${controlId} extra`
+      );
+    assert
+      .dom('.hds-form-field__error')
+      .hasAttribute('id', `error-${controlId}`);
+  });
 });
diff --git a/showcase/tests/integration/components/hds/form/radio/group-test.js b/showcase/tests/integration/components/hds/form/radio/group-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, resetOnerror } from '@ember/test-helpers';
+import { render, resetOnerror, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | hds/form/radio/group', function (hooks) {
@@ -102,6 +102,45 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
       );
   });
 
+  test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    await render(
+      hbs`<Hds::Form::Radio::Group as |G|>
+            <G.Legend>This is the legend</G.Legend>
+            <G.HelperText>This is the group helper text</G.HelperText>
+            <G.RadioField checked="checked" @value="abc123" as |F|>
+              <F.Label>This is the control label</F.Label>
+              <F.HelperText>This is the control helper text</F.HelperText>
+              <F.Error>This is the control error</F.Error>
+            </G.RadioField>
+            {{#if this.showErrors}}
+              <G.Error>This is the group error</G.Error>
+            {{/if}}
+          </Hds::Form::Radio::Group>`
+    );
+
+    this.set('showErrors', true);
+    await settled();
+    // the IDs are dynamically generated
+    let groupHelperText = this.element.querySelector(
+      '.hds-form-group__helper-text'
+    );
+    let groupHelperTextId = groupHelperText.id;
+    let groupError = this.element.querySelector('.hds-form-group__error');
+    let groupErrorId = groupError.id;
+    let fieldHelperText = this.element.querySelector(
+      '.hds-form-field__helper-text'
+    );
+    let fieldHelperTextId = fieldHelperText.id;
+    let fieldError = this.element.querySelector('.hds-form-field__error');
+    let fieldErrorId = fieldError.id;
+    assert
+      .dom('input')
+      .hasAttribute(
+        'aria-describedby',
+        `${fieldHelperTextId} ${fieldErrorId} ${groupHelperTextId} ${groupErrorId}`
+      );
+  });
+
   // NAME
 
   test('it renders the defined name on all controls within a group', async function (assert) {

diff --git a/showcase/tests/integration/components/hds/form/select/field-test.js b/showcase/tests/integration/components/hds/form/select/field-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, resetOnerror } from '@ember/test-helpers';
+import { render, resetOnerror, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | hds/form/select/field', function (hooks) {
@@ -98,6 +98,36 @@ module('Integration | Component | hds/form/select/field', function (hooks) {
       .dom('.hds-form-field__error')
       .hasAttribute('id', `error-${controlId}`);
   });
+  test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+    await render(
+      hbs`<Hds::Form::Select::Field @extraAriaDescribedBy="extra" as |F|>
+          <F.Label>This is the label</F.Label>
+          <F.HelperText>This is the helper text</F.HelperText>
+          {{#if this.showErrors}}
+            <F.Error>This is the error</F.Error>
+          {{/if}}
+        </Hds::Form::Select::Field>`
+    );
+
+    this.set('showErrors', true);
+    await settled();
+    // the control ID is dynamically generated
+    let control = this.element.querySelector('.hds-form-field__control select');
+    let controlId = control.id;
+    assert.dom('.hds-form-field__label').hasAttribute('for', controlId);
+    assert
+      .dom('.hds-form-field__helper-text')
+      .hasAttribute('id', `helper-text-${controlId}`);
+    assert
+      .dom('.hds-form-field__control select')
+      .hasAttribute(
+        'aria-describedby',
+        `helper-text-${controlId} error-${controlId} extra`
+      );
+    assert
+      .dom('.hds-form-field__error')
+      .hasAttribute('id', `error-${controlId}`);
+  });
 
   // REQUIRED AND OPTIONAL
 

diff --git a/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.js b/showcase/tests/integration/components/hds/form/super-select/multiple/field-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 // we're using this data for multiple tests so we'll define it here
@@ -105,6 +105,41 @@ module(
         .dom('.hds-form-field__error')
         .hasAttribute('id', `error-${controlId}`);
     });
+    test('it automatically provides all the ID relations between the elements when dynamically rendered', async function (assert) {
+      setOptionsData(this);
+      await render(
+        hbs`<Hds::Form::SuperSelect::Multiple::Field @extraAriaDescribedBy="extra" @onChange={{this.NOOP}} as |F|>
+          <F.Label>This is the label</F.Label>
+          <F.HelperText>This is the helper text</F.HelperText>
+          {{#if this.showErrors}}
+            <F.Error>This is the error</F.Error>
+          {{/if}}
+        </Hds::Form::SuperSelect::Multiple::Field>`
+      );
+
+      this.set('showErrors', true);
+      await settled();
+      let control = this.element.querySelector('.ember-basic-dropdown-trigger');
+      let controlId = control.id;
+      assert
+        .dom('.hds-form-field__label')
+        .hasAttribute('id', `label-${controlId}`);
+      assert
+        .dom('.hds-form-field__helper-text')
+        .hasAttribute('id', `helper-text-${controlId}`);
+      assert
+        .dom('.ember-basic-dropdown-trigger')
+        .hasAttribute('aria-labelledby', `label-${controlId}`);
+      assert
+        .dom('.ember-basic-dropdown-trigger')
+        .hasAttribute(
+          'aria-describedby',
+          `helper-text-${controlId} error-${controlId} extra`
+        );
+      assert
+        .dom('.hds-form-field__error')
+        .hasAttribute('id', `error-${controlId}`);
+    });
 
     // REQUIRED AND OPTIONAL