jeudi 8 août 2019

How to over ride a function of component in integration test in ember Qunit testing

I'm writing my first question here sorry for any ambiguity.

I write an integration test for 'update-pw' component which simple render 'update-pw' and then fill input field with fillIn and then click save button which trigger the action 'in update-pw.js'. I only pass email(for whom we want to change password) and new password. savePW() function further has a function call 'self.store.updateSingleUserPw(email, newPw)' which is written in service -> 'store.js'. updateSingleUserPw(email, newPw)<-- this return a promise after server process on api call. On basis of fulfillment or rejection of promise I show a modal. I just want to make that promise fulfill or rejected in my test instead of server response for promise.

integration/component/update-pw-test.js

import { module, test } from 'qunit';
import EmberObject from '@ember/object';
import { setupRenderingTest } from 'ember-qunit';
import { render, fillIn, click } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import Service from '@ember/service';

module('Integration | Component | update-pw', function(hooks) {
  setupRenderingTest(hooks);
  const store = Service.extend({
    savePW() {
self.store.updateSingleUserPw(email, newPw, function() {

        console.log('this is function overriding', email, newPw);

        return true;

      })
        .then(function() {
          // Reset controller fields
          self.set('password', '');
          self.set('updateModal', false);
          swal({
            title: 'Das hat geklappt',
            type: 'success'
          });
        }, function() {
          self.set('updateModal', false);
          swal({
            title: 'problems with setting new pw.',
            type: 'error'
          });
        })
        .finally(function() {
          self.set('changingPassword', false);
        });

    }
  });
  test('it renders', async function(assert) {

    this.application.register('service:store', store);
    this.application.inject.service('store', { as: 'store' });
    assert.expect(2);
    this.set('updateModal', true);
    this.set('testing', true);
    let currentUpdateAdmin = EmberObject.create({
      username: 'steinauer',
      email: 'lala@test.at'
    });
    this.set('currentUpdateAdmin', currentUpdateAdmin);
await render(hbs``);

    assert.equal(this.element.querySelector('h4').textContent.trim(), 'set new PW for steinauer');
    await fillIn('#password', 'test123456');
    await click('.save-button');
    // Template block usage:
    await render(hbs`
      
        template block text
      
    `);

    // assert.equal(this.element.textContent.trim(), 'what is this');
  });
});

components/update-pw.js

import Component from '@ember/component';

export default Component.extend({
  changingPassword: false,

  actions: {
    savePW() {
      let self = this;
      if (!self.get('currentUpdateAdmin.email'))
        return;

      let newPw = self.get('password');
      let email = self.get('currentUpdateAdmin.email');
      self.set('changingPassword', true);

      if (!email)
        return;

      self.store.updateSingleUserPw(email, newPw)
        .then(function() {
          // Reset controller fields
          self.set('password', '');
          self.set('updateModal', false);
          swal({
            title: 'Das hat geklappt',
            type: 'success'
          });
        }, function() {
          self.set('updateModal', false);
          swal({
            title: 'problems with setting new pw',
            type: 'error'
          });
        })
        .finally(function() {
          self.set('changingPassword', false);
        });

    }
  }
});


function in Service/store.js

updateSingleUserPw(email, newPw) {
    let headers = this.get('headers');

    return new Promise(function(resolve, reject) {
      $.ajax({
        type: 'POST',
        url: ENV.api + '/accounts/updateSingleUserPw',
        data: {
          email: email,
          pwNew: newPw
        },
        headers,
        dataType: 'json'
      }).then(function(success) {
        if (success) {
          resolve(newPw);
        } else {
          reject('password change failed');
        }
      }, function(xhr, status, error) {
        reject(error);
      });
    });
  }

Before trying to override function I got only rejected promise modal but after the try of overriding the function i'm getting: Promise rejected during "it renders": Cannot read property 'register' of undefined.




Aucun commentaire:

Enregistrer un commentaire