Destroying state leaking between acceptance tests

[alvincrespo]

When trying to write acceptance tests, I'm getting the following error:

Error

Uncaught TypeError: Cannot read property 'contains' of undefined vendor/ic-modal/dist/globals/main.js:454

Implementation

{{#ic-modal-trigger controls="handin" class="leave-activity"}}
    {{i18n-t 'menu_bar_submit'}}
{{/ic-modal-trigger}}

{{#ic-modal id="handin" class="modal-activity"}}
  {{#if isSubmitted}}
  <div class="is-submitted">
   {{#ic-modal-title}}
      {{i18n-t 'modal_thank_you_title'}}
    {{/ic-modal-title}}
    <p>{{i18n-t 'modal_thank_you_body'}}</p>
    <button class="btn btn-secondary" {{action 'viewMyScore'}} type="button">{{i18n-t 'modal_thank_you_btn_view_score'}}</button>
    <button class="btn btn-primary-blue" {{action 'exitActivity'}} type="button">{{i18n-t 'modal_thank_you_btn_leave_activity'}}</button>
  </div>
  {{else}}
  <div class="not-submitted">
    {{#ic-modal-title}}
      {{i18n-t 'modal_submit_activity'}}
    {{/ic-modal-title}}
    <button class="btn btn-secondary" {{action 'exitActivity'}} type="button">{{i18n-t 'modal_submit_activity_btn_save'}}</button>
    <button class="btn btn-primary-blue" {{action 'submitActivity'}} type="button">{{i18n-t 'modal_submit_activity_btn_hand_in'}}</button>
  </div>
  {{/if}}
{{/ic-modal}}

Test

test('clicking the leave activity action launches the modal-activity', function(){
  visit('/lang/en/eaid/1').then(function(){
    equal(find('.modal-activity').length, 1, 'The modal .modal-activity should exist on the page');
    equal(find('.modal-activity').attr('is-open'), undefined, 'The modal\'s is-open attribute should be undefined');
    click('.leave-activity:first-of-type');
    andThen(function(){
      equal(find('.modal-activity').attr('is-open'), "true", 'The modal\'s is-open attribute should be "true"');
    });
  });
});

test('when submitting an activity the user is then prompted to view score or leave the activity', function(){
  visit('/lang/en/eaid/1');
  andThen(function(){
    click('.leave-activity:first-of-type');
    andThen(function(){
      click('.btn-primary-blue');
      andThen(function() {
        equal(find('.btn-secondary').text(), 'View score');
        equal(find('.btn-primary-blue').text(), 'Leave!');
      });
    });
  });
});

Here is what I've noticed:

• destroying is the state when click('.leave-activity:first-of-type'); is executed
• this.get('element') is undefined when the focus event is taking place

I'm curious if we should be disabling the focus event when the component is being destroyed?

[cyril-sf]

hey @alvincrespo , I just bumped into that issue.

In my case, handleTabIntoBrowser is the one trying to give the focus to a destroyed component ( https://github.com/instructure/ic-modal/blob/master/lib/modal.js#L18-L21 ). So we need to check the state of the component, or to make sure that lastOpenedModal is null, or to make sure that handleTabIntoBrowser doesn't get call (or something else that I haven't figured yet!).

I'm trying now to have a better understanding of the problem/code.

(and I'm on version 0.0.6)

[cyril-sf]

Adding this code to the component

  willDestroyElement: function() {
    if( lastOpenedModal === this ) {
      lastOpenedModal = null;
    }
  },

is obviously enough to get rid of the exception.