feat: modernize Problem Block JS to ES6+ syntax

xblocks_contrib/problem/assets/spec/collapsible_spec.js

@@ -1,130 +1,119 @@
-// eslint-disable-next-line no-shadow-restricted-names
-(function (undefined) {
-  "use strict";
-
-  describe("Collapsible", function () {
-    var $el,
-      html,
-      html_custom,
-      initialize = function (template) {
-        setFixtures(template);
-        $el = $(".collapsible");
-        Collapsible.setCollapsibles($el);
-      },
-      disableFx = function () {
-        $.fx.off = true;
-      },
-      enableFx = function () {
-        $.fx.off = false;
-      };
+describe("Collapsible", function () {
+  let $el;
+  const initialize = function (template) {
+    setFixtures(template);
+    $el = $(".collapsible");
+    Collapsible.setCollapsibles($el);
+  };
+  const disableFx = function () {
+    $.fx.off = true;
+  };
+  const enableFx = function () {
+    $.fx.off = false;
+  };
+
+  let html, html_custom;
+  beforeEach(function () {
+    html =
+      "" +
+      '<section class="collapsible">' +
+      '<div class="shortform">shortform message</div>' +
+      '<div class="longform">' +
+      "<p>longform is visible</p>" +
+      "</div>" +
+      "</section>";
+    html_custom =
+      "" +
+      '<section class="collapsible">' +
+      "<div " +
+      'class="shortform-custom" ' +
+      'data-open-text="Show shortform-custom" ' +
+      'data-close-text="Hide shortform-custom"' +
+      ">shortform message</div>" +
+      '<div class="longform">' +
+      "<p>longform is visible</p>" +
+      "</div>" +
+      "</section>";
+  });
 
-    beforeEach(function () {
-      html =
-        "" +
-        '<section class="collapsible">' +
-        '<div class="shortform">shortform message</div>' +
-        '<div class="longform">' +
-        "<p>longform is visible</p>" +
-        "</div>" +
-        "</section>";
-      html_custom =
-        "" +
-        '<section class="collapsible">' +
-        "<div " +
-        'class="shortform-custom" ' +
-        'data-open-text="Show shortform-custom" ' +
-        'data-close-text="Hide shortform-custom"' +
-        ">shortform message</div>" +
-        '<div class="longform">' +
-        "<p>longform is visible</p>" +
-        "</div>" +
-        "</section>";
+  describe("setCollapsibles", function () {
+    it("Default container initialized correctly", function () {
+      initialize(html);
+
+      expect($el.find(".shortform")).toContainElement(".full-top");
+      expect($el.find(".shortform")).toContainElement(".full-bottom");
+      expect($el.find(".longform")).toBeHidden();
+      expect($el.find(".full")).toHandle("click");
     });
 
-    describe("setCollapsibles", function () {
-      it("Default container initialized correctly", function () {
-        initialize(html);
+    it("Custom container initialized correctly", function () {
+      initialize(html_custom);
 
-        expect($el.find(".shortform")).toContainElement(".full-top");
-        expect($el.find(".shortform")).toContainElement(".full-bottom");
-        expect($el.find(".longform")).toBeHidden();
-        expect($el.find(".full")).toHandle("click");
-      });
+      expect($el.find(".shortform-custom")).toContainElement(".full-custom");
+      expect($el.find(".full-custom")).toHaveText("Show shortform-custom");
+      expect($el.find(".longform")).toBeHidden();
+      expect($el.find(".full-custom")).toHandle("click");
+    });
+  });
+
+  describe("toggleFull", function () {
+    const assertChanges = function (state, anchorsElClass, showText, hideText) {
+      if (state == null) {
+        state = "closed";
+      }
 
-      it("Custom container initialized correctly", function () {
-        initialize(html_custom);
+      const anchors = $el.find("." + anchorsElClass);
 
-        expect($el.find(".shortform-custom")).toContainElement(".full-custom");
-        expect($el.find(".full-custom")).toHaveText("Show shortform-custom");
+      let text;
+      if (state === "closed") {
         expect($el.find(".longform")).toBeHidden();
-        expect($el.find(".full-custom")).toHandle("click");
+        expect($el).not.toHaveClass("open");
+        text = showText;
+      } else {
+        expect($el.find(".longform")).toBeVisible();
+        expect($el).toHaveClass("open");
+        text = hideText;
+      }
+
+      $.each(anchors, function (index, el) {
+        expect(el).toHaveText(text);
       });
+    };
+
+    beforeEach(function () {
+      disableFx();
     });
 
-    describe("toggleFull", function () {
-      var assertChanges = function (state, anchorsElClass, showText, hideText) {
-        var anchors, text;
-
-        if (state == null) {
-          state = "closed";
-        }
-
-        anchors = $el.find("." + anchorsElClass);
-
-        if (state === "closed") {
-          expect($el.find(".longform")).toBeHidden();
-          expect($el).not.toHaveClass("open");
-          text = showText;
-        } else {
-          expect($el.find(".longform")).toBeVisible();
-          expect($el).toHaveClass("open");
-          text = hideText;
-        }
-
-        $.each(anchors, function (index, el) {
-          expect(el).toHaveText(text);
-        });
-      };
-
-      beforeEach(function () {
-        disableFx();
-      });
+    afterEach(function () {
+      enableFx();
+    });
 
-      afterEach(function () {
-        enableFx();
-      });
+    it("Default container", function () {
+      initialize(html);
 
-      it("Default container", function () {
-        var event;
+      const event = jQuery.Event("click", {
+        target: $el.find(".full").get(0),
+      });
 
-        initialize(html);
+      Collapsible.toggleFull(event, "See full output", "Hide output");
+      assertChanges("opened", "full", "See full output", "Hide output");
 
-        event = jQuery.Event("click", {
-          target: $el.find(".full").get(0),
-        });
+      Collapsible.toggleFull(event, "See full output", "Hide output");
+      assertChanges("closed", "full", "See full output", "Hide output");
+    });
 
-        Collapsible.toggleFull(event, "See full output", "Hide output");
-        assertChanges("opened", "full", "See full output", "Hide output");
+    it("Custom container", function () {
+      initialize(html_custom);
 
-        Collapsible.toggleFull(event, "See full output", "Hide output");
-        assertChanges("closed", "full", "See full output", "Hide output");
+      const event = jQuery.Event("click", {
+        target: $el.find(".full-custom").get(0),
       });
 
-      it("Custom container", function () {
-        var event;
+      Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom");
+      assertChanges("opened", "full-custom", "Show shortform-custom", "Hide shortform-custom");
 
-        initialize(html_custom);
-
-        event = jQuery.Event("click", {
-          target: $el.find(".full-custom").get(0),
-        });
-
-        Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom");
-        assertChanges("opened", "full-custom", "Show shortform-custom", "Hide shortform-custom");
-
-        Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom");
-        assertChanges("closed", "full-custom", "Show shortform-custom", "Hide shortform-custom");
-      });
+      Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom");
+      assertChanges("closed", "full-custom", "Show shortform-custom", "Hide shortform-custom");
     });
   });
-}).call(this);
+});

xblocks_contrib/problem/assets/spec/display_spec.js

@@ -1,12 +1,6 @@
-/*
- * decaffeinate suggestions:
- * DS101: Remove unnecessary use of Array.from
- * DS207: Consider shorter variations of null checks
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
 describe("Problem", function () {
   const problem_content_default = readFixtures("problem_content.html");
-  var mockRuntime = {};
+  const mockRuntime = {};
 
   beforeEach(function () {
     // Stub MathJax
@@ -37,7 +31,7 @@ describe("Problem", function () {
 
   describe("constructor", function () {
     it("set the element from html", function () {
-      this.problem999 = new Problem(mockRuntime,`\
+      this.problem999 = new Problem(mockRuntime, `\
 <section class='xblock xblock-student_view xmodule_display xmodule_CapaModule' data-type='Problem'> \
 <section id='problem_999' \
 class='problems-wrapper' \
@@ -995,6 +989,15 @@ data-url='/problem/quiz/'> \
   describe("refreshMath", function () {
     beforeEach(function () {
       this.problem = new Problem(mockRuntime, $(".xblock-student_view"));
+      // Reset Queue spy so that bind()'s Queue call ([fn, null, domEl]) is not
+      // included when toHaveBeenCalledWith scans recorded calls. In Jasmine 2.99,
+      // toHaveBeenCalledWith iterates ALL recorded calls' args element-by-element
+      // (even mismatched ones, for diff output). jasmine-jquery's custom equality
+      // tester calls $(domEl).is(anyString) when comparing a DOM node against a
+      // string — which throws a Sizzle syntax error if the string isn't a valid
+      // CSS selector (e.g. "E=mc^2"). Resetting here isolates this describe to
+      // testing only what refreshMath itself queues.
+      MathJax.Hub.Queue.calls.reset();
       $("#input_example_1").val("E=mc^2");
       this.problem.refreshMath({ target: $("#input_example_1").get(0) });
     });