Refactor Modal.dispose and add test

[unrevised6419]

Having variables initialised from start _isTransitioning is better.
Would be better to add an no-undef eslint rule to check for undefined variables use.
Reordered variables by priority at show and hide function entrance.

• fix Modal.dispose method
• add test for Modal.dispose
• add _isTransitioning default value

no-undef - this rule is enabled by default, but does not what we want
no-use-before-define - kind of does what we want, but does not work for class members

Resolves #27456

[Johann-S]

It seems your change decrease our coverage 🤔 can you investigate why ?

Your changes looks good to me 👍

[unrevised6419]

@Johann-S I don't have so much experience with coveralls, what does this means?
I think a test for dispose should be added.

ps: good talk https://www.youtube.com/watch?v=O2tsvUJT09U

[Johann-S]

Yep we have a lot of unit test we should add 😄
Coveralls show you where you have increased/decreased the coverage.

We don't want a 100% of coverage but at least 90% would be great 👍

[unrevised6419]

@Johann-S what does this selector match?

bootstrap/js/src/modal.js

Line 200 in 5d834e0

$(window, document, this._element, this._backdrop).off(EVENT_KEY)

I want to test that line, but don't understand on what element event is turned off.
Is that a nested selector, or parallel selector?
Couldn't find any docs.

[Johann-S]

@iamandrewluca this line remove all the event listeners we attached during the use of our modal

[unrevised6419]

@Johann-S yes, I understand this.
But it removes listeners on each one? window document element and backdrop? Or that will search for backdrop inside element inside document inside window? jQuery does not have such docs for multiple arguments constructor. It only has that one with context, but it works in reverse order of arguments.

jQuery(element1, element2)

This will try to find element1 inside element2.

[Johann-S]

Yep for me it should remove the event listeners on each elements and that's what we should check

[Johann-S]

I don't understand the need to use show/hide methods here 🤔

var $modal = $('<div id="modal-test"/>').bootstrapModal()

assert.ok(typeof $modal.data('bs.modal') !== 'undefined', 'modal created')

$modal.bootstrapModal('dispose')

assert.ok(typeof $modal.data('bs.modal') === 'undefined', 'modal data object was disposed')

If you want to go further you can use a SinonJS spy to be sure dispose is called

[unrevised6419]

From start bs.modal is undefined, then is set on show, then is removed again on hide

[unrevised6419]

Disposing modal in show state is ambiguous. All listeners are removed, and you're stuck with an open modal on page.

[unrevised6419]

[Johann-S]

The modal instance is created here: https://github.com/twbs/bootstrap/blob/94a0144b2cfa5d50b2976295da9d07465acb22ad/js/src/modal.js#L509
And me remove the data on dispose here: https://github.com/twbs/bootstrap/blob/94a0144b2cfa5d50b2976295da9d07465acb22ad/js/src/modal.js#L199

No need to show or hide

[unrevised6419]

You mean I have just to call $('#myModal').modal() ?
This 2 are the same

$('#myModal').modal() // will call `show` method
$('#myModal').modal('show') // will call `show` method

On tests page I get an error if I don't hide modal before dispose, when trying to click on something

QUnit.test('should dispose modal', function (assert) {
  assert.expect(1)
  var done = assert.async()

  var $modal = $('<div id="modal-test"/>')
    .bootstrapModal()
    .bootstrapModal('dispose')

  assert.ok(typeof $modal.data('bs.modal') === 'undefined', 'modal data object was disposed')
  done()
})

Also if I don't hide, body will have the padding added when there is overflow.

[Johann-S]

Tested that :

  QUnit.test('should dispose modal', function (assert) {
    assert.expect(2)
    var $el = $('<div id="modal-test"/>')
    $el.bootstrapModal()

    assert.ok($el.data('bs.modal') !== undefined)

    $el.bootstrapModal('dispose')

    assert.ok($el.data('bs.modal') === undefined)
  })

and it works fine on our unit tests

[unrevised6419]

Tried to click any input on the tests page? you will get an error, and also body padding is added.
Tests are passing, but tests page looks weird.

[Johann-S]

That's not the purpose here, we test if our dispose methods do the job that's all, so we just have to check if the data is removed and if the listeners too.

I did the first check (check if the data is removed).
We did that on other tests for our Modal and it's fine.

[Johann-S]

If you want we can discuss about that on the Bootstrap Slack 😉

[unrevised6419]

@Johann-S Done.
Some notes:

• this is not valid jQuery

  $(window, document, this._element, this._backdrop).off(EVENT_KEY)

• this._backdrop does not have any events attached to it. this._dialog has.
• After dispose only Event.CLICK_DATA_API should remain on page

ps: my next PR also will be on modal improvement 😏 (about fixed, sticky elements)

[Johann-S]

var modal = $(this).data('bs.modal')

[Johann-S]

Can you remove this comment please ? We don't need to keep the history in comment, we have git which handle that for us 😉

[Johann-S]

Instead of doing that, you should use SinonJS spy to be sure we call .off on those elements