Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
transiton-to helper
import Helper from '@ember/component/helper';
import { inject as service } from '@ember/service';
export default Helper.extend({
router: service(),
compute(params) {
return (maybeEvent) => {
if (maybeEvent !== undefined && typeof maybeEvent.preventDefault === 'function') {
maybeEvent.preventDefault();
}
params = params.map((param) => {
if (param && param.isQueryParams) {
return { queryParams: param.values };
}
return param;
});
return this.get('router').transitionTo(...params);
};
}
});
<button onclick={{action (transition-to 'post' post)}} type="button">
Post Details
</button>
<button onclick={{action (transition-to 'posts' (query-params term="awesome"))}} type="button">
Only Awesome Posts
</button>
import { expect } from 'chai';
import { beforeEach, describe, it } from 'mocha';
import { setupRenderingTest } from 'ember-mocha';
import { click, render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
describe('Integration: transition-to', function () {
setupRenderingTest();
beforeEach(function () {
this.params = [];
this.router = this.owner.lookup('service:router');
this.router.transitionTo = (...params) => this.params = params;
});
it('triggers a transition to the router', async function () {
await render(hbs`
<button id="transition" onclick={{ action (transition-to 'param' 1 'two') }}>
Transition
</button>
`);
await click('#transition');
expect(this.params).to.deep.equal(['param', 1, 'two']);
});
it('handles the passed query params', async function () {
await render(hbs`
<button id="transition" onclick={{ action (transition-to 'param' (query-params one="1" two="2")) }}>
Transition
</button>
`);
await click('#transition');
expect(this.params).to.deep.equal([
'param',
{ queryParams: { one: '1', two: '2' } }
]);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.