How do I create a dummy component to use in an Ember integration test?

1
votes

I have a component some-container that takes a hash of ids mapped to other ember components. This is how it's used:

{{modules/some-container
  pageKey="foo"
  widgetIdToComponent=(hash
    foo=(component "modules/dummy-component")
  )
}}

I'm writing an integration test for this component and I want to keep the test independent of other components. Is there a way to define dummy components within an Ember integration test file?

2
testingember.jsintegration-testing

2 Answers

1
votes

Figured it out! The solution is to use this.register. See below:

moduleForComponent('some-container', 'Integration | Component | some-container', {
  integration: true,

  beforeEach() {
    this.register(
      'component:foo-div',
      Component.extend({
        layout: hbs`<div data-test-foo />`
      })
    );

    this.register(
      'component:bar-div',
      Component.extend({
        layout: hbs`<div data-test-bar />`
      })
    );

    this.component = hbs`
    {{modules/some-container
      pageKey="foo"
      widgetIdToComponent=(hash
        fooId=(component "foo-div")
        barId=(component "bar-div")
      )
    }}`;
  }
});

test('it renders foo div when only foo div is returned', function(assert) {
  this.render(this.component);

  assert.dom('[data-test-foo]').exists('foo div renders');
  assert.dom('[data-test-bar]').doesNotExist('foo div renders');
});
1
votes

The existing answer from @Tyler Becks is good for legacy ember-qunit, but with native qunit (since: 2017: https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md), you'd want something like this (known to work with at least Ember Octane (3.16+)):

import { test, module } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { hbs } from 'ember-cli-htmlbars';

import { render } from '@ember/test-helpers';
import { setComponentTemplate } from '@ember/component';
import templateOnly from '@ember/component/template-only';
import Component from '@glimmer/component';

 
module('name of test suite', function(hooks) {
  setupRenderingTest(hooks);

  test('name of test', async function(assert) {
    class MyComponent extends Component {}
    setComponetTemplate(hbs`your template here`, MyComponent);
    this.owner.register('component:component-name', MyComponent);

    await render(hbs`<ComponentName />`);
  });

  // alternatively, things get a bit simpler if you're using
  // ember-source 3.25+
  test('name of test 2', async function(assert) {
    class MyComponent extends Component {}
    setComponetTemplate(hbs`your template here`, MyComponent);

    this.setProperties({ MyComponent });

    await render(hbs`<this.MyComponent />`);
  });

  // template-only components are even simpler still
  test('name of test 3', async function(assert) {
    this.setProperties({ 
      MyComponent: setComponetTemplate(
        hbs`your template here`, 
        templateOnly()
      );
    });

    await render(hbs`<this.MyComponent />`);
  });
});