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

Update user tours to emit events

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Fixed
    • Icon: Blocker Blocker
    • 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

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

            dobedobedoh Andrew Lyons
            dobedobedoh Andrew Lyons
            Sam Marshall Sam Marshall
            Jun Pataleta Jun Pataleta
            Gladys Basiana Gladys Basiana
            Votes:
            2 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

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

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.