我想對下列這個Component的UI進行單元測試。其中有一個自定義的cxUrl pipe，在單元測試時，我需要對其進行Mock：

解決方法，在單元測試的實現(xiàn)代碼里，創(chuàng)建一個用@Pipe修飾過的MockUrlPipe，在其transform方法里什么都不做即可：

運行時的截圖：
refreshView里執(zhí)行視圖的template函數(shù)：

templateFn：

準備展開routerLink：

/*** Invokes a pipe with 1 arguments.** This instruction acts as a guard to {@link PipeTransform#transform} invoking* the pipe only when an input to the pipe changes.** @param index Pipe index where the pipe was stored on creation.* @param slotOffset the offset in the reserved slot space* @param v1 1st argument to {@link PipeTransform#transform}.** @codeGenApi*/

只有當pipe的輸入?yún)?shù)發(fā)生變化時，??pipeBind1才會觸發(fā)：

pipeInstance.transform就是單元測試代碼里的pipe mock實現(xiàn)：

/*** If the value of the provided exp has changed, calls the pure function to return* an updated value. Or if the value has not changed, returns cached value.** @param lView LView in which the function is being executed.* @param bindingRoot Binding root index.* @param slotOffset the offset from binding root to the reserved slot* @param pureFn Function that returns an updated value* @param exp Updated expression value* @param thisArg Optional calling context of pureFn* @returns Updated or cached value*/

綁定表達式的值發(fā)生變化時，觸發(fā)pureFunction1Internal，重新計算綁定的值：

最終調用到我實現(xiàn)的Mock pipe：

要獲取更多Jerry的原創(chuàng)文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular单元测试里pipe的mock设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。