2017-02-09 51 views
1

我現在正在認真地考慮這個問題。我在一個我試圖測試的方法中有一行代碼,我無法通過我所做的任何事情。有用! 「現實世界」中沒有任何錯誤。未定義不是Mocha/Chai/Sinon在PhantomJS上的構造函數,Array.prototype.find

我發現每次我鑽研JS單元測試我碰到這樣的困難,它讓我懷疑它是否真的值得。

這裏是我想要測試方法...

_mapStopsAroundHub(managerContext, soCode, homePostcode, homeStops, changeLinkedStopCallback) { 
    homeStops = homeStops || []; 
    MappingDataGateway.getNearbyStops(soCode, homePostcode, Cfg.DefaultNearbyStopDistance, (stops, status, xhr) => { 
     if(status == MappingDataGateway.Status.OK) { 
      stops.forEach((element) => { 
       let isHomeStop = homeStops.length > 0 && (homeStops.find(hs => hs.id === element.id) !== undefined); 
       let markerColor = isHomeStop ? "green" : "orange"; 
       let marker = managerContext.addBusStopMarker(element, markerColor); 
       if (changeLinkedStopCallback) { 
        managerContext._api.event.addListener(marker, 'click',() => { 
         let newIcon = marker.icon.includes("orange") ? `/images/fa-bus-green.png` : `/images/fa-bus-orange.png`; 
         marker.setIcon(newIcon); 
         changeLinkedStopCallback(marker.data); 
        }) 
       } 
      }); 
     } 
     else if (errorCallback) { errorCallback(xhr); } 
    }); 
} 

我已經添加了「isHomeStop」變量和完全不必要homeSTops.length檢查,讓一些測試用例通過,但我無法測試homeochatop數組中包含數據的情況,因爲Mocha因爲它非常有用的錯誤消息「未定義不是構造函數」類型消息而失敗。完整的錯誤是如下...

PhantomJS 2.1.1(視窗8 0.0.0)MapsManager可以與加載的地圖interract繞輪轂點擋塊直接與連接止擋映射所有可選停止映射在該區域示出了在不同的顏色選擇的鏈接的停止FAILED 未定義不是(評價 'homeStops.find(功能(HS){ 返回hs.id === element.id; })')構造

失敗的測試看起來像這樣...

it("directly with a linked stop mapping all selectable stops in the area showing selected linked stops in a different colour",() => { 
      let allStops = [{ id: 1 }, { id: 2 }, { id: 3 }]; 
      let homeStops = [{ id: 2 }]; 
      let mappingDataStub = Sinon.stub(MappingDataGateway, 'getNearbyStops'); 
      mappingDataStub.yields(allStops, "OK"); 
      let addMarkerStub = Sinon.stub(objUt, 'addBusStopMarker'); 

      objUt._mapStopsAroundHub(objUt, testSoCode, testPostCode, homeStops); 
      mappingDataStub.restore(); 
      addMarkerStub.restore(); 

      Sinon.assert.calledThrice(addMarkerStub); 
      Sinon.assert.calledWith(addMarkerStub, allStops[0], "orange"); 
      Sinon.assert.calledWith(addMarkerStub, allStops[1], "green"); 
      Sinon.assert.calledWith(addMarkerStub, allStops[2], "orange"); 
     }); 

我已經在代碼中放入了未定義的檢查來檢查對象的狀態,它在那裏 - 它似乎是在查找內的lambda表達式上摔倒。

其他信息:這似乎只發生在PhantomJS - 如果我使用Chrome所有運行正常(雖然這不是一個可行的CI選項!)。

+0

您是否在代碼中的任何位置使用'new'?聽起來有可能錯誤信息中的行號是錯誤的 – Bergi

+0

可能在我的代碼中的不同位置,但不在我正在測試的方法中。錯誤消息明確指出了我正在測試的方法的第6行的轉譯版本。如果有任何事情出錯,這是摩卡有史以來最少的錯誤消息之一。我不知道,如果摩卡/柴/詩乃只是一堆垃圾,我應該回去使用茉莉花。儘管在這個階段做了大規模的改革。 –

回答

1

PhantomJS可能不支持Array.prototype.find。在測試助手文件中添加一個polyfill,它將解決您的問題。 Polyfill on MDN

+0

不錯!我在同一時間發現了這一點(你可以有答案投票,但!) –

+0

沒有問題,PhantomJS是一種痛苦,你可能會發現更多的東西不起作用。請享用! – Lee

+0

哦,快樂!(JS單元測試對我來說是一種愛/恨的東西) –

0

嘗試使用latest version 2.5b,它具有最新的Webkit abd完全支持ES6。

+0

這聽起來不錯,但我不認爲它適合與我的NPM依賴樹一起使用,所以當它到達CI的Azure時,它最終會變得毫無用處建立(我寧願讓它先在本地堆放)。看起來polyfills現在是我的前進方向。 –