Question

我正在尝试为我的自定义管道编写一些基本测试，但是对于Jasmine和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');
        });
    });
});

我的第一个规范通过但是对于transform（）测试它失败了，我得到了

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

我记不清上次我看到这个错误了。 “无效语言标签”是指什么？这个规范是什么让它破裂？

Answer 1

＆＃39;无效的语言标记＆＃39;参考？

The DecimalPipe constructor为locale注入了一个字符串参数，用于Intl.NumberFormat构造deeper。尝试在浏览器控制台中new Intl.NumberFormat('1.222').format(1.2222)，您会看到错误。

Answer 2

完成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');
});
...

N.B：我可以看到的一个有趣的事情是，使用无头镀铬，测试会通过，因为结果是正确的（ 2.11 ）;但在我的Chrome浏览器中，测试会失败，说结果不正确（ 2,11 ）。我想这是由于浏览器设置，但我没想到： - ）

在Angular中测试自定义管道

2 个答案: