59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
|
import { module, test } from 'qunit';
|
||
|
|
import { setupRenderingTest } from 'vault/tests/helpers';
|
||
|
|
import { render } from '@ember/test-helpers';
|
||
|
|
import { hbs } from 'ember-cli-htmlbars';
|
||
|
|
import { click } from '@ember/test-helpers';
|
||
|
|
|
||
|
|
module('Integration | Component | alert-popup', function (hooks) {
|
||
|
|
setupRenderingTest(hooks);
|
||
|
|
|
||
|
|
hooks.beforeEach(function () {
|
||
|
|
this.set('message', 'some very important alert');
|
||
|
|
this.set('type', 'warning');
|
||
|
|
this.set('close', () => this.set('closed', true));
|
||
|
|
});
|
||
|
|
|
||
|
|
test('it renders the alert popup input', async function (assert) {
|
||
|
|
await render(hbs`
|
||
|
|
<AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
|
||
|
|
`);
|
||
|
|
|
||
|
|
assert.dom(this.element).hasText('Warning some very important alert');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('it invokes the close action', async function (assert) {
|
||
|
|
assert.expect(1);
|
||
|
|
|
||
|
|
await render(hbs`
|
||
|
|
<AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
|
||
|
|
`);
|
||
|
|
await click('.close-button');
|
||
|
|
|
||
|
|
assert.true(this.closed);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('it renders the alert popup with different colors based on types', async function (assert) {
|
||
|
|
await render(hbs`
|
||
|
|
<AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
|
||
|
|
`);
|
||
|
|
|
||
|
|
assert.dom('.message').hasClass('is-highlight');
|
||
|
|
|
||
|
|
this.set('type', 'info');
|
||
|
|
|
||
|
|
await render(hbs`
|
||
|
|
<AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
|
||
|
|
`);
|
||
|
|
|
||
|
|
assert.dom('.message').hasClass('is-info');
|
||
|
|
|
||
|
|
this.set('type', 'danger');
|
||
|
|
|
||
|
|
await render(hbs`
|
||
|
|
<AlertPopup @message={{this.message}} @type={{message-types this.type}} @close={{this.close}} />
|
||
|
|
`);
|
||
|
|
|
||
|
|
assert.dom('.message').hasClass('is-danger');
|
||
|
|
});
|
||
|
|
});
|