Hone logo
Hone
Problems

Unit Testing an Angular Pipe

Angular pipes are a powerful feature for transforming data within your templates. While they are generally straightforward to use, testing them effectively is crucial to ensure they behave as expected under various conditions. This challenge will guide you through creating robust unit tests for a custom Angular pipe.

Problem Description

Your task is to write unit tests for a custom Angular pipe named CurrencyFormatPipe. This pipe takes a number as input and formats it as a currency string with a specified currency symbol and decimal places.

Key Requirements:

  • Create a test suite for the CurrencyFormatPipe.
  • Test the pipe's ability to format positive numbers with a specified currency symbol and number of decimal places.
  • Test the pipe's ability to format negative numbers.
  • Test the pipe's handling of zero.
  • Test the pipe's behavior with non-numeric inputs (e.g., null, undefined, strings).
  • Ensure the pipe correctly applies the specified number of decimal places.

Expected Behavior:

  • pipe.transform(1234.5678, '$', 2) should return '$1,234.57'
  • pipe.transform(-987.654, '€', 0) should return '-€988'
  • pipe.transform(0, '£', 3) should return '£0.000'
  • pipe.transform(null, '$', 2) should return '' (or an empty string, or the original input, depending on preferred edge case handling, let's go with empty string for this challenge)
  • pipe.transform('abc', '$', 2) should return ''

Examples

Example 1:

Input to transform: 1234.5678, currencySymbol: '$', decimalPlaces: 2
Output: '$1,234.57'
Explanation: The number is formatted with a dollar sign and rounded to two decimal places. Commas are added for thousands separators.

Example 2:

Input to transform: -987.654, currencySymbol: '€', decimalPlaces: 0
Output: '-€988'
Explanation: The negative number is formatted with a euro symbol and rounded to zero decimal places. The negative sign is preserved.

Example 3:

Input to transform: null, currencySymbol: '$', decimalPlaces: 2
Output: ''
Explanation: Non-numeric or null input results in an empty string output.

Example 4:

Input to transform: 42.5, currencySymbol: '¥', decimalPlaces: 3
Output: '¥42.500'
Explanation: The pipe correctly pads with zeros to meet the specified decimal places.

Constraints

  • The pipe should use standard JavaScript Number.prototype.toLocaleString for formatting, if appropriate, to handle locale-specific formatting (though for this challenge, we'll focus on the basic requirements, assuming default locale or simple comma separators).
  • The tests should be written using Jasmine or Jest (common testing frameworks for Angular).
  • The tests should be placed in a .spec.ts file corresponding to the pipe.

Notes

  • You will need to create a basic CurrencyFormatPipe class first, even if it's a simplified version, to have something to test. The focus of this challenge is the testing part.
  • Consider how you will mock or instantiate the pipe within your test environment.
  • Think about the order of operations: applying currency symbol, formatting decimals, handling thousands separators, and dealing with negative numbers.
  • The transform method of a pipe typically accepts arguments. Your tests should simulate calling this method with various inputs.
Loading editor...
typescript