716f25162a
* add initial Confirm component to secrets list page * use ember-wormholes to render confirmation message * use maybe-in-element instead of ember-wormhole * hide overlay initially * animate confirm overlay left and right on click * hide overlay in the DOM to properly set height * adjust height when showing/hiding confirm-overlay * disable confirmation buttons until trigger has been rendered * adjust height of confirm-wrapper instead of confirm * move Confirm/ to core * only add style attribute when a height property exists * fix indentation * wip - use new Confirm inside status menu * add Confirm to Storybook * ensure confirm links have proper styling in Storybook and outside popup-menu * fix height transition * disable no-inline-styles * add test selector * remove comment * consolidate Message into Trigger to make Confirm easier to use * use new Trigger API in status menu * remove height transition * fix binding inline style warning * rename confirmMessage to message * update Confirm for Storybook * fix indentation * do not pass in onCancel from outer template because it is static * add jsdoc comments to Trigger * wip - add trigger and confirm to storybook * fix status menu styling * fix styling of confirm stories * use new Confirm on secrets engine list * use bulma speed variable * fix indentation * re-renable eslint no-inline-styles * showConfirm when rendered trigger matches id * fix background color on namespace picker * do not expose onTrigger * Revert "re-renable eslint no-inline-styles" This reverts commit c7b2a9097f177a2876afaaec6020f73b07bad3c7. * rename Confirm Trigger to Message * add tests * update JSDocs * focus trigger after cancelling the confirm message * update Confirm JSDocs * differentiate between ConfirmAction and Confirm * add Message to Storybook * re-enable eslint import/extensions * update confirmButtonText to Revoke token * remove linebreak and extra whitespace * fix typo * add loading to empty button * fix more typos * only show Message contents when showConfirm is true * no need to disable the confirm buttons since they only render in the DOM when showConfirm is true * use Confirm to delete aws roles * use Confirm to delete pki roles * use Confirm to delete ssh roles * add Confirm to entity alias page * fix confirm button text on Revoke token in status menu * ensure you can use tab to revoke a token from status menu * reset the open trigger after the confirm has been confirmed * use Confirm on identity list pages * fix Disable engine confirmation text * use <PopupMenu /> angle brack syntax * use Confirm on policies list page * use Confirm for namespaces * use Confirm for kmip scopes * use Confirm for deleting kmip roles * use Confirm for revoking KMIP credentials * fix Revoke token triggerText
103 lines
2.9 KiB
JavaScript
103 lines
2.9 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { render, click } from '@ember/test-helpers';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import sinon from 'sinon';
|
|
|
|
module('Integration | Component | Confirm', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
hooks.beforeEach(function() {
|
|
this.set('id', 'foo');
|
|
this.set('title', 'Are you sure?');
|
|
this.set('message', 'You will not be able to recover this item later.');
|
|
this.set('triggerText', 'Click me!');
|
|
this.set('onConfirm', sinon.spy());
|
|
});
|
|
|
|
test('it renders', async function(assert) {
|
|
await render(hbs`
|
|
<Confirm as |c|>
|
|
<c.Message
|
|
@id={{id}}
|
|
@title={{title}}
|
|
@triggerText={{triggerText}}
|
|
@message={{message}}
|
|
@onConfirm={{onConfirm}}
|
|
/>
|
|
</Confirm>
|
|
`);
|
|
|
|
assert.dom('.confirm-wrapper').exists();
|
|
assert.dom('.confirm').containsText(this.triggerText);
|
|
});
|
|
|
|
test('does not show the confirmation message until it is triggered', async function(assert) {
|
|
await render(hbs`
|
|
<Confirm as |c|>
|
|
<c.Message
|
|
@id={{id}}
|
|
@title={{title}}
|
|
@triggerText={{triggerText}}
|
|
@message={{message}}
|
|
@onConfirm={{onConfirm}}
|
|
/>
|
|
</Confirm>
|
|
`);
|
|
assert.dom('.confirm-overlay').doesNotContainText(this.message);
|
|
|
|
await click('[data-test-confirm-action-trigger]');
|
|
|
|
assert.dom('.confirm-overlay').containsText(this.title);
|
|
assert.dom('.confirm-overlay').containsText(this.message);
|
|
});
|
|
|
|
test('it calls onConfirm when the confirm button is clicked', async function(assert) {
|
|
await render(hbs`
|
|
<Confirm as |c|>
|
|
<c.Message
|
|
@id={{id}}
|
|
@title={{title}}
|
|
@triggerText={{triggerText}}
|
|
@message={{message}}
|
|
@onConfirm={{onConfirm}}
|
|
/>
|
|
</Confirm>
|
|
`);
|
|
await click('[data-test-confirm-action-trigger]');
|
|
await click('[data-test-confirm-button=true]');
|
|
|
|
assert.ok(this.onConfirm.calledOnce);
|
|
});
|
|
|
|
test('it shows only the active triggers message', async function(assert) {
|
|
await render(hbs`
|
|
<Confirm as |c|>
|
|
<c.Message
|
|
@id={{id}}
|
|
@title={{title}}
|
|
@triggerText={{triggerText}}
|
|
@message={{message}}
|
|
@onConfirm={{onConfirm}}
|
|
/>
|
|
<c.Message
|
|
@id='bar'
|
|
@title='Wow'
|
|
@message='Bazinga!'
|
|
@onConfirm={{onConfirm}}
|
|
/>
|
|
</Confirm>
|
|
`);
|
|
|
|
await click(`[data-test-confirm-action-trigger=${this.id}]`);
|
|
assert.dom('.confirm-overlay').containsText(this.title);
|
|
assert.dom('.confirm-overlay').containsText(this.message);
|
|
|
|
await click('[data-test-confirm-cancel-button]');
|
|
|
|
await click("[data-test-confirm-action-trigger='bar']");
|
|
assert.dom('.confirm-overlay').containsText('Wow');
|
|
assert.dom('.confirm-overlay').containsText('Bazinga!');
|
|
});
|
|
});
|