Angular test HostListenerHow 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
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
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
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
Just curious, have you triedbtn.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
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
angular jasmine
asked Mar 7 at 21:57
VictorVictor
163
163
Just curious, have you triedbtn.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 |
Just curious, have you triedbtn.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
Just curious, have you tried
btn.nativeElement.click()
instead of dispatching a new MouseEvent?– dmcgrandle
Mar 8 at 5:54
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
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 Answer
1
active
oldest
votes
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
);
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
);
);
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
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
);
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
);
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
);
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
);
answered Mar 8 at 14:44
VictorVictor
163
163
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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