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

Code before:

  hooks.beforeEach(function () {
    const now = new Date('2023-07-02T00:00:00Z'); // stub "now" for testing
    sinon.replace(timestamp, 'now', sinon.fake.returns(now));

    this.message = new CustomMessage(
      {
        authenticated: true,
        type: 'banner',
        startTime: addDays(startOfDay(timestamp.now()), 1).toISOString(),
      },
      { isNew: true }
    );

    this.renderComponent = () =>
      render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} @messages={{this.messages}} />`, {
        owner: this.engine,
      });
  });

  test('it should display all the create form fields and default radio button values', async function (assert) {
    await this.renderComponent();

    assert.dom(GENERAL.title).hasText('Create message');
    assert
      .dom(`${GENERAL.inputGroupByAttr('authenticated')} legend`)
      .hasText('Where should we display this message?');
    assert.dom(CUSTOM_MESSAGES.radio('authenticated')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('unauthenticated')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('authenticated')).isChecked();
    assert.dom(CUSTOM_MESSAGES.radio('unauthenticated')).isNotChecked();
    assert.dom(`${GENERAL.inputGroupByAttr('type')} legend`).hasText('Type');
    assert.dom(CUSTOM_MESSAGES.radio('banner')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('banner')).isChecked();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).isNotChecked();
    assert.dom(CUSTOM_MESSAGES.field('title')).exists();
    assert.dom(CUSTOM_MESSAGES.field('message')).exists();
    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('');
  });


Review comment (suggestion):
[suggestion] if you use the updated code above, here (and below) you can rely on the `data-test-form-field-label` attribute and use the `GENERAL.fieldLabel` selector

Code after:

  hooks.beforeEach(function () {
    const now = new Date('2023-07-02T00:00:00Z'); // stub "now" for testing
    sinon.replace(timestamp, 'now', sinon.fake.returns(now));

    this.message = new CustomMessage(
      {
        authenticated: true,
        type: 'banner',
        startTime: addDays(startOfDay(timestamp.now()), 1).toISOString(),
      },
      { isNew: true }
    );

    this.renderComponent = () =>
      render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} @messages={{this.messages}} />`, {
        owner: this.engine,
      });
  });

  test('it should display all the create form fields and default radio button values', async function (assert) {
    await this.renderComponent();

    assert.dom(GENERAL.title).hasText('Create message');
    assert.dom(GENERAL.fieldLabelbyAttr('authenticated')).hasText('Where should we display this message?');
    assert.dom(CUSTOM_MESSAGES.radio('authenticated')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('unauthenticated')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('authenticated')).isChecked();
    assert.dom(CUSTOM_MESSAGES.radio('unauthenticated')).isNotChecked();
    assert.dom(GENERAL.fieldLabelbyAttr('type')).hasText('Type');
    assert.dom(CUSTOM_MESSAGES.radio('banner')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).exists();
    assert.dom(CUSTOM_MESSAGES.radio('banner')).isChecked();
    assert.dom(CUSTOM_MESSAGES.radio('modal')).isNotChecked();
    assert.dom(CUSTOM_MESSAGES.field('title')).exists();
    assert.dom(CUSTOM_MESSAGES.field('message')).exists();
    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);