backbone view test if element has datepicker

286
December 26, 2016, at 11:54 PM

First off: sorry for the terrible topic name

I have a backbone view that has an onRender() method. What it does is initializing all selects with an select jquery plugin (chosen) and some input text fields with the jquery plugin bootstrap-datepicker (https://github.com/uxsolutions/bootstrap-datepicker).

here is the code (coffeescript)

  onRender: =>
    ### init chosen select picker ###
    $('.chosen-select', @el).chosen
      width: '100%'
    ### init datepickers ###
    $('.date', @el).datepicker()

Now I want to write specs for the view and I am stuck with testing if the datpickers and chosen-selects where initialized on the proper elements elements.

So I strart trying on the console:

it was easy for the chosen-selects:

/* lets build the view  */
v = new MyBackboneView();
v.render();
v.onRender();
/* now lets grab a select that I expect to be an chosen select now */
select = $(':input[name="user_id"]', v.el);
/* now I check for the chosen function on the element */
$(select).data('chosen'); /* => is not undefined, yay! */

So now I wanted to do the same for the datepicker stuff.

/* lets build the view  */
v = new MyBackboneView();
v.render();
v.onRender();
/* now lets grab a input text field that I expect to be a datepicker now */
input = $(':input[name="start_date"]', v.el);
/* now I check for the datepicker function on the element */
$(input).data('datepicker'); /* => is undefined :-( */

So I can't check for the datepicker this way. But here is what I don't understand.

If I load the page in the browser, and I do the same thing like above with the element rendered in the browser (not only oon the console) I see the wanted object when checking for

$(input).data('datepicker');

So basicly when view is shown in browser:

/* lets grab a input text field that I expect to be a datepicker now */
input = $(':input[name="start_date"]');
/* now I check for the datepicker function on the element */
$(input).data('datepicker'); /* => is defined :-O */

Can someone explain this to me? I can't see through this one. And furthermore. Is there a better way to check for the use of a datepicker on an element in the console (or in an unit test)?

READ ALSO
How can I write an event “do you want to allow to use additional storage on your computer event in JavaScript” in JavaScript?

How can I write an event “do you want to allow to use additional storage on your computer event in JavaScript” in JavaScript?

Do you want to allow to use additional storage on your computer event in JavaScript" for the Internet Explorer Internet browser

246
Onchange of a input field changed by Javascript

Onchange of a input field changed by Javascript

I have a input field type="hidden" which is changed by javascript itself

460
How do we get the closest previous element in a complex document?

How do we get the closest previous element in a complex document?

We were trying to get the closest previous element using jQuery using the codes given here

248
Ternary Operator Angular JS

Ternary Operator Angular JS

I have $scopelineData[0]

358