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

Code before:
      .exists('renders as Hds::Form::Checkbox::Field');
    assert
      .dom(`input[type=checkbox]`)
      .exists('renders input[type="checkbox"]')
      .hasAttribute(
        'data-test-input',
        'myfield',
        'input[type="checkbox"] has correct `data-test-input` attribute'
      );
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input[type="checkbox"] label');
  });

  test('it renders: editType=boolean - unselected by default', async function (assert) {
    await setup.call(this, createAttr('myfield', '-', { editType: 'boolean' }));
    assert.dom(GENERAL.inputByAttr('myfield')).isNotChecked('input[type="checkbox"] is not checked');
  });

  test('it renders: editType=boolean - selected and changes it', async function (assert) {
    const [model, spy] = await setup.call(
      this,
      createAttr('myfield', '-', { editType: 'boolean', defaultValue: 'true' })
    );
    assert.dom(GENERAL.inputByAttr('myfield')).isChecked('input[type="checkbox"] is checked');
    await click(GENERAL.inputByAttr('myfield'));
    assert.false(model.get('myfield'));
    assert.ok(spy.calledWith('myfield', false), 'onChange called with correct args');
  });

  test('it renders: editType=boolean - with passed label, subtext, helptext, doclink', async function (assert) {
    await setup.call(
      this,
      createAttr('myfield', '-', {
        editType: 'boolean',
        label: 'Custom label',
        subText: 'Some subtext',
        helpText: 'Some helptext',
        docLink: '/docs',
      })
    );
    assert.dom(GENERAL.fieldLabel()).hasText('Custom label', 'renders the custom label from options');
    assert
      .dom(GENERAL.helpTextByAttr('Some subtext'))
      .exists('renders `subText` option as HelperText')
      .hasText('Some subtext Learn more here.', 'renders the right subtext string from options');
    assert
      .dom(`${GENERAL.helpTextByAttr('Some subtext')} ${GENERAL.docLinkByAttr('/docs')}`)
      .exists('renders `docLink` option as as link inside the subtext');
    assert
      .dom(GENERAL.helpTextByAttr('Some helptext'))
      .exists('renders `helptext` option as HelperText')
      .hasText('Some helptext', 'renders the right help text string from options');

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. I had a similar comment on Dylan's PR. 
```suggestion
    assert.true(spy.calledWith('myfield', false), 'onChange called with correct args');
```

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

  // ––––– type/editType === 'boolean' –––––

  test('it renders: type=boolean - as Hds::Form::Checkbox', async function (assert) {
    await setup.call(this, createAttr('myfield', 'boolean', { defaultValue: 'false' }));
    assert
      .dom('.field [class^="hds-form-field"] input[type="checkbox"].hds-form-checkbox')
      .exists('renders as Hds::Form::Checkbox::Field');
    assert
      .dom(`input[type=checkbox]`)
      .exists('renders input[type="checkbox"]')
      .hasAttribute(
        'data-test-input',
        'myfield',
        'input[type="checkbox"] has correct `data-test-input` attribute'
      );
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input[type="checkbox"] label');
  });

  test('it renders: editType=boolean - as Hds::Form::Checkbox', async function (assert) {
    await setup.call(this, createAttr('myfield', '-', { editType: 'boolean', defaultValue: 'false' }));
    assert
      .dom('.field [class^="hds-form-field"] input[type="checkbox"].hds-form-checkbox')
      .exists('renders as Hds::Form::Checkbox::Field');
    assert
      .dom(`input[type=checkbox]`)
      .exists('renders input[type="checkbox"]')
      .hasAttribute(
        'data-test-input',
        'myfield',
        'input[type="checkbox"] has correct `data-test-input` attribute'
      );
    assert.dom(GENERAL.fieldLabel()).hasText('Myfield', 'renders the input[type="checkbox"] label');
  });

  test('it renders: editType=boolean - unselected by default', async function (assert) {
    await setup.call(this, createAttr('myfield', '-', { editType: 'boolean' }));
    assert.dom(GENERAL.inputByAttr('myfield')).isNotChecked('input[type="checkbox"] is not checked');
  });

  test('it renders: editType=boolean - selected and changes it', async function (assert) {
    const [model, spy] = await setup.call(
      this,
      createAttr('myfield', '-', { editType: 'boolean', defaultValue: 'true' })
    );
    assert.dom(GENERAL.inputByAttr('myfield')).isChecked('input[type="checkbox"] is checked');
    await click(GENERAL.inputByAttr('myfield'));