在Angular中測試自定義管道

我正在嘗試爲我的自定義管道編寫一些基本測試，但是對於Jasmine和Angular管道來說，我有一些困難。這裏是我的菸斗：在Angular中測試自定義管道

十進制格式pipe.js

import { Pipe , PipeTransform } from '@angular/core'; 
import { DecimalPipe } from '@angular/common'; 

@Pipe({ 
    name: 'myDecimalFormatingPipe' 
}) 

export class MyDecimalFormatPipe implements PipeTransform { 

    constructor(public decimalPipe: DecimalPipe) {}; 

    transform(value: any) { 
     if (value || value === 0) { 
      value = this.decimalPipe.transform(value, '1.2-2'); 
     } 
     return value; 
    } 
}

顯然，這種「自定義」管只是實現十進制管變換（）現在，但將在未來改變。

這裏是我的規格：

import { MyDecimalFormatPipe } from './my-decimal-format.pipe'; 
import { DecimalPipe } from '@angular/common'; 

describe('MyDecimalFormatPipe',() => { 

    let pipe: MyDecimalFormatPipe; 
    let decimalPipe: DecimalPipe; 
    let inputValue: any = '2.1111'; 

    beforeEach(() => { 
     decimalPipe = new DecimalPipe(inputValue); 
     myPipe = new MyDecimalFormatPipe(decimalPipe); 
    }); 

    it('pipe is defined',() => { 
     expect(pipe instanceof MyDecimalFormatPipe).toBeTruthy(); 
    }); 

    describe('transform ',() => { 
     it('should return correct value type ',() => { 

      spyOn(decimalPipe, 'transform').and.callThrough(); 

      decimalPipe.transform(inputValue, '1.2-2'); 

      expect(decimalPipe.transform).toEqual('2.11'); 
     }); 
    }); 
});

我的第一個規範通行證，但對於變換（）測試失敗，我得到的

error: 
RangeError: Invalid language tag: 2.1111 
      at new NumberFormat (native) 
      at Function.NumberFormatter.format (

我不記得我看這是最後一次錯誤。 '無效的語言標籤'是指什麼？這個規格是什麼讓它突破？

來源

2017-08-28 MadCatm2

我相信輸入值被解析爲一個日期或任何事情，使它嚇壞了。你嘗試使用數字值嗎？這會改變什麼嗎？測試似乎是正確的 –

你能詳細說明'使用數字值'是什麼意思嗎？我目前正在將inputValue中的字符串傳遞給transform（），因爲來自後端的JSON將具有數字作爲字符串....我應該嘗試傳遞一個數字..？ – MadCatm2

完成y_vyshnevska的回答，有幾點是要注意的：

您需要使用decimalPipe = new DecimalPipe('arab');告訴DecimalPipe構造使用阿拉伯數字格式（你的情況）。
從官方文檔中，我相信你不需要使用間諜進行這個測試（https://angular.io/guide/testing#pipes），但只需從管道獲取返回結果就足夠了。

編輯部分：

beforeEach(() => { 
    decimalPipe = new DecimalPipe('arab'); 
    pipe = new MyDecimalFormatPipe(decimalPipe); 
}); 

... 

it('should return correct value type ',() => { 
    // spyOn(pipe, 'transform').and.callThrough(); 
    const result = pipe.transform(inputValue); 
    expect(result).toEqual('2.11'); 
}); 
...

NB：一個有趣的事情，我可以見證，是與無頭鍍鉻的測試將通過的結果是正確的（2.11）;但在我的Chrome瀏覽器中，測試會失敗，說結果不正確（2,11）。我想這是由於瀏覽器設置，但我沒有想到，要麼:-)

來源

2017-08-28 16:34:12

啊哈！多麼美妙的答案。我不明白爲什麼當spyOn.and.callThrough（）被刪除時，它返回了預期的結果，但否則它不會。據我所知spyOn只是監視輸出和參數...爲什麼它會改變結果？ – MadCatm2

您應該閱讀：https：//hatoum.com/blog/2016/11/12/jasmine-unit-testing-dont-forget-to-callthrough。它很好地解釋了爲什麼在某些情況下需要它，但是在這裏你根本不需要它，因爲你可以直接調用管道結果！ –

好的，也許我錯過了一些東西。和Jasmine文檔一樣，callThrough（）遵循實際的實現（不是存根）。我的結論是，'spyOn（decimalPipe，'transform'）。和.CallThrough（）;'應該像我們在實現中那樣簡單地調用transform（）方法來返回相同的結果。然而，我的執行失敗，而你的通行證... – MadCatm2

'invalid language tag'是指什麼？

The DecimalPipe constructor具有用於區域設置，其用於Intl.NumberFormat施工deeper注入的字符串參數。在瀏覽器控制檯中試用 new Intl.NumberFormat('1.222').format(1.2222)，您會看到您的錯誤。

來源

2017-08-28 16:16:28

趕上，我沒有得到這個 –

在Angular中測試自定義管道

回答

相關問題