Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-71931

Update user tours to emit events

    XMLWordPrintable

Details

    • Improvement
    • Status: Closed
    • Blocker
    • Resolution: Fixed
    • 4.0
    • 4.0
    • User Tours
    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-71931-master
    • Hide

      Behat should test most of this. You may want to perform additional smoke testing too, if so then the following my be useful to you:

      1. Go to Site administration > Appearance > User tours
      2. Import the attached sampletour.json .
      3. Enable the tour
      4. Visit a course homepage.
      5. Open the Browser developer tools
      6. Open the console tab
      7. Paste the following code:

        const showLogs = (eventName, expectedCancelable, actualCancelable, expectedDetails, details) => {
            window.console.log(`Caught ${eventName}`);
            window.console.log(`Cancellable should be ${expectedCancelable}: ${actualCancelable}`);
            window.console.log(`The event detail object should contain: ${expectedDetails}`);
            window.console.log(details);
            window.console.log("");
        };
         
        document.addEventListener('tool_usertours/stepRender', e => {
            showLogs('stepRender', true, e.cancelable, 'tour, stepConfig', e.detail);
        });
         
        document.addEventListener('tool_usertours/stepRendered', e => {
            showLogs('stepRendered', false, e.cancelable, 'tour, stepConfig', e.detail);
        });
         
        document.addEventListener('tool_usertours/tourStart', e => {
            showLogs('tourStart', true, e.cancelable, 'tour, startAt (Number)', e.detail);
        });
         
        document.addEventListener('tool_usertours/tourStarted', e => {
            showLogs('tourStarted', false, e.cancelable, 'tour, startAt (Number)', e.detail);
        });
         
        document.addEventListener('tool_usertours/tourEnd', e => {
            showLogs('tourEnd', true, e.cancelable, 'tour', e.detail);
        });
         
        document.addEventListener('tool_usertours/tourEnded', e => {
            showLogs('tourEnded', false, e.cancelable, 'tour', e.detail);
        });
         
        document.addEventListener('tool_usertours/stepHide', e => {
            showLogs('stepHide', true, e.cancelable, 'tour', e.detail);
        });
         
        document.addEventListener('tool_usertours/stepHidden', e => {
            showLogs('stepHidden', false, e.cancelable, 'tour', e.detail);
        });
        

      8. Press next or previous on the tour and check the console:
        1. Confirm that the details match each of the prompts
          • E.g. when a step is shown, you should see "Caught stepRender" and "Caught stepRendered" logs with the expected cancelable and contents of its details object. If a tour step is currently visible prior to going to the next tour step, you should also see "Caught stepHide" and "Caught stepHidden" events as well.
      9. Clear the console.
      10. End the tour
      11. Check the console:
        1. Confirm that the following events are logged: tourEnd, stepHide, stepHidden, and tourEnded.
        2. Confirm that the details match each of the prompts
      12. Clear the console once more.
      13. Click "Reset user tour on this page" at the footer area of the page to restart the user tour.
      14. Check the console:
        Note: Resetting the tour is quite noisy... that's unrelated to this issue.
        1. Confirm that logs include the following events: tourStart, stepRender, stepRendered, and tourStarted. (Ignore the stepHide and stepHidden logs)
        2. Confirm that the details match each of the prompts
      Show
      Behat should test most of this. You may want to perform additional smoke testing too, if so then the following my be useful to you: Go to Site administration > Appearance > User tours Import the attached sampletour.json . Enable the tour Visit a course homepage. Open the Browser developer tools Open the console tab Paste the following code: const showLogs = (eventName, expectedCancelable, actualCancelable, expectedDetails, details) => { window.console.log(`Caught ${eventName}`); window.console.log(`Cancellable should be ${expectedCancelable}: ${actualCancelable}`); window.console.log(`The event detail object should contain: ${expectedDetails}`); window.console.log(details); window.console.log(""); };   document.addEventListener('tool_usertours/stepRender', e => { showLogs('stepRender', true, e.cancelable, 'tour, stepConfig', e.detail); }); document.addEventListener('tool_usertours/stepRendered', e => { showLogs('stepRendered', false, e.cancelable, 'tour, stepConfig', e.detail); }); document.addEventListener('tool_usertours/tourStart', e => { showLogs('tourStart', true, e.cancelable, 'tour, startAt (Number)', e.detail); }); document.addEventListener('tool_usertours/tourStarted', e => { showLogs('tourStarted', false, e.cancelable, 'tour, startAt (Number)', e.detail); }); document.addEventListener('tool_usertours/tourEnd', e => { showLogs('tourEnd', true, e.cancelable, 'tour', e.detail); }); document.addEventListener('tool_usertours/tourEnded', e => { showLogs('tourEnded', false, e.cancelable, 'tour', e.detail); }); document.addEventListener('tool_usertours/stepHide', e => { showLogs('stepHide', true, e.cancelable, 'tour', e.detail); }); document.addEventListener('tool_usertours/stepHidden', e => { showLogs('stepHidden', false, e.cancelable, 'tour', e.detail); }); Press next or previous on the tour and check the console: Confirm that the details match each of the prompts E.g. when a step is shown, you should see " Caught stepRender " and " Caught stepRendered " logs with the expected cancelable and contents of its details object. If a tour step is currently visible prior to going to the next tour step, you should also see " Caught stepHide " and " Caught stepHidden " events as well. Clear the console. End the tour Check the console: Confirm that the following events are logged: tourEnd, stepHide, stepHidden, and tourEnded. Confirm that the details match each of the prompts Clear the console once more. Click "Reset user tour on this page" at the footer area of the page to restart the user tour. Check the console: Note: Resetting the tour is quite noisy... that's unrelated to this issue. Confirm that logs include the following events: tourStart, stepRender, stepRendered, and tourStarted. (Ignore the stepHide and stepHidden logs) Confirm that the details match each of the prompts

    Description

      As discussed with quen, we should emit proper events on various tour phases.

      Attachments

        Activity

          People

            dobedobedoh Andrew Lyons
            dobedobedoh Andrew Lyons
            Sam Marshall Sam Marshall
            Jun Pataleta Jun Pataleta
            Gladys Basiana Gladys Basiana
            Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
            Votes:
            2 Vote for this issue
            Watchers:
            8 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 5 hours, 55 minutes
                5h 55m