angular-docs-cn/packages/core/test/render3/outputs_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 {EventEmitter} from '@angular/core';

import {ɵɵdefineComponent, ɵɵdefineDirective} from '../../src/render3/index';
import {ɵɵcontainer, ɵɵcontainerRefreshEnd, ɵɵcontainerRefreshStart, ɵɵelementEnd, ɵɵelementStart, ɵɵembeddedViewEnd, ɵɵembeddedViewStart, ɵɵlistener, ɵɵtext} from '../../src/render3/instructions/all';
import {RenderFlags} from '../../src/render3/interfaces/definition';

import {renderToHtml} from './render_util';

describe('outputs', () => {
  let buttonToggle: ButtonToggle;

  class ButtonToggle {
    change = new EventEmitter();
    resetStream = new EventEmitter();

    static ɵfac = () => buttonToggle = new ButtonToggle();
    static ɵcmp = ɵɵdefineComponent({
      type: ButtonToggle,
      selectors: [['button-toggle']],
      template: function(rf: RenderFlags, ctx: any) {},
      decls: 0,
      vars: 0,
      outputs: {change: 'change', resetStream: 'reset'}
    });
  }

  let otherDir: OtherDir;

  class OtherDir {
    changeStream = new EventEmitter();

    static ɵfac = () => otherDir = new OtherDir;
    static ɵdir = ɵɵdefineDirective(
        {type: OtherDir, selectors: [['', 'otherDir', '']], outputs: {changeStream: 'change'}});
  }


  const deps = [ButtonToggle, OtherDir];

  it('should work with outputs at same index in if block', () => {
    /**
     * <button (click)="onClick()">Click me</button>             // outputs: null
     * % if (condition) {
     *   <button-toggle (change)="onChange()"></button-toggle>   // outputs: {change: [0, 'change']}
     * % } else {
     *   <div otherDir (change)="onChange()"></div>             // outputs: {change: [0,
     * 'changeStream']}
     * % }
     */
    function Template(rf: RenderFlags, ctx: any) {
      if (rf & RenderFlags.Create) {
        ɵɵelementStart(0, 'button');
        {
          ɵɵlistener('click', function() { return ctx.onClick(); });
          ɵɵtext(1, 'Click me');
        }
        ɵɵelementEnd();
        ɵɵcontainer(2);
      }
      if (rf & RenderFlags.Update) {
        ɵɵcontainerRefreshStart(2);
        {
          if (ctx.condition) {
            let rf1 = ɵɵembeddedViewStart(0, 1, 0);
            if (rf1 & RenderFlags.Create) {
              ɵɵelementStart(0, 'button-toggle');
              {
                ɵɵlistener('change', function() { return ctx.onChange(); });
              }
              ɵɵelementEnd();
            }
            ɵɵembeddedViewEnd();
          } else {
            if (ɵɵembeddedViewStart(1, 1, 0)) {
              ɵɵelementStart(0, 'div', 0);
              {
                ɵɵlistener('change', function() { return ctx.onChange(); });
              }
              ɵɵelementEnd();
            }
            ɵɵembeddedViewEnd();
          }
        }
        ɵɵcontainerRefreshEnd();
      }
    }

    let counter = 0;
    const ctx = {condition: true, onChange: () => counter++, onClick: () => {}};
    const attrs = [['otherDir', '']];
    renderToHtml(Template, ctx, 3, 0, deps, null, null, false, attrs);

    buttonToggle !.change.next();
    expect(counter).toEqual(1);

    ctx.condition = false;
    renderToHtml(Template, ctx, 3, 0, deps, null, null, false, attrs);
    expect(counter).toEqual(1);

    otherDir !.changeStream.next();
    expect(counter).toEqual(2);
  });

});