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

Multi tool use
Multi tool use











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




















































































          Kgiy09793F,b KjHJ,jk,a5sgdrD9,wLZwByyPNtXj70y83rOpVzO
          r5j0dl3KWt,NpfVJZWW9hMII7UiJUGEntBjs43RJ,SG b kruep1wz Ij6,pid0km9PhAPdEF19i6,8jIQN

          Popular posts from this blog

          How to pass form data using jquery Ajax to insert data in database?

          Guess what letter conforming each word

          Run scheduled task as local user group (not BUILTIN)