chore: standardized how handle checking from elements that may not exist

Author: shleewhite

showcase/tests/integration/components/hds/alert/index-test.gts

@@ -280,7 +280,9 @@ module('Integration | Component | hds/alert/index', function (hooks) {
       </template>,
     );
     const title = find('#test-alert .hds-alert__title');
-    assert.dom('#test-alert').hasAttribute('aria-labelledby', title?.id ?? '');
+    const titleId = title?.id ?? '';
+
+    assert.dom('#test-alert').hasAttribute('aria-labelledby', titleId);
   });
 
   test('it should render with an auto-generated `aria-labelledby` when description is provided', async function (assert) {

showcase/tests/integration/components/hds/code-block/index-test.gts

@@ -94,13 +94,15 @@ module('Integration | Component | hds/code-block/index', function (hooks) {
       </template>,
     );
     const title = find('.hds-code-block__title');
-    assert.dom('.hds-code-block__code').hasAria('labelledby', title?.id ?? '');
+    const titleId = title?.id ?? '';
+
+    assert.dom('.hds-code-block__code').hasAria('labelledby', titleId);
     assert.dom('.hds-code-block__title').hasText('Title');
 
     const description = find('.hds-code-block__description');
-    assert
-      .dom('.hds-code-block__code')
-      .hasAria('describedby', description?.id ?? '');
+    const descriptionId = description?.id ?? '';
+
+    assert.dom('.hds-code-block__code').hasAria('describedby', descriptionId);
     assert.dom('.hds-code-block__description').hasText('Description');
   });
 

showcase/tests/integration/components/hds/dropdown/index-test.gts

@@ -322,11 +322,11 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
       </template>,
     );
     const button = find('.hds-dropdown-toggle-button');
+    const buttonId = button?.id ?? '';
+
     await click('button.hds-dropdown-toggle-button');
 
     assert.dom('#test-dropdown ul').hasAttribute('role', 'listbox');
-    assert
-      .dom('#test-dropdown ul')
-      .hasAttribute('aria-labelledby', button?.id ?? '');
+    assert.dom('#test-dropdown ul').hasAttribute('aria-labelledby', buttonId);
   });
 });

showcase/tests/integration/components/hds/dropdown/list-item/checkbox-test.gts

@@ -69,9 +69,11 @@ module(
       );
 
       const control = find('.hds-dropdown-list-item__control');
+      const controlId = control?.id ?? '';
+
       assert
         .dom('.hds-dropdown-list-item__label')
-        .hasAttribute('for', control?.id ?? '');
+        .hasAttribute('for', controlId);
     });
 
     // ICON

showcase/tests/integration/components/hds/dropdown/list-item/radio-test.gts

@@ -69,9 +69,11 @@ module(
       );
 
       const control = find('.hds-dropdown-list-item__control');
+      const controlId = control?.id ?? '';
+
       assert
         .dom('.hds-dropdown-list-item__label')
-        .hasAttribute('for', control?.id ?? '');
+        .hasAttribute('for', controlId);
     });
 
     // ICON

showcase/tests/integration/components/hds/flyout/index-test.gts

@@ -393,9 +393,9 @@ module('Integration | Component | hds/flyout/index', function (hooks) {
     );
 
     const titleElement = find('.hds-flyout__title');
-    assert
-      .dom('dialog')
-      .hasAttribute('aria-labelledby', titleElement?.id ?? '');
+    const titleId = titleElement?.id ?? '';
+
+    assert.dom('dialog').hasAttribute('aria-labelledby', titleId);
   });
 
   // FOCUS MANAGEMENT

showcase/tests/integration/components/hds/form/key-value-inputs/field-test.gts

@@ -292,7 +292,11 @@ module(
           await createKeyValueInputsField(opts);
 
           const label = find('#test-form-key-value-field .hds-form-label');
+          const labelId = label?.id ?? '';
+
           const input = find(`#test-form-key-value-field ${selector}`);
+          const inputId = input?.id ?? '';
+
           const helper = find(
             '#test-form-key-value-field .hds-form-key-value-inputs__field-helper-text',
           );
@@ -303,7 +307,7 @@ module(
           if (type === 'SuperSelectSingle' || type === 'SuperSelectMultiple') {
             assert
               .dom('#test-form-key-value-field [role="combobox"]')
-              .hasAria('labelledby', label?.id ?? '');
+              .hasAria('labelledby', labelId);
             assert
               .dom('#test-form-key-value-field [role="combobox"]')
               .hasAria(
@@ -315,7 +319,7 @@ module(
               .dom(
                 '#test-form-key-value-field .hds-form-key-value-inputs__field-label',
               )
-              .hasAttribute('for', input?.id ?? '');
+              .hasAttribute('for', inputId);
             assert
               .dom(`#test-form-key-value-field ${selector}`)
               .hasAria(

showcase/tests/integration/components/hds/form/key-value-inputs/index-test.gts

@@ -364,16 +364,15 @@ module(
       const legend = find(
         '#test-form-key-value-inputs .hds-form-key-value-inputs__header legend',
       );
+      const legendId = legend?.id ?? '';
       const helper = find(
         '#test-form-key-value-inputs .hds-form-key-value-inputs__header .hds-form-key-value-inputs__helper-text',
       );
       const error = find(
         '#test-form-key-value-inputs .hds-form-key-value-inputs__error',
       );
 
-      assert
-        .dom('#test-form-key-value-inputs')
-        .hasAria('labelledby', legend?.id ?? '');
+      assert.dom('#test-form-key-value-inputs').hasAria('labelledby', legendId);
       assert
         .dom('#test-form-key-value-inputs')
         .hasAria(

showcase/tests/integration/components/hds/form/radio/group-test.gts

@@ -173,9 +173,9 @@ module('Integration | Component | hds/form/radio/group', function (hooks) {
     assert.dom(labels[0]).hasAttribute('for', 'true');
 
     // the `false` value should not be used, but the `id` (input) attribute should be generated and the `for` (label) attribute should match it
-    const generatedId = inputs[1]?.id;
+    const generatedId = inputs[1]?.id ?? '';
     assert.true(generatedId?.startsWith('ember'));
-    assert.dom(labels[1]).hasAttribute('for', generatedId ?? '');
+    assert.dom(labels[1]).hasAttribute('for', generatedId);
   });
 
   // NAME

showcase/tests/integration/components/hds/modal/index-test.gts

@@ -419,9 +419,9 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     );
 
     const titleElement = find('.hds-modal__title');
-    assert
-      .dom('dialog')
-      .hasAttribute('aria-labelledby', titleElement?.id ?? '');
+    const titleId = titleElement?.id ?? '';
+
+    assert.dom('dialog').hasAttribute('aria-labelledby', titleId);
   });
 
   // FOCUS MANAGEMENT