fix(common): let case conversion pipes accept type unions with null (…

…angular#36259)

The old implementation of case conversion types can handle several
values which are not strings, but the signature did not reflect this.

The new one reports errors when falsy non-string inputs are given to
the pipe (such as `false` or `0`) and has a new signature which
instead reflcts the behaviour on `null` and `undefined`.

Fixes angular#36259

goldens/public-api/common/common.d.ts

@@ -193,6 +193,7 @@ export declare abstract class LocationStrategy {
 }
 
 export declare class LowerCasePipe implements PipeTransform {
+    transform(value: string | null | undefined): string | null;
     transform(value: string): string;
 }
 
@@ -391,6 +392,7 @@ export declare type Time = {
 };
 
 export declare class TitleCasePipe implements PipeTransform {
+    transform(value: string | null | undefined): string | null;
     transform(value: string): string;
 }
 
@@ -402,6 +404,7 @@ export declare enum TranslationWidth {
 }
 
 export declare class UpperCasePipe implements PipeTransform {
+    transform(value: string | null | undefined): string | null;
     transform(value: string): string;
 }
 

packages/common/src/pipes/case_conversion_pipes.ts

@@ -29,8 +29,10 @@ export class LowerCasePipe implements PipeTransform {
   /**
    * @param value The string to transform to lower case.
    */
-  transform(value: string): string {
-    if (!value) return value;
+  transform(value: string|null|undefined): string|null;
+  transform(value: string): string;
+  transform(value: string|null|undefined): string|null {
+    if (value == null) return null;
     if (typeof value !== 'string') {
       throw invalidPipeArgumentError(LowerCasePipe, value);
     }
@@ -72,8 +74,10 @@ export class TitleCasePipe implements PipeTransform {
   /**
    * @param value The string to transform to title case.
    */
-  transform(value: string): string {
-    if (!value) return value;
+  transform(value: string|null|undefined): string|null;
+  transform(value: string): string;
+  transform(value: string|null|undefined): string|null {
+    if (value == null) return null;
     if (typeof value !== 'string') {
       throw invalidPipeArgumentError(TitleCasePipe, value);
     }
@@ -96,8 +100,10 @@ export class UpperCasePipe implements PipeTransform {
   /**
    * @param value The string to transform to upper case.
    */
-  transform(value: string): string {
-    if (!value) return value;
+  transform(value: string|null|undefined): string|null;
+  transform(value: string): string;
+  transform(value: string|null|undefined): string|null {
+    if (value == null) return null;
     if (typeof value !== 'string') {
       throw invalidPipeArgumentError(UpperCasePipe, value);
     }

packages/common/test/pipes/case_conversion_pipes_spec.ts

@@ -25,6 +25,16 @@ import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
       expect(pipe.transform('BAr')).toEqual('bar');
     });
 
+    it('should map null to null', () => {
+      expect(pipe.transform(null)).toEqual(null);
+    });
+    it('should map undefined to null', () => {
+      expect(pipe.transform(undefined)).toEqual(null);
+    });
+
+    it('should not support numbers', () => {
+      expect(() => pipe.transform(<any>0)).toThrowError();
+    });
     it('should not support other objects', () => {
       expect(() => pipe.transform(<any>{})).toThrowError();
     });
@@ -80,6 +90,16 @@ import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
       expect(pipe.transform('éric')).toEqual('Éric');
     });
 
+    it('should map null to null', () => {
+      expect(pipe.transform(null)).toEqual(null);
+    });
+    it('should map undefined to null', () => {
+      expect(pipe.transform(undefined)).toEqual(null);
+    });
+
+    it('should not support numbers', () => {
+      expect(() => pipe.transform(<any>0)).toThrowError();
+    });
     it('should not support other objects', () => {
       expect(() => pipe.transform(<any>{})).toThrowError();
     });
@@ -101,6 +121,16 @@ import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
       expect(pipe.transform('bar')).toEqual('BAR');
     });
 
+    it('should map null to null', () => {
+      expect(pipe.transform(null)).toEqual(null);
+    });
+    it('should map undefined to null', () => {
+      expect(pipe.transform(undefined)).toEqual(null);
+    });
+
+    it('should not support numbers', () => {
+      expect(() => pipe.transform(<any>0)).toThrowError();
+    });
     it('should not support other objects', () => {
       expect(() => pipe.transform(<any>{})).toThrowError();
     });