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

Code before:
      .hasText('Error message #1 Error message #2', 'Validation errors are combined');
    assert
      .dom(GENERAL.validationWarningByAttr('myfield'))
      .exists('Validation warning renders')
      .hasText('Warning message #1 Warning message #2', 'Validation warnings are combined');
  });

  // ––––– editType === 'textarea' –––––

  test('it renders: editType=textarea / type=string - as Hds::Form::Textarea', async function (assert) {
    const [model, spy] = await setup.call(
      this,
      createAttr('myfield', 'string', { editType: 'textarea', defaultValue: 'default' })
    );
    assert
      .dom('.field [class^="hds-form-field"] textarea.hds-form-textarea')
      .exists('renders as Hds::Form::Textarea');
    assert
      .dom(`textarea`)
      .exists('renders textarea')
      .hasAttribute('data-test-input', 'myfield', 'textarea has correct `data-test-input` attribute');
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input label');
    assert.dom(GENERAL.inputByAttr('myfield')).hasValue('default', 'renders default value');
    await fillIn(GENERAL.inputByAttr('myfield'), 'bar');
    assert.strictEqual(model.get('myfield'), 'bar');
    assert.ok(spy.calledWith('myfield', 'bar'), 'onChange called with correct args');
  });

  test('it renders: editType=textarea / type=number - as Hds::Form::Textarea', async function (assert) {
    const [model, spy] = await setup.call(
      this,
      createAttr('myfield', 'number', { editType: 'textarea', defaultValue: 123 })
    );
    assert
      .dom('.field [class^="hds-form-field"] textarea.hds-form-textarea')
      .exists('renders as Hds::Form::Textarea');
    assert
      .dom(`textarea`)
      .exists('renders textarea')
      .hasAttribute('data-test-input', 'myfield', 'textarea has correct `data-test-input` attribute');
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input label');
    assert.dom(GENERAL.inputByAttr('myfield')).hasValue('123', 'renders default value');
    await fillIn(GENERAL.inputByAttr('myfield'), 'bar');
    assert.strictEqual(model.get('myfield'), 'bar');
    assert.ok(spy.calledWith('myfield', 'bar'), 'onChange called with correct args');
  });

  test('it renders: editType=textarea / type=string - with passed docLink, helpText, label, placeholder, subText', async function (assert) {
    await setup.call(
      this,
      createAttr('myfield', 'string', {

Review comment (suggestion):
Though not obvious because we have older patterns sprinkled throughout, we generally try to use assert.true instead of assert.ok. The reason is that the intent is clearer: assert.true explicitly checks that the value is === true, whereas assert.ok will pass for any truthy value.


```suggestion
    assert.true(spy.calledWith('myfield', 'bar'), 'onChange called with correct args');
```

Code after:
      .exists('renders `docLink` option as as link inside the subtext');
    assert
      .dom(GENERAL.helpTextByAttr('Some help text'))
      .exists('renders `help text` option as HelperText')
      .hasText('Some help text', 'renders the right help text string from options');
  });

  test('it renders: editType=password / type=string - with validation errors and warnings', async function (assert) {
    this.setProperties({
      attr: createAttr('myfield', 'string', { editType: 'password' }),
      model: { myfield: 'bar' },
      modelValidations: {
        myfield: {
          isValid: false,
          errors: ['Error message #1', 'Error message #2'],
          warnings: ['Warning message #1', 'Warning message #2'],
        },
      },
      onChange: () => {},
    });

    await render(
      hbs`<FormField @attr={{this.attr}} @model={{this.model}} @modelValidations={{this.modelValidations}} @onChange={{this.onChange}} />`
    );
    assert
      .dom(GENERAL.validationErrorByAttr('myfield'))
      .exists('Validation error renders')
      .hasText('Error message #1 Error message #2', 'Validation errors are combined');
    assert
      .dom(GENERAL.validationWarningByAttr('myfield'))
      .exists('Validation warning renders')
      .hasText('Warning message #1 Warning message #2', 'Validation warnings are combined');
  });

  // ––––– editType === 'textarea' –––––

  test('it renders: editType=textarea / type=string - as Hds::Form::Textarea', async function (assert) {
    const [model, spy] = await setup.call(
      this,
      createAttr('myfield', 'string', { editType: 'textarea', defaultValue: 'default' })
    );
    assert
      .dom('.field [class^="hds-form-field"] textarea.hds-form-textarea')
      .exists('renders as Hds::Form::Textarea');
    assert
      .dom(`textarea`)
      .exists('renders textarea')
      .hasAttribute('data-test-input', 'myfield', 'textarea has correct `data-test-input` attribute');
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input label');
    assert.dom(GENERAL.inputByAttr('myfield')).hasValue('default', 'renders default value');
    await fillIn(GENERAL.inputByAttr('myfield'), 'bar');