mirror of
https://github.com/hashicorp/vault.git
synced 2026-02-03 20:40:45 -05:00
UI: Custom messages acceptance tests (#25081)
* WIP acceptance tess * More acceptance tests! * Update acceptance tests to use general and message selectors * Fix tests * Add more tests * Add multiple message modal test * Fix failing test * Add preview tests! * Fix tests
This commit is contained in:
Kianna
GitHub
parent
8f6dfaaf67
commit
edf4caa63f
6 changed files with 222 additions and 5 deletions
|
|
@ -23,7 +23,8 @@
|
|||
</FormField>
|
||||
{{#if (and (eq attr.name "message") (not @message.authenticated))}}
|
||||
<Hds::Alert class="has-top-margin-negative-m has-bottom-margin-l" @type="compact" @color="highlight" as |A|>
|
||||
<A.Description>Note: Do not include sensitive info in this message since users are unauthenticated at this stage.</A.Description>
|
||||
<A.Description data-test-unauth-info>Note: Do not include sensitive info in this message since users are
|
||||
unauthenticated at this stage.</A.Description>
|
||||
</Hds::Alert>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
@size="large"
|
||||
@color="warning"
|
||||
@onClose={{fn (mut this.showMultipleModalsMessage) false}}
|
||||
data-test-modal="preview modal"
|
||||
data-test-modal="multiple modal messages"
|
||||
as |M|
|
||||
>
|
||||
<M.Header data-test-modal-title="Warning: more than one modal">
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
{{#if @messages.length}}
|
||||
{{#each this.formattedMessages as |message|}}
|
||||
<LinkedBlock
|
||||
data-test-list-item={{message.id}}
|
||||
data-test-list-item={{message.title}}
|
||||
class="list-item-row"
|
||||
@params={{array "messages.message.details" message.id}}
|
||||
@linkPrefix="vault.cluster.config-ui"
|
||||
|
|
|
|||
209
ui/tests/acceptance/config-ui/messages/messages-test.js
Normal file
209
ui/tests/acceptance/config-ui/messages/messages-test.js
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
/**
|
||||
* Copyright (c) HashiCorp, Inc.
|
||||
* SPDX-License-Identifier: BUSL-1.1
|
||||
*/
|
||||
|
||||
import { module, test } from 'qunit';
|
||||
import { setupApplicationTest } from 'ember-qunit';
|
||||
import { setupMirage } from 'ember-cli-mirage/test-support';
|
||||
import { click, visit, fillIn, currentRouteName } from '@ember/test-helpers';
|
||||
import authPage from 'vault/tests/pages/auth';
|
||||
import logout from 'vault/tests/pages/logout';
|
||||
import { format, addDays, startOfDay } from 'date-fns';
|
||||
import { datetimeLocalStringFormat } from 'core/utils/date-formatters';
|
||||
import { PAGE } from 'vault/tests/helpers/config-ui/message-selectors';
|
||||
|
||||
module('Acceptance | config-ui', function (hooks) {
|
||||
setupApplicationTest(hooks);
|
||||
setupMirage(hooks);
|
||||
|
||||
hooks.beforeEach(async function () {
|
||||
this.createMessage = async (messageType = 'banner', endTime = '2023-12-12', authenticated = true) => {
|
||||
await visit(`vault/config-ui/messages?authenticated=${authenticated}`);
|
||||
await click(PAGE.button('create message'));
|
||||
await fillIn(PAGE.input('title'), 'Awesome custom message title');
|
||||
await click(PAGE.radio(messageType));
|
||||
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)
|
||||
);
|
||||
if (endTime) {
|
||||
await click('#specificDate');
|
||||
await fillIn(
|
||||
PAGE.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(PAGE.button('create-message'));
|
||||
};
|
||||
await authPage.login();
|
||||
});
|
||||
hooks.afterEach(async function () {
|
||||
await logout.visit();
|
||||
});
|
||||
|
||||
test('it should show an empty state when no messages are created', async function (assert) {
|
||||
assert.expect(4);
|
||||
await visit('vault/config-ui/messages');
|
||||
assert.dom('[data-test-component="empty-state"]').exists();
|
||||
assert.dom(PAGE.emptyStateTitle).hasText('No messages yet');
|
||||
await click(PAGE.tab('On login page'));
|
||||
assert.dom('[data-test-component="empty-state"]').exists();
|
||||
assert.dom(PAGE.emptyStateTitle).hasText('No messages yet');
|
||||
});
|
||||
|
||||
module('Authenticated messages', function () {
|
||||
test('it should create, edit, view, and delete a message', async function (assert) {
|
||||
assert.expect(3);
|
||||
await this.createMessage();
|
||||
assert.dom(PAGE.title).hasText('Awesome custom message title', 'on the details screen');
|
||||
await click('[data-test-link="edit"]');
|
||||
await fillIn(PAGE.input('title'), 'Edited custom message title');
|
||||
await click(PAGE.button('create-message'));
|
||||
assert.dom(PAGE.title).hasText('Edited 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'
|
||||
);
|
||||
});
|
||||
test('it should show multiple messages modal', async function (assert) {
|
||||
assert.expect(4);
|
||||
await this.createMessage('modal', null);
|
||||
assert.dom(PAGE.title).hasText('Awesome custom message title');
|
||||
await this.createMessage('modal', null);
|
||||
assert.dom(PAGE.modal('multiple modal messages')).exists();
|
||||
assert
|
||||
.dom(PAGE.modalTitle('Warning: more than one modal'))
|
||||
.hasText('Warning: more than one modal after the user logs in');
|
||||
await click(PAGE.modalButton('cancel'));
|
||||
await visit('vault/config-ui/messages');
|
||||
await click(PAGE.listItem('Awesome custom message title'));
|
||||
await click(PAGE.confirmActionButton('Delete message'));
|
||||
await click(PAGE.confirmButton);
|
||||
assert.dom('[data-test-component="empty-state"]').exists('Message was deleted');
|
||||
});
|
||||
test('it should display preview a message when all required fields are filled out', async function (assert) {
|
||||
assert.expect(2);
|
||||
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('[data-test-kv-key="0"]', 'Learn more');
|
||||
await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
|
||||
await click(PAGE.button('preview'));
|
||||
assert.dom(PAGE.modal('preview image')).exists();
|
||||
await click(PAGE.modalButton('Close'));
|
||||
await click(PAGE.radio('modal'));
|
||||
await click(PAGE.button('preview'));
|
||||
assert.dom(PAGE.modal('preview modal')).exists();
|
||||
});
|
||||
test('it should not display preview a message when all required fields are not filled out', async function (assert) {
|
||||
assert.expect(2);
|
||||
await visit(`vault/config-ui/messages`);
|
||||
await click(PAGE.button('create message'));
|
||||
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('[data-test-kv-key="0"]', 'Learn more');
|
||||
await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
|
||||
await click(PAGE.button('preview'));
|
||||
assert.dom(PAGE.modal('preview image')).doesNotExist();
|
||||
assert.dom(PAGE.input('title')).hasClass('has-error-border');
|
||||
});
|
||||
});
|
||||
|
||||
module('Unauthenticated messages', function () {
|
||||
test('it should create, edit, view, and delete a message', async function (assert) {
|
||||
assert.expect(3);
|
||||
await this.createMessage('banner', null, false);
|
||||
assert.dom(PAGE.title).hasText('Awesome custom message title', 'on the details screen');
|
||||
await click('[data-test-link="edit"]');
|
||||
await fillIn(PAGE.input('title'), 'Edited custom message title');
|
||||
await click(PAGE.button('create-message'));
|
||||
assert.dom(PAGE.title).hasText('Edited 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'
|
||||
);
|
||||
});
|
||||
test('it should show multiple messages modal', async function (assert) {
|
||||
assert.expect(4);
|
||||
await this.createMessage('modal', null, false);
|
||||
assert.dom(PAGE.title).hasText('Awesome custom message title');
|
||||
await this.createMessage('modal', null, false);
|
||||
assert.dom(PAGE.modal('multiple modal messages')).exists();
|
||||
assert
|
||||
.dom(PAGE.modalTitle('Warning: more than one modal'))
|
||||
.hasText('Warning: more than one modal on the login page');
|
||||
await click(PAGE.modalButton('cancel'));
|
||||
await visit('vault/config-ui/messages?authenticated=false');
|
||||
await click(PAGE.listItem('Awesome custom message title'));
|
||||
await click(PAGE.confirmActionButton('Delete message'));
|
||||
await click(PAGE.confirmButton);
|
||||
assert.dom('[data-test-component="empty-state"]').exists('Message was deleted');
|
||||
});
|
||||
test('it should show info message on create and edit form', async function (assert) {
|
||||
assert.expect(1);
|
||||
await visit('vault/config-ui/messages?authenticated=false');
|
||||
await click(PAGE.button('create message'));
|
||||
assert
|
||||
.dom(PAGE.unauthCreateFormInfo)
|
||||
.hasText(
|
||||
'Note: Do not include sensitive info in this message since users are unauthenticated at this stage.'
|
||||
);
|
||||
});
|
||||
test('it should display preview a message when all required fields are filled out', async function (assert) {
|
||||
assert.expect(2);
|
||||
await visit('vault/config-ui/messages?authenticated=false');
|
||||
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('[data-test-kv-key="0"]', 'Learn more');
|
||||
await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
|
||||
await click(PAGE.button('preview'));
|
||||
assert.dom(PAGE.modal('preview image')).exists();
|
||||
await click(PAGE.modalButton('Close'));
|
||||
await click(PAGE.radio('modal'));
|
||||
await click(PAGE.button('preview'));
|
||||
assert.dom(PAGE.modal('preview modal')).exists();
|
||||
});
|
||||
test('it should not display preview a message when all required fields are not filled out', async function (assert) {
|
||||
assert.expect(2);
|
||||
await visit('vault/config-ui/messages?authenticated=false');
|
||||
await click(PAGE.button('create message'));
|
||||
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('[data-test-kv-key="0"]', 'Learn more');
|
||||
await fillIn('[data-test-kv-value="0"]', 'www.learn.com');
|
||||
await click(PAGE.button('preview'));
|
||||
assert.dom(PAGE.modal('preview image')).doesNotExist();
|
||||
assert.dom(PAGE.input('title')).hasClass('has-error-border');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -3,13 +3,17 @@
|
|||
* SPDX-License-Identifier: MPL-2.0
|
||||
*/
|
||||
|
||||
import { SELECTORS as GENERAL } from 'vault/tests/helpers/general-selectors';
|
||||
|
||||
export const PAGE = {
|
||||
// General selectors that are common between pages
|
||||
...GENERAL,
|
||||
inlineErrorMessage: `[data-test-inline-error-message]`,
|
||||
unauthCreateFormInfo: '[data-test-unauth-info]',
|
||||
radio: (radioName) => `[data-test-radio="${radioName}"]`,
|
||||
field: (fieldName) => `[data-test-field="${fieldName}"]`,
|
||||
input: (input) => `[data-test-input="${input}"]`,
|
||||
button: (buttonName) => `[data-test-button="${buttonName}"]`,
|
||||
inlineErrorMessage: `[data-test-inline-error-message]`,
|
||||
fieldVaildation: (fieldName) => `[data-test-field-validation="${fieldName}"]`,
|
||||
modal: (name) => `[data-test-modal="${name}"]`,
|
||||
modalTitle: (title) => `[data-test-modal-title="${title}"]`,
|
||||
|
|
@ -21,4 +25,6 @@ export const PAGE = {
|
|||
alertAction: (name) => `[data-test-custom-alert-action="${name}"]`,
|
||||
badge: (name) => `[data-test-badge="${name}"]`,
|
||||
tab: (name) => `[data-test-custom-messages-tab="${name}"]`,
|
||||
confirmActionButton: (name) => `[data-test-confirm-action="${name}"]`,
|
||||
listItem: (name) => `[data-test-list-item="${name}"]`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export const SELECTORS = {
|
|||
filterInput: '[data-test-filter-input]',
|
||||
confirmModalInput: '[data-test-confirmation-modal-input]',
|
||||
confirmButton: '[data-test-confirm-button]',
|
||||
confirmTrigger: '[data-test-confirm-action-trigger]',
|
||||
emptyStateTitle: '[data-test-empty-state-title]',
|
||||
emptyStateMessage: '[data-test-empty-state-message]',
|
||||
emptyStateActions: '[data-test-empty-state-actions]',
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ module('Integration | Component | messages/page/list', function (hooks) {
|
|||
});
|
||||
assert.dom('[data-test-icon="message-circle"]').exists();
|
||||
for (const message of this.messages) {
|
||||
assert.dom(`[data-test-list-item="${message.id}"]`).exists();
|
||||
assert.dom(PAGE.listItem('Message title 1')).exists();
|
||||
assert.dom(`[data-linked-block-title="${message.id}"]`).hasText(message.title);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue