test('When `selected` option is provided, it appears in the trigger yielded with the same block as the options', function(assert) {
assert.expect(2);
this.numbers = numbers;
this.render(hbs`
{{#power-select selected="three" options=numbers onchange=(action (mut foo)) as |option|}}
{{option}}
{{/power-select}}
`);
assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'three', 'The selected option show in the trigger');
this.render(hbs`
{{#power-select selected="three" options=numbers onchange=(action (mut foo)) as |option|}}
Selected: {{option}}
{{/power-select}}
`);
assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'Selected: three', 'The selected option uses the same yielded block as the options');
});
test("it sets initial value", async function(assert) {
let date = new Date(2016, 6, 2);
this.set("date", date);
this.render(hbs`{{date-picker value=date}}`);
assert.equal(find("[data-test-date-picker-input]").value, "7/2/2016");
await click("[data-test-date-picker-input]");
assert.ok(findWithAssert('[data-date="2016-07-02"]').classList.contains("ember-power-calendar-day--selected"));
});
test('Multiple select: When passed `disabled=prop`, enabling and disabling that property changes the component', function(assert) {
assert.expect(3);
this.numbers = numbers;
this.selectedNumbers = [numbers[2], numbers[4]];
this.set('shouldBeDisabled', true);
this.render(hbs`
{{#power-select-multiple selected=selectedNumbers onchange=(action (mut foo)) options=numbers disabled=shouldBeDisabled as |option|}}
{{option}}
{{/power-select-multiple}}
`);
let trigger = find('.ember-power-select-trigger');
assert.equal(trigger.attributes['aria-disabled'].value, 'true', 'The trigger has `aria-disabled=true`');
this.set('shouldBeDisabled', false);
assert.notOk(trigger.attributes['aria-expanded']);
assert.notOk(find('.ember-power-select-trigger-multiple-input').disabled, 'The input is not disabled');
});
test("it adds sign on calc", async function(assert) {
this.set("transactionType", "income");
this.render(hbs`{{transaction-value-input transactionType=transactionType}}`);
await click("[data-test-value-display]");
await fillCalcValue("123");
await click('[data-test-calc-key="equals"]');
assert.equal(find("[data-test-value-display]").textContent.trim(), "+123.00");
});
test('encapsulated tasks support injections', async function(assert) {
assert.expect(1);
await visit('/task-injection-test');
let buttonSel = `[data-test-selector="perform-task-w-injection-button"]`;
await click(buttonSel);
assert.equal(find(`[data-test-selector="perform-task-result"]`).textContent, "123-246");
});
test('When hitting ENTER after a search with no results, the component is closed but the onchange function is not invoked', function(assert) {
assert.expect(3);
this.numbers = numbers;
this.handleChange = () => {
assert.ok(false, 'The handle change should not be called');
};
this.render(hbs`
{{#power-select-multiple options=numbers selected=foo onchange=(action handleChange) as |option|}}
{{option}}
{{/power-select-multiple}}
`);
clickTrigger();
typeInSearch('asjdnah');
assert.equal(find('.ember-power-select-option').textContent.trim(), 'No results found');
keyEvent('.ember-power-select-trigger-multiple-input', 'keydown', 13);
assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed');
assert.ok(find('.ember-power-select-trigger-multiple-input') === document.activeElement, 'The input is focused');
});
test("Dropping an object due to destruction", async function (assert) {
await visit('/');
let obj = {
name: 'My Object',
objectId: 'myObject',
details: [{
name: 'Detail',
properties: []
}]
};
await triggerPort('objectInspector:updateObject', obj);
assert.equal(find('.js-object-name').textContent.trim(), 'My Object');
await triggerPort('objectInspector:droppedObject', { objectId: 'myObject' });
assert.notOk(find('.js-object-name'));
});
test(`opens after ${openEvent} and closes after ${closeEvent}`, async function(assert) {
this.render(hbs`
{{#paper-button}}
button
{{#paper-tooltip}}
tooltip
{{/paper-tooltip}}
{{/paper-button}}
`);
await triggerEvent('.md-button', openEvent);
assert.ok(find('md-tooltip'), 'tooltip was rendered');
await triggerEvent('.md-button', closeEvent);
assert.notOk(find('md-tooltip'), 'tooltip was destroyed');
});
test('scrollTo works with a custom scrollToHandler', async function(assert) {
assert.expect(2);
// Override default behavior
const steps = [{
id: 'intro',
options: {
attachTo: '.first-element bottom',
builtInButtons: [
{
classes: 'shepherd-button-secondary cancel-button',
text: 'Exit',
type: 'cancel'
},
{
classes: 'shepherd-button-primary next-button',
text: 'Next',
type: 'next'
}
],
classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
copyStyles: false,
title: 'Welcome to Ember Shepherd!',
text: ['A field that has rested gives a bountiful crop.'],
scrollTo: true,
scrollToHandler() {
return find('#ember-testing-container', document.body).scrollTop = 120;
}
}
}];
// Visit route
await visit('/');
tour.set('steps', steps);
find('#ember-testing-container', document.body).scrollTop = 0;
assert.equal(find('#ember-testing-container', document.body).scrollTop, 0, 'Scroll is initially 0');
await click('.toggleHelpModal');
await click('.shepherd-content .next-button', document.documentElement);
assert.ok(find('#ember-testing-container', document.body).scrollTop === 120, 'Scrolled correctly');
});
test('should render the full path of key/value pair from the root of the object', async function(assert) {
this.set('attributes', commonAttributes);
await render(hbs`{{attributes-table attributes=attributes}}`);
assert.equal(find('[data-test-key]').textContent.trim(), 'key', 'Row renders the key');
assert.equal(find('[data-test-value]').textContent.trim(), 'value', 'Row renders the value');
const deepRow = findAll('[data-test-attributes-section]')[8];
assert.equal(
deepRow.querySelector('[data-test-key]').textContent.trim(),
'so.are.deeply.nested',
'Complex row renders the full path to the key'
);
assert.equal(
deepRow.querySelector('[data-test-prefix]').textContent.trim(),
'so.are.deeply.',
'The prefix is faded to put emphasis on the attribute'
);
assert.equal(deepRow.querySelector('[data-test-value]').textContent.trim(), 'properties');
});
skip('visiting /datasets/dataset/schema', async function(assert) {
assert.expect(2);
defaultScenario(server);
const url = '/datasets/12345/schema';
await visit(url);
assert.equal(currentURL(), url, 'schema route is visitable');
await waitUntil(() => find('.ivy-tabs-tab'));
assert.equal(find('.ivy-tabs-tab.active').textContent.trim(), 'Schema', 'schema tab is selected');
});
test('target - selector', function(assert) {
assert.dialogOpensAndCloses({
openSelector: '#example-target-selector button',
dialogText: 'Target - Selector',
closeSelector: dialogCloseButton,
hasOverlay: false,
whileOpen() {
assert.ok(find(dialogSelector).classList.contains('ember-tether-target-attached-left'), 'has targetAttachment class name');
}
});
});
test('Non-modal page contents', async function(assert) {
assert.expect(3);
await visit('/');
await click('.toggleHelpNonmodal');
assert.ok(document.body.classList.contains('shepherd-active'), 'Body gets class of shepherd-active, when shepherd becomes active');
assert.equal(findAll('.shepherd-enabled', document.documentElement).length, 2, 'attachTo element and tour get shepherd-enabled class');
assert.notOk(find('#shepherdOverlay', document.documentElement), '#shepherdOverlay should not exist, since non-modal');
});
test('Pressing BACKSPACE on the search input when it\'s empty removes the last selection ALSO when that option didn\'t come from the outside', function(assert) {
assert.expect(5);
this.numbers = numbers;
this.render(hbs`
{{#power-select-multiple options=numbers selected=foo onchange=(action (mut foo)) as |option|}}
{{option}}
{{/power-select-multiple}}
`);
clickTrigger();
click(findAll('.ember-power-select-option')[2]);
clickTrigger();
assert.equal(findAll('.ember-power-select-multiple-option').length, 1, 'There is one element selected');
keyEvent('.ember-power-select-trigger-multiple-input', 'keydown', 8);
assert.equal(findAll('.ember-power-select-multiple-option').length, 0, 'There is no elements selected');
assert.equal(find('.ember-power-select-trigger-multiple-input').value, 'three', 'The text of the seach input is three now');
assert.ok(find('.ember-power-select-dropdown'), 'The dropown is still opened');
assert.equal(findAll('.ember-power-select-option').length, 1, 'The list has been filtered');
});
test('The default "no options" message can be customized passing `noMatchesMessage="other message"`', function(assert) {
this.options = [];
this.render(hbs`
{{#power-select options=options noMatchesMessage="Nope" onchange=(action (mut foo)) as |option|}}
{{option}}
{{/power-select}}
`);
clickTrigger();
assert.equal(findAll('.ember-power-select-option').length, 1);
assert.equal(find('.ember-power-select-option').textContent.trim(), 'Nope');
});
test('A disabled dropdown is not focusable, and ignores the passed tabindex ', function(assert) {
assert.expect(1);
this.numbers = numbers;
this.render(hbs`
{{#power-select options=numbers tabindex="123" disabled=true onchange=(action (mut foo)) as |option|}}
{{option}}
{{/power-select}}
`);
assert.equal(find('.ember-power-select-trigger').attributes.tabindex, undefined, 'The trigger has no tabindex so it can\'t be focused');
});
test('the allocations diagram lists all allocation status figures', function(assert) {
const legend = find('.distribution-bar .legend');
const jobSummary = server.db.jobSummaries.findBy({ jobId: job.id });
const statusCounts = Object.keys(jobSummary.Summary).reduce(
(counts, key) => {
const group = jobSummary.Summary[key];
counts.queued += group.Queued;
counts.starting += group.Starting;
counts.running += group.Running;
counts.complete += group.Complete;
counts.failed += group.Failed;
counts.lost += group.Lost;
return counts;
},
{ queued: 0, starting: 0, running: 0, complete: 0, failed: 0, lost: 0 }
);
assert.equal(
legend.querySelector('li.queued .value').textContent,
statusCounts.queued,
`${statusCounts.queued} are queued`
);
assert.equal(
legend.querySelector('li.starting .value').textContent,
statusCounts.starting,
`${statusCounts.starting} are starting`
);
assert.equal(
legend.querySelector('li.running .value').textContent,
statusCounts.running,
`${statusCounts.running} are running`
);
assert.equal(
legend.querySelector('li.complete .value').textContent,
statusCounts.complete,
`${statusCounts.complete} are complete`
);
assert.equal(
legend.querySelector('li.failed .value').textContent,
statusCounts.failed,
`${statusCounts.failed} are failed`
);
assert.equal(
legend.querySelector('li.lost .value').textContent,
statusCounts.lost,
`${statusCounts.lost} are lost`
);
});
test('When passed `disabled=true`, the input inside the trigger is also disabled', function(assert) {
assert.expect(1);
this.numbers = numbers;
this.render(hbs`
{{#power-select-multiple options=numbers selected=foo onchange=(action (mut foo)) disabled=true as |option|}}
{{option}}
{{/power-select-multiple}}
`);
assert.ok(find('.ember-power-select-trigger-multiple-input').disabled, 'The input is disabled');
});
test('When the power select multiple uses the default component and the search is disabled, the trigger has `tabindex=0`', function(assert) {
assert.expect(1);
this.numbers = numbers;
this.render(hbs`
{{#power-select-multiple options=numbers selected=foo onchange=(action (mut foo)) searchEnabled=false as |option|}}
{{option}}
{{/power-select-multiple}}
`);
assert.equal(find('.ember-power-select-trigger').attributes.tabindex.value, '0', 'The trigger has tabindex=0');
});
test('If the user passes `dropdownClass` the dropdown content should have that class', function(assert) {
assert.expect(1);
this.options = [];
this.render(hbs`
{{#power-select options=options selected=foo onchange=(action (mut foo)) dropdownClass="this-is-a-test-class" as |option|}}
{{option}}
{{/power-select}}
`);
clickTrigger();
assert.ok(find('.ember-power-select-dropdown').classList.contains('this-is-a-test-class'), 'dropdownClass can be customized');
});
it('closes when dropdown service fires close event', function () {
let dropdownService = this.container.lookup('service:dropdown');
this.render(hbs`
{{#gh-basic-dropdown as |dropdown|}}
<button class="ember-basic-dropdown-trigger" onclick={{dropdown.actions.toggle}}></button>
{{#if dropdown.isOpen}}
<div id="dropdown-is-opened"></div>
{{/if}}
{{/gh-basic-dropdown}}
`);
clickTrigger();
expect($(find('#dropdown-is-opened'))).to.exist;
run(() => {
dropdownService.closeDropdowns();
});
expect($(find('#dropdown-is-opened'))).to.not.exist;
});
test('scrollTo works with disableScroll on', async function(assert) {
assert.expect(2);
// Setup controller tour settings
tour.set('disableScroll', true);
tour.set('scrollTo', true);
// Visit route
await visit('/');
find('#ember-testing-container', document.body).scrollTop = 0;
assert.equal(find('#ember-testing-container', document.body).scrollTop, 0, 'Scroll is initially 0');
await click('.toggleHelpModal');
await click('.shepherd-content .next-button', document.documentElement);
await click('.shepherd-content .next-button', document.documentElement);
assert.ok(find('#ember-testing-container', document.body).scrollTop > 0, 'Scrolled down correctly');
});
test('If the `selected` value changes the select gets updated, but the `onchange` action doesn\'t fire', function(assert) {
assert.expect(3);
this.numbers = numbers;
this.selected = null;
this.foo = function() {
assert.ok(false, 'The onchange action is never fired');
};
this.render(hbs`
{{#power-select options=numbers onchange=(action foo) selected=selected as |option|}}
{{option}}
{{/power-select}}
`);
run(() => this.set('selected', 'three'));
assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'three', 'The `three` element is selected');
clickTrigger();
assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'three', 'The proper option gets highlighed');
assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'three', 'The proper option gets selected');
});
test(`closes after global ${closeEvent}`, async function(assert) {
this.render(hbs`
{{#paper-button}}
button
{{#paper-tooltip}}
tooltip
{{/paper-tooltip}}
{{/paper-button}}
`);
await triggerEvent('.md-button', 'mouseenter');
assert.ok(find('md-tooltip'), 'tooltip was rendered');
run(() => window.dispatchEvent(new window.Event(closeEvent)));
await wait();
assert.notOk(find('md-tooltip'), 'tooltip was destroyed');
});
test('component exposes a tbody contextual component', async function(assert) {
this.setProperties({
source: commonTable,
sortProperty: 'firstName',
sortDescending: false,
});
await render(hbs`
{{#list-table source=source sortProperty=sortProperty sortDescending=sortDescending as |t|}}
{{#t.body class="body" as |row|}}
<tr class="item">
<td>{{row.model.firstName}}</td>
<td>{{row.model.lastName}}</td>
<td>{{row.model.age}}</td>
</tr>
{{/t.body}}
{{/list-table}}
`);
assert.ok(findAll('.body').length, 'Table body is rendered');
assert.equal(find('.body').tagName.toLowerCase(), 'tbody', 'Table body is a tbody element');
assert.equal(findAll('.item').length, this.get('source.length'), 'Each item gets its own row');
// list-table is not responsible for sorting, only dispatching sort events. The table is still
// rendered in index-order.
this.get('source').forEach((item, index) => {
const $item = this.$(`.item:eq(${index})`);
assert.equal(
$item
.find('td:eq(0)')
.text()
.trim(),
item.firstName,
'First name'
);
assert.equal(
$item
.find('td:eq(1)')
.text()
.trim(),
item.lastName,
'Last name'
);
assert.equal(
$item
.find('td:eq(2)')
.text()
.trim(),
item.age,
'Age'
);
});
});
test('Highlight applied', async function(assert) {
assert.expect(2);
const steps = [{
id: 'test-highlight',
options: {
attachTo: '.first-element bottom',
builtInButtons: [
{
classes: 'shepherd-button-secondary cancel-button',
text: 'Exit',
type: 'cancel'
},
{
classes: 'shepherd-button-primary next-button',
text: 'Next',
type: 'next'
}
],
classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
copyStyles: false,
highlightClass: 'highlight',
title: 'Welcome to Ember-Shepherd!',
text: ['Testing highlight']
}
}];
await visit('/');
tour.set('steps', steps);
tour.set('modal', true);
await click('.toggleHelpModal');
assert.ok(find('.highlight', document.documentElement), 'currentElement highlighted');
await click('.shepherd-content .cancel-button', document.documentElement);
assert.notOk(find('.highlight', document.documentElement), 'highlightClass removed on cancel');
});
test('The `selected` option can be a thenable', async function(assert) {
assert.expect(6);
let pets = [{ name: 'Toby' }, { name: 'Rex' }, { name: 'Lucius' }, { name: 'Donatello' }];
this.mainUser = {
pets,
bestie: new RSVP.Promise(function(resolve) {
setTimeout(() => resolve(pets[2]), 40);
})
};
this.render(hbs`
{{#power-select options=mainUser.pets selected=mainUser.bestie searchField="name" onchange=(action (mut foo)) as |option|}}
{{option.name}}
{{/power-select}}
`);
clickTrigger();
assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'Toby', 'The first element is highlighted');
assert.notOk(find('.ember-power-select-option[aria-selected="true"]'), 'no element is selected');
assert.equal(find('.ember-power-select-trigger').textContent.trim(), '', 'Nothing is selected yet');
await this.mainUser.bestie;
assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'Lucius', 'The 4th element is highlighted');
assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'Lucius', 'The 4th element is highlighted');
assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'Lucius', 'The trigger has the proper content');
});
test('Multiple-select: The listbox has `aria-controls=<id-of-the-trigger>`', function(assert) {
assert.expect(1);
this.numbers = numbers;
this.render(hbs`
{{#power-select-multiple options=numbers selected=selected onchange=(action (mut foo)) as |option|}}
{{option}}
{{/power-select-multiple}}
`);
clickTrigger();
assert.ok(/^ember-power-select-trigger-ember\d+$/.test(find('.ember-power-select-options').attributes['aria-controls'].value), 'The listbox controls the trigger');
});
test('Multiple-select: The listbox has a unique id`', function(assert) {
assert.expect(1);
this.numbers = numbers;
this.render(hbs`
{{#power-select-multiple options=numbers selected=selected onchange=(action (mut foo)) as |option|}}
{{option}}
{{/power-select-multiple}}
`);
clickTrigger();
assert.ok(/^ember-power-select-options-ember\d+$/.test(find('.ember-power-select-options').id), 'The search has a unique id');
});
test('Disabled single selects don\'t have a clear button even if `allowClear` is true', function(assert) {
assert.expect(1);
this.numbers = numbers;
this.foo = numbers[2];
this.render(hbs`
{{#power-select options=numbers selected=foo onchange=(action (mut foo)) allowClear=true disabled=true as |option|}}
{{option}}
{{/power-select}}
`);
assert.notOk(find('ember-power-select-clear-btn'), 'There is no clear button');
});