Repository: hashicorp/vault
File: ui/tests/integration/components/form-field-test.js (JavaScript)

Code before:
      attr: createAttr('path', 'string'),
      onChange: () => {},
    });

    await render(
      hbs`<FormField @attr={{this.attr}} @model={{this.model}} @modelValidations={{this.validations}} @onChange={{this.onChange}} />`
    );
    assert.dom('[data-test-form-field-validation-warning]').exists('Validation warning renders');
  });

  // ---------------
  // HDS FORM FIELDS
  // ---------------
  // Note: some tests may be duplicative of the generic tests above
  //

  // ––––– editType === 'checkboxList' / possibleValues –––––

  test('it renders: editType=checkboxList / possibleValues - as Hds::Form::Checkbox::Group', async function (assert) {
    const possibleValues = ['foo', 'bar', 'baz'];
    await setup.call(this, createAttr('foo', '-', { editType: 'checkboxList', possibleValues }));
    assert
      .dom('.field [class^="hds-form-group"] input[type="checkbox"].hds-form-checkbox')
      .exists('renders as Hds::Form::Checkbox::Group');
    assert
      .dom('fieldset[data-test-input="foo"] input[type="checkbox"]')
      .exists({ count: 3 }, 'renders a fieldset element with 3 checkbox elements');
    assert.strictEqual(component.fields.objectAt(0).labelValue, 'Foo', 'renders a label');
    possibleValues.forEach((possibleValue, index) => {
      assert
        .dom(`fieldset[data-test-input="foo"] .hds-form-group__control-field:nth-of-type(${index + 1}) label`)
        .hasAttribute('id', `label-${possibleValue}`, 'label has correct id')
        .hasText(possibleValue, 'label has correct text');
      assert
        .dom(
          `fieldset[data-test-input="foo"] .hds-form-group__control-field:nth-of-type(${
            index + 1
          }) input[type="checkbox"]`
        )
        .hasAttribute('id', possibleValue, 'input[type="checkbox"] has correct id');
    });
  });

  test('it renders: editType=checkboxList / possibleValues - with no selected checkbox', async function (assert) {
    const possibleValues = ['foo', 'bar', 'baz'];
    await setup.call(this, createAttr('foo', '-', { editType: 'checkboxList', possibleValues }));
    possibleValues.forEach(async (possibleValue, index) => {
      const selector = `fieldset[data-test-input="foo"] .hds-form-group__control-field:nth-of-type(${
        index + 1
      }) input[type="checkbox"]`;
      assert.dom(selector).isNotChecked(`input[type="checkbox"] "${possibleValue}" is not checked`);

Review comment (suggestion):
Hmm... I like the approach here in that it simplifies a lot, but can we use the GENERAL selectors with the `fieldset`? 
```suggestion
      .dom('fieldset[GENERAL.inputByAttr("foo")] input[type="checkbox"]')
```

Code after:
    this.setProperties({
      model,
      attr: createAttr('path', 'string'),
      onChange: () => {},
    });

    await render(
      hbs`<FormField @attr={{this.attr}} @model={{this.model}} @modelValidations={{this.validations}} @onChange={{this.onChange}} />`
    );
    assert.dom(GENERAL.validationWarningByAttr('path')).exists('Validation warning renders');
  });

  // ---------------
  // HDS FORM FIELDS
  // ---------------
  // Note: some tests may be duplicative of the generic tests above
  //

  // ––––– editType === 'checkboxList' / possibleValues –––––

  test('it renders: editType=checkboxList / possibleValues - as Hds::Form::Checkbox::Group', async function (assert) {
    const possibleValues = ['foo', 'bar', 'baz'];
    await setup.call(this, createAttr('myfield', '-', { editType: 'checkboxList', possibleValues }));
    const labels = findAll(`${GENERAL.inputGroupByAttr('myfield')} label`);
    const inputs = findAll(`${GENERAL.inputGroupByAttr('myfield')} input[type="checkbox"]`);
    assert
      .dom('.field [class^="hds-form-group"] input[type="checkbox"].hds-form-checkbox')
      .exists('renders as Hds::Form::Checkbox::Group');
    assert.strictEqual(inputs.length, 3, 'renders a fieldset element with 3 checkbox elements');
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input group label');
    possibleValues.forEach((possibleValue, index) => {
      assert
        .dom(labels[index])
        .hasAttribute('id', `label-${possibleValue}`, 'label has correct id')
        .hasText(possibleValue, 'label has correct text');
      assert
        .dom(inputs[index])
        .hasAttribute('id', possibleValue, 'input[type="checkbox"] has correct id')
        .hasAttribute(
          'data-test-checkbox',
          possibleValue,
          'input[type="checkbox"] has correct `data-test-checkbox` attribute'
        );
    });
  });

  test('it renders: editType=checkboxList / possibleValues - with no selected checkbox', async function (assert) {
    const possibleValues = ['foo', 'bar', 'baz'];
    await setup.call(this, createAttr('myfield', '-', { editType: 'checkboxList', possibleValues }));
    possibleValues.forEach((possibleValue) => {
      assert