2017-10-17 377 views
0

我在手錶模式下使用practicalmeteor:mocha,並且已經編寫了一些UI測試(單元測試模板組件)。流星摩卡手錶模式顯示代碼行而不是斷言信息

我有一個奇怪的問題,即我的失敗測試不會揭示斷言消息,而是代碼片段。

我重視的圖像用一個例子輸出:

enter image description here

不幸的是我沒有找到關於包或摩卡本身的文檔中與此相關的一個配置的任何信息。

我的測試命令如下:

meteor test --driver-package practical meteor:mocha 

測試代碼如下:

// PACKAGES 
import {Meteor} from 'meteor/meteor'; 
import {Template} from 'meteor/templating'; 
import {$} from 'meteor/jquery'; 
import {Random} from 'meteor/random'; 
import {chai, assert} from 'meteor/practicalmeteor:chai'; 
import StubCollections from 'meteor/hwillson:stub-collections'; 
import {sinon} from 'meteor/practicalmeteor:sinon'; 

// HELPERS 
import {withRenderedTemplate, renderTemplate, withDiv} from '../../test-helpers.js'; 

// COMPONENTS 
import '../../../startup/both/schemaDefaults'; 
import {loadingClassName} from '../../components/loading/loading'; 
import {Comments} from '../../../api/comments/Comments'; 
import '../comments.js'; 


describe("UI/Comments", function() { 

    beforeEach(function() { 
     StubCollections.stub(Comments); 
     Template.registerHelper('_', key => key); 
    }); 

    afterEach(function() { 
     Template.deregisterHelper('_'); 
     StubCollections.restore(); 
     Meteor.subscribe.restore(); 
    }); 

    ////////////////////////////////////////////////////////  

    it("renders a loading symbol on load", function (done) { 

     sinon.stub(Meteor, 'subscribe',() => ({ 
      subscriptionId: Random.id(), 
      ready:() => false, 
     })); 

     withRenderedTemplate(Template.comments, {}, el => { 
      const target = $(el); 
      chai.assert.equal(target.find('.' + loadingClassName).length, 1); 
      done(); 
     }); 

    }); 

    //////////////////////////////////////////////////////// 

    it("displays a message if no comments exist for the given document", function (done) { 

     sinon.stub(Meteor, 'subscribe',() => ({ 
      subscriptionId: Random.id(), 
      ready:() => true, 
     })); 

     withRenderedTemplate(Template.comments, {docId: Random.id()}, el => { 
      const target = $(el); 
      chai.assert.equal(target.find('.' + loadingClassName).length, 0); 
      chai.assert.equal(target.find('.no-comments').length, 1); 
      done(); 
     }); 

    }); 

    //////////////////////////////////////////////////////// 

    it("displays comments, if comments are found", function (done) { 

     sinon.stub(Meteor, 'subscribe',() => ({ 
      subscriptionId: Random.id(), 
      ready:() => true, 
     })); 

     const userId = Random.id(); 
     const commentDoc = { 
      title: Meteor.user().username, 
      status: 0, 
      docId: Random.id(), 
      description: "this is a comment", 
      createdAt: new Date().getTime(), 
      updatedAt: new Date().getTime(), 
      createdBy: userId, 
      updatedBy: userId, 
     }; 

     Comments.insert(commentDoc); 

     withRenderedTemplate(Template.comments, {docId: Random.id()}, el => { 
      const target = $(el); 
      assert.equal(target.find('.' + loadingClassName).length, 0); 
      assert.equal(target.find('.no-comments').length, 0); 
      assert.isAbove(target.find('.comment-entry').length, 0); 
      done(); 
     }); 
    }); 

    //////////////////////////////////////////////////////// 

    it("displays a comment of self different than comments of others", function (done) { 
     assert.fail("not yet implemented"); 
    }) 
}); 

回答

0

好吧,我找到了答案,自己在DOM挖後。

這也可能是有趣的,非流星用戶:

摩卡環球網記者使用了錯誤輸出一個css類名叫做.error這當然是對的CSS覆蓋非常脆弱。

我首先想到的是,這不可能是問題,因爲我通常使用前綴類名來避免這種衝突。

但我安裝了一個編輯一個包,還配備了一個默認的CSS裏面也有一個入口,叫做:

.error { 
    display: none; 
} 

流星應用奇妙捆綁所有的方式,即運行我的摩卡時測試中,錯誤字段隱藏在網絡記者的身上。

我刪除了編輯器包,我的問題得到解決。

我從中學到了什麼:不要在包中使用常用名稱作爲css類。