Проверка устойчивости модели в приемном тесте Ember.js

Question

Я пытаюсь написать приемочный тест, который подтверждает, что моя форма регистрации сохраняет User модель в магазин.

Я использую Ember 1.13.6, Mocha, Chai и Ember CLI Mirage (чтобы подделать бэкэнд для тестов.) Бэкэнд - JSONAPI.

Я очень плохо знаком с Ember и изо всех сил пытаюсь найти стратегию тестирования.

Могу ли я использовать Sinon.js и шпионить за моделью и проверить, если .save метод вызван или я должен проверить, что правильный запрос XHR был отправлен (POST /api/vi/users)?

// app/routes/users/new.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function(){
    return this.store.createRecord('user');
  },
  actions: {
    registerUser: function(){
      var user = this.model();
      user.save().then(()=> {
        this.transitionTo('/');
      }).catch(()=> {
        console.log('user save failed.');
      });
    }
  }
});

---

<!-- app/templates/users/new.hbs -->
<form {{ action "registerUser" on="submit" }}>
  <div class="row email">
    <label>Email</label>
    {{ input type="email" name="email" value=email }}
  </div>
  <div class="row password">
    <label>Password</label>
    {{ input type="password" name="password" value=password }}
  </div>
  <div class="row password_confirmation">
    <label>Password Confirmation</label>
    {{ input type="password" name="password_confirmation" value=password_confirmation }}
  </div>
  <button type="submit">Register</button>
</form>

---

/* jshint expr:true */
import {
  describe,
  it,
  beforeEach,
  afterEach
} from "mocha";
import { expect } from "chai";
import Ember from "ember";
import startApp from "tagged/tests/helpers/start-app";

describe("Acceptance: UsersNew", function() {
  var application;

  function find_input(name){
    return find(`input[name="${name}"]`);
  }

  beforeEach(function() {
    application = startApp();
    visit("/users/new");
  });

  afterEach(function() {
    Ember.run(application, "destroy");
  });

  describe("form submission", function(){

    const submit = function(){
        click('button:contains(Register)');
    };

    beforeEach(function(){
      fillIn('input[name="email"]', '[e-mail]');
      fillIn('input[name="password"]', 'p4ssword');
      fillIn('input[name="password_confirmation"]', 'p4ssword');
    });

    it("redirects to root path", function(){
      submit();
      andThen(function() {
        expect(currentURL()).to.eq('/'); // pass
      });
    });

    it("persists the user record", function(){
      // this is the part I am struggling with
      // expect user.save() to be called.
      submit();
    });
  });
});

Answer 1

Вы можете просто использовать Mirage, чтобы гарантировать отправку запроса xhr. server это глобальный доступный в ваших тестах, который ссылается на ваш сервер Mirage. Так что вы можете сделать что-то вроде этого:

server.post('/users', function(db, request) {
  let json = JSON.parse(request.requestBody);
  expect(json.email).to equal('[e-mail]');
});

или любой другой синтаксис мокко. Убедитесь, что вы добавили expect(1) test to be run в начале, так как вы сейчас в асинхронной стране.

---

Окончательное решение по ОП:

it('saves the user', function(){
  server.post('/users', function(db, request) {
    var json = JSON.parse(request.requestBody);
    var attrs = json['data']['attributes'];
    expect(attrs['email']).to.eq("[e-mail]");
    expect(attrs['password']).to.eq("p4ssword");
    expect(attrs['password_confirmation']).to.eq("p4ssword");
  });
  click('button:contains(Register)');
});