Undefined variable in .then() function

Question

I'm writing a Protractor test that should interact with a slider bar. The slider bar controls a field that outputs a dollar value. The test attempts to move the bar along the x-axis until the value of $15,000 is returned.

I've managed to get the slider moving, but it doesn't respect the limit set by the amount variable. Asynchronous commands make my life harder.

var dragSlider = function(amount) {
    element(by.css('.irs-single')).getText().then(function(text) {
        console.log(text)
        if (text !== amount) {
            browser.actions().dragAndDrop(element(by.css('.irs-slider.single')), {x:1, y:0}).perform();
            element(by.css('.irs-single')).getText().then(console.log(amount, text, amount===text)).then(dragSlider());
        }
    });
};

When I run dragSlider("$15,000"); , the console.log(amount, text, amount===text) returns, eg, the following:

$14,900
undefined '$14,900' false
$15,000
undefined '$15,000' false
$15,100
undefined '$15,100' false

Could you please let me know what it is that I'm doing wrong here?

Answer 1

You're calling console.log() immediately rather than passing it to the Promise.then() callback.

Try changing:

element(by.css('.irs-single')).getText(text)
  .then(console.log(amount, text, amount===text))
  .then(dragSlider(text));

To:

element(by.css('.irs-single')).getText().then(dragSlider);

Answer 2

Thanks, All. @Bergi's right. Silly omission on my part! Corrected code below.

var dragSlider = function(amount) {
    element(by.css('.irs-single')).getText().then(function(text) {
        if (text !== amount) {
            browser.actions().dragAndDrop(element(by.css('.irs-slider.single')), {x:1, y:0}).perform();
            dragSlider(amount);
        }
    });
};