How to clear the DOM with multiple tests in single ember integration test file

Question

I have two tests in date-dropdown-test.js:

moduleForComponent('forms/date-dropdown', 'Integration | Component | forms/date dropdown', {
  integration: true
});

test('it renders in month mode', function(assert) {
  assert.expect(2);

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.render(hbs`{{forms/date-dropdown dateFormat='MMMM YYYY' daySpecific=false dayToUse=26 dateUnitsLong=24 startIncrement=1}}`);

  // Check 24 months appear
  assert.equal(this.$('option').length, 24);

  // Check next month is selected by default
  var today = new Date();
  today.setDate(1);
  today.setMonth(today.getMonth() + 1);
  today.setDate(26);
  var expected = moment(today).format('DD-MM-YYYY');

  assert.equal(this.$('select').val(), expected);

});

test('it renders in day mode', function(assert) {
  assert.expect(1);

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.render(hbs`{{forms/date-dropdown dateFormat='MMMM YYYY' daySpecific=true dateUnitsLong=300 startIncrement=3}}`);

  // Check 300 days appear
  assert.equal(this.$('option').length, 300);

});

The problem I have is when the second test runs the component from the first test is still in the DOM and found by this.$('option').length. What is the correct way to clear the DOM between or at the end of tests in Ember testing?

Or is there something more specific than this.$() to use in the context of the component rendered in the test?

EDIT

Even more confusing to me is the fact that it seems to work fine at https://github.com/yapplabs/ember-radio-button/blob/master/tests/unit/components/radio-button-test.js with multiple tests and looking at the dom, but in my second test I definitely see 324 option elements in .length instead of the 300 added by that particular component.

EDIT 2

The components code is:

export default Ember.Component.extend({
  dateItems: [],
  didInitAttrs: function() {
    var today = new Date();
    var dateItems = this.get('dateItems');
    var i = 0;

    if (this.get('daySpecific')) {
      for (i = 0; i < this.get('dateUnitsLong'); i++) {
        var nextDay = new Date();
        nextDay.setDate(today.getDate() + i);
        dateItems.addObject({date: nextDay, value: moment(nextDay).format('DD-MM-YYYY')});
      }
    }
    else {
      for (i = 0; i < this.get('dateUnitsLong'); i++) {
        var nextMonth = new Date();
        nextMonth.setDate(1);
        nextMonth.setMonth(today.getMonth() + i);
        nextMonth.setDate(this.get('dayToUse'));
        dateItems.addObject({date: nextMonth, value: moment(nextMonth).format('DD-MM-YYYY')});
      }
    }

  },
  didInsertElement: function() {
    var startDate = new Date();
    if (this.get('daySpecific')) {
      startDate.setDate(startDate.getDate() + this.get('startIncrement'));
    }
    else {
      startDate.setDate(1);
      startDate.setMonth(startDate.getMonth() + this.get('startIncrement'));
      startDate.setDate(this.get('dayToUse'));
    }

    this.$('select').val(moment(startDate).format('DD-MM-YYYY')).trigger('change');
  },
  actions: {
    dateChange: function() {
      this.set('value', this.$('select').val());
    }
  }
});

hbs

<select class="form-control" {{action 'dateChange' on='change'}}>
  {{#each dateItems as |dateItem index|}}
      <option value="{{dateItem.value}}">
          {{date-formatter dateItem.date dateFormat}}
      </option>
  {{/each}}
</select>

The idea is to create a reusable component that creates a dropdown of months or days for a given period of time and allows a default of something other than the first day/month. So looking at the first test above {{forms/date-dropdown dateFormat='MMMM YYYY' daySpecific=false dayToUse=26 dateUnitsLong=24 startIncrement=1}}would create a dropdown with 24 months from this month and default to next month.

In any case I wonder whether the final line: this.$('select').val(moment(startDate).format('DD-MM-YYYY')).trigger('change'); of didInsertElement is the offender here? Perhaps the tests continue on but this stops the teardown in the test?

The two tests pass individually if I remove one or the other.

Edit 3

Removing this.$('select').val(moment(startDate).format('DD-MM-YYYY')).trigger('change'); didnt help, perhaps its my use of didInitAttrs to create my dateItems that the #each of the template uses?

dashdashzako dashdashzako · Accepted Answer · 2015-07-24T14:02:03

I've tried with a very simple application and integration tests seem to work here.

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';


moduleForComponent('x-div', 'Integration | Component | x div', {
  integration: true
});

test('it renders', function(assert) {
  assert.expect(2);

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.render(hbs`{{x-div}}`);

  assert.equal(this.$().text(), '', 'should be an empty string, got "'+this.$().text()+'"');

  // Template block usage:
  this.render(hbs`
    {{#x-div}}
      template block text
    {{/x-div}}
  `);

  console.log(this.$('.thediv').length);
  assert.equal(this.$().text().trim(), 'template block text');
});

test('it renders again', function(assert) {
  assert.expect(2);

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });

  this.render(hbs`{{x-div}}`);

  assert.equal(this.$().text(), '');

  // Template block usage:
  this.render(hbs`
    {{#x-div}}
      template block text
    {{/x-div}}
  `);

  console.log(this.$('.thediv').length);
  assert.equal(this.$().text().trim(), 'template block text');
});

this.$('.thediv').length returns 1 in both tests, teardown is done properly.

Could the component code make tests fail by any chance?

How to clear the DOM with multiple tests in single ember integration test file

2 Answers