Can't bind since it's not a known property Angular Unit Tests











up vote
0
down vote

favorite












I'm writing a unit test for a component. It is supposed to be a pop-up component. My idea is to inject it with an element so it pops up.
Where am I doing it wrong ?



Can't bind to 'forEl' since it isn't a known property of 'ctr-info-popup'.



  @Component({
template: `
<div #forEl class="bla" (click)="onMouseOver($event)"></div>
<ctr-info-popup [forEl]="context.forEl" [(show)]="context.show">
<div class="penalty-container">
<span class="penalty-title" [ngClass]="{'no-changes': !context.canChange}">{{context.title}}</span>
<span class="penalty" *ngFor="let penalty of context.penalties">{{penalty}}</span>
</div>
</ctr-info-popup>
`
})
class TestHostComponent{
context = null;


@ViewChild('forEl', {read: ElementRef}) forEl: ElementRef<HTMLDivElement>;


onMouseOver(event) {
this.context = {
forEl: this.forEl,
show: true,
canChange: false,
title: 'Test title',
penalties: ['p1', 'p2']
}
}
}









share|improve this question







New contributor




Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
























    up vote
    0
    down vote

    favorite












    I'm writing a unit test for a component. It is supposed to be a pop-up component. My idea is to inject it with an element so it pops up.
    Where am I doing it wrong ?



    Can't bind to 'forEl' since it isn't a known property of 'ctr-info-popup'.



      @Component({
    template: `
    <div #forEl class="bla" (click)="onMouseOver($event)"></div>
    <ctr-info-popup [forEl]="context.forEl" [(show)]="context.show">
    <div class="penalty-container">
    <span class="penalty-title" [ngClass]="{'no-changes': !context.canChange}">{{context.title}}</span>
    <span class="penalty" *ngFor="let penalty of context.penalties">{{penalty}}</span>
    </div>
    </ctr-info-popup>
    `
    })
    class TestHostComponent{
    context = null;


    @ViewChild('forEl', {read: ElementRef}) forEl: ElementRef<HTMLDivElement>;


    onMouseOver(event) {
    this.context = {
    forEl: this.forEl,
    show: true,
    canChange: false,
    title: 'Test title',
    penalties: ['p1', 'p2']
    }
    }
    }









    share|improve this question







    New contributor




    Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.






















      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm writing a unit test for a component. It is supposed to be a pop-up component. My idea is to inject it with an element so it pops up.
      Where am I doing it wrong ?



      Can't bind to 'forEl' since it isn't a known property of 'ctr-info-popup'.



        @Component({
      template: `
      <div #forEl class="bla" (click)="onMouseOver($event)"></div>
      <ctr-info-popup [forEl]="context.forEl" [(show)]="context.show">
      <div class="penalty-container">
      <span class="penalty-title" [ngClass]="{'no-changes': !context.canChange}">{{context.title}}</span>
      <span class="penalty" *ngFor="let penalty of context.penalties">{{penalty}}</span>
      </div>
      </ctr-info-popup>
      `
      })
      class TestHostComponent{
      context = null;


      @ViewChild('forEl', {read: ElementRef}) forEl: ElementRef<HTMLDivElement>;


      onMouseOver(event) {
      this.context = {
      forEl: this.forEl,
      show: true,
      canChange: false,
      title: 'Test title',
      penalties: ['p1', 'p2']
      }
      }
      }









      share|improve this question







      New contributor




      Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      I'm writing a unit test for a component. It is supposed to be a pop-up component. My idea is to inject it with an element so it pops up.
      Where am I doing it wrong ?



      Can't bind to 'forEl' since it isn't a known property of 'ctr-info-popup'.



        @Component({
      template: `
      <div #forEl class="bla" (click)="onMouseOver($event)"></div>
      <ctr-info-popup [forEl]="context.forEl" [(show)]="context.show">
      <div class="penalty-container">
      <span class="penalty-title" [ngClass]="{'no-changes': !context.canChange}">{{context.title}}</span>
      <span class="penalty" *ngFor="let penalty of context.penalties">{{penalty}}</span>
      </div>
      </ctr-info-popup>
      `
      })
      class TestHostComponent{
      context = null;


      @ViewChild('forEl', {read: ElementRef}) forEl: ElementRef<HTMLDivElement>;


      onMouseOver(event) {
      this.context = {
      forEl: this.forEl,
      show: true,
      canChange: false,
      title: 'Test title',
      penalties: ['p1', 'p2']
      }
      }
      }






      angular unit-testing jasmine karma-jasmine






      share|improve this question







      New contributor




      Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question







      New contributor




      Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question






      New contributor




      Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked yesterday









      Abdullah chishti

      1




      1




      New contributor




      Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Abdullah chishti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });






          Abdullah chishti is a new contributor. Be nice, and check out our Code of Conduct.










           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53204335%2fcant-bind-since-its-not-a-known-property-angular-unit-tests%23new-answer', 'question_page');
          }
          );

          Post as a guest





































          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          Abdullah chishti is a new contributor. Be nice, and check out our Code of Conduct.










           

          draft saved


          draft discarded


















          Abdullah chishti is a new contributor. Be nice, and check out our Code of Conduct.













          Abdullah chishti is a new contributor. Be nice, and check out our Code of Conduct.












          Abdullah chishti is a new contributor. Be nice, and check out our Code of Conduct.















           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53204335%2fcant-bind-since-its-not-a-known-property-angular-unit-tests%23new-answer', 'question_page');
          }
          );

          Post as a guest




















































































          Popular posts from this blog

          Guess what letter conforming each word

          Port of Spain

          Run scheduled task as local user group (not BUILTIN)