fix(common): titlecase pipe (#22600)

PR Close #22600

packages/common/test/pipes/case_conversion_pipes_spec.ts

@@ -45,6 +45,27 @@ import {LowerCasePipe, TitleCasePipe, UpperCasePipe} from '@angular/common';
       expect(pipe.transform('foo')).toEqual('Foo');
     });
 
+    it('should not capitalize letter after the quotes',
+       () => { expect(pipe.transform('it\'s complicated')).toEqual('It\'s Complicated'); });
+
+    it('should not treat non-space character as a separator', () => {
+      expect(pipe.transform('one,two,three')).toEqual('One,two,three');
+      expect(pipe.transform('true|false')).toEqual('True|false');
+      expect(pipe.transform('foo-vs-bar')).toEqual('Foo-vs-bar');
+    });
+
+    it('should support support all whitespace characters', () => {
+      expect(pipe.transform('one\ttwo')).toEqual('One\tTwo');
+      expect(pipe.transform('three\rfour')).toEqual('Three\rFour');
+      expect(pipe.transform('five\nsix')).toEqual('Five\nSix');
+    });
+
+    it('should work properly for non-latin alphabet', () => {
+      expect(pipe.transform('føderation')).toEqual('Føderation');
+      expect(pipe.transform('poniedziałek')).toEqual('Poniedziałek');
+      expect(pipe.transform('éric')).toEqual('Éric');
+    });
+
     it('should not support other objects',
        () => { expect(() => pipe.transform(<any>{})).toThrowError(); });
   });

packages/examples/common/pipes/ts/e2e_test/pipe_spec.ts

@@ -17,10 +17,9 @@ function waitForElement(selector: string) {
 
 describe('pipe', () => {
   afterEach(verifyNoBrowserErrors);
+  const URL = '/common/pipes/ts/';
 
   describe('async', () => {
-    const URL = '/common/pipes/ts/';
-
     it('should resolve and display promise', () => {
       browser.get(URL);
       waitForElement('async-promise-pipe');
@@ -30,8 +29,10 @@ describe('pipe', () => {
       expect(element.all(by.css('async-promise-pipe span')).get(0).getText())
           .toEqual('Wait for it... hi there!');
     });
+  });
 
-    it('should update lowercase/uppercase', () => {
+  describe('lowercase/uppercase', () => {
+    it('should work properly', () => {
       browser.get(URL);
       waitForElement('lowerupper-pipe');
       element(by.css('lowerupper-pipe input')).sendKeys('Hello World!');
@@ -41,4 +42,19 @@ describe('pipe', () => {
           .toEqual('\'HELLO WORLD!\'');
     });
   });
+
+  describe('titlecase', () => {
+    it('should work properly', () => {
+      browser.get(URL);
+      waitForElement('titlecase-pipe');
+      expect(element.all(by.css('titlecase-pipe p')).get(0).getText()).toEqual('Some String');
+      expect(element.all(by.css('titlecase-pipe p')).get(1).getText())
+          .toEqual('This Is Mixed Case');
+      expect(element.all(by.css('titlecase-pipe p')).get(2).getText())
+          .toEqual('It\'s Non-trivial Question');
+      expect(element.all(by.css('titlecase-pipe p')).get(3).getText()).toEqual('One,two,three');
+      expect(element.all(by.css('titlecase-pipe p')).get(4).getText()).toEqual('True|false');
+      expect(element.all(by.css('titlecase-pipe p')).get(5).getText()).toEqual('Foo-vs-bar');
+    });
+  });
 });

packages/examples/common/pipes/ts/module.ts

@@ -18,6 +18,7 @@ import {LowerUpperPipeComponent} from './lowerupper_pipe';
 import {DeprecatedNumberPipeComponent, NumberPipeComponent} from './number_pipe';
 import {DeprecatedPercentPipeComponent, PercentPipeComponent} from './percent_pipe';
 import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe';
+import {TitleCasePipeComponent} from './titlecase_pipe';
 
 @Component({
   selector: 'example-app',
@@ -37,6 +38,9 @@ import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe';
     <h2><code>lower</code>, <code>upper</code></h2>
     <lowerupper-pipe></lowerupper-pipe>
 
+    <h2><code>titlecase</code></h2>
+    <titlecase-pipe></titlecase-pipe>
+
     <h2><code>number</code></h2>
     <number-pipe></number-pipe>
     <percent-pipe></percent-pipe>
@@ -57,10 +61,10 @@ export class ExampleAppComponent {
 @NgModule({
   declarations: [
     AsyncPromisePipeComponent, AsyncObservablePipeComponent, ExampleAppComponent, JsonPipeComponent,
-    DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent,
-    PercentPipeComponent, DeprecatedPercentPipeComponent, CurrencyPipeComponent,
-    DeprecatedCurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent,
-    I18nPluralPipeComponent, I18nSelectPipeComponent
+    DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, TitleCasePipeComponent,
+    NumberPipeComponent, PercentPipeComponent, DeprecatedPercentPipeComponent,
+    CurrencyPipeComponent, DeprecatedCurrencyPipeComponent, SlicePipeStringComponent,
+    SlicePipeListComponent, I18nPluralPipeComponent, I18nSelectPipeComponent
   ],
   imports: [BrowserModule],
   bootstrap: [ExampleAppComponent]

packages/examples/common/pipes/ts/titlecase_pipe.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+// #docregion TitleCasePipe
+@Component({
+  selector: 'titlecase-pipe',
+  template: `<div>
+    <p>{{'some string' | titlecase}}</p> <!-- output is expected to be "Some String" --> 
+    <p>{{'tHIs is mIXeD CaSe' | titlecase}}</p> <!-- output is expected to be "This Is Mixed Case" --> 
+    <p>{{'it\\'s non-trivial question' | titlecase}}</p> <!-- output is expected to be "It's Non-trivial Question" --> 
+    <p>{{'one,two,three' | titlecase}}</p> <!-- output is expected to be "One,two,three" -->
+    <p>{{'true|false' | titlecase}}</p> <!-- output is expected to be "True|false" -->
+    <p>{{'foo-vs-bar' | titlecase}}</p> <!-- output is expected to be "Foo-vs-bar" -->
+  </div>`
+})
+export class TitleCasePipeComponent {
+}
+// #enddocregion