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

/**
 * @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 {beforeEach, ddescribe, describe, iit, inject, it, xit,} from '@angular/core/testing/testing_internal';
import {TestComponentBuilder} from '@angular/core/testing';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {expect} from '@angular/platform-browser/testing/matchers';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';

import {Component} from '@angular/core';
import {NgIf} from '@angular/common';

import {IS_DART} from '../../src/facade/lang';

export function main() {
  describe('ngIf directive', () => {
    it('should work in a template attribute',
       inject(
           [TestComponentBuilder, AsyncTestCompleter],
           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
             var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';

             tcb.overrideTemplate(TestComponent, html)
                 .createAsync(TestComponent)
                 .then((fixture) => {
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(1);
                   expect(fixture.debugElement.nativeElement).toHaveText('hello');
                   async.done();
                 });
           }));

    it('should work in a template element',
       inject(
           [TestComponentBuilder, AsyncTestCompleter],
           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
             var html =
                 '<div><template [ngIf]="booleanCondition"><copy-me>hello2</copy-me></template></div>';

             tcb.overrideTemplate(TestComponent, html)
                 .createAsync(TestComponent)
                 .then((fixture) => {
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(1);
                   expect(fixture.debugElement.nativeElement).toHaveText('hello2');
                   async.done();
                 });
           }));

    it('should toggle node when condition changes',
       inject(
           [TestComponentBuilder, AsyncTestCompleter],
           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
             var html = '<div><copy-me template="ngIf booleanCondition">hello</copy-me></div>';

             tcb.overrideTemplate(TestComponent, html)
                 .createAsync(TestComponent)
                 .then((fixture) => {
                   fixture.debugElement.componentInstance.booleanCondition = false;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(0);
                   expect(fixture.debugElement.nativeElement).toHaveText('');

                   fixture.debugElement.componentInstance.booleanCondition = true;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(1);
                   expect(fixture.debugElement.nativeElement).toHaveText('hello');

                   fixture.debugElement.componentInstance.booleanCondition = false;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(0);
                   expect(fixture.debugElement.nativeElement).toHaveText('');

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

    it('should handle nested if correctly',
       inject(
           [TestComponentBuilder, AsyncTestCompleter],
           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
             var html =
                 '<div><template [ngIf]="booleanCondition"><copy-me *ngIf="nestedBooleanCondition">hello</copy-me></template></div>';

             tcb.overrideTemplate(TestComponent, html)
                 .createAsync(TestComponent)
                 .then((fixture) => {
                   fixture.debugElement.componentInstance.booleanCondition = false;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(0);
                   expect(fixture.debugElement.nativeElement).toHaveText('');

                   fixture.debugElement.componentInstance.booleanCondition = true;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(1);
                   expect(fixture.debugElement.nativeElement).toHaveText('hello');

                   fixture.debugElement.componentInstance.nestedBooleanCondition = false;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(0);
                   expect(fixture.debugElement.nativeElement).toHaveText('');

                   fixture.debugElement.componentInstance.nestedBooleanCondition = true;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(1);
                   expect(fixture.debugElement.nativeElement).toHaveText('hello');

                   fixture.debugElement.componentInstance.booleanCondition = false;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(0);
                   expect(fixture.debugElement.nativeElement).toHaveText('');

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

    it('should update several nodes with if',
       inject(
           [TestComponentBuilder, AsyncTestCompleter],
           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
             var html = '<div>' +
                 '<copy-me template="ngIf numberCondition + 1 >= 2">helloNumber</copy-me>' +
                 '<copy-me template="ngIf stringCondition == \'foo\'">helloString</copy-me>' +
                 '<copy-me template="ngIf functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
                 '</div>';

             tcb.overrideTemplate(TestComponent, html)
                 .createAsync(TestComponent)
                 .then((fixture) => {
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(3);
                   expect(getDOM().getText(fixture.debugElement.nativeElement))
                       .toEqual('helloNumberhelloStringhelloFunction');

                   fixture.debugElement.componentInstance.numberCondition = 0;
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(1);
                   expect(fixture.debugElement.nativeElement).toHaveText('helloString');

                   fixture.debugElement.componentInstance.numberCondition = 1;
                   fixture.debugElement.componentInstance.stringCondition = 'bar';
                   fixture.detectChanges();
                   expect(getDOM()
                              .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                              .length)
                       .toEqual(1);
                   expect(fixture.debugElement.nativeElement).toHaveText('helloNumber');
                   async.done();
                 });
           }));


    if (!IS_DART) {
      it('should not add the element twice if the condition goes from true to true (JS)',
         inject(
             [TestComponentBuilder, AsyncTestCompleter],
             (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
               var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';

               tcb.overrideTemplate(TestComponent, html)
                   .createAsync(TestComponent)
                   .then((fixture) => {
                     fixture.detectChanges();
                     expect(getDOM()
                                .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                                .length)
                         .toEqual(1);
                     expect(fixture.debugElement.nativeElement).toHaveText('hello');

                     fixture.debugElement.componentInstance.numberCondition = 2;
                     fixture.detectChanges();
                     expect(getDOM()
                                .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                                .length)
                         .toEqual(1);
                     expect(fixture.debugElement.nativeElement).toHaveText('hello');

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

      it('should not recreate the element if the condition goes from true to true (JS)',
         inject(
             [TestComponentBuilder, AsyncTestCompleter],
             (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
               var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';

               tcb.overrideTemplate(TestComponent, html)
                   .createAsync(TestComponent)
                   .then((fixture) => {
                     fixture.detectChanges();
                     getDOM().addClass(
                         getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'),
                         'foo');

                     fixture.debugElement.componentInstance.numberCondition = 2;
                     fixture.detectChanges();
                     expect(
                         getDOM().hasClass(
                             getDOM().querySelector(fixture.debugElement.nativeElement, 'copy-me'),
                             'foo'))
                         .toBe(true);

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

    if (IS_DART) {
      it('should not create the element if the condition is not a boolean (DART)',
         inject(
             [TestComponentBuilder, AsyncTestCompleter],
             (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
               var html = '<div><copy-me template="ngIf numberCondition">hello</copy-me></div>';

               tcb.overrideTemplate(TestComponent, html)
                   .createAsync(TestComponent)
                   .then((fixture) => {
                     expect(() => fixture.detectChanges()).toThrowError();
                     expect(getDOM()
                                .querySelectorAll(fixture.debugElement.nativeElement, 'copy-me')
                                .length)
                         .toEqual(0);
                     expect(fixture.debugElement.nativeElement).toHaveText('');
                     async.done();
                   });
             }));
    }

  });
}

@Component({selector: 'test-cmp', directives: [NgIf], template: ''})
class TestComponent {
  booleanCondition: boolean;
  nestedBooleanCondition: boolean;
  numberCondition: number;
  stringCondition: string;
  functionCondition: Function;
  constructor() {
    this.booleanCondition = true;
    this.nestedBooleanCondition = true;
    this.numberCondition = 1;
    this.stringCondition = 'foo';
    this.functionCondition = function(s: any, n: any): boolean { return s == 'foo' && n == 1; };
  }
}