Ggtcf

Proving an identity involving cross products and coplanar vectors

How do I fix the group tension caused by my character stealing and possibly killing without provocation?

Should I assume I have passed probation?

What is the meaning of "You've never met a graph you didn't like?"

Why would five hundred and five be same as one?

Quoting Keynes in a lecture

What is this high flying aircraft over Pennsylvania?

Telemetry for feature health

Mimic lecturing on blackboard, facing audience

Why is the principal energy of an electron lower for excited electrons in a higher energy state?

What should be the ideal length of sentences in a blog post for ease of reading?

Is there a distance limit for minecart tracks?

Echo with obfuscation

How many people need to be born every 8 years to sustain population?

Why didn’t Eve recognize the little cockroach as a living organism?

Can I say "fingers" when referring to toes?

How to I force windows to use a specific version of SQLCMD?

Can I run 125kHz RF circuit on a breadboard?

Personal or impersonal in a technical resume

How to leave product feedback on macOS?

Giving feedback to someone without sounding prejudiced

Alignment of six matrices

Given this phrasing in the lease, when should I pay my rent?

Why does a 97 / 92 key piano exist by Bösendorfer?

Angular test HostListener

How to write a test which expects an Error to be thrown in Jasmine?Angular HTML bindingAngular EXCEPTION: No provider for HttpWhat is the equivalent of ngShow and ngHide in Angular?Angular/RxJs When should I unsubscribe from `Subscription`Huge number of files generated for every Angular projectAngular 2 Unit Tests: Cannot find name 'describe'Angular2 NgModel not getting value in Jasmine testAngular: How I can test @HostListener in jasmine?Jasmine Test Cases in Angular HostListener

1

1

In Angular I have to test the following code:

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void 
 const targetElement = event.target as HTMLElement;
 if (targetElement.classList.contains('mybtn')) 
 this.prop = 'ok';
 

The following test fails:

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 btn.nativeElement.dispatchEvent(new MouseEvent('click'));

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // fail
 expect(component.prop).toBe('ok'); //fail
 );

I also tried to create dummy html element and change target of new MouseEvent

Appreciate for help

angular jasmine

share|improve this question

asked Mar 7 at 21:57

VictorVictor

163

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just curious, have you tried btn.nativeElement.click() instead of dispatching a new MouseEvent?
  
  – dmcgrandle
  Mar 8 at 5:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  btn.nativeElement.click() does not work too. The spy not propagated for child events, only for document itself
  
  – Victor
  Mar 8 at 14:14
  

  
  
  
  

add a comment | 

1

1

In Angular I have to test the following code:

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void 
 const targetElement = event.target as HTMLElement;
 if (targetElement.classList.contains('mybtn')) 
 this.prop = 'ok';
 

The following test fails:

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 btn.nativeElement.dispatchEvent(new MouseEvent('click'));

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // fail
 expect(component.prop).toBe('ok'); //fail
 );

I also tried to create dummy html element and change target of new MouseEvent

Appreciate for help

angular jasmine

share|improve this question

asked Mar 7 at 21:57

VictorVictor

163

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just curious, have you tried btn.nativeElement.click() instead of dispatching a new MouseEvent?
  
  – dmcgrandle
  Mar 8 at 5:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  btn.nativeElement.click() does not work too. The spy not propagated for child events, only for document itself
  
  – Victor
  Mar 8 at 14:14
  

  
  
  
  

add a comment | 

In Angular I have to test the following code:

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void 
 const targetElement = event.target as HTMLElement;
 if (targetElement.classList.contains('mybtn')) 
 this.prop = 'ok';
 

The following test fails:

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 btn.nativeElement.dispatchEvent(new MouseEvent('click'));

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // fail
 expect(component.prop).toBe('ok'); //fail
 );

I also tried to create dummy html element and change target of new MouseEvent

Appreciate for help

angular jasmine

share|improve this question

asked Mar 7 at 21:57

VictorVictor

163

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void 
 const targetElement = event.target as HTMLElement;
 if (targetElement.classList.contains('mybtn')) 
 this.prop = 'ok';
 

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 btn.nativeElement.dispatchEvent(new MouseEvent('click'));

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // fail
 expect(component.prop).toBe('ok'); //fail
 );

angular jasmine

angular jasmine

share|improve this question

asked Mar 7 at 21:57

VictorVictor

163

share|improve this question

asked Mar 7 at 21:57

VictorVictor

163

asked Mar 7 at 21:57

VictorVictor

163

asked Mar 7 at 21:57

VictorVictor

163

1 Answer
1

active

oldest

votes

0

Well, it works with the following code:

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 const event = new MouseEvent('click',
 
 view: window,
 bubbles: true,
 cancelable: true,
 relatedTarget: document
 );

 btn.nativeElement.dispatchEvent(event);

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // ok
 expect(component.prop).toBe('ok'); //ok
 );

share|improve this answer

answered Mar 8 at 14:44

VictorVictor

163

add a comment | 

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',
autoActivateHeartbeat: false,
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
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55053442%2fangular-test-hostlistener%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Well, it works with the following code:

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 const event = new MouseEvent('click',
 
 view: window,
 bubbles: true,
 cancelable: true,
 relatedTarget: document
 );

 btn.nativeElement.dispatchEvent(event);

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // ok
 expect(component.prop).toBe('ok'); //ok
 );

share|improve this answer

answered Mar 8 at 14:44

VictorVictor

163

add a comment | 

0

Well, it works with the following code:

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 const event = new MouseEvent('click',
 
 view: window,
 bubbles: true,
 cancelable: true,
 relatedTarget: document
 );

 btn.nativeElement.dispatchEvent(event);

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // ok
 expect(component.prop).toBe('ok'); //ok
 );

share|improve this answer

answered Mar 8 at 14:44

VictorVictor

163

add a comment | 

Well, it works with the following code:

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 const event = new MouseEvent('click',
 
 view: window,
 bubbles: true,
 cancelable: true,
 relatedTarget: document
 );

 btn.nativeElement.dispatchEvent(event);

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // ok
 expect(component.prop).toBe('ok'); //ok
 );

share|improve this answer

answered Mar 8 at 14:44

VictorVictor

163

 it('Should succeed', () => 
 const spyDocumentClick = spyOn(component, 'onDocumentClick').and.callThrough();
 component.prop = '';

 fixture.detectChanges();

 const btn = debugElement.query(By.css('.mybtn'));
 expect(btn).not.toEqual(null); // ok

 const event = new MouseEvent('click',
 
 view: window,
 bubbles: true,
 cancelable: true,
 relatedTarget: document
 );

 btn.nativeElement.dispatchEvent(event);

 fixture.detectChanges();
 expect(spyDocumentClick).toHaveBeenCalled(); // ok
 expect(component.prop).toBe('ok'); //ok
 );

share|improve this answer

answered Mar 8 at 14:44

VictorVictor

163

answered Mar 8 at 14:44

VictorVictor

163

answered Mar 8 at 14:44

VictorVictor

163