From fba3cf27ecab6b5a4121179d44450ee0922bac60 Mon Sep 17 00:00:00 2001 From: Jeremy Neander Date: Thu, 19 Mar 2020 12:27:18 -0500 Subject: [PATCH] load set default grade dialog asynchronously This chunks out roughly 50 KB of JavaScript. closes TALLY-740 flag = none test plan: * Visit Gradebook * Click the "Set Default Grade" action for an assignment * Verify the "Set Default Grade" dialog appears * Verify setting default grades works * Verify the assignment options menu button receives focus when the dialog closes Change-Id: I9236498ef1c2450dcab6d74a4525a00238cf1928 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/230553 Tested-by: Service Cloud Jenkins Reviewed-by: Adrian Packel Reviewed-by: Keith Garner QA-Review: Robin Kuss Product-Review: Spencer Olson --- .../default_gradebook/AsyncComponents.js | 5 ++++ .../shared/SetDefaultGradeDialogManager.js | 6 ++-- .../SetDefaultGradeDialogManagerSpec.js | 28 +++++++++++-------- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/app/jsx/gradebook/default_gradebook/AsyncComponents.js b/app/jsx/gradebook/default_gradebook/AsyncComponents.js index c916f4f250c..c084452a850 100644 --- a/app/jsx/gradebook/default_gradebook/AsyncComponents.js +++ b/app/jsx/gradebook/default_gradebook/AsyncComponents.js @@ -35,11 +35,16 @@ async function loadMessageStudentsWhoDialog() { return (await import('../shared/MessageStudentsWhoDialog')).default } +async function loadSetDefaultGradeDialog() { + return (await import('compiled/shared/SetDefaultGradeDialog')).default +} + const AsyncComponents = { loadCurveGradesDialog, loadGradeDetailTray, loadGradebookSettingsModal, loadMessageStudentsWhoDialog, + loadSetDefaultGradeDialog, async renderGradeDetailTray(props, $container) { const GradeDetailTray = await loadGradeDetailTray() diff --git a/app/jsx/gradebook/shared/SetDefaultGradeDialogManager.js b/app/jsx/gradebook/shared/SetDefaultGradeDialogManager.js index c236bb786d5..08c4a53d0e7 100644 --- a/app/jsx/gradebook/shared/SetDefaultGradeDialogManager.js +++ b/app/jsx/gradebook/shared/SetDefaultGradeDialogManager.js @@ -18,9 +18,10 @@ import $ from 'jquery' import I18n from 'i18n!gradebooksharedSetDefaultGradeDialogManager' -import SetDefaultGradeDialog from 'compiled/shared/SetDefaultGradeDialog' import 'compiled/jquery.rails_flash_notifications' +import AsyncComponents from '../default_gradebook/AsyncComponents' + class SetDefaultGradeDialogManager { constructor( assignment, @@ -49,8 +50,9 @@ class SetDefaultGradeDialogManager { } } - showDialog(cb) { + async showDialog(cb) { if (this.isAdmin || !this.assignment.inClosedGradingPeriod) { + const SetDefaultGradeDialog = await AsyncComponents.loadSetDefaultGradeDialog() const dialog = new SetDefaultGradeDialog(this.getSetDefaultGradeDialogOptions()) dialog.show(cb) diff --git a/spec/javascripts/jsx/gradebook/shared/SetDefaultGradeDialogManagerSpec.js b/spec/javascripts/jsx/gradebook/shared/SetDefaultGradeDialogManagerSpec.js index 15e0832c511..6ca17bbb335 100644 --- a/spec/javascripts/jsx/gradebook/shared/SetDefaultGradeDialogManagerSpec.js +++ b/spec/javascripts/jsx/gradebook/shared/SetDefaultGradeDialogManagerSpec.js @@ -20,6 +20,7 @@ import $ from 'jquery' import SetDefaultGradeDialog from 'compiled/shared/SetDefaultGradeDialog' import SetDefaultGradeDialogManager from 'jsx/gradebook/shared/SetDefaultGradeDialogManager' +import AsyncComponents from '../../../../../app/jsx/gradebook/default_gradebook/AsyncComponents' function createAssignmentProp() { return { @@ -114,48 +115,51 @@ QUnit.module('SetDefaultGradeDialogManager#showDialog', { setup() { this.flashErrorStub = sandbox.stub($, 'flashError') + sandbox + .stub(AsyncComponents, 'loadSetDefaultGradeDialog') + .returns(Promise.resolve(SetDefaultGradeDialog)) this.showDialogStub = sandbox.stub(SetDefaultGradeDialog.prototype, 'show') } }) -test('shows the SetDefaultGradeDialog when assignment is not in a closed grading period', function() { +test('shows the SetDefaultGradeDialog when assignment is not in a closed grading period', async function() { const manager = this.setupDialogManager({inClosedGradingPeriod: false, isAdmin: false}) - manager.showDialog() + await manager.showDialog() equal(this.showDialogStub.callCount, 1) }) -test('does not show an error when assignment is not in a closed grading period', function() { +test('does not show an error when assignment is not in a closed grading period', async function() { const manager = this.setupDialogManager({inClosedGradingPeriod: false, isAdmin: false}) - manager.showDialog() + await manager.showDialog() equal(this.flashErrorStub.callCount, 0) }) -test('shows the SetDefaultGradeDialog when assignment is in a closed grading period but isAdmin is true', function() { +test('shows the SetDefaultGradeDialog when assignment is in a closed grading period but isAdmin is true', async function() { const manager = this.setupDialogManager({inClosedGradingPeriod: true, isAdmin: true}) - manager.showDialog() + await manager.showDialog() equal(this.showDialogStub.callCount, 1) }) -test('does not show an error when assignment is in a closed grading period but isAdmin is true', function() { +test('does not show an error when assignment is in a closed grading period but isAdmin is true', async function() { const manager = this.setupDialogManager({inClosedGradingPeriod: true, isAdmin: true}) - manager.showDialog() + await manager.showDialog() equal(this.flashErrorStub.callCount, 0) }) -test('shows an error message when assignment is in a closed grading period and isAdmin is false', function() { +test('shows an error message when assignment is in a closed grading period and isAdmin is false', async function() { const manager = this.setupDialogManager({inClosedGradingPeriod: true, isAdmin: false}) - manager.showDialog() + await manager.showDialog() equal(this.flashErrorStub.callCount, 1) }) -test('does not show the SetDefaultGradeDialog when assignment is in a closed grading period and isAdmin is false', function() { +test('does not show the SetDefaultGradeDialog when assignment is in a closed grading period and isAdmin is false', async function() { const manager = this.setupDialogManager({inClosedGradingPeriod: true, isAdmin: false}) - manager.showDialog() + await manager.showDialog() equal(this.showDialogStub.callCount, 0) })