transiton-to helper

01-transition-to.js

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);
    };
  }
});

02-usage.hbs

<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>

03-transition-to-test.js

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' } }
    ]);
  });
});