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

        Issue Links

          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, Stevani Andolo
              Votes:
              2 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                19/Apr/22

                Time Tracking

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