UI: Add acceptance tests (#25313)

* Add tests

* Move tests

* Rename files

* Update test names

ui/lib/config-ui/addon/templates/messages/create.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<Messages::Page::CreateAndEditMessageForm
+<Messages::Page::CreateAndEdit
   @message={{this.model.message}}
   @messages={{this.model.messages}}
   @hasSomeActiveModals={{this.model.hasSomeActiveModals}}

ui/lib/config-ui/addon/templates/messages/message/edit.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<Messages::Page::CreateAndEditMessageForm
+<Messages::Page::CreateAndEdit
   @message={{this.model.message}}
   @messages={{this.model.messages}}
   @hasSomeActiveModals={{this.model.hasSomeActiveModals}}

ui/tests/acceptance/config-ui/messages/messages-test.js

@@ -76,6 +76,7 @@ module('Acceptance | config-ui', function (hooks) {
         'redirects to messages page after delete'
       );
     });
+
     test('it should show multiple messages modal', async function (assert) {
       assert.expect(4);
       await this.createMessage('modal', null);

ui/tests/acceptance/config-ui/messages/messages-unauth-auth-test.js

@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { click, visit, fillIn, currentRouteName } from '@ember/test-helpers';
+import { PAGE } from 'vault/tests/helpers/config-ui/message-selectors';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import authPage from 'vault/tests/pages/auth';
+import { datetimeLocalStringFormat } from 'core/utils/date-formatters';
+import { format, addDays, startOfDay } from 'date-fns';
+import { createNS, runCmd } from '../../../helpers/commands';
+
+const unauthenticatedMessageResponse = {
+  request_id: '664fbad0-fcd8-9023-4c5b-81a7962e9f4b',
+  lease_id: '',
+  renewable: false,
+  lease_duration: 0,
+  data: {
+    key_info: {
+      'some-awesome-id-2': {
+        authenticated: false,
+        end_time: null,
+        link: {
+          'some alert link': 'world',
+        },
+        message: 'aGVsbG8gd29ybGQgaGVsbG8gd29scmQ=',
+        options: null,
+        start_time: '2024-01-04T08:00:00Z',
+        title: 'Banner title',
+        type: 'banner',
+      },
+      'some-awesome-id-1': {
+        authenticated: false,
+        end_time: null,
+        message: 'aGVyZSBpcyBhIGNvb2wgbWVzc2FnZQ==',
+        options: null,
+        start_time: '2024-01-01T08:00:00Z',
+        title: 'Modal title',
+        type: 'modal',
+      },
+    },
+    keys: ['some-awesome-id-2', 'some-awesome-id-1'],
+  },
+  wrap_info: null,
+  warnings: null,
+  auth: null,
+  mount_type: '',
+};
+
+module('Acceptance | auth custom messages auth tests', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  module('auth and unauth messages', function (hooks) {
+    hooks.beforeEach(function () {
+      return this.server.get('/sys/internal/ui/mounts', () => ({}));
+    });
+
+    test('it shows the alert banner and modal message', async function (assert) {
+      this.server.get('/sys/internal/ui/unauthenticated-messages', function () {
+        return unauthenticatedMessageResponse;
+      });
+      await visit('/vault/auth');
+      const modalId = 'some-awesome-id-1';
+      const alertId = 'some-awesome-id-2';
+      assert.dom(PAGE.modal(modalId)).exists();
+      assert.dom(PAGE.modalTitle(modalId)).hasText('Modal title');
+      assert.dom(PAGE.modalBody(modalId)).exists();
+      assert.dom(PAGE.modalBody(modalId)).hasText('here is a cool message');
+      await click(PAGE.modalButton(modalId));
+      assert.dom(PAGE.alertTitle(alertId)).hasText('Banner title');
+      assert.dom(PAGE.alertDescription(alertId)).hasText('hello world hello wolrd');
+      assert.dom(PAGE.alertAction('link')).hasText('some alert link');
+    });
+    test('it shows the multiple modal messages', async function (assert) {
+      const modalIdOne = 'some-awesome-id-2';
+      const modalIdTwo = 'some-awesome-id-1';
+
+      this.server.get('/sys/internal/ui/unauthenticated-messages', function () {
+        unauthenticatedMessageResponse.data.key_info[modalIdOne].type = 'modal';
+        unauthenticatedMessageResponse.data.key_info[modalIdOne].title = 'Modal title 1';
+        unauthenticatedMessageResponse.data.key_info[modalIdTwo].type = 'modal';
+        unauthenticatedMessageResponse.data.key_info[modalIdTwo].title = 'Modal title 2';
+        return unauthenticatedMessageResponse;
+      });
+      await visit('/vault/auth');
+      assert.dom(PAGE.modal(modalIdOne)).exists();
+      assert.dom(PAGE.modalTitle(modalIdOne)).hasText('Modal title 1');
+      assert.dom(PAGE.modalBody(modalIdOne)).exists();
+      assert.dom(PAGE.modalBody(modalIdOne)).hasText('hello world hello wolrd some alert link');
+      await click(PAGE.modalButton(modalIdOne));
+      assert.dom(PAGE.modal(modalIdTwo)).exists();
+      assert.dom(PAGE.modalTitle(modalIdTwo)).hasText('Modal title 2');
+      assert.dom(PAGE.modalBody(modalIdTwo)).exists();
+      assert.dom(PAGE.modalBody(modalIdTwo)).hasText('here is a cool message');
+      await click(PAGE.modalButton(modalIdTwo));
+    });
+    test('it shows the multiple banner messages', async function (assert) {
+      const bannerIdOne = 'some-awesome-id-2';
+      const bannerIdTwo = 'some-awesome-id-1';
+
+      this.server.get('/sys/internal/ui/unauthenticated-messages', function () {
+        unauthenticatedMessageResponse.data.key_info[bannerIdOne].type = 'banner';
+        unauthenticatedMessageResponse.data.key_info[bannerIdOne].title = 'Banner title 1';
+        unauthenticatedMessageResponse.data.key_info[bannerIdTwo].type = 'banner';
+        unauthenticatedMessageResponse.data.key_info[bannerIdTwo].title = 'Banner title 2';
+        return unauthenticatedMessageResponse;
+      });
+      await visit('/vault/auth');
+      assert.dom(PAGE.alertTitle(bannerIdOne)).hasText('Banner title 1');
+      assert.dom(PAGE.alertDescription(bannerIdOne)).hasText('hello world hello wolrd');
+      assert.dom(PAGE.alertTitle(bannerIdTwo)).hasText('Banner title 2');
+      assert.dom(PAGE.alertDescription(bannerIdTwo)).hasText('here is a cool message');
+      assert.dom(PAGE.alertAction('link')).hasText('some alert link');
+    });
+  });
+
+  test('it should display an active authenticated message after creation on enterprise', async function (assert) {
+    assert.expect(4);
+    await authPage.login();
+    await visit('vault/config-ui/messages');
+    await click(PAGE.button('create message'));
+    await fillIn(PAGE.input('title'), 'Awesome custom message title');
+    await click(PAGE.radio('banner'));
+    await fillIn(
+      PAGE.input('message'),
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare.'
+    );
+    await fillIn(
+      PAGE.input('startTime'),
+      format(addDays(startOfDay(new Date('2023-12-12')), 1), datetimeLocalStringFormat)
+    );
+    await fillIn('[data-test-kv-key="0"]', 'Learn more');
+    await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
+
+    await click(PAGE.button('create-message'));
+    assert.dom(PAGE.title).hasText('Awesome custom message title', 'on the details screen');
+    assert.dom('.hds-alert').exists('active custom message displays on authenticated.');
+    await runCmd(createNS('world'), false);
+    await visit('vault/config-ui/messages');
+    assert.dom('.hds-alert').exists('active custom message displays on namespace authenticated.');
+    await click(PAGE.listItem('Awesome custom message title'));
+    await click(PAGE.confirmActionButton('Delete message'));
+    await click(PAGE.confirmButton);
+    assert.strictEqual(
+      currentRouteName(),
+      'vault.cluster.config-ui.messages.index',
+      'redirects to messages page after delete'
+    );
+  });
+});

ui/tests/acceptance/custom-messages-auth-test.js

@@ -1,114 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupApplicationTest } from 'ember-qunit';
-import { click, visit } from '@ember/test-helpers';
-import { PAGE } from 'vault/tests/helpers/config-ui/message-selectors';
-import { setupMirage } from 'ember-cli-mirage/test-support';
-
-const unauthenticatedMessageResponse = {
-  request_id: '664fbad0-fcd8-9023-4c5b-81a7962e9f4b',
-  lease_id: '',
-  renewable: false,
-  lease_duration: 0,
-  data: {
-    key_info: {
-      'some-awesome-id-2': {
-        authenticated: false,
-        end_time: null,
-        link: {
-          'some alert link': 'world',
-        },
-        message: 'aGVsbG8gd29ybGQgaGVsbG8gd29scmQ=',
-        options: null,
-        start_time: '2024-01-04T08:00:00Z',
-        title: 'Banner title',
-        type: 'banner',
-      },
-      'some-awesome-id-1': {
-        authenticated: false,
-        end_time: null,
-        message: 'aGVyZSBpcyBhIGNvb2wgbWVzc2FnZQ==',
-        options: null,
-        start_time: '2024-01-01T08:00:00Z',
-        title: 'Modal title',
-        type: 'modal',
-      },
-    },
-    keys: ['some-awesome-id-2', 'some-awesome-id-1'],
-  },
-  wrap_info: null,
-  warnings: null,
-  auth: null,
-  mount_type: '',
-};
-
-module('Acceptance | auth custom messages auth tests', function (hooks) {
-  setupApplicationTest(hooks);
-  setupMirage(hooks);
-
-  hooks.beforeEach(function () {
-    return this.server.get('/sys/internal/ui/mounts', () => ({}));
-  });
-
-  test('it shows the alert banner and modal message', async function (assert) {
-    this.server.get('/sys/internal/ui/unauthenticated-messages', function () {
-      return unauthenticatedMessageResponse;
-    });
-    await visit('/vault/auth');
-    const modalId = 'some-awesome-id-1';
-    const alertId = 'some-awesome-id-2';
-    assert.dom(PAGE.modal(modalId)).exists();
-    assert.dom(PAGE.modalTitle(modalId)).hasText('Modal title');
-    assert.dom(PAGE.modalBody(modalId)).exists();
-    assert.dom(PAGE.modalBody(modalId)).hasText('here is a cool message');
-    await click(PAGE.modalButton(modalId));
-    assert.dom(PAGE.alertTitle(alertId)).hasText('Banner title');
-    assert.dom(PAGE.alertDescription(alertId)).hasText('hello world hello wolrd');
-    assert.dom(PAGE.alertAction('link')).hasText('some alert link');
-  });
-  test('it shows the multiple modal messages', async function (assert) {
-    const modalIdOne = 'some-awesome-id-2';
-    const modalIdTwo = 'some-awesome-id-1';
-
-    this.server.get('/sys/internal/ui/unauthenticated-messages', function () {
-      unauthenticatedMessageResponse.data.key_info[modalIdOne].type = 'modal';
-      unauthenticatedMessageResponse.data.key_info[modalIdOne].title = 'Modal title 1';
-      unauthenticatedMessageResponse.data.key_info[modalIdTwo].type = 'modal';
-      unauthenticatedMessageResponse.data.key_info[modalIdTwo].title = 'Modal title 2';
-      return unauthenticatedMessageResponse;
-    });
-    await visit('/vault/auth');
-    assert.dom(PAGE.modal(modalIdOne)).exists();
-    assert.dom(PAGE.modalTitle(modalIdOne)).hasText('Modal title 1');
-    assert.dom(PAGE.modalBody(modalIdOne)).exists();
-    assert.dom(PAGE.modalBody(modalIdOne)).hasText('hello world hello wolrd some alert link');
-    await click(PAGE.modalButton(modalIdOne));
-    assert.dom(PAGE.modal(modalIdTwo)).exists();
-    assert.dom(PAGE.modalTitle(modalIdTwo)).hasText('Modal title 2');
-    assert.dom(PAGE.modalBody(modalIdTwo)).exists();
-    assert.dom(PAGE.modalBody(modalIdTwo)).hasText('here is a cool message');
-    await click(PAGE.modalButton(modalIdTwo));
-  });
-  test('it shows the multiple banner messages', async function (assert) {
-    const bannerIdOne = 'some-awesome-id-2';
-    const bannerIdTwo = 'some-awesome-id-1';
-
-    this.server.get('/sys/internal/ui/unauthenticated-messages', function () {
-      unauthenticatedMessageResponse.data.key_info[bannerIdOne].type = 'banner';
-      unauthenticatedMessageResponse.data.key_info[bannerIdOne].title = 'Banner title 1';
-      unauthenticatedMessageResponse.data.key_info[bannerIdTwo].type = 'banner';
-      unauthenticatedMessageResponse.data.key_info[bannerIdTwo].title = 'Banner title 2';
-      return unauthenticatedMessageResponse;
-    });
-    await visit('/vault/auth');
-    assert.dom(PAGE.alertTitle(bannerIdOne)).hasText('Banner title 1');
-    assert.dom(PAGE.alertDescription(bannerIdOne)).hasText('hello world hello wolrd');
-    assert.dom(PAGE.alertTitle(bannerIdTwo)).hasText('Banner title 2');
-    assert.dom(PAGE.alertDescription(bannerIdTwo)).hasText('here is a cool message');
-    assert.dom(PAGE.alertAction('link')).hasText('some alert link');
-  });
-});

ui/tests/integration/components/config-ui/messages/page/create-and-edit-test.js

@@ -13,7 +13,7 @@ import { datetimeLocalStringFormat } from 'core/utils/date-formatters';
 import { format, addDays, startOfDay } from 'date-fns';
 import { PAGE } from 'vault/tests/helpers/config-ui/message-selectors';
 
-module('Integration | Component | messages/page/create-and-edit-message', function (hooks) {
+module('Integration | Component | messages/page/create-and-edit', function (hooks) {
   setupRenderingTest(hooks);
   setupEngine(hooks, 'config-ui');
   setupMirage(hooks);
@@ -27,7 +27,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
   test('it should display all the create form fields and default radio button values', async function (assert) {
     assert.expect(17);
 
-    await render(hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} />`, {
+    await render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} />`, {
       owner: this.engine,
     });
 
@@ -54,7 +54,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
 
   test('it should display validation errors for invalid form fields', async function (assert) {
     assert.expect(8);
-    await render(hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} />`, {
+    await render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} />`, {
       owner: this.engine,
     });
 
@@ -84,7 +84,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
       assert.ok(true, 'POST request made to create message');
     });
 
-    await render(hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} />`, {
+    await render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} />`, {
       owner: this.engine,
     });
     await fillIn(PAGE.input('title'), 'Awesome custom message title');
@@ -108,7 +108,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
 
   test('it should have form vaildations', async function (assert) {
     assert.expect(4);
-    await render(hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} />`, {
+    await render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} />`, {
       owner: this.engine,
     });
     await click(PAGE.button('create-message'));
@@ -134,7 +134,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
       link: { 'Learn more': 'www.learnmore.com' },
     });
     this.message = this.store.peekRecord('config-ui/message', 'hhhhh-iiii-lllll-dddd');
-    await render(hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} />`, {
+    await render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} />`, {
       owner: this.engine,
     });
 
@@ -160,7 +160,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
 
   test('it should show a preview image modal when preview is clicked', async function (assert) {
     assert.expect(6);
-    await render(hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} />`, {
+    await render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} />`, {
       owner: this.engine,
     });
     await fillIn(PAGE.input('title'), 'Awesome custom message title');
@@ -186,7 +186,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
 
   test('it should show a preview modal when preview is clicked', async function (assert) {
     assert.expect(4);
-    await render(hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} />`, {
+    await render(hbs`<Messages::Page::CreateAndEdit @message={{this.message}} />`, {
       owner: this.engine,
     });
     await click(PAGE.radio('modal'));
@@ -230,7 +230,7 @@ module('Integration | Component | messages/page/create-and-edit-message', functi
     this.messages = this.store.peekAll('config-ui/message');
 
     await render(
-      hbs`<Messages::Page::CreateAndEditMessageForm @message={{this.message}} @messages={{this.messages}} @hasSomeActiveModals={{true}} />`,
+      hbs`<Messages::Page::CreateAndEdit @message={{this.message}} @messages={{this.messages}} @hasSomeActiveModals={{true}} />`,
       {
         owner: this.engine,
       }