Repository: hashicorp/vault
File: ui/tests/integration/components/config-ui/messages/page/create-and-edit-test.js (JavaScript)

Code before:
      format(addDays(startOfDay(new Date('2023-12-12')), 1), datetimeLocalStringFormat)
    );
    await click('#specificDate');
    await fillIn(
      CUSTOM_MESSAGES.input('endTime'),
      format(addDays(startOfDay(new Date('2023-12-12')), 10), datetimeLocalStringFormat)
    );
    await fillIn('[data-test-kv-key="0"]', 'Learn more');
    await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
    await click(GENERAL.submitButton);
  });

  test('it should have form vaildations', async function (assert) {
    await this.renderComponent();

    await click(GENERAL.submitButton);
    assert
      .dom(CUSTOM_MESSAGES.input('title'))
      .hasClass('has-error-border', 'show error border for title field');
    assert
      .dom(`${CUSTOM_MESSAGES.fieldValidation('title')} ${CUSTOM_MESSAGES.inlineErrorMessage}`)
      .hasText('Title is required.');
    assert
      .dom(CUSTOM_MESSAGES.input('message'))
      .hasClass('hds-form-textarea--is-invalid', 'show error border for message field');
    assert.dom(`${CUSTOM_MESSAGES.fieldValidation('message')}`).hasText('Message is required.');
  });

  test('it should prepopulate form if form is in edit mode', async function (assert) {
    assert.expect(13);

    this.message = new CustomMessage({
      id: 'hhhhh-iiii-lllll-dddd',
      type: 'modal',
      authenticated: false,
      title: 'Hello world',
      message: 'Blah blah blah. Some super long message.',
      startTime: new Date('2023-12-12T08:00:00.000Z'),
      endTime: new Date('2023-12-21T08:00:00.000Z'),
      link: { 'Learn more': 'www.learnmore.com' },
    });

    await this.renderComponent();

    assert.dom(GENERAL.title).hasText('Edit message');
    assert.dom(CUSTOM_MESSAGES.radio('authenticated')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('unauthenticated')).isChecked();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).isChecked();
    assert.dom(CUSTOM_MESSAGES.input('title')).hasValue('Hello world');
    assert.dom(CUSTOM_MESSAGES.input('message')).hasValue('Blah blah blah. Some super long message.');

Review comment (suggestion):
```suggestion
    assert.dom(`${GENERAL.validationErrorByAttr('message')}`).hasText('Message is required.');
```

Code after:
    );
    await click('#specificDate');
    await fillIn(
      CUSTOM_MESSAGES.input('endTime'),
      format(addDays(startOfDay(new Date('2023-12-12')), 10), datetimeLocalStringFormat)
    );
    await fillIn('[data-test-kv-key="0"]', 'Learn more');
    await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
    await click(GENERAL.submitButton);
  });

  test('it should have form vaildations', async function (assert) {
    await this.renderComponent();

    await click(GENERAL.submitButton);
    assert
      .dom(CUSTOM_MESSAGES.input('title'))
      .hasClass('has-error-border', 'show error border for title field');
    assert
      .dom(`${CUSTOM_MESSAGES.fieldValidation('title')} ${CUSTOM_MESSAGES.inlineErrorMessage}`)
      .hasText('Title is required.');
    assert.dom(`${GENERAL.validationErrorByAttr('message')}`).hasText('Message is required.');
  });

  test('it should prepopulate form if form is in edit mode', async function (assert) {
    assert.expect(13);

    this.message = new CustomMessage({
      id: 'hhhhh-iiii-lllll-dddd',
      type: 'modal',
      authenticated: false,
      title: 'Hello world',
      message: 'Blah blah blah. Some super long message.',
      startTime: new Date('2023-12-12T08:00:00.000Z'),
      endTime: new Date('2023-12-21T08:00:00.000Z'),
      link: { 'Learn more': 'www.learnmore.com' },
    });

    await this.renderComponent();

    assert.dom(GENERAL.title).hasText('Edit message');
    assert.dom(CUSTOM_MESSAGES.radio('authenticated')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('unauthenticated')).isChecked();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).isChecked();
    assert.dom(CUSTOM_MESSAGES.input('title')).hasValue('Hello world');
    assert.dom(CUSTOM_MESSAGES.input('message')).hasValue('Blah blah blah. Some super long message.');
    assert.dom('[data-test-kv-key="0"]').exists();
    assert.dom('[data-test-kv-key="0"]').hasValue('Learn more');
    assert.dom('[data-test-kv-value="0"]').exists();
    assert.dom('[data-test-kv-value="0"]').hasValue('www.learnmore.com');