Ember defered promise resolves after the test completes

I am doing integration test of my ember application and one of my test is failing because of a promise resolves after my tests have ran. My promise wraps an animation event(bs collapse). Here is a part of the code that I am trying to test:

//in my component 
/**
 * Closes the component DOM with collapse animation
 *
 * @method 'animateClose'
 * @return {Ember.RSVP.Promise} promise that gets resolved once the collapse animation is complete
 */
animateClose() {
    let element = Ember.$(this.get('element'));
    return new Ember.RSVP.Promise(function(resolve) {
        element.on('hidden.bs.collapse', function() {
            resolve();
        });
        element.collapse('hide');
    });
},

actions: {

    /**
     * Invokes close action.
     *
     * @action 'close'
     * */
    close() {
        let defer = Ember.RSVP.defer();

        defer.promise.then(function() {
            return this.animateClose().then(function() {
                this.sendAction("close");
            }.bind(this));
        }.bind(this));

        this.sendAction("confirmClose", defer);
    }
}

As you can see, I am passing a defer object to the controller which will resolve it based on some criteria and if the defer object is resolved it does the collapse animation on the component and closes it. My test code looks like this:

test("should save and close", function(assert) {

        click(".save-close-btn");//this invokes the close action in component
        //wait();
        andThen(function() {
            //assert something
        });

});

And when I debug it, I can see that my assertions are getting hit first and then later the promise returned from animateClose resolves causing my tests to fail. How can I resolve this issue? Thanks.