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

Code before:
      .hasAttribute('id', 'myfield', 'input[type="text"] has correct `id` attribute');
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input[type="text"] label');
    assert.dom(GENERAL.inputByAttr('myfield')).hasValue('default', 'renders default value');
    await fillIn(GENERAL.inputByAttr('myfield'), 'bar');
    assert.strictEqual(model.get('myfield'), 'bar');
    assert.true(spy.calledWith('myfield', 'bar'), 'onChange called with correct args');
  });

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

  test('it renders: editType=undefined - with passed characterLimit, docLink, editDisabled, helpText, label, placeholder, subText', async function (assert) {
    await setup.call(
      this,
      createAttr('myfield', 'string', {
        characterLimit: 10,
        docLink: '/docs',
        editDisabled: true,
        helpText: 'Some helpText',
        label: 'Custom label',
        placeholder: 'Custom placeholder',
        subText: 'Some subText',
      })
    );
    assert.dom(GENERAL.fieldLabel()).hasText('Custom label', 'renders the custom label from options');
    assert
      .dom(GENERAL.inputByAttr('myfield'))
      .hasAttribute('placeholder', 'Custom placeholder', 'renders the placeholder from options')
      .hasAttribute('disabled', '', 'renders the disabled attribute from options')
      .hasAttribute('maxlength', '10', 'renders the characterLimit from options');
    assert
      .dom(GENERAL.helpTextByAttr('Some subText'))

Review comment (suggestion):
```suggestion
    await fillIn(GENERAL.inputByAttr('myfield'), 1234);
```

Code after:
      .hasAttribute('id', 'myfield', 'input[type="text"] has correct `id` attribute');
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input[type="text"] label');
    assert.dom(GENERAL.inputByAttr('myfield')).hasValue('default', 'renders default value');
    await fillIn(GENERAL.inputByAttr('myfield'), 'bar');
    assert.strictEqual(model.get('myfield'), 'bar');
    assert.true(spy.calledWith('myfield', 'bar'), 'onChange called with correct args');
  });

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

  test('it renders: editType=undefined - with passed characterLimit, docLink, editDisabled, helpText, label, placeholder, subText', async function (assert) {
    await setup.call(
      this,
      createAttr('myfield', 'string', {
        characterLimit: 10,
        docLink: '/docs',
        editDisabled: true,
        helpText: 'Some helpText',
        label: 'Custom label',
        placeholder: 'Custom placeholder',
        subText: 'Some subText',
      })
    );
    assert.dom(GENERAL.fieldLabel()).hasText('Custom label', 'renders the custom label from options');
    assert
      .dom('.hds-form-field__character-count')
      .containsText('10', 'renders the characterLimit helper text from options');
    assert
      .dom(GENERAL.inputByAttr('myfield'))
      .hasAttribute('placeholder', 'Custom placeholder', 'renders the placeholder from options')
      .hasAttribute('disabled', '', 'renders the disabled attribute from options')