feat: Replace PhantomJS & Migrate eslint-config-edx (#1055)

* refactor: package upgrade for eslint migration * feat: replaced PhantomJs with Headless Chromium to fix unit tests after eslint upgrade * refactor: resolved eslint issues * fix: resolved linting issues * refactor: resolved eslint warnings * refactor: ignored lint error for global var edx * feat: updated version & added change summary to changelog Co-authored-by: BilalQamar <[email protected]>
openedx · Jul 13, 2022 · a06398e · a06398e
1 parent a4379ad
commit a06398e
Show file tree

Hide file tree

Showing 35 changed files with 11,932 additions and 15,906 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": "eslint-config-edx-es5",
+  "extends": "@edx/eslint-config",
   "globals": {
     "sinon": false,
     "setFixtures": false,
@@ -8,6 +8,13 @@
     "Backbone": false,
     "gettext": false,
     "Promise": false,
-    "edx": true
+    "edx": true,
+    "$": true,
+    "jQuery": true,
+    "spyOn": true,
+    "jasmine": true
+  },
+  "rules": {
+    "object-shorthand": [0, "always", { "ignoreConstructors": true }]
   }
 }
diff --git a/.eslintrc.worker.json b/.eslintrc.worker.json
@@ -1,5 +1,5 @@
 {
-  "extends": "eslint-config-edx",
+  "extends": "@edx/eslint-config",
   "env": {
     "worker": true
   }

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -15,6 +15,11 @@ Unreleased
 ~~~~~~~~~~
 * Improved ``developing.rst`` docs for installing and running the mockprock proctoring provider.
 
+[4.11.0] - 2022-07-13
+~~~~~~~~~~~~~~~~~~~~~
+* Replaced PhantomJS with Headless Chromium
+* Replaced the deprecated `eslint-config-edx` with the newer `@edx/eslint-config` package
+
 [4.10.3] - 2022-04-06
 ~~~~~~~~~~~~~~~~~~~~~
 * Fixed invalid course url in proctored attempt email

diff --git a/edx_proctoring/__init__.py b/edx_proctoring/__init__.py
@@ -3,6 +3,6 @@
 """
 
 # Be sure to update the version number in edx_proctoring/package.json
-__version__ = '4.10.3'
+__version__ = '4.11.0'
 
 default_app_config = 'edx_proctoring.apps.EdxProctoringConfig'  # pylint: disable=invalid-name
diff --git a/edx_proctoring/static/proctoring/js/collections/proctored_exam_allowance_collection.js b/edx_proctoring/static/proctoring/js/collections/proctored_exam_allowance_collection.js
@@ -1,15 +1,15 @@
 edx = edx || {};
-(function(Backbone) {
-    'use strict';
+(Backbone => {
+  'use strict';
 
-    edx.instructor_dashboard = edx.instructor_dashboard || {};
-    edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
+  edx.instructor_dashboard = edx.instructor_dashboard || {};
+  edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
 
-    edx.instructor_dashboard.proctoring.ProctoredExamAllowanceCollection = Backbone.Collection.extend({
-        /* model for a collection of ProctoredExamAllowance */
-        model: edx.instructor_dashboard.proctoring.ProctoredExamAllowanceModel,
-        url: '/api/edx_proctoring/v1/proctored_exam/'
-    });
-    this.edx.instructor_dashboard.proctoring.ProctoredExamAllowanceCollection =
-        edx.instructor_dashboard.proctoring.ProctoredExamAllowanceCollection;
+  edx.instructor_dashboard.proctoring.ProctoredExamAllowanceCollection = Backbone.Collection.extend({
+    /* model for a collection of ProctoredExamAllowance */
+    model: edx.instructor_dashboard.proctoring.ProctoredExamAllowanceModel,
+    url: '/api/edx_proctoring/v1/proctored_exam/',
+  });
+  const proctoredExamAllowanceCollection = edx.instructor_dashboard.proctoring.ProctoredExamAllowanceCollection;
+  this.edx.instructor_dashboard.proctoring.ProctoredExamAllowanceCollection = proctoredExamAllowanceCollection;
 }).call(this, Backbone);
diff --git a/edx_proctoring/static/proctoring/js/collections/proctored_exam_attempt_grouped_collection.js b/edx_proctoring/static/proctoring/js/collections/proctored_exam_attempt_grouped_collection.js
@@ -1,15 +1,15 @@
 edx = edx || {};
-(function(Backbone) {
-    'use strict';
+(Backbone => {
+  'use strict';
 
-    edx.instructor_dashboard = edx.instructor_dashboard || {};
-    edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
+  edx.instructor_dashboard = edx.instructor_dashboard || {};
+  edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
 
-    edx.instructor_dashboard.proctoring.ProctoredExamAttemptGroupedCollection = Backbone.Collection.extend({
-        /* model for a collection of ProctoredExamAttempt */
-        model: edx.instructor_dashboard.proctoring.ProctoredExamAttemptModel,
-        url: '/api/edx_proctoring/v1/proctored_exam/attempt/grouped/course_id/'
-    });
-    this.edx.instructor_dashboard.proctoring.ProctoredExamAttemptGroupedCollection =
-      edx.instructor_dashboard.proctoring.ProctoredExamAttemptGroupedCollection;
+  edx.instructor_dashboard.proctoring.ProctoredExamAttemptGroupedCollection = Backbone.Collection.extend({
+    /* model for a collection of ProctoredExamAttempt */
+    model: edx.instructor_dashboard.proctoring.ProctoredExamAttemptModel,
+    url: '/api/edx_proctoring/v1/proctored_exam/attempt/grouped/course_id/',
+  });
+  const groupedCollection = edx.instructor_dashboard.proctoring.ProctoredExamAttemptGroupedCollection;
+  this.edx.instructor_dashboard.proctoring.ProctoredExamAttemptGroupedCollection = groupedCollection;
 }).call(this, Backbone);
diff --git a/edx_proctoring/static/proctoring/js/collections/proctored_exam_collection.js b/edx_proctoring/static/proctoring/js/collections/proctored_exam_collection.js
@@ -1,16 +1,16 @@
 /* globals ProctoredExamModel:false */
 edx = edx || {};
-(function(Backbone) {
-    'use strict';
+(Backbone => {
+  'use strict';
 
-    edx.instructor_dashboard = edx.instructor_dashboard || {};
-    edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
+  edx.instructor_dashboard = edx.instructor_dashboard || {};
+  edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
 
-    edx.instructor_dashboard.proctoring.ProctoredExamCollection = Backbone.Collection.extend({
-        /* model for a collection of ProctoredExamAllowance */
-        model: ProctoredExamModel,
-        url: '/api/edx_proctoring/v1/proctored_exam/exam/course_id/'
-    });
-    this.edx.instructor_dashboard.proctoring.ProctoredExamCollection =
-      edx.instructor_dashboard.proctoring.ProctoredExamCollection;
+  edx.instructor_dashboard.proctoring.ProctoredExamCollection = Backbone.Collection.extend({
+    /* model for a collection of ProctoredExamAllowance */
+    model: ProctoredExamModel,
+    url: '/api/edx_proctoring/v1/proctored_exam/exam/course_id/',
+  });
+  const proctoredExamCollection = edx.instructor_dashboard.proctoring.ProctoredExamCollection;
+  this.edx.instructor_dashboard.proctoring.ProctoredExamCollection = proctoredExamCollection;
 }).call(this, Backbone);
diff --git a/edx_proctoring/static/proctoring/js/collections/proctored_exam_onboarding_collection.js b/edx_proctoring/static/proctoring/js/collections/proctored_exam_onboarding_collection.js
@@ -1,13 +1,13 @@
 edx = edx || {};
-(function(Backbone) {
-    'use strict';
+(Backbone => {
+  'use strict';
 
-    edx.instructor_dashboard = edx.instructor_dashboard || {};
-    edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
+  edx.instructor_dashboard = edx.instructor_dashboard || {};
+  edx.instructor_dashboard.proctoring = edx.instructor_dashboard.proctoring || {};
 
-    edx.instructor_dashboard.proctoring.ProctoredExamOnboardingCollection = Backbone.Collection.extend({
-        url: '/api/edx_proctoring/v1/user_onboarding/status/course_id/'
-    });
-    this.edx.instructor_dashboard.proctoring.ProctoredExamOnboardingCollection =
-      edx.instructor_dashboard.proctoring.ProctoredExamOnboardingCollection;
+  edx.instructor_dashboard.proctoring.ProctoredExamOnboardingCollection = Backbone.Collection.extend({
+    url: '/api/edx_proctoring/v1/user_onboarding/status/course_id/',
+  });
+  const proctoredExamOnboardingCollection = edx.instructor_dashboard.proctoring.ProctoredExamOnboardingCollection;
+  this.edx.instructor_dashboard.proctoring.ProctoredExamOnboardingCollection = proctoredExamOnboardingCollection;
 }).call(this, Backbone);
diff --git a/edx_proctoring/static/proctoring/js/dropdown.js b/edx_proctoring/static/proctoring/js/dropdown.js
@@ -3,95 +3,95 @@
 // It has been slightly modified to fit the needs of the edx-proctoring library.
 edx = edx || {};
 
-(function($) {
-    'use strict';
+($ => {
+  'use strict';
 
-    var keyCodes = {
-        TAB: 9,
-        ESCAPE: 27,
-        SPACE: 32,
-        ARROWUP: 38,
-        ARROWDOWN: 40
-    };
-
-    edx.dashboard = edx.dashboard || {};
-    edx.dashboard.dropdown = {};
+  const keyCodes = {
+    TAB: 9,
+    ESCAPE: 27,
+    SPACE: 32,
+    ARROWUP: 38,
+    ARROWDOWN: 40,
+  };
 
-    edx.dashboard.dropdown.toggleExamAttemptActionDropdownMenu = function(event) {
-        var $target = $(event.currentTarget),
-            dashboardIndex = $target.data().dashboardIndex,
-            $dropdown = $($target.data('dropdownSelector') || '#actions-dropdown-' + dashboardIndex),
-            $dropdownButton = $($target.data('dropdownButtonSelector') || '#actions-dropdown-link-' + dashboardIndex),
-            ariaExpandedState = ($dropdownButton.attr('aria-expanded') === 'true'),
-            menuItems = $dropdown.find('a');
+  edx.dashboard = edx.dashboard || {};
+  edx.dashboard.dropdown = {};
 
-        var catchKeyPress = function(object, keyPressEvent) {
-            // get currently focused item
-            var $focusedItem = $(':focus');
+  edx.dashboard.dropdown.toggleExamAttemptActionDropdownMenu = event => {
+    const $target = $(event.currentTarget);
+    const { dashboardIndex } = $target.data();
+    const $dropdown = $($target.data('dropdownSelector') || `#actions-dropdown-${dashboardIndex}`);
+    const $dropdownButton = $($target.data('dropdownButtonSelector') || `#actions-dropdown-link-${dashboardIndex}`);
+    const ariaExpandedState = ($dropdownButton.attr('aria-expanded') === 'true');
+    const menuItems = $dropdown.find('a');
 
-            // get the index of the currently focused item
-            var focusedItemIndex = menuItems.index($focusedItem);
+    const catchKeyPress = (object, keyPressEvent) => {
+      // get currently focused item
+      const $focusedItem = $(':focus');
 
-            // var to store next focused item index
-            var itemToFocusIndex;
+      // get the index of the currently focused item
+      const focusedItemIndex = menuItems.index($focusedItem);
 
-            // if space or escape key pressed
-            if (keyPressEvent.which === keyCodes.SPACE || keyPressEvent.which === keyCodes.ESCAPE) {
-                $dropdownButton.click();
-                keyPressEvent.preventDefault();
-            } else if (keyPressEvent.which === keyCodes.AWRROWUP ||
-                (keyPressEvent.which === keyCodes.TAB && keyPressEvent.shiftKey)) {
-                // if up arrow key pressed or shift+tab
-                // if first item go to last
-                if (focusedItemIndex === 0 || focusedItemIndex === -1) {
-                    menuItems.last().focus();
-                } else {
-                    itemToFocusIndex = focusedItemIndex - 1;
-                    menuItems.get(itemToFocusIndex).focus();
-                }
-                keyPressEvent.preventDefault();
-            } else if (keyPressEvent.which === keyCodes.ARROWDOWN || keyPressEvent.which === keyCodes.TAB) {
-                // if down arrow key pressed or tab key
-                // if last item go to first
-                if (focusedItemIndex === menuItems.length - 1 || focusedItemIndex === -1) {
-                    menuItems.first().focus();
-                } else {
-                    itemToFocusIndex = focusedItemIndex + 1;
-                    menuItems.get(itemToFocusIndex).focus();
-                }
-                keyPressEvent.preventDefault();
-            }
-        };
+      // var to store next focused item index
+      let itemToFocusIndex;
 
-        // Toggle the visibility control for the selected element and set the focus
-        $dropdown.toggleClass('is-visible');
-        if ($dropdown.hasClass('is-visible')) {
-            $dropdown.attr('tabindex', -1);
-            $dropdown.focus();
+      // if space or escape key pressed
+      if (keyPressEvent.which === keyCodes.SPACE || keyPressEvent.which === keyCodes.ESCAPE) {
+        $dropdownButton.click();
+        keyPressEvent.preventDefault();
+      } else if (keyPressEvent.which === keyCodes.AWRROWUP
+                || (keyPressEvent.which === keyCodes.TAB && keyPressEvent.shiftKey)) {
+        // if up arrow key pressed or shift+tab
+        // if first item go to last
+        if (focusedItemIndex === 0 || focusedItemIndex === -1) {
+          menuItems.last().focus();
         } else {
-            $dropdown.removeAttr('tabindex');
-            $dropdownButton.focus();
+          itemToFocusIndex = focusedItemIndex - 1;
+          menuItems.get(itemToFocusIndex).focus();
         }
-
-        // Inform the ARIA framework that the dropdown has been expanded
-        $dropdownButton.attr('aria-expanded', !ariaExpandedState);
-
-        // catch keypresses when inside dropdownMenu (we want to catch spacebar;
-        // escape; up arrow or shift+tab; and down arrow or tab)
-        $dropdown.on('keydown', function(e) {
-            catchKeyPress($(this), e);
-        });
-        event.stopPropagation();
+        keyPressEvent.preventDefault();
+      } else if (keyPressEvent.which === keyCodes.ARROWDOWN || keyPressEvent.which === keyCodes.TAB) {
+        // if down arrow key pressed or tab key
+        // if last item go to first
+        if (focusedItemIndex === menuItems.length - 1 || focusedItemIndex === -1) {
+          menuItems.first().focus();
+        } else {
+          itemToFocusIndex = focusedItemIndex + 1;
+          menuItems.get(itemToFocusIndex).focus();
+        }
+        keyPressEvent.preventDefault();
+      }
     };
 
-    edx.dashboard.dropdown.bindToggleButtons = function(selector) {
-        $(selector).bind(
-            'click',
-            edx.dashboard.dropdown.toggleExamAttemptActionDropdownMenu
-        );
-    };
+    // Toggle the visibility control for the selected element and set the focus
+    $dropdown.toggleClass('is-visible');
+    if ($dropdown.hasClass('is-visible')) {
+      $dropdown.attr('tabindex', -1);
+      $dropdown.focus();
+    } else {
+      $dropdown.removeAttr('tabindex');
+      $dropdownButton.focus();
+    }
+
+    // Inform the ARIA framework that the dropdown has been expanded
+    $dropdownButton.attr('aria-expanded', !ariaExpandedState);
 
-    $(document).ready(function() {
-        edx.dashboard.dropdown.bindToggleButtons('.action-more');
+    // catch keypresses when inside dropdownMenu (we want to catch spacebar;
+    // escape; up arrow or shift+tab; and down arrow or tab)
+    $dropdown.on('keydown', e => {
+      catchKeyPress($(this), e);
     });
-}(jQuery));
+    event.stopPropagation();
+  };
+
+  edx.dashboard.dropdown.bindToggleButtons = selector => {
+    $(selector).bind(
+      'click',
+      edx.dashboard.dropdown.toggleExamAttemptActionDropdownMenu,
+    );
+  };
+
+  $(document).ready(() => {
+    edx.dashboard.dropdown.bindToggleButtons('.action-more');
+  });
+})(jQuery);