angular-docs-cn/modules/@angular/common/test/directives/ng_plural_spec.ts

import {
  beforeEachProviders,
  beforeEach,
  ddescribe,
  describe,
  expect,
  iit,
  inject,
  it,
  xit,
} from '@angular/core/testing/testing_internal';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {TestComponentBuilder} from '@angular/compiler/testing';

import {Component, Injectable} from '@angular/core';
import {NgPlural, NgPluralCase, NgLocalization} from '@angular/common';

export function main() {
  describe('switch', () => {
    beforeEachProviders(() => [{provide: NgLocalization, useClass: TestLocalizationMap}]);

    it('should display the template according to the exact value',
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
         var template = '<div>' +
                        '<ul [ngPlural]="switchValue">' +
                        '<template ngPluralCase="=0"><li>you have no messages.</li></template>' +
                        '<template ngPluralCase="=1"><li>you have one message.</li></template>' +
                        '</ul></div>';

         tcb.overrideTemplate(TestComponent, template)
             .createAsync(TestComponent)
             .then((fixture) => {
               fixture.debugElement.componentInstance.switchValue = 0;
               fixture.detectChanges();
               expect(fixture.debugElement.nativeElement).toHaveText('you have no messages.');

               fixture.debugElement.componentInstance.switchValue = 1;
               fixture.detectChanges();
               expect(fixture.debugElement.nativeElement).toHaveText('you have one message.');

               async.done();
             });
       }));

    it('should display the template according to the category',
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
         var template =
             '<div>' +
             '<ul [ngPlural]="switchValue">' +
             '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
             '<template ngPluralCase="many"><li>you have many messages.</li></template>' +
             '</ul></div>';

         tcb.overrideTemplate(TestComponent, template)
             .createAsync(TestComponent)
             .then((fixture) => {
               fixture.debugElement.componentInstance.switchValue = 2;
               fixture.detectChanges();
               expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.');

               fixture.debugElement.componentInstance.switchValue = 8;
               fixture.detectChanges();
               expect(fixture.debugElement.nativeElement).toHaveText('you have many messages.');

               async.done();
             });
       }));

    it('should default to other when no matches are found',
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
         var template =
             '<div>' +
             '<ul [ngPlural]="switchValue">' +
             '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
             '<template ngPluralCase="other"><li>default message.</li></template>' +
             '</ul></div>';

         tcb.overrideTemplate(TestComponent, template)
             .createAsync(TestComponent)
             .then((fixture) => {
               fixture.debugElement.componentInstance.switchValue = 100;
               fixture.detectChanges();
               expect(fixture.debugElement.nativeElement).toHaveText('default message.');

               async.done();
             });
       }));

    it('should prioritize value matches over category matches',
       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
         var template =
             '<div>' +
             '<ul [ngPlural]="switchValue">' +
             '<template ngPluralCase="few"><li>you have a few messages.</li></template>' +
             '<template ngPluralCase="=2">you have two messages.</template>' +
             '</ul></div>';

         tcb.overrideTemplate(TestComponent, template)
             .createAsync(TestComponent)
             .then((fixture) => {
               fixture.debugElement.componentInstance.switchValue = 2;
               fixture.detectChanges();
               expect(fixture.debugElement.nativeElement).toHaveText('you have two messages.');

               fixture.debugElement.componentInstance.switchValue = 3;
               fixture.detectChanges();
               expect(fixture.debugElement.nativeElement).toHaveText('you have a few messages.');

               async.done();
             });
       }));
  });
}


@Injectable()
export class TestLocalizationMap extends NgLocalization {
  getPluralCategory(value: number): string {
    if (value > 1 && value < 4) {
      return 'few';
    } else if (value >= 4 && value < 10) {
      return 'many';
    } else {
      return 'other';
    }
  }
}


@Component({selector: 'test-cmp', directives: [NgPlural, NgPluralCase], template: ''})
class TestComponent {
  switchValue: number;

  constructor() { this.switchValue = null; }
}