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

Code before:
    assert.dom('[data-test-kv-key="0"]').exists();
    assert.dom('[data-test-kv-value="0"]').exists();
    assert
      .dom(CUSTOM_MESSAGES.input('startTime'))
      .hasValue(
        format(addDays(startOfDay(timestamp.now()), 1), datetimeLocalStringFormat),
        `message startTime defaults to midnight of following day. test context startTime: ${
          this.message.startTime
        }, now: ${timestamp.now().toISOString()}`
      );
    assert.dom(CUSTOM_MESSAGES.input('endTime')).hasValue('');
  });

  test('it should display validation errors for invalid form fields', async function (assert) {
    assert.expect(8);

    await this.renderComponent();

    await fillIn(CUSTOM_MESSAGES.input('startTime'), '2024-01-20T00:00');
    await fillIn(CUSTOM_MESSAGES.input('endTime'), '2024-01-01T00:00');
    await click(GENERAL.submitButton);
    assert.dom(CUSTOM_MESSAGES.input('title')).hasClass('has-error-border');
    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');
    assert.dom(`${CUSTOM_MESSAGES.fieldValidation('message')}`).hasText('Message is required.');
    assert.dom(CUSTOM_MESSAGES.input('startTime')).hasClass('has-error-border');
    assert
      .dom(`${CUSTOM_MESSAGES.fieldValidation('startTime')} ${CUSTOM_MESSAGES.inlineErrorMessage}`)
      .hasText('Start time is after end time.');
    assert.dom(CUSTOM_MESSAGES.input('endTime')).hasClass('has-error-border');
    assert
      .dom(`${CUSTOM_MESSAGES.fieldValidation('endTime')} ${CUSTOM_MESSAGES.inlineErrorMessage}`)
      .hasText('End time is before start time.');
  });

  test('it should create new message', async function (assert) {
    assert.expect(1);

    this.server.post('/sys/config/ui/custom-messages', () => {
      assert.true(true, 'POST request made to create message');
    });

    await this.renderComponent();

    await fillIn(CUSTOM_MESSAGES.input('title'), 'create new message title from component');
    await fillIn(
      CUSTOM_MESSAGES.input('message'),
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    );

Review comment (suggestion):
We're in an awkward stage where we are trying to transition over to using the general selectors file as much as possible, but still have lots of use cases that use one-offs like here. When I catch them, I'll help correct.
```suggestion
    assert.dom(GENERAL.inputByAttr('message')).hasClass('hds-form-textarea--is-invalid');
```

Code after:
    assert.dom('[data-test-kv-key="0"]').exists();
    assert.dom('[data-test-kv-value="0"]').exists();
    assert
      .dom(CUSTOM_MESSAGES.input('startTime'))
      .hasValue(
        format(addDays(startOfDay(timestamp.now()), 1), datetimeLocalStringFormat),
        `message startTime defaults to midnight of following day. test context startTime: ${
          this.message.startTime
        }, now: ${timestamp.now().toISOString()}`
      );
    assert.dom(CUSTOM_MESSAGES.input('endTime')).hasValue('');
  });

  test('it should display validation errors for invalid form fields', async function (assert) {
    assert.expect(7);

    await this.renderComponent();

    await fillIn(CUSTOM_MESSAGES.input('startTime'), '2024-01-20T00:00');
    await fillIn(CUSTOM_MESSAGES.input('endTime'), '2024-01-01T00:00');
    await click(GENERAL.submitButton);
    assert.dom(CUSTOM_MESSAGES.input('title')).hasClass('has-error-border');
    assert
      .dom(`${CUSTOM_MESSAGES.fieldValidation('title')} ${CUSTOM_MESSAGES.inlineErrorMessage}`)
      .hasText('Title is required.');
    assert.dom(`${GENERAL.validationErrorByAttr('message')}`).hasText('Message is required.');
    assert.dom(CUSTOM_MESSAGES.input('startTime')).hasClass('has-error-border');
    assert
      .dom(`${CUSTOM_MESSAGES.fieldValidation('startTime')} ${CUSTOM_MESSAGES.inlineErrorMessage}`)
      .hasText('Start time is after end time.');
    assert.dom(CUSTOM_MESSAGES.input('endTime')).hasClass('has-error-border');
    assert
      .dom(`${CUSTOM_MESSAGES.fieldValidation('endTime')} ${CUSTOM_MESSAGES.inlineErrorMessage}`)
      .hasText('End time is before start time.');
  });

  test('it should create new message', async function (assert) {
    assert.expect(1);

    this.server.post('/sys/config/ui/custom-messages', () => {
      assert.true(true, 'POST request made to create message');
    });

    await this.renderComponent();

    await fillIn(CUSTOM_MESSAGES.input('title'), 'create new message title from component');
    await fillIn(
      CUSTOM_MESSAGES.input('message'),
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    );
    await fillIn(