r3_view_compiler_binding_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 {AttributeMarker} from '@angular/compiler/src/core';
import {MockDirectory, setup} from '@angular/compiler/test/aot/test_util';
import {compile, expectEmit} from './mock_compile';

describe('compiler compliance: bindings', () => {
  const angularFiles = setup({
    compileAngular: false,
    compileFakeCore: true,
    compileAnimations: false,
  });

  describe('text bindings', () => {
    it('should generate interpolation instruction', () => {
      const files: MockDirectory = {
        app: {
          'example.ts': `
          import {Component, NgModule} from '@angular/core';
          @Component({
            selector: 'my-component',
            template: \`
              <div>Hello {{ name }}</div>\`
          })
          export class MyComponent {
            name = 'World';
          }
          @NgModule({declarations: [MyComponent]})
          export class MyModule {}
          `
        }
      };

      const template = `
      template:function MyComponent_Template(rf, $ctx$){
        if (rf & 1) {
          $i0$.ɵɵelementStart(0, "div");
          $i0$.ɵɵtext(1);
          $i0$.ɵɵelementEnd();
        }
        if (rf & 2) {
          $r3$.ɵɵadvance(1);
          $i0$.ɵɵtextInterpolate1("Hello ", $ctx$.name, "");
        }
      }`;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect interpolated text binding');
    });
  });

  describe('property bindings', () => {
    it('should generate bind instruction', () => {
      const files: MockDirectory = {
        app: {
          'example.ts': `
          import {Component, NgModule} from '@angular/core';

          @Component({
            selector: 'my-app',
            template: '<a [title]="title"></a>'
          })
          export class MyComponent {
            title = 'Hello World';
          }

          @NgModule({declarations: [MyComponent]})
          export class MyModule {}`
        }
      };

      const template = `
      …
      consts: [[${AttributeMarker.Bindings}, "title"]],
      template:function MyComponent_Template(rf, $ctx$){
        if (rf & 1) {
          $i0$.ɵɵelement(0, "a", 0);
        }
        if (rf & 2) {
          $i0$.ɵɵproperty("title", $ctx$.title);
        }
      }`;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect property binding');
    });

    it('should generate interpolation instruction for {{...}} bindings', () => {
      const files: MockDirectory = {
        app: {
          'example.ts': `
          import {Component, NgModule} from '@angular/core';
          @Component({
            selector: 'my-component',
            template: \`
              <a title="Hello {{name}}"></a>\`
          })
          export class MyComponent {
            name = 'World';
          }
          @NgModule({declarations: [MyComponent]})
          export class MyModule {}
          `
        }
      };

      const template = `
      …
      consts: [[${AttributeMarker.Bindings}, "title"]],
      template:function MyComponent_Template(rf, $ctx$){
        if (rf & 1) {
          $i0$.ɵɵelement(0, "a", 0);
        }
        if (rf & 2) {
          $i0$.ɵɵpropertyInterpolate1("title", "Hello ", $ctx$.name, "");
        }
      }`;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect interpolated property binding');
    });

    it('should ignore empty bindings', () => {
      const files: MockDirectory = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';
            @Component({
              selector: 'test',
              template: '<div [someProp]></div>'
            })
            class FooCmp {}
          `
        }
      };
      const result = compile(files, angularFiles);
      expect(result.source).not.toContain('i0.ɵɵproperty');
    });

    it('should not remap property names whose names do not correspond to their attribute names',
       () => {
         const files = {
           app: {
             'spec.ts': `
              import {Component, NgModule} from '@angular/core';

              @Component({
                selector: 'my-component',
                template: \`
                  <label [for]="forValue"></label>\`
              })
              export class MyComponent {
                forValue = 'some-input';
              }

              @NgModule({declarations: [MyComponent]})
              export class MyModule {}
          `
           }
         };

         const template = `
      consts: [[${AttributeMarker.Bindings}, "for"]]

      // ...

      function MyComponent_Template(rf, ctx) {
        if (rf & 1) {
            $i0$.ɵɵelement(0, "label", 0);
        }
        if (rf & 2) {
            $i0$.ɵɵproperty("for", ctx.forValue);
        }
      }`;

         const result = compile(files, angularFiles);

         expectEmit(result.source, template, 'Incorrect template');
       });

    it('should chain multiple property bindings into a single instruction', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: '<button [title]="myTitle" [id]="buttonId" [tabindex]="1"></button>'
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'special-button';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵproperty("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain property bindings in the presence of other bindings', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>'
            })
            export class MyComponent {}`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵpropertyInterpolate("aria-label", 1 + 3);
              $r3$.ɵɵproperty("title", 1)("tabindex", 3);
              $r3$.ɵɵattribute("id", 2);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should not add interpolated properties to the property instruction chain', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>'
            })
            export class MyComponent {}`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵpropertyInterpolate("tabindex", 0 + 3);
              $r3$.ɵɵpropertyInterpolate2("aria-label", "hello-", 1 + 3, "-", 2 + 3, "");
              $r3$.ɵɵproperty("title", 1)("id", 2);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain synthetic property bindings together with regular property bindings', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button
                  [title]="myTitle"
                  [@expand]="expansionState"
                  [tabindex]="1"
                  [@fade]="'out'"></button>
                \`
            })
            export class MyComponent {
              expansionState = 'expanded';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵproperty("title", ctx.myTitle)("@expand", ctx.expansionState)("tabindex", 1)("@fade", "out");
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple property bindings on an ng-template', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: '<ng-template [title]="myTitle" [id]="buttonId" [tabindex]="1"></ng-template>'
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'custom-id';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵproperty("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple property bindings when there are multiple elements', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button [title]="myTitle" [id]="buttonId" [tabindex]="1"></button>
                <span [id]="1" [title]="'hello'" [someProp]="1 + 2"></span>
                <custom-element [prop]="'one'" [otherProp]="2"></custom-element>
              \`
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'special-button';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵproperty("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
              $r3$.ɵɵadvance(1);
              $r3$.ɵɵproperty("id", 1)("title", "hello")("someProp", 1 + 2);
              $r3$.ɵɵadvance(1);
              $r3$.ɵɵproperty("prop", "one")("otherProp", 2);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple property bindings when there are child elements', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button [title]="myTitle" [id]="buttonId" [tabindex]="1">
                  <span [id]="1" [title]="'hello'" [someProp]="1 + 2"></span>
                </button>\`
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'special-button';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵproperty("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
              $r3$.ɵɵadvance(1);
              $r3$.ɵɵproperty("id", 1)("title", "hello")("someProp", 1 + 2);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

  });

  describe('attribute bindings', () => {
    it('should chain multiple attribute bindings into a single instruction', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button [attr.title]="myTitle" attr.id="{{buttonId}}" [attr.tabindex]="1"></button>
              \`
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'special-button';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵattribute("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple single-interpolation attribute bindings into one instruction', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button attr.title="{{myTitle}}" attr.id="{{buttonId}}" attr.tabindex="{{1}}"></button>
              \`
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'special-button';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵattribute("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain attribute bindings in the presence of other bindings', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button [attr.title]="1" [id]="2" [attr.tabindex]="3" attr.aria-label="prefix-{{1 + 3}}">
                </button>
              \`
            })
            export class MyComponent {}`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵattributeInterpolate1("aria-label", "prefix-", 1 + 3, "");
              $r3$.ɵɵproperty("id", 2);
              $r3$.ɵɵattribute("title", 1)("tabindex", 3);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should not add interpolated attributes to the attribute instruction chain', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button
                  [attr.title]="1"
                  [attr.id]="2"
                  attr.tabindex="prefix-{{0 + 3}}"
                  attr.aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>\`
            })
            export class MyComponent {}`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵattributeInterpolate1("tabindex", "prefix-", 0 + 3, "");
              $r3$.ɵɵattributeInterpolate2("aria-label", "hello-", 1 + 3, "-", 2 + 3, "");
              $r3$.ɵɵattribute("title", 1)("id", 2);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple attribute bindings when there are multiple elements', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button [attr.title]="myTitle" [attr.id]="buttonId" [attr.tabindex]="1"></button>
                <span [attr.id]="1" [attr.title]="'hello'" [attr.some-attr]="1 + 2"></span>
                <custom-element [attr.some-attr]="'one'" [attr.some-other-attr]="2"></custom-element>
              \`
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'special-button';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵattribute("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
              $r3$.ɵɵadvance(1);
              $r3$.ɵɵattribute("id", 1)("title", "hello")("some-attr", 1 + 2);
              $r3$.ɵɵadvance(1);
              $r3$.ɵɵattribute("some-attr", "one")("some-other-attr", 2);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple attribute bindings when there are child elements', () => {
      const files = {
        app: {
          'example.ts': `
            import {Component} from '@angular/core';

            @Component({
              template: \`
                <button [attr.title]="myTitle" [attr.id]="buttonId" [attr.tabindex]="1">
                  <span [attr.id]="1" [attr.title]="'hello'" [attr.some-attr]="1 + 2"></span>
                </button>\`
            })
            export class MyComponent {
              myTitle = 'hello';
              buttonId = 'special-button';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          template: function MyComponent_Template(rf, ctx) {
            …
            if (rf & 2) {
              $r3$.ɵɵattribute("title", ctx.myTitle)("id", ctx.buttonId)("tabindex", 1);
              $r3$.ɵɵadvance(1);
              $r3$.ɵɵattribute("id", 1)("title", "hello")("some-attr", 1 + 2);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should exclude attribute bindings from the attributes array', () => {
      const files: MockDirectory = {
        app: {
          'example.ts': `
          import {Component, NgModule} from '@angular/core';

          @Component({
            selector: 'my-app',
            template: \`<a
              target="_blank"
              [title]="1"
              [attr.foo]="'one'"
              (customEvent)="doThings()"
              [attr.bar]="'two'"
              [id]="2"
              aria-label="link"
              [attr.baz]="three"></a>\`
          })
          export class MyComponent {
            doThings() {}
          }

          @NgModule({declarations: [MyComponent]})
          export class MyModule {}`
        }
      };

      const template = `
        consts: [["target", "_blank", "aria-label", "link", ${AttributeMarker.Bindings}, "title", "id", "customEvent"]],
        …
      `;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect attribute array');
    });

  });

  describe('host bindings', () => {
    it('should support host bindings', () => {
      const files = {
        app: {
          'spec.ts': `
            import {Directive, HostBinding, NgModule} from '@angular/core';

            @Directive({selector: '[hostBindingDir]'})
            export class HostBindingDir {
              @HostBinding('id') dirId = 'some id';
            }

            @NgModule({declarations: [HostBindingDir]})
            export class MyModule {}
          `
        }
      };

      const HostBindingDirDeclaration = `
        HostBindingDir.ɵdir = $r3$.ɵɵdefineDirective({
          type: HostBindingDir,
          selectors: [["", "hostBindingDir", ""]],
          hostBindings: function HostBindingDir_HostBindings(rf, ctx, elIndex) {
            if (rf & 1) {
              $r3$.ɵɵallocHostVars(1);
            }
            if (rf & 2) {
              $r3$.ɵɵhostProperty("id", ctx.dirId);
            }
          }
        });
      `;

      const result = compile(files, angularFiles);
      const source = result.source;

      expectEmit(source, HostBindingDirDeclaration, 'Invalid host binding code');
    });

    it('should support host bindings with pure functions', () => {
      const files = {
        app: {
          'spec.ts': `
            import {Component, NgModule} from '@angular/core';

            @Component({
              selector: 'host-binding-comp',
              host: {
                '[id]': '["red", id]'
              },
              template: ''
            })
            export class HostBindingComp {
              id = 'some id';
            }

            @NgModule({declarations: [HostBindingComp]})
            export class MyModule {}
          `
        }
      };

      const HostBindingCompDeclaration = `
        const $ff$ = function ($v$) { return ["red", $v$]; };
        …
        HostBindingComp.ɵcmp = $r3$.ɵɵdefineComponent({
          type: HostBindingComp,
          selectors: [["host-binding-comp"]],
          hostBindings: function HostBindingComp_HostBindings(rf, ctx, elIndex) {
            if (rf & 1) {
              $r3$.ɵɵallocHostVars(3);
            }
            if (rf & 2) {
              $r3$.ɵɵhostProperty("id", $r3$.ɵɵpureFunction1(1, $ff$, ctx.id));
            }
          },
          decls: 0,
          vars: 0,
          template: function HostBindingComp_Template(rf, ctx) {},
          encapsulation: 2
        });
      `;

      const result = compile(files, angularFiles);
      const source = result.source;

      expectEmit(source, HostBindingCompDeclaration, 'Invalid host binding code');
    });

    it('should support host attribute bindings', () => {
      const files = {
        app: {
          'spec.ts': `
            import {Directive, NgModule} from '@angular/core';

            @Directive({
              selector: '[hostAttributeDir]',
              host: {
                '[attr.required]': 'required'
              }
            })
            export class HostAttributeDir {
              required = true;
            }

            @NgModule({declarations: [HostAttributeDir]})
            export class MyModule {}
          `
        }
      };

      const HostAttributeDirDeclaration = `
        HostAttributeDir.ɵdir = $r3$.ɵɵdefineDirective({
          type: HostAttributeDir,
          selectors: [["", "hostAttributeDir", ""]],
          hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
            if (rf & 1) {
              $r3$.ɵɵallocHostVars(1);
            }
            if (rf & 2) {
              $r3$.ɵɵattribute("required", ctx.required);
            }
          }
        });
      `;

      const result = compile(files, angularFiles);
      const source = result.source;

      expectEmit(source, HostAttributeDirDeclaration, 'Invalid host attribute code');
    });

    it('should support host attributes', () => {
      const files = {
        app: {
          'spec.ts': `
            import {Directive, NgModule} from '@angular/core';

            @Directive({
              selector: '[hostAttributeDir]',
              host: {
                'aria-label': 'label'
              }
            })
            export class HostAttributeDir {
            }

            @NgModule({declarations: [HostAttributeDir]})
            export class MyModule {}
          `
        }
      };

      const HostAttributeDirDeclaration = `
        const $c0$ = ["aria-label", "label"];
        …
        HostAttributeDir.ɵdir = $r3$.ɵɵdefineDirective({
          type: HostAttributeDir,
          selectors: [["", "hostAttributeDir", ""]],
          hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
            if (rf & 1) {
              $r3$.ɵɵelementHostAttrs($c0$);
            }
          }
        });
      `;

      const result = compile(files, angularFiles);
      const source = result.source;

      expectEmit(source, HostAttributeDirDeclaration, 'Invalid host attribute code');
    });

    it('should support host attributes together with host classes and styles', () => {
      const files = {
        app: {
          'spec.ts': `
            import {Component, Directive, NgModule} from '@angular/core';

            @Component({
              selector: 'my-host-attribute-component',
              template: "...",
              host: {
                'title': 'hello there from component',
                'style': 'opacity:1'
              }
            })
            export class HostAttributeComp {
            }

            @Directive({
              selector: '[hostAttributeDir]',
              host: {
                'style': 'width: 200px; height: 500px',
                '[style.opacity]': "true",
                'class': 'one two',
                '[class.three]': "true",
                'title': 'hello there from directive',
              }
            })
            export class HostAttributeDir {
            }

            @NgModule({declarations: [HostAttributeComp, HostAttributeDir]})
            export class MyModule {}
          `
        }
      };

      const CompAndDirDeclaration = `
        const $c0$ = ["title", "hello there from component", ${AttributeMarker.Styles}, "opacity", "1"];
        const $c1$ = ["title", "hello there from directive", ${AttributeMarker.Classes}, "one", "two", ${AttributeMarker.Styles}, "width", "200px", "height", "500px"];
        …
        HostAttributeComp.ɵcmp = $r3$.ɵɵdefineComponent({
          type: HostAttributeComp,
          selectors: [["my-host-attribute-component"]],
          hostBindings: function HostAttributeComp_HostBindings(rf, ctx, elIndex) {
            if (rf & 1) {
              $r3$.ɵɵelementHostAttrs($c0$);
              …
            }
            …
          }
        …
        HostAttributeDir.ɵdir = $r3$.ɵɵdefineDirective({
          type: HostAttributeDir,
          selectors: [["", "hostAttributeDir", ""]],
          hostBindings: function HostAttributeDir_HostBindings(rf, ctx, elIndex) {
            if (rf & 1) {
              $r3$.ɵɵallocHostVars(2);
              $r3$.ɵɵelementHostAttrs($c1$);
              …
            }
            …
          }
      `;

      const result = compile(files, angularFiles);
      const source = result.source;
      expectEmit(source, CompAndDirDeclaration, 'Invalid host attribute code');
    });

    it('should chain multiple host property bindings into a single instruction', () => {
      const files = {
        app: {
          'example.ts': `
            import {Directive} from '@angular/core';

            @Directive({
              selector: '[my-dir]',
              host: {
                '[title]': 'myTitle',
                '[tabindex]': '1',
                '[id]': 'myId'
              }
            })
            export class MyDirective {
              myTitle = 'hello';
              myId = 'special-directive';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          hostBindings: function MyDirective_HostBindings(rf, ctx, elIndex) {
            …
            if (rf & 2) {
              $r3$.ɵɵhostProperty("title", ctx.myTitle)("tabindex", 1)("id", ctx.myId);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain both host properties in the decorator and on the class', () => {
      const files = {
        app: {
          'example.ts': `
            import {Directive, HostBinding} from '@angular/core';

            @Directive({
              selector: '[my-dir]',
              host: {
                '[tabindex]': '1'
              }
            })
            export class MyDirective {
              @HostBinding('title')
              myTitle = 'hello';

              @HostBinding('id')
              myId = 'special-directive';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          hostBindings: function MyDirective_HostBindings(rf, ctx, elIndex) {
            …
            if (rf & 2) {
              $r3$.ɵɵhostProperty("tabindex", 1)("title", ctx.myTitle)("id", ctx.myId);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple host property bindings in the presence of other bindings', () => {
      const files = {
        app: {
          'example.ts': `
            import {Directive} from '@angular/core';

            @Directive({
              selector: '[my-dir]',
              host: {
                '[title]': '"my title"',
                '[attr.tabindex]': '1',
                '[id]': '"my-id"'
              }
            })
            export class MyDirective {}`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          hostBindings: function MyDirective_HostBindings(rf, ctx, elIndex) {
            …
            if (rf & 2) {
              $r3$.ɵɵhostProperty("title", "my title")("id", "my-id");
              $r3$.ɵɵattribute("tabindex", 1);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple synthetic properties into a single instruction call', () => {
      const files = {
        app: {
          'example.ts': `
            import {Directive} from '@angular/core';

            @Directive({
              selector: '[my-dir]',
              host: {
                '[@expand]': 'expandedState',
                '[@fadeOut]': 'true',
                '[@shrink]': 'isSmall'
              }
            })
            export class MyDirective {
              expandedState = 'collapsed';
              isSmall = true;
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
        …
        hostBindings: function MyDirective_HostBindings(rf, ctx, elIndex) {
          …
          if (rf & 2) {
            $r3$.ɵɵupdateSyntheticHostBinding("@expand", ctx.expandedState)("@fadeOut", true)("@shrink", ctx.isSmall);
          }
        }
      `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple host attribute bindings into a single instruction', () => {
      const files = {
        app: {
          'example.ts': `
            import {Directive} from '@angular/core';

            @Directive({
              selector: '[my-dir]',
              host: {
                '[attr.title]': 'myTitle',
                '[attr.tabindex]': '1',
                '[attr.id]': 'myId'
              }
            })
            export class MyDirective {
              myTitle = 'hello';
              myId = 'special-directive';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          hostBindings: function MyDirective_HostBindings(rf, ctx, elIndex) {
            …
            if (rf & 2) {
              $r3$.ɵɵattribute("title", ctx.myTitle)("tabindex", 1)("id", ctx.myId);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain both host attributes in the decorator and on the class', () => {
      const files = {
        app: {
          'example.ts': `
            import {Directive, HostBinding} from '@angular/core';

            @Directive({
              selector: '[my-dir]',
              host: {
                '[attr.tabindex]': '1'
              }
            })
            export class MyDirective {
              @HostBinding('attr.title')
              myTitle = 'hello';

              @HostBinding('attr.id')
              myId = 'special-directive';
            }`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
          …
          hostBindings: function MyDirective_HostBindings(rf, ctx, elIndex) {
            …
            if (rf & 2) {
              $r3$.ɵɵattribute("tabindex", 1)("title", ctx.myTitle)("id", ctx.myId);
            }
          }
        `;

      expectEmit(result.source, template, 'Incorrect template');
    });

    it('should chain multiple host attribute bindings in the presence of other bindings', () => {
      const files = {
        app: {
          'example.ts': `
            import {Directive} from '@angular/core';

            @Directive({
              selector: '[my-dir]',
              host: {
                '[attr.title]': '"my title"',
                '[tabindex]': '1',
                '[attr.id]': '"my-id"'
              }
            })
            export class MyDirective {}`
        }
      };

      const result = compile(files, angularFiles);
      const template = `
            …
            hostBindings: function MyDirective_HostBindings(rf, ctx, elIndex) {
              …
              if (rf & 2) {
                $r3$.ɵɵhostProperty("tabindex", 1);
                $r3$.ɵɵattribute("title", "my title")("id", "my-id");
              }
            }
          `;

      expectEmit(result.source, template, 'Incorrect template');
    });

  });

  describe('non bindable behavior', () => {
    const getAppFiles = (template: string = ''): MockDirectory => ({
      app: {
        'example.ts': `
          import {Component, NgModule} from '@angular/core';

          @Component({
            selector: 'my-app',
            template: \`${template}\`
          })
          export class MyComponent {
            name = 'John Doe';
          }

          @NgModule({declarations: [MyComponent]})
          export class MyModule {}`
      }
    });

    it('should generate the proper update instructions for interpolated properties', () => {
      const files: MockDirectory = getAppFiles(`
        <div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i{{nine}}j"></div>
        <div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i"></div>
        <div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h"></div>
        <div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g"></div>
        <div title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f"></div>
        <div title="a{{one}}b{{two}}c{{three}}d{{four}}e"></div>
        <div title="a{{one}}b{{two}}c{{three}}d"></div>
        <div title="a{{one}}b{{two}}c"></div>
        <div title="a{{one}}b"></div>
        <div title="{{one}}"></div>
      `);

      const template = `
      …
        if (rf & 2) {
          i0.ɵɵpropertyInterpolateV("title", ["a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i", ctx.nine, "j"]);
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate8("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate7("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate6("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate5("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate4("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate3("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate2("title", "a", ctx.one, "b", ctx.two, "c");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate1("title", "a", ctx.one, "b");
          i0.ɵɵadvance(1);
          i0.ɵɵpropertyInterpolate("title", ctx.one);
      }
      …
      `;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect handling of interpolated properties');
    });


    it('should generate the proper update instructions for interpolated attributes', () => {
      const files: MockDirectory = getAppFiles(`
        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i{{nine}}j"></div>
        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h{{eight}}i"></div>
        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g{{seven}}h"></div>
        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f{{six}}g"></div>
        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e{{five}}f"></div>
        <div attr.title="a{{one}}b{{two}}c{{three}}d{{four}}e"></div>
        <div attr.title="a{{one}}b{{two}}c{{three}}d"></div>
        <div attr.title="a{{one}}b{{two}}c"></div>
        <div attr.title="a{{one}}b"></div>
        <div attr.title="{{one}}"></div>
      `);

      const template = `
      …
        if (rf & 2) {
          i0.ɵɵattributeInterpolateV("title", ["a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i", ctx.nine, "j"]);
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate8("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h", ctx.eight, "i");
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate7("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g", ctx.seven, "h");
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate6("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f", ctx.six, "g");
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate5("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e", ctx.five, "f");
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate4("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d", ctx.four, "e");
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate3("title", "a", ctx.one, "b", ctx.two, "c", ctx.three, "d");
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate2("title", "a", ctx.one, "b", ctx.two, "c");
          i0.ɵɵadvance(1);
          i0.ɵɵattributeInterpolate1("title", "a", ctx.one, "b");
          i0.ɵɵadvance(1);
          i0.ɵɵattribute("title", ctx.one);
      }
      …
      `;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect handling of interpolated properties');
    });

    it('should keep local ref for host element', () => {
      const files: MockDirectory = getAppFiles(`
        <b ngNonBindable #myRef id="my-id">
          <i>Hello {{ name }}!</i>
        </b>
        {{ myRef.id }}
      `);

      const template = `
        …
        consts: [["id", "my-id"], ["myRef", ""]],
        template:function MyComponent_Template(rf, $ctx$){
          if (rf & 1) {
            $i0$.ɵɵelementStart(0, "b", 0, 1);
            $i0$.ɵɵdisableBindings();
            $i0$.ɵɵelementStart(2, "i");
            $i0$.ɵɵtext(3, "Hello {{ name }}!");
            $i0$.ɵɵelementEnd();
            $i0$.ɵɵenableBindings();
            $i0$.ɵɵelementEnd();
            $i0$.ɵɵtext(4);
          }
          if (rf & 2) {
            const $_r0$ = $i0$.ɵɵreference(1);
            $r3$.ɵɵadvance(4);
            $i0$.ɵɵtextInterpolate1(" ", $_r0$.id, " ");
          }
        }
      `;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect handling of local refs for host element');
    });

    it('should not have local refs for nested elements', () => {
      const files: MockDirectory = getAppFiles(`
       <div ngNonBindable>
         <input value="one" #myInput> {{ myInput.value }}
       </div>
      `);

      const template = `
        …
        consts: [["value", "one", "#myInput", ""]],
        template:function MyComponent_Template(rf, $ctx$){
          if (rf & 1) {
            $i0$.ɵɵelementStart(0, "div");
            $i0$.ɵɵdisableBindings();
            $i0$.ɵɵelement(1, "input", 0);
            $i0$.ɵɵtext(2, " {{ myInput.value }} ");
            $i0$.ɵɵenableBindings();
            $i0$.ɵɵelementEnd();
        }
      `;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect handling of local refs for nested elements');
    });

    it('should not process property bindings and listeners', () => {
      const files: MockDirectory = getAppFiles(`
        <div ngNonBindable>
          <div [id]="my-id" (click)="onclick"></div>
        </div>
      `);

      const template = `
        …
        consts: [["[id]", "my-id", "(click)", "onclick"]],
        template:function MyComponent_Template(rf, $ctx$){
          if (rf & 1) {
            $i0$.ɵɵelementStart(0, "div");
            $i0$.ɵɵdisableBindings();
            $i0$.ɵɵelement(1, "div", 0);
            $i0$.ɵɵenableBindings();
            $i0$.ɵɵelementEnd();
        }
      `;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect handling of property bindings and listeners');
    });

    it('should not generate extra instructions for elements with no children', () => {
      const files: MockDirectory = getAppFiles(`
        <div ngNonBindable></div>
      `);

      const template = `
        template:function MyComponent_Template(rf, $ctx$){
          if (rf & 1) {
            $i0$.ɵɵelement(0, "div");
          }
        }
      `;
      const result = compile(files, angularFiles);
      expectEmit(result.source, template, 'Incorrect handling of elements with no children');
    });

  });

});