Datepicker and Timepicker not initialised when the test runs
In my Angular app, I often use the datepicker and the timepicker components from ngx-bootstrap.
They work great, however apparently I'm unable to test them. The problem is that when my test case is running, those components are not initialised yet:
I set the breakpoint on the first line of my test case.
When the test case finishes to execute, I can see that the datepicker and timepicker components are correctly initialised:
My code is the following:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MyComponent,
// ...
],
imports: [
BsDatepickerModule.forRoot(),
TimepickerModule.forRoot(),
// ...
],
providers: [
// ...
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.autoDetectChanges(true);
});
it('some expectation here', () => {
// whatever I put here, at this line the datepicker and timepicker will NOT be initialised
});
});
how can I make my test case run AFTER that the datepicker and timepicker components have been initialised?
EDIT:
I did more investigations, the issue is about the [(ngModel)]="time" of the <timepicker> element
basically it's being triggered only AFTER my test case exits.
how can I manually trigger it?
I tried with timepickerElement.dispatchEvent(new Event('input')); but it doesn't work.
also tried fixture.detectChanges(), fakeAsync+tick(), etc... but couldn't solve the issue.
angular ngx-bootstrap angular-testing asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
|
show 3 more comments
In my Angular app, I often use the datepicker and the timepicker components from ngx-bootstrap.
They work great, however apparently I'm unable to test them. The problem is that when my test case is running, those components are not initialised yet:
I set the breakpoint on the first line of my test case.
When the test case finishes to execute, I can see that the datepicker and timepicker components are correctly initialised:
My code is the following:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MyComponent,
// ...
],
imports: [
BsDatepickerModule.forRoot(),
TimepickerModule.forRoot(),
// ...
],
providers: [
// ...
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.autoDetectChanges(true);
});
it('some expectation here', () => {
// whatever I put here, at this line the datepicker and timepicker will NOT be initialised
});
});
how can I make my test case run AFTER that the datepicker and timepicker components have been initialised?
EDIT:
I did more investigations, the issue is about the [(ngModel)]="time" of the <timepicker> element
basically it's being triggered only AFTER my test case exits.
how can I manually trigger it?
I tried with timepickerElement.dispatchEvent(new Event('input')); but it doesn't work.
also tried fixture.detectChanges(), fakeAsync+tick(), etc... but couldn't solve the issue.
angular ngx-bootstrap angular-testing asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
1
Please add related code in your question.
– Amit Chigadani
Jan 3 at 14:48
@AmitChigadani I can add the code but as I mentioned, I set the breakpoint on the first line of my test case and the widgets are not initialised... that is the issue.
– Francesco Borzi
Jan 3 at 14:54
@AmitChigadani I added the code
– Francesco Borzi
Jan 3 at 14:57
Did you tryfixture.detectChanges();instead offixture.autoDetectChanges(true);?
– Amit Chigadani
Jan 3 at 15:03
@AmitChigadani yes I'm already using that
– Francesco Borzi
Jan 3 at 15:08
|
show 3 more comments
In my Angular app, I often use the datepicker and the timepicker components from ngx-bootstrap.
They work great, however apparently I'm unable to test them. The problem is that when my test case is running, those components are not initialised yet:
I set the breakpoint on the first line of my test case.
When the test case finishes to execute, I can see that the datepicker and timepicker components are correctly initialised:
My code is the following:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MyComponent,
// ...
],
imports: [
BsDatepickerModule.forRoot(),
TimepickerModule.forRoot(),
// ...
],
providers: [
// ...
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.autoDetectChanges(true);
});
it('some expectation here', () => {
// whatever I put here, at this line the datepicker and timepicker will NOT be initialised
});
});
how can I make my test case run AFTER that the datepicker and timepicker components have been initialised?
EDIT:
I did more investigations, the issue is about the [(ngModel)]="time" of the <timepicker> element
basically it's being triggered only AFTER my test case exits.
how can I manually trigger it?
I tried with timepickerElement.dispatchEvent(new Event('input')); but it doesn't work.
also tried fixture.detectChanges(), fakeAsync+tick(), etc... but couldn't solve the issue.
angular ngx-bootstrap angular-testing asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
In my Angular app, I often use the datepicker and the timepicker components from ngx-bootstrap.
They work great, however apparently I'm unable to test them. The problem is that when my test case is running, those components are not initialised yet:
I set the breakpoint on the first line of my test case.
When the test case finishes to execute, I can see that the datepicker and timepicker components are correctly initialised:
My code is the following:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MyComponent,
// ...
],
imports: [
BsDatepickerModule.forRoot(),
TimepickerModule.forRoot(),
// ...
],
providers: [
// ...
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.autoDetectChanges(true);
});
it('some expectation here', () => {
// whatever I put here, at this line the datepicker and timepicker will NOT be initialised
});
});
how can I make my test case run AFTER that the datepicker and timepicker components have been initialised?
EDIT:
I did more investigations, the issue is about the [(ngModel)]="time" of the <timepicker> element
basically it's being triggered only AFTER my test case exits.
how can I manually trigger it?
I tried with timepickerElement.dispatchEvent(new Event('input')); but it doesn't work.
also tried fixture.detectChanges(), fakeAsync+tick(), etc... but couldn't solve the issue.
angular ngx-bootstrap angular-testing angular ngx-bootstrap angular-testing asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
edited Jan 15 at 11:23
Francesco Borzi
asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
asked Jan 3 at 14:45
Francesco BorziFrancesco Borzi
15.3k95593
15.3k95593
1
Please add related code in your question.
– Amit Chigadani
Jan 3 at 14:48
@AmitChigadani I can add the code but as I mentioned, I set the breakpoint on the first line of my test case and the widgets are not initialised... that is the issue.
– Francesco Borzi
Jan 3 at 14:54
@AmitChigadani I added the code
– Francesco Borzi
Jan 3 at 14:57
Did you tryfixture.detectChanges();instead offixture.autoDetectChanges(true);?
– Amit Chigadani
Jan 3 at 15:03
@AmitChigadani yes I'm already using that
– Francesco Borzi
Jan 3 at 15:08
|
show 3 more comments
1
Please add related code in your question.
– Amit Chigadani
Jan 3 at 14:48
@AmitChigadani I can add the code but as I mentioned, I set the breakpoint on the first line of my test case and the widgets are not initialised... that is the issue.
– Francesco Borzi
Jan 3 at 14:54
@AmitChigadani I added the code
– Francesco Borzi
Jan 3 at 14:57
Did you tryfixture.detectChanges();instead offixture.autoDetectChanges(true);?
– Amit Chigadani
Jan 3 at 15:03
@AmitChigadani yes I'm already using that
– Francesco Borzi
Jan 3 at 15:08
1
1
Please add related code in your question.
– Amit Chigadani
Jan 3 at 14:48
Please add related code in your question.
– Amit Chigadani
Jan 3 at 14:48
@AmitChigadani I can add the code but as I mentioned, I set the breakpoint on the first line of my test case and the widgets are not initialised... that is the issue.
– Francesco Borzi
Jan 3 at 14:54
@AmitChigadani I can add the code but as I mentioned, I set the breakpoint on the first line of my test case and the widgets are not initialised... that is the issue.
– Francesco Borzi
Jan 3 at 14:54
@AmitChigadani I added the code
– Francesco Borzi
Jan 3 at 14:57
@AmitChigadani I added the code
– Francesco Borzi
Jan 3 at 14:57
Did you try
fixture.detectChanges(); instead of fixture.autoDetectChanges(true);?– Amit Chigadani
Jan 3 at 15:03
Did you try
fixture.detectChanges(); instead of fixture.autoDetectChanges(true);?– Amit Chigadani
Jan 3 at 15:03
@AmitChigadani yes I'm already using that
– Francesco Borzi
Jan 3 at 15:08
@AmitChigadani yes I'm already using that
– Francesco Borzi
Jan 3 at 15:08
|
show 3 more comments
1 Answer
1
active
oldest
votes
The issue was that the [(ngModel)] directive for Datepicker and Timepicker was triggering only after that the test case was executed (because I'm wrapping them into a custom component that then it's used as a form control).
To trigger that, I needed to add:
datetimeElement.dispatchEvent(new Event('change'));
timepickerElement.dispatchEvent(new Event('change'));
fixture.detectChanges();
after changing the values of the Datepicker and Timepicker elements.
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
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%2f54024564%2fdatepicker-and-timepicker-not-initialised-when-the-test-runs%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
The issue was that the [(ngModel)] directive for Datepicker and Timepicker was triggering only after that the test case was executed (because I'm wrapping them into a custom component that then it's used as a form control).
To trigger that, I needed to add:
datetimeElement.dispatchEvent(new Event('change'));
timepickerElement.dispatchEvent(new Event('change'));
fixture.detectChanges();
after changing the values of the Datepicker and Timepicker elements.
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
add a comment |
The issue was that the [(ngModel)] directive for Datepicker and Timepicker was triggering only after that the test case was executed (because I'm wrapping them into a custom component that then it's used as a form control).
To trigger that, I needed to add:
datetimeElement.dispatchEvent(new Event('change'));
timepickerElement.dispatchEvent(new Event('change'));
fixture.detectChanges();
after changing the values of the Datepicker and Timepicker elements.
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
add a comment |
The issue was that the [(ngModel)] directive for Datepicker and Timepicker was triggering only after that the test case was executed (because I'm wrapping them into a custom component that then it's used as a form control).
To trigger that, I needed to add:
datetimeElement.dispatchEvent(new Event('change'));
timepickerElement.dispatchEvent(new Event('change'));
fixture.detectChanges();
after changing the values of the Datepicker and Timepicker elements.
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
The issue was that the [(ngModel)] directive for Datepicker and Timepicker was triggering only after that the test case was executed (because I'm wrapping them into a custom component that then it's used as a form control).
To trigger that, I needed to add:
datetimeElement.dispatchEvent(new Event('change'));
timepickerElement.dispatchEvent(new Event('change'));
fixture.detectChanges();
after changing the values of the Datepicker and Timepicker elements.
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
answered Jan 15 at 12:43
Francesco BorziFrancesco Borzi
15.3k95593
15.3k95593
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%2f54024564%2fdatepicker-and-timepicker-not-initialised-when-the-test-runs%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
1
Please add related code in your question.
– Amit Chigadani
Jan 3 at 14:48
@AmitChigadani I can add the code but as I mentioned, I set the breakpoint on the first line of my test case and the widgets are not initialised... that is the issue.
– Francesco Borzi
Jan 3 at 14:54
@AmitChigadani I added the code
– Francesco Borzi
Jan 3 at 14:57
Did you try
fixture.detectChanges();instead offixture.autoDetectChanges(true);?– Amit Chigadani
Jan 3 at 15:03
@AmitChigadani yes I'm already using that
– Francesco Borzi
Jan 3 at 15:08