LinkedInAttic / hopscotch

A framework to make it easy for developers to add product tours to their pages.
Apache License 2.0
4.19k stars 664 forks source link

Cannot read property 'steps' of null #243

Open arindambarman1-zz opened 8 years ago

arindambarman1-zz commented 8 years ago

I keep getting this error during my jasmine tests. I am using jasmine and magic lamp to import my views as fixtures to my test. When I run hopscotch.startTour I get the above error. Yet hopscotch.isActive is true.

kate2753 commented 8 years ago

Could you provide a snippet of code with your tour configuration and how you start\end the tour (hopscotch API calls)?

arindambarman1-zz commented 8 years ago
var page_tour = {
      id: "rules_" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0,
        5),
      steps: [{
        title: "Date Range",
        content: "Select the date range to view the number of actions taken by rules",
        target: "dateRange",
        showPrevButton: true,
        delay: 50,
        placement: "left",
        onNext: function() {
          temp_store.store_string('hopscotch_step', hopscotch.getCurrStepNum());
        }
      }, {
        title: "Rules Status",
        content: "Use Toggle button to pause/ unpause the rules",
        target: ".toggle.statusButton",
        showPrevButton: true,
        placement: "top",
        xOffset: 70,
        onNext: function() {
          temp_store.store_string('hopscotch_step', hopscotch.getCurrStepNum());
        }
      }, {
        title: "Rules Edit",
        content: "Use Pencil button to Edit the rules",
        showPrevButton: true,
        target: ".glyphicon.glyphicon-pencil",
        placement: "right",
        onNext: function() {
          temp_store.store_string('hopscotch_step', hopscotch.getCurrStepNum());
        }
      }, {
        title: "New Rule",
        content: "Create a new rule",
        showPrevButton: true,
        target: "NewRule-tab",
        placement: "right",
        onNext: function() {
          temp_store.store_string('hopscotch_step', hopscotch.getCurrStepNum());
        }
      }]
    };

 hopscotch.startTour(page_tour, resumed_step);

var controller, $scope, rules_tour; beforeEach(inject(function($rootScope, $controller, _rulestour) { MagicLamp.load("rules/index"); $scope = $rootScope.$new(); controller = $controller('rulesController', { $scope: $scope }); rules_tour = _rulestour; rules_tour.indexTour('page_tour', $scope, 0); $scope.$digest(); })); afterEach(function() { hopscotch.endTour(); hopscotch.getCalloutManager().removeAllCallouts(); });

The error is in line :559 (w function) and 605. It works on the page perfectly but during the tests it fails. Do I have to include something in the tests separately?

kate2753 commented 8 years ago

It's possible that hopscotch is getting into a bad state. It might happen if provided step number is out of bounds. Try setting up a onError callback and setting skipIfNoElement to false to see if you get any error reports.

arindambarman1-zz commented 8 years ago

Tried both. Didn't work.

arindambarman1-zz commented 8 years ago

Now I'm getting this Cannot read property 'getBoundingClientRect' of null If you can relate to where the error could be let me know.

nexen505 commented 5 years ago

Any updates on this? I got similar problem, but it is unexpected.