I am trying to write some basic tests for my custom pipe, but being new to Jasmine and Angular pipes I am having some difficulty. Here is my pipe:

decimal-format-pipe.js

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

@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;
    }
}

Obviously, this 'custom' pipe simply implements the decimal pipe transform() for now, but that will change in the future.

Here is my spec:

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

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

My first spec passes but for the transform() test it fails and I get the

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

I cannot recall the last time I have seen this error. What does 'invalid language tag' refer to? What is it about this spec that is making it break?

I am trying to write some basic tests for my custom pipe, but being new to Jasmine and Angular pipes I am having some difficulty. Here is my pipe:

decimal-format-pipe.js

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

@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;
    }
}

Obviously, this 'custom' pipe simply implements the decimal pipe transform() for now, but that will change in the future.

Here is my spec:

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

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

My first spec passes but for the transform() test it fails and I get the

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

I cannot recall the last time I have seen this error. What does 'invalid language tag' refer to? What is it about this spec that is making it break?

• javascript
• angular
• formatting
• jasmine

Share Improve this question Follow edited Aug 28, 2017 at 15:24 MadCatm2 asked Aug 28, 2017 at 15:10 MadCatm2MadCatm2 1,00155 gold badges2626 silver badges4141 bronze badges 2

• I believe the input value is parsed as a date or whatever thing that makes it freak out. Did you try using number values ? Does that change anything ? The test seems correct – Alex Beugnet Commented Aug 28, 2017 at 15:54
• Could you elaborate on what you mean by 'use number values'? I am currently passing a string in the inputValue to transform() because the JSON ing from the backend will have the numbers as strings....Should I try to pass it a number..? – MadCatm2 Commented Aug 28, 2017 at 16:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Completing y_vyshnevska's answer, there are several points that are to be noted :

• You need to use decimalPipe = new DecimalPipe('arab'); to tell the DecimalPipe constructor to use the arabic number format (in your case).
• From the official documentation, I believe you don't need to use a spy for this test (https://angular.io/guide/testing#pipes), but simply getting the returned result from your pipe should be enough.

Edited parts :

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: One funny thing I could witness, is that with the Headless chrome the test would pass as the result is correct (2.11); but in my chrome browser the test would fail saying the result is incorrect (2,11). I guess this is due to the browser settings, but I didn't expect that either :-)

What does 'invalid language tag' refer to?

The DecimalPipe constructor has an injected string argument for locale, which is used for Intl.NumberFormat construction deeper. Try new Intl.NumberFormat('1.222').format(1.2222) in browser console, you will see your error.