From 48a651b379b326ac09eddae9a9f0a5bfb33ed83d Mon Sep 17 00:00:00 2001 From: "ben.12" Date: Sun, 19 Mar 2023 23:39:00 +0100 Subject: [PATCH] fix(#632): locale pipes optimizations unit tests --- .../src/lib/pipes/base-locale.pipe.ts | 128 ++++++++--------- .../src/lib/pipes/transloco-currency.pipe.ts | 132 +++++++++--------- .../src/lib/pipes/transloco-date.pipe.ts | 113 +++++++-------- .../src/lib/pipes/transloco-decimal.pipe.ts | 98 ++++++------- .../src/lib/pipes/transloco-percent.pipe.ts | 98 ++++++------- .../pipes/transloco-currency.pipe.spec.ts | 33 +++++ .../tests/pipes/transloco-date.pipe.spec.ts | 24 ++++ .../pipes/transloco-decimal.pipe.spec.ts | 27 ++++ .../pipes/transloco-percent.pipe.spec.ts | 27 ++++ 9 files changed, 396 insertions(+), 284 deletions(-) diff --git a/libs/transloco-locale/src/lib/pipes/base-locale.pipe.ts b/libs/transloco-locale/src/lib/pipes/base-locale.pipe.ts index bff3182e6..b9bd44fdf 100644 --- a/libs/transloco-locale/src/lib/pipes/base-locale.pipe.ts +++ b/libs/transloco-locale/src/lib/pipes/base-locale.pipe.ts @@ -1,64 +1,64 @@ -import { - ChangeDetectorRef, - inject, - Injectable, - OnDestroy, -} from '@angular/core'; -import { Subscription } from 'rxjs'; - -import { Locale } from '../../lib/transloco-locale.types'; -import { TranslocoLocaleService } from '../transloco-locale.service'; - -type Deps = [TranslocoLocaleService, ChangeDetectorRef]; -@Injectable() -export abstract class BaseLocalePipe implements OnDestroy { - protected localeService = inject(TranslocoLocaleService); - protected cdr = inject(ChangeDetectorRef); - - private localeChangeSub: Subscription | null = - this.localeService.localeChanges$.subscribe(() => this.invalidate()); - - protected lastValue?: VALUE; - protected lastArgs?: string; - - protected lastResult = ''; - - protected getLocale(locale?: Locale): Locale { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return locale || this.localeService.getLocale()!; - } - - transform(value: VALUE, ...args: ARGS): string { - if (this.isSameValue(value) && this.isSameArgs(...args)) { - return this.lastResult; - } - this.lastResult = this.doTransform(value, ...args); - this.lastValue = value; - this.lastArgs = JSON.stringify(args); - return this.lastResult; - } - - protected abstract doTransform(value: VALUE, ...args: ARGS): string; - - protected isSameValue(value: VALUE): boolean { - return this.lastValue === value; - } - - protected isSameArgs(...args: ARGS): boolean { - return JSON.stringify(args) === this.lastArgs; - } - - invalidate() { - this.lastValue = undefined; - this.lastArgs = undefined; - this.lastResult = ''; - this.cdr.markForCheck(); - } - - ngOnDestroy(): void { - this.localeChangeSub?.unsubscribe(); - // Caretaker note: it's important to clean up references to subscriptions since they save the `next` - // callback within its `destination` property, preventing classes from being GC'd. - this.localeChangeSub = null; - } -} +import { + ChangeDetectorRef, + inject, + Injectable, + OnDestroy, +} from '@angular/core'; +import { Subscription } from 'rxjs'; + +import { Locale } from '../../lib/transloco-locale.types'; +import { TranslocoLocaleService } from '../transloco-locale.service'; + +type Deps = [TranslocoLocaleService, ChangeDetectorRef]; +@Injectable() +export abstract class BaseLocalePipe implements OnDestroy { + protected localeService = inject(TranslocoLocaleService); + protected cdr = inject(ChangeDetectorRef); + + private localeChangeSub: Subscription | null = + this.localeService.localeChanges$.subscribe(() => this.invalidate()); + + protected lastValue?: VALUE; + protected lastArgs?: string; + + protected lastResult = ''; + + protected getLocale(locale?: Locale): Locale { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + return locale || this.localeService.getLocale()!; + } + + transform(value: VALUE, ...args: ARGS): string { + if (this.isSameValue(value) && this.isSameArgs(...args)) { + return this.lastResult; + } + this.lastResult = this.doTransform(value, ...args); + this.lastValue = value; + this.lastArgs = JSON.stringify(args); + return this.lastResult; + } + + protected abstract doTransform(value: VALUE, ...args: ARGS): string; + + protected isSameValue(value: VALUE): boolean { + return this.lastValue === value; + } + + protected isSameArgs(...args: ARGS): boolean { + return JSON.stringify(args) === this.lastArgs; + } + + invalidate() { + this.lastValue = undefined; + this.lastArgs = undefined; + this.lastResult = ''; + this.cdr.markForCheck(); + } + + ngOnDestroy(): void { + this.localeChangeSub?.unsubscribe(); + // Caretaker note: it's important to clean up references to subscriptions since they save the `next` + // callback within its `destination` property, preventing classes from being GC'd. + this.localeChangeSub = null; + } +} diff --git a/libs/transloco-locale/src/lib/pipes/transloco-currency.pipe.ts b/libs/transloco-locale/src/lib/pipes/transloco-currency.pipe.ts index 4a9c7278a..55bd3e43c 100644 --- a/libs/transloco-locale/src/lib/pipes/transloco-currency.pipe.ts +++ b/libs/transloco-locale/src/lib/pipes/transloco-currency.pipe.ts @@ -1,66 +1,66 @@ -import { inject, Pipe, PipeTransform } from '@angular/core'; -import { isNil } from '@ngneat/transloco'; - -import { getDefaultOptions } from '../shared'; -import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; -import { - Currency, - Locale, - LocaleConfig, - NumberFormatOptions, -} from '../transloco-locale.types'; - -import { BaseLocalePipe } from './base-locale.pipe'; - -@Pipe({ - name: 'translocoCurrency', - pure: false, - standalone: true, -}) -export class TranslocoCurrencyPipe - extends BaseLocalePipe - implements PipeTransform -{ - private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); - - /** - * Transform a given number into the locale's currency format. - * - * @example - * - * 1000000 | translocoCurrency: 'symbol' : {} : USD // $1,000,000.00 - * 1000000 | translocoCurrency: 'name' : {} : USD // 1,000,000.00 US dollars - * 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : USD // $1,000,000 - * 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : CAD // CA$1,000,000 - * 1000000 | translocoCurrency: 'narrowSymbol' : {minimumFractionDigits: 0 } : CAD // $1,000,000 - * - */ - protected override doTransform( - value: number | string, - display: 'code' | 'symbol' | 'narrowSymbol' | 'name' = 'symbol', - numberFormatOptions: NumberFormatOptions = {}, - currencyCode?: Currency, - locale?: Locale - ): string { - if (isNil(value)) return ''; - locale = this.getLocale(locale); - - const options = { - ...getDefaultOptions(locale, 'currency', this.localeConfig), - ...numberFormatOptions, - currencyDisplay: display, - currency: currencyCode || this.localeService._resolveCurrencyCode(), - }; - - return this.localeService.localizeNumber( - value, - 'currency', - locale, - options - ); - } -} +import { inject, Pipe, PipeTransform } from '@angular/core'; +import { isNil } from '@ngneat/transloco'; + +import { getDefaultOptions } from '../shared'; +import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; +import { + Currency, + Locale, + LocaleConfig, + NumberFormatOptions, +} from '../transloco-locale.types'; + +import { BaseLocalePipe } from './base-locale.pipe'; + +@Pipe({ + name: 'translocoCurrency', + pure: false, + standalone: true, +}) +export class TranslocoCurrencyPipe + extends BaseLocalePipe + implements PipeTransform +{ + private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); + + /** + * Transform a given number into the locale's currency format. + * + * @example + * + * 1000000 | translocoCurrency: 'symbol' : {} : USD // $1,000,000.00 + * 1000000 | translocoCurrency: 'name' : {} : USD // 1,000,000.00 US dollars + * 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : USD // $1,000,000 + * 1000000 | translocoCurrency: 'symbol' : {minimumFractionDigits: 0 } : CAD // CA$1,000,000 + * 1000000 | translocoCurrency: 'narrowSymbol' : {minimumFractionDigits: 0 } : CAD // $1,000,000 + * + */ + protected override doTransform( + value: number | string, + display: 'code' | 'symbol' | 'narrowSymbol' | 'name' = 'symbol', + numberFormatOptions: NumberFormatOptions = {}, + currencyCode?: Currency, + locale?: Locale + ): string { + if (isNil(value)) return ''; + locale = this.getLocale(locale); + + const options = { + ...getDefaultOptions(locale, 'currency', this.localeConfig), + ...numberFormatOptions, + currencyDisplay: display, + currency: currencyCode || this.localeService._resolveCurrencyCode(), + }; + + return this.localeService.localizeNumber( + value, + 'currency', + locale, + options + ); + } +} diff --git a/libs/transloco-locale/src/lib/pipes/transloco-date.pipe.ts b/libs/transloco-locale/src/lib/pipes/transloco-date.pipe.ts index 93dc1256e..9457734f6 100644 --- a/libs/transloco-locale/src/lib/pipes/transloco-date.pipe.ts +++ b/libs/transloco-locale/src/lib/pipes/transloco-date.pipe.ts @@ -1,56 +1,57 @@ -import { inject, Pipe, PipeTransform } from '@angular/core'; -import { isNil } from '@ngneat/transloco'; - -import { getDefaultOptions } from '../shared'; -import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; -import { - DateFormatOptions, - Locale, - LocaleConfig, - ValidDate, -} from '../transloco-locale.types'; - -import { BaseLocalePipe } from './base-locale.pipe'; - -@Pipe({ - name: 'translocoDate', - pure: false, - standalone: true, -}) -export class TranslocoDatePipe - extends BaseLocalePipe - implements PipeTransform { - private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); - - /** - * Transform a date into the locale's date format. - * - * The date expression: a `Date` object, a number - * (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime). - * - * @example - * - * date | translocoDate: {} : en-US // 9/10/2019 - * date | translocoDate: { dateStyle: 'medium', timeStyle: 'medium' } : en-US // Sep 10, 2019, 10:46:12 PM - * date | translocoDate: { timeZone: 'UTC', timeStyle: 'full' } : en-US // 7:40:32 PM Coordinated Universal Time - * 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970 - * '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019 - */ - protected override doTransform(date: ValidDate, options: DateFormatOptions = {}, locale?: Locale) { - if (isNil(date)) return ''; - locale = this.getLocale(locale); - - return this.localeService.localizeDate(date, locale, { - ...getDefaultOptions(locale, 'date', this.localeConfig), - ...options, - }); - } - - protected override isSameValue(value?: ValidDate) { - return this.getComparableDate(this.lastValue) === this.getComparableDate(value); - } - - private getComparableDate(value?: any) { - return value?.getTime ? value.getTime() : value; - } -} +import { inject, Pipe, PipeTransform } from '@angular/core'; +import { isNil } from '@ngneat/transloco'; + +import { isDate } from '../helpers'; +import { getDefaultOptions } from '../shared'; +import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; +import { + DateFormatOptions, + Locale, + LocaleConfig, + ValidDate, +} from '../transloco-locale.types'; + +import { BaseLocalePipe } from './base-locale.pipe'; + +@Pipe({ + name: 'translocoDate', + pure: false, + standalone: true, +}) +export class TranslocoDatePipe + extends BaseLocalePipe + implements PipeTransform { + private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); + + /** + * Transform a date into the locale's date format. + * + * The date expression: a `Date` object, a number + * (milliseconds since UTC epoch), or an ISO string (https://www.w3.org/TR/NOTE-datetime). + * + * @example + * + * date | translocoDate: {} : en-US // 9/10/2019 + * date | translocoDate: { dateStyle: 'medium', timeStyle: 'medium' } : en-US // Sep 10, 2019, 10:46:12 PM + * date | translocoDate: { timeZone: 'UTC', timeStyle: 'full' } : en-US // 7:40:32 PM Coordinated Universal Time + * 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970 + * '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019 + */ + protected override doTransform(date: ValidDate, options: DateFormatOptions = {}, locale?: Locale) { + if (isNil(date)) return ''; + locale = this.getLocale(locale); + + return this.localeService.localizeDate(date, locale, { + ...getDefaultOptions(locale, 'date', this.localeConfig), + ...options, + }); + } + + protected override isSameValue(value?: ValidDate) { + return this.getComparableDate(this.lastValue) === this.getComparableDate(value); + } + + private getComparableDate(value?: any) { + return isDate(value) ? value.getTime() : value; + } +} diff --git a/libs/transloco-locale/src/lib/pipes/transloco-decimal.pipe.ts b/libs/transloco-locale/src/lib/pipes/transloco-decimal.pipe.ts index 6001d7647..5d1f1a735 100644 --- a/libs/transloco-locale/src/lib/pipes/transloco-decimal.pipe.ts +++ b/libs/transloco-locale/src/lib/pipes/transloco-decimal.pipe.ts @@ -1,49 +1,49 @@ -import { inject, Pipe, PipeTransform } from '@angular/core'; -import { isNil } from '@ngneat/transloco'; - -import { getDefaultOptions } from '../shared'; -import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; -import { - Locale, - LocaleConfig, - NumberFormatOptions, -} from '../transloco-locale.types'; - -import { BaseLocalePipe } from './base-locale.pipe'; - -@Pipe({ - name: 'translocoDecimal', - pure: false, - standalone: true, -}) -export class TranslocoDecimalPipe - extends BaseLocalePipe - implements PipeTransform -{ - private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); - - /** - * Transform a given number into the locale's currency format. - * - * @example - * - * 1234567890 | translocoDecimal: {} : en-US // 1,234,567,890 - * 1234567890 | translocoDecimal: {useGrouping: false}: en-US // 1234567890 - * - */ - protected override doTransform( - value: string | number, - numberFormatOptions: NumberFormatOptions = {}, - locale?: Locale - ): string { - if (isNil(value)) return ''; - locale = this.getLocale(locale); - - const options = { - ...getDefaultOptions(locale, 'decimal', this.localeConfig), - ...numberFormatOptions, - }; - - return this.localeService.localizeNumber(value, 'decimal', locale, options); - } -} +import { inject, Pipe, PipeTransform } from '@angular/core'; +import { isNil } from '@ngneat/transloco'; + +import { getDefaultOptions } from '../shared'; +import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; +import { + Locale, + LocaleConfig, + NumberFormatOptions, +} from '../transloco-locale.types'; + +import { BaseLocalePipe } from './base-locale.pipe'; + +@Pipe({ + name: 'translocoDecimal', + pure: false, + standalone: true, +}) +export class TranslocoDecimalPipe + extends BaseLocalePipe + implements PipeTransform +{ + private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); + + /** + * Transform a given number into the locale's currency format. + * + * @example + * + * 1234567890 | translocoDecimal: {} : en-US // 1,234,567,890 + * 1234567890 | translocoDecimal: {useGrouping: false}: en-US // 1234567890 + * + */ + protected override doTransform( + value: string | number, + numberFormatOptions: NumberFormatOptions = {}, + locale?: Locale + ): string { + if (isNil(value)) return ''; + locale = this.getLocale(locale); + + const options = { + ...getDefaultOptions(locale, 'decimal', this.localeConfig), + ...numberFormatOptions, + }; + + return this.localeService.localizeNumber(value, 'decimal', locale, options); + } +} diff --git a/libs/transloco-locale/src/lib/pipes/transloco-percent.pipe.ts b/libs/transloco-locale/src/lib/pipes/transloco-percent.pipe.ts index 162920ddf..5f767559b 100644 --- a/libs/transloco-locale/src/lib/pipes/transloco-percent.pipe.ts +++ b/libs/transloco-locale/src/lib/pipes/transloco-percent.pipe.ts @@ -1,49 +1,49 @@ -import { inject, Pipe, PipeTransform } from '@angular/core'; -import { isNil } from '@ngneat/transloco'; - -import { getDefaultOptions } from '../shared'; -import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; -import { - Locale, - LocaleConfig, - NumberFormatOptions, -} from '../transloco-locale.types'; - -import { BaseLocalePipe } from './base-locale.pipe'; - -@Pipe({ - name: 'translocoPercent', - pure: false, - standalone: true, -}) -export class TranslocoPercentPipe - extends BaseLocalePipe - implements PipeTransform -{ - private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); - - /** - * Transform a given number into the locale's currency format. - * - * @example - * - * 1 | translocoPercent : {} : en-US // 100% - * "1" | translocoPercent : {} : en-US // 100% - * - */ - protected override doTransform( - value: number | string, - numberFormatOptions: NumberFormatOptions = {}, - locale?: Locale - ): string { - if (isNil(value)) return ''; - locale = this.getLocale(locale); - - const options = { - ...getDefaultOptions(locale, 'percent', this.localeConfig), - ...numberFormatOptions, - }; - - return this.localeService.localizeNumber(value, 'percent', locale, options); - } -} +import { inject, Pipe, PipeTransform } from '@angular/core'; +import { isNil } from '@ngneat/transloco'; + +import { getDefaultOptions } from '../shared'; +import { TRANSLOCO_LOCALE_CONFIG } from '../transloco-locale.config'; +import { + Locale, + LocaleConfig, + NumberFormatOptions, +} from '../transloco-locale.types'; + +import { BaseLocalePipe } from './base-locale.pipe'; + +@Pipe({ + name: 'translocoPercent', + pure: false, + standalone: true, +}) +export class TranslocoPercentPipe + extends BaseLocalePipe + implements PipeTransform +{ + private localeConfig: LocaleConfig = inject(TRANSLOCO_LOCALE_CONFIG); + + /** + * Transform a given number into the locale's currency format. + * + * @example + * + * 1 | translocoPercent : {} : en-US // 100% + * "1" | translocoPercent : {} : en-US // 100% + * + */ + protected override doTransform( + value: number | string, + numberFormatOptions: NumberFormatOptions = {}, + locale?: Locale + ): string { + if (isNil(value)) return ''; + locale = this.getLocale(locale); + + const options = { + ...getDefaultOptions(locale, 'percent', this.localeConfig), + ...numberFormatOptions, + }; + + return this.localeService.localizeNumber(value, 'percent', locale, options); + } +} diff --git a/libs/transloco-locale/src/lib/tests/pipes/transloco-currency.pipe.spec.ts b/libs/transloco-locale/src/lib/tests/pipes/transloco-currency.pipe.spec.ts index f3115444a..681ff2ead 100644 --- a/libs/transloco-locale/src/lib/tests/pipes/transloco-currency.pipe.spec.ts +++ b/libs/transloco-locale/src/lib/tests/pipes/transloco-currency.pipe.spec.ts @@ -104,6 +104,39 @@ describe('TranslocoCurrencyPipe', () => { expect(maximumFractionDigits).toEqual(4); }); + it('should return previous result with same config', () => { + spectator = pipeFactory( + `{{ data | translocoCurrency:'symbol':config }}`, + { + hostProps: { + data: '123', + config: { + useGrouping: false, + maximumFractionDigits: 3, + }, + }, + } + ); + + const [, { useGrouping, maximumFractionDigits }] = getIntlCallArgs(); + expect(useGrouping).toBeFalsy(); + expect(maximumFractionDigits).toEqual(3); + const first = spectator.element.textContent; + + intlSpy.calls.reset(); + spectator.setHostInput({ + data: '123', + config: { + useGrouping: false, + maximumFractionDigits: 3, + }, + }); + const second = spectator.element.textContent; + + expect(intlSpy).not.toHaveBeenCalled(); + expect(second).toBe(first); + }); + it('should take number options from locale settings', () => { spectator = pipeFactory(`{{ '123' | translocoCurrency }}`, { providers: [provideTranslocoServiceMock('es-ES')], diff --git a/libs/transloco-locale/src/lib/tests/pipes/transloco-date.pipe.spec.ts b/libs/transloco-locale/src/lib/tests/pipes/transloco-date.pipe.spec.ts index a08a81917..855f67f90 100644 --- a/libs/transloco-locale/src/lib/tests/pipes/transloco-date.pipe.spec.ts +++ b/libs/transloco-locale/src/lib/tests/pipes/transloco-date.pipe.spec.ts @@ -46,6 +46,30 @@ describe('TranslocoDatePipe', () => { expect(timeStyle).toEqual('medium'); }); + it('should return previous result with same config', () => { + spectator = pipeFactory(`{{ date | translocoDate:config }}`, { + hostProps: { + date, + config: { dateStyle: 'medium', timeStyle: 'medium' }, + }, + }); + + const [, { dateStyle, timeStyle }] = getIntlCallArgs(); + expect(dateStyle).toEqual('medium'); + expect(timeStyle).toEqual('medium'); + const first = spectator.element.textContent; + + intlSpy.calls.reset(); + spectator.setHostInput({ + date, + config: { dateStyle: 'medium', timeStyle: 'medium' }, + }); + const second = spectator.element.textContent; + + expect(intlSpy).not.toHaveBeenCalled(); + expect(second).toBe(first); + }); + it('should consider a global date config', () => { spectator = pipeFactory(`{{ date | translocoDate }}`, { hostProps: { diff --git a/libs/transloco-locale/src/lib/tests/pipes/transloco-decimal.pipe.spec.ts b/libs/transloco-locale/src/lib/tests/pipes/transloco-decimal.pipe.spec.ts index 473b5f59b..f4ad41ee3 100644 --- a/libs/transloco-locale/src/lib/tests/pipes/transloco-decimal.pipe.spec.ts +++ b/libs/transloco-locale/src/lib/tests/pipes/transloco-decimal.pipe.spec.ts @@ -79,4 +79,31 @@ describe('TranslocoDecimalPipe', () => { expect(spectator.element).toHaveText(''); }); }); + + it('should return previous result with same config', () => { + spectator = pipeFactory( + `{{ data | translocoDecimal:config }}`, + { + hostProps: { + data: 123, + config: { useGrouping: false, maximumFractionDigits: 3 } + } + } + ); + + const [, { useGrouping, maximumFractionDigits }] = getIntlCallArgs(); + expect(useGrouping).toBeFalsy(); + expect(maximumFractionDigits).toEqual(3); + const first = spectator.element.textContent; + + intlSpy.calls.reset(); + spectator.setHostInput({ + data: 123, + config: { useGrouping: false, maximumFractionDigits: 3 } + }); + const second = spectator.element.textContent; + + expect(intlSpy).not.toHaveBeenCalled(); + expect(second).toBe(first); + }); }); diff --git a/libs/transloco-locale/src/lib/tests/pipes/transloco-percent.pipe.spec.ts b/libs/transloco-locale/src/lib/tests/pipes/transloco-percent.pipe.spec.ts index 670354e76..e5cd1b368 100644 --- a/libs/transloco-locale/src/lib/tests/pipes/transloco-percent.pipe.spec.ts +++ b/libs/transloco-locale/src/lib/tests/pipes/transloco-percent.pipe.spec.ts @@ -62,4 +62,31 @@ describe('TranslocoPercentPipe', () => { expect(useGrouping).toBeTrue(); expect(maximumFractionDigits).toEqual(3); }); + + it('should return previous result with same config', () => { + spectator = pipeFactory( + `{{ data | translocoPercent:config }}`, + { + hostProps: { + data: '123', + config: { useGrouping: false, maximumFractionDigits: 3 } + } + } + ); + + const [, { useGrouping, maximumFractionDigits }] = getIntlCallArgs(); + expect(useGrouping).toBeFalsy(); + expect(maximumFractionDigits).toEqual(3); + const first = spectator.element.textContent; + + intlSpy.calls.reset(); + spectator.setHostInput({ + data: '123', + config: { useGrouping: false, maximumFractionDigits: 3 } + }); + const second = spectator.element.textContent; + + expect(intlSpy).not.toHaveBeenCalled(); + expect(second).toBe(first); + }); });