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

Add debug tools to the reactive.js module

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Waiting for integration review
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 4.0
    • Fix Version/s: None
    • Component/s: Course, JavaScript
    • Testing Instructions:
      Hide

      Testing requirements:

      • Login as admin
      • Go to Site administration -> Development -> Debugging and set:
        • Debug messages to "DEVELOPER"
        • Display debug messages to true
      • One course in topics format with at least 2 sections and 2 activities on each section.
      • Go into the course as admin and display the course index (you probably need to close the drawer first)

      Test 1: console

      1. Open the browser console (F12 in chrome), refresh the page, and wait until the page is loaded completely.
        1. Check a console log with the message: Debug module "M.reactive" loaded.
        2. Check a console log with the message: Registering new reactive instance "M.reactive.CourseEditorXXX" (where "XXX" is the id of the current course)
      2. Execute the following commend (NOTE: XXX is the id of the current course): M.reactive.CourseEditorXXX.highlight = true;
        1. Check the course index and the course content elements are highlighted with a thick border.
      3. Execute: M.reactive.CourseEditorXXX.highlight = false;
        1. Check the course index and the course content are not highlighted anymore.
      4. Execute: M.reactive.CourseEditorXXX.stateData
        1. Check the console shows an object with cm, course, and section attributes.

      Test 2: debug panel

      1. Scroll to the page footer.
        1. Check that "Reactive instances" is present in the footer.
        2. Check a button "CourseEditorXXX" is present near "reactive instances" (NOTE: XXX is the id of the current course)
      2. Click on the "CourseEditorXXX" button
        1. Check a panel with a "CourseEditorXXX" title opens below the button
        2. Check a JSON structure is present in the State data textarea
        3. Check the state data has "course", "section" and "cm" attributes on the first level.
      3. Click on "Unpin" button
        1. Check the panel is unpinned from the footer
        2. Check you can drag the panel around the page
      4. Scroll to the top of the page and click on "Highlight OFF" button
        1. Check the course index and the course content elements are highlighted with a thick border.
      5. Click on "Highlight ON" button
        1. Check the course index and the course content are not highlighted anymore.
      6. Find "sectionlist" array in the State data text area, swap the first two values and click on the "save" button.
        1. Check the first two sections on both course index and course section swaps
        2. Check that State events log now have some content like "transaction:start", "course.sectionlist:updated"...
      Show
      Testing requirements: Login as admin Go to Site administration -> Development -> Debugging and set: Debug messages to "DEVELOPER" Display debug messages to true One course in topics format with at least 2 sections and 2 activities on each section. Go into the course as admin and display the course index (you probably need to close the drawer first) Test 1: console Open the browser console (F12 in chrome), refresh the page, and wait until the page is loaded completely. Check a console log with the message: Debug module "M.reactive" loaded. Check a console log with the message: Registering new reactive instance "M.reactive.CourseEditorXXX" (where "XXX" is the id of the current course) Execute the following commend (NOTE: XXX is the id of the current course) : M.reactive.CourseEditorXXX.highlight = true; Check the course index and the course content elements are highlighted with a thick border. Execute: M.reactive.CourseEditorXXX.highlight = false; Check the course index and the course content are not highlighted anymore. Execute: M.reactive.CourseEditorXXX.stateData Check the console shows an object with cm, course, and section attributes. Test 2: debug panel Scroll to the page footer. Check that "Reactive instances" is present in the footer. Check a button "CourseEditorXXX" is present near "reactive instances"  (NOTE: XXX is the id of the current course) Click on the "CourseEditorXXX" button Check a panel with a "CourseEditorXXX" title opens below the button Check a JSON structure is present in the State data textarea Check the state data has "course", "section" and "cm" attributes on the first level. Click on "Unpin" button Check the panel is unpinned from the footer Check you can drag the panel around the page Scroll to the top of the page and click on "Highlight OFF" button Check the course index and the course content elements are highlighted with a thick border. Click on "Highlight ON" button Check the course index and the course content are not highlighted anymore. Find "sectionlist" array in the State data text area, swap the first two values and click on the "save" button. Check the first two sections on both course index and course section swaps Check that State events log now have some content like "transaction:start", "course.sectionlist:updated"...
    • Affected Branches:
      MOODLE_400_STABLE
    • Pull Master Branch:
      MDL-71995-master
    • Sprint:
      Moppies Kanban

      Description

      Moodle 4.0 will use a reactive state for the new course editor. This interface will be the first to use a new reactiv.js  library. The goal of this issue is:

      • Add a debug console object to interact with the state and components.
      • Add a debug panel in the footer to interact with the reactive instances and their states visually.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              tusefomal Ferran Recio
              Reporter:
              tusefomal Ferran Recio
              Peer reviewer:
              Carlos Escobedo Carlos Escobedo
              Participants:
              Component watchers:
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona), Andrew Lyons, Dongsheng Cai, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 2 hours, 45 minutes
                  1w 2h 45m