fix: Field components, add test for label and hint blocks

- change label and hint block from unknown to [] for TS

- added tests for label and hint blocks

Author: nicolechung

ember-toucan-core/src/components/form/fields/checkbox-group.ts

@@ -54,8 +54,8 @@ export interface ToucanFormCheckboxGroupFieldComponentSignature {
         >;
       }
     ];
-    label: unknown;
-    hint: unknown;
+    label: [];
+    hint: [];
   };
 }
 

ember-toucan-core/src/components/form/fields/file-input.ts

@@ -23,8 +23,8 @@ interface ToucanFormFileInputFieldComponentSignature {
     rootTestSelector?: string;
   };
   Blocks: {
-    label: unknown;
-    hint: unknown;
+    label: [];
+    hint: [];
   };
 }
 

ember-toucan-core/src/components/form/fields/input.ts

@@ -43,8 +43,8 @@ interface ToucanFormInputFieldComponentSignature {
   };
   Blocks: {
     default: [];
-    label: unknown;
-    hint: unknown;
+    label: [];
+    hint: [];
   };
 }
 

ember-toucan-core/src/components/form/fields/radio-group.ts

@@ -61,8 +61,8 @@ export interface ToucanFormRadioGroupFieldComponentSignature {
         >;
       }
     ];
-    label: unknown;
-    hint: unknown;
+    label: [];
+    hint: [];
   };
 }
 

ember-toucan-core/src/components/form/fields/radio.ts

@@ -50,8 +50,8 @@ export interface ToucanFormRadioFieldComponentSignature {
     value: ToucanFormRadioControlComponentSignature['Args']['value'];
   };
   Blocks: {
-    label: unknown;
-    hint: unknown;
+    label: [];
+    hint: [];
   };
 }
 

ember-toucan-core/src/components/form/fields/textarea.ts

@@ -43,8 +43,8 @@ export interface ToucanFormTextareaFieldComponentSignature {
     value?: ToucanFormTextareaControlComponentSignature['Args']['value'];
   };
   Blocks: {
-    label: unknown;
-    hint: unknown;
+    label: [];
+    hint: [];
   };
 }
 

ember-toucan-core/src/components/form/fieldset.ts

@@ -28,8 +28,8 @@ interface ToucanFormFieldsetComponentSignature {
   };
   Blocks: {
     default: [];
-    label: unknown;
-    hint: unknown;
+    label: [];
+    hint: [];
   };
 }
 

test-app/tests/integration/components/checkbox-group-field-test.gts

@@ -113,6 +113,18 @@ module('Integration | Component | Fields | CheckboxGroup', function (hooks) {
     assert.dom('[data-error]').hasText('Error text');
   });
 
+  test('it renders with a hint and label block', async function (assert) {
+    await render(<template>
+      <CheckboxGroupField @label="Label" @name="group" @hint="Hint text">
+        <:label>Extra label content</:label>
+        <:hint>Extra hint content</:hint>
+      </CheckboxGroupField>
+    </template>);
+
+    assert.dom('[data-hint]').hasText('Hint text Extra hint content');
+    assert.dom('[data-label]').hasText('Label Extra label content');
+  });
+
   test('it default-checks the checkbox with the matching `@value`', async function (assert) {
     let selectedOption = ['option-2'];
 

test-app/tests/integration/components/fieldset-test.gts

@@ -42,6 +42,18 @@ module('Integration | Component | Fieldset', function (hooks) {
     assert.dom('[data-fieldset]').hasAttribute('aria-describedby');
   });
 
+  test('it renders with hint and label blocks', async function (assert) {
+    await render(<template>
+      <Fieldset @label="Label" @hint="Hint text" data-fieldset>
+        <:label>Extra label content</:label>
+        <:hint>Extra hint content</:hint>
+      </Fieldset>
+    </template>);
+
+    assert.dom('[data-hint]').hasText('Hint text Extra hint content');
+    assert.dom('[data-label]').hasText('Label Extra label content');
+  });
+
   test('it renders with an error', async function (assert) {
     await render(<template>
       <Fieldset @label="Label" @error="Error text" data-fieldset />

test-app/tests/integration/components/file-input-field-test.gts

@@ -100,6 +100,31 @@ module('Integration | Component | Fields | FileInput', function (hooks) {
     assert.dom(hint).hasText('Hint text');
   });
 
+  test('it renders with a hint and label block', async function (assert) {
+    await render(<template>
+      <FileInputField
+        @deleteLabel="Delete File"
+        @label="Label"
+        @trigger="Select Files"
+        @hint="Hint text"
+        @onChange={{onChange}}
+        data-file-input-field
+      >
+      <:label>Extra label content</:label>
+      <:hint>Extra hint content</:hint>
+      </FileInputField>
+    </template>);
+
+    // For the file input field component, the only aria-describedby
+    // value should be the errorId.  This is due to the way the component
+    // is structured, where the label+hint are rendered inside of the
+    // wrapping <label> element
+    const hint = find('[data-hint]');
+    const label = find('[data-label]');
+
+    assert.dom(hint).hasText('Hint text Extra hint content');
+    assert.dom(label).hasText('Label Extra label content');
+  });
   test('it renders with an error', async function (assert) {
     await render(<template>
       <FileInputField

test-app/tests/integration/components/input-field-test.gts

@@ -110,6 +110,26 @@ module('Integration | Component | Fields | Input', function (hooks) {
     );
   });
 
+  test('it renders a hint and label block', async function (assert) {
+    await render(<template>
+      <InputField
+        @label="Label"
+        type="text"
+        @hint="Hint text visible here"
+        data-input
+      >
+      <:label>Extra label content</:label>
+      <:hint>Extra hint content</:hint>
+      </InputField>
+    </template>);
+
+    const label = '[data-label]';
+    const hint = '[data-hint]';
+
+    assert.dom(label).hasText('Label Extra label content'); 
+    assert.dom(hint).hasText('Hint text visible here Extra hint content'); 
+
+  });
   test('it sets aria-describedby when both a hint and error are provided using the hint and error ids', async function (assert) {
     await render(<template>
       <InputField

test-app/tests/integration/components/radio-field-test.gts

@@ -48,6 +48,23 @@ module('Integration | Component | Fields | Radio', function (hooks) {
     assert.dom('[data-hint]').hasText('Hint text');
   });
 
+  test('it renders with a hint and label block', async function (assert) {
+    await render(<template>
+      <RadioField
+        @value="option"
+        @label="Label"
+        @hint="Hint text"
+        @name="name"
+        data-radio
+      >
+      <:label>Extra label content</:label>
+      <:hint>Extra hint content</:hint>
+      </RadioField>
+    </template>);
+
+    assert.dom('[data-hint]').hasText('Hint text Extra hint content');
+    assert.dom('[data-label]').hasText('Label Extra label content');
+  });
   test('it sets the "for" attribute on the label to the "id" attribute of the radio', async function (assert) {
     await render(<template>
       <RadioField @value="option" @label="Label" @name="name" data-radio />

test-app/tests/integration/components/radio-group-field-test.gts

@@ -63,6 +63,18 @@ module('Integration | Component | Fields | RadioGroup', function (hooks) {
     assert.dom('[data-hint]').hasText('Hint text');
   });
 
+  test('it renders with a hint and label block', async function (assert) {
+    await render(<template>
+      <RadioGroupField @label="Label" @name="group" @hint="Hint text">
+        <:label>Extra label content</:label>
+        <:hint>Extra hint content</:hint>
+      </RadioGroupField>
+    </template>);
+
+    assert.dom('[data-hint]').hasText('Hint text Extra hint content');
+    assert.dom('[data-label]').hasText('Label Extra label content');
+  });
+
   test('it renders with an error', async function (assert) {
     await render(<template>
       <RadioGroupField @label="Label" @name="group" @error="Error text" />

test-app/tests/integration/components/textarea-field-test.gts

@@ -55,6 +55,21 @@ module('Integration | Component | Fields | Textarea', function (hooks) {
     );
   });
 
+  test('it renders with a hint and label block', async function (assert) {
+    await render(<template>
+      <TextareaField @label="Label" @hint="Hint text" data-textarea>
+        <:label>Extra label content</:label>
+        <:hint>Extra hint content</:hint>
+      </TextareaField>
+    </template>);
+
+    let hint = find('[data-hint]');
+    let label = find('[data-label]');
+
+    assert.dom(hint).hasText('Hint text Extra hint content');
+    assert.dom(label).hasText('Label Extra label content');
+  });
+
   test('it renders with an error', async function (assert) {
     await render(<template>
       <TextareaField @label="Label" @error="Error text" data-textarea />