MDL-78938 course: Wrap manual completion toggle in pending

This commit makes two changes to reduce random failures in behat:
- wrap the toggling of manually configured completion in pendingjs
- set the loading spinner content without forcing the completion toggle
  ws to wait for the loading spinner to update.

course/amd/build/manual_completion_toggle.min.js

@@ -1,3 +1,3 @@
-function _typeof(obj){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}define("core_course/manual_completion_toggle",["exports","core/templates","core/notification","core_course/repository","core_course/events"],(function(_exports,_templates,_notification,_repository,CourseEvents){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_templates=_interopRequireDefault(_templates),_notification=_interopRequireDefault(_notification),CourseEvents=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!==_typeof(obj)&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(CourseEvents);var SELECTORS_MANUAL_TOGGLE="button[data-action=toggle-manual-completion]",TOGGLE_TYPES_TOGGLE_MARK_DONE="manual:mark-done",registered=!1;_exports.init=function(){registered||(document.addEventListener("click",(function(e){var toggleButton=e.target.closest(SELECTORS_MANUAL_TOGGLE);toggleButton&&(e.preventDefault(),toggleManualCompletionState(toggleButton).catch(_notification.default.exception))})),registered=!0)};var fn,_ref,toggleManualCompletionState=(fn=regeneratorRuntime.mark((function _callee(toggleButton){var originalInnerHtml,toggleType,cmid,activityname,completed,loadingHtml,templateContext,renderObject,replacedNode,newToggleButton,withAvailability,toggledEvent;return regeneratorRuntime.wrap((function(_context){for(;;)switch(_context.prev=_context.next){case 0:return originalInnerHtml=toggleButton.innerHTML,toggleButton.setAttribute("disabled","disabled"),toggleType=toggleButton.getAttribute("data-toggletype"),cmid=toggleButton.getAttribute("data-cmid"),activityname=toggleButton.getAttribute("data-activityname"),completed=toggleType===TOGGLE_TYPES_TOGGLE_MARK_DONE,_context.next=8,_templates.default.render("core/loading",{});case 8:return loadingHtml=_context.sent,_context.next=11,_templates.default.replaceNodeContents(toggleButton,loadingHtml,"");case 11:return _context.prev=11,_context.next=14,(0,_repository.toggleManualCompletion)(cmid,completed);case 14:return templateContext={cmid:cmid,activityname:activityname,overallcomplete:completed,overallincomplete:!completed,istrackeduser:!0},_context.next=17,_templates.default.renderForPromise("core_course/completion_manual",templateContext);case 17:return renderObject=_context.sent,_context.next=20,_templates.default.replaceNode(toggleButton,renderObject.html,renderObject.js);case 20:replacedNode=_context.sent,newToggleButton=replacedNode.pop(),withAvailability=toggleButton.getAttribute("data-withavailability"),toggledEvent=new CustomEvent(CourseEvents.manualCompletionToggled,{bubbles:!0,detail:{cmid:cmid,activityname:activityname,completed:completed,withAvailability:withAvailability}}),newToggleButton.dispatchEvent(toggledEvent),_context.next=32;break;case 27:_context.prev=27,_context.t0=_context.catch(11),toggleButton.removeAttribute("disabled"),toggleButton.innerHTML=originalInnerHtml,_notification.default.exception(_context.t0);case 32:case"end":return _context.stop()}}),_callee,null,[[11,27]])})),_ref=function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))},function(_x){return _ref.apply(this,arguments)})}));
+function _typeof(obj){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}define("core_course/manual_completion_toggle",["exports","core/templates","core/notification","core_course/repository","core_course/events","core/pending"],(function(_exports,_templates,_notification,_repository,CourseEvents,_pending){function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_templates=_interopRequireDefault(_templates),_notification=_interopRequireDefault(_notification),CourseEvents=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!==_typeof(obj)&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(CourseEvents),_pending=_interopRequireDefault(_pending);var SELECTORS_MANUAL_TOGGLE="button[data-action=toggle-manual-completion]",TOGGLE_TYPES_TOGGLE_MARK_DONE="manual:mark-done",registered=!1;_exports.init=function(){registered||(document.addEventListener("click",(function(e){var toggleButton=e.target.closest(SELECTORS_MANUAL_TOGGLE);toggleButton&&(e.preventDefault(),toggleManualCompletionState(toggleButton).catch(_notification.default.exception))})),registered=!0)};var fn,_ref,toggleManualCompletionState=(fn=regeneratorRuntime.mark((function _callee(toggleButton){var pendingPromise,originalInnerHtml,toggleType,cmid,activityname,completed,templateContext,renderObject,replacedNode,newToggleButton,withAvailability,toggledEvent;return regeneratorRuntime.wrap((function(_context){for(;;)switch(_context.prev=_context.next){case 0:return pendingPromise=new _pending.default("core_course:toggleManualCompletionState"),originalInnerHtml=toggleButton.innerHTML,toggleButton.setAttribute("disabled","disabled"),toggleType=toggleButton.getAttribute("data-toggletype"),cmid=toggleButton.getAttribute("data-cmid"),activityname=toggleButton.getAttribute("data-activityname"),completed=toggleType===TOGGLE_TYPES_TOGGLE_MARK_DONE,_templates.default.renderForPromise("core/loading",{}).then((function(loadingHtml){_templates.default.replaceNodeContents(toggleButton,loadingHtml,"")})).catch((function(){})),_context.prev=8,_context.next=11,(0,_repository.toggleManualCompletion)(cmid,completed);case 11:return templateContext={cmid:cmid,activityname:activityname,overallcomplete:completed,overallincomplete:!completed,istrackeduser:!0},_context.next=14,_templates.default.renderForPromise("core_course/completion_manual",templateContext);case 14:return renderObject=_context.sent,_context.next=17,_templates.default.replaceNode(toggleButton,renderObject.html,renderObject.js);case 17:replacedNode=_context.sent,newToggleButton=replacedNode.pop(),withAvailability=toggleButton.getAttribute("data-withavailability"),toggledEvent=new CustomEvent(CourseEvents.manualCompletionToggled,{bubbles:!0,detail:{cmid:cmid,activityname:activityname,completed:completed,withAvailability:withAvailability}}),newToggleButton.dispatchEvent(toggledEvent),_context.next=29;break;case 24:_context.prev=24,_context.t0=_context.catch(8),toggleButton.removeAttribute("disabled"),toggleButton.innerHTML=originalInnerHtml,_notification.default.exception(_context.t0);case 29:pendingPromise.resolve();case 30:case"end":return _context.stop()}}),_callee,null,[[8,24]])})),_ref=function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))},function(_x){return _ref.apply(this,arguments)})}));
 
 //# sourceMappingURL=manual_completion_toggle.min.js.map

course/amd/src/manual_completion_toggle.js

@@ -26,6 +26,7 @@ import Templates from 'core/templates';
 import Notification from 'core/notification';
 import {toggleManualCompletion} from 'core_course/repository';
 import * as CourseEvents from 'core_course/events';
+import Pending from 'core/pending';
 
 /**
  * Selectors in the manual completion template.
@@ -77,6 +78,7 @@ export const init = () => {
  * @returns {Promise<void>}
  */
 const toggleManualCompletionState = async(toggleButton) => {
+    const pendingPromise = new Pending('core_course:toggleManualCompletionState');
     // Make a copy of the original content of the button.
     const originalInnerHtml = toggleButton.innerHTML;
 
@@ -91,8 +93,11 @@ const toggleManualCompletionState = async(toggleButton) => {
     const completed = toggleType === TOGGLE_TYPES.TOGGLE_MARK_DONE;
 
     // Replace the button contents with the loading icon.
-    const loadingHtml = await Templates.render('core/loading', {});
-    await Templates.replaceNodeContents(toggleButton, loadingHtml, '');
+    Templates.renderForPromise('core/loading', {})
+    .then((loadingHtml) => {
+        Templates.replaceNodeContents(toggleButton, loadingHtml, '');
+        return;
+    }).catch(() => {});
 
     try {
         // Call the webservice to update the manual completion status.
@@ -134,4 +139,5 @@ const toggleManualCompletionState = async(toggleButton) => {
         // Show the exception.
         Notification.exception(exception);
     }
+    pendingPromise.resolve();
 };