Convert learner_dashboard to es2015
This commit is contained in:
Michael Terry
committed by
Michael Terry
Michael Terry
parent
acf7de7c02
commit
c9318c3e51
@@ -1,96 +0,0 @@
|
||||
(function(define) {
|
||||
'use strict';
|
||||
|
||||
define(['backbone',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'gettext',
|
||||
'text!../../../templates/components/progress_circle_view.underscore',
|
||||
'text!../../../templates/components/progress_circle_segment.underscore'
|
||||
],
|
||||
function(
|
||||
Backbone,
|
||||
$,
|
||||
_,
|
||||
gettext,
|
||||
progressViewTpl,
|
||||
progressSegmentTpl
|
||||
) {
|
||||
return Backbone.View.extend({
|
||||
x: 22,
|
||||
y: 22,
|
||||
radius: 16,
|
||||
degrees: 180,
|
||||
strokeWidth: 1.2,
|
||||
|
||||
viewTpl: _.template(progressViewTpl),
|
||||
segmentTpl: _.template(progressSegmentTpl),
|
||||
|
||||
initialize: function() {
|
||||
var progress = this.model.get('progress');
|
||||
|
||||
this.model.set({
|
||||
totalCourses: progress.completed + progress.in_progress + progress.not_started
|
||||
});
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var data = $.extend({}, this.model.toJSON(), {
|
||||
circleSegments: this.getProgressSegments(),
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
radius: this.radius,
|
||||
strokeWidth: this.strokeWidth
|
||||
});
|
||||
|
||||
this.$el.html(this.viewTpl(data));
|
||||
},
|
||||
|
||||
getDegreeIncrement: function(total) {
|
||||
return 360 / total;
|
||||
},
|
||||
|
||||
getOffset: function(total) {
|
||||
return 100 - ((1 / total) * 100);
|
||||
},
|
||||
|
||||
getProgressSegments: function() {
|
||||
var progressHTML = [],
|
||||
total = this.model.get('totalCourses'),
|
||||
segmentDash = 2 * Math.PI * this.radius,
|
||||
degreeInc = this.getDegreeIncrement(total),
|
||||
data = {
|
||||
// Remove strokeWidth to show a gap between the segments
|
||||
dashArray: segmentDash - this.strokeWidth,
|
||||
degrees: this.degrees,
|
||||
offset: this.getOffset(total),
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
radius: this.radius,
|
||||
strokeWidth: this.strokeWidth
|
||||
},
|
||||
i,
|
||||
segmentData;
|
||||
|
||||
for (i = 0; i < total; i++) {
|
||||
segmentData = $.extend({}, data, {
|
||||
classList: (i >= this.model.get('progress').completed) ? 'incomplete' : 'complete',
|
||||
degrees: data.degrees + (i * degreeInc)
|
||||
});
|
||||
|
||||
// Want the incomplete segments to have no gaps
|
||||
if (segmentData.classList === 'incomplete' && (i + 1) < total) {
|
||||
segmentData.dashArray = segmentDash;
|
||||
}
|
||||
|
||||
progressHTML.push(this.segmentTpl(segmentData));
|
||||
}
|
||||
|
||||
return progressHTML.join('');
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}).call(this, define || RequireJS.define);
|
||||
@@ -235,12 +235,17 @@ function setDefaults(files) {
|
||||
function getBaseConfig(config, useRequireJs) {
|
||||
var getFrameworkFiles = function() {
|
||||
var files = [
|
||||
'node_modules/jquery/dist/jquery.js',
|
||||
'common/static/common/js/vendor/jquery.js',
|
||||
'node_modules/jasmine-core/lib/jasmine-core/jasmine.js',
|
||||
'common/static/common/js/jasmine_stack_trace.js',
|
||||
'node_modules/karma-jasmine/lib/boot.js',
|
||||
'node_modules/karma-jasmine/lib/adapter.js',
|
||||
'node_modules/jasmine-jquery/lib/jasmine-jquery.js'
|
||||
'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
|
||||
'node_modules/popper.js/dist/umd/popper.js',
|
||||
'node_modules/bootstrap/dist/js/bootstrap.js',
|
||||
'node_modules/underscore/underscore.js',
|
||||
'node_modules/backbone/backbone.js',
|
||||
'common/static/js/test/i18n.js',
|
||||
];
|
||||
|
||||
if (useRequireJs) {
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
define([
|
||||
'backbone',
|
||||
'jquery',
|
||||
'edx-ui-toolkit/js/utils/spec-helpers/spec-helpers',
|
||||
'common/js/components/views/progress_circle_view'
|
||||
], function(Backbone, $, SpecHelpers, ProgressCircleView) {
|
||||
'use strict';
|
||||
|
||||
describe('Progress Circle View', function() {
|
||||
var view = null,
|
||||
context = {
|
||||
title: 'XSeries Progress',
|
||||
label: 'Earned Certificates',
|
||||
progress: {
|
||||
completed: 2,
|
||||
in_progress: 1,
|
||||
not_started: 3
|
||||
}
|
||||
},
|
||||
testCircle,
|
||||
testText,
|
||||
initView,
|
||||
getProgress,
|
||||
testProgress;
|
||||
|
||||
testCircle = function(progress) {
|
||||
var $circle = view.$('.progress-circle');
|
||||
|
||||
expect($circle.find('.complete').length).toEqual(progress.completed);
|
||||
expect($circle.find('.incomplete').length).toEqual(progress.in_progress + progress.not_started);
|
||||
};
|
||||
|
||||
testText = function(progress) {
|
||||
var $numbers = view.$('.numbers'),
|
||||
total = progress.completed + progress.in_progress + progress.not_started;
|
||||
|
||||
expect(view.$('.progress-heading').html()).toEqual('XSeries Progress');
|
||||
expect(parseInt($numbers.find('.complete').html(), 10)).toEqual(progress.completed);
|
||||
expect(parseInt($numbers.find('.total').html(), 10)).toEqual(total);
|
||||
};
|
||||
|
||||
getProgress = function(x, y, z) {
|
||||
return {
|
||||
completed: x,
|
||||
in_progress: y,
|
||||
not_started: z
|
||||
};
|
||||
};
|
||||
|
||||
testProgress = function(x, y, z) {
|
||||
var progress = getProgress(x, y, z);
|
||||
|
||||
view = initView(progress);
|
||||
view.render();
|
||||
|
||||
testCircle(progress);
|
||||
testText(progress);
|
||||
};
|
||||
|
||||
initView = function(progress) {
|
||||
var data = $.extend({}, context, {
|
||||
progress: progress
|
||||
});
|
||||
|
||||
return new ProgressCircleView({
|
||||
el: '.js-program-progress',
|
||||
model: new Backbone.Model(data)
|
||||
});
|
||||
};
|
||||
|
||||
beforeEach(function() {
|
||||
setFixtures('<div class="js-program-progress"></div>');
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
view.remove();
|
||||
});
|
||||
|
||||
it('should exist', function() {
|
||||
var progress = getProgress(2, 1, 3);
|
||||
|
||||
view = initView(progress);
|
||||
view.render();
|
||||
expect(view).toBeDefined();
|
||||
});
|
||||
|
||||
it('should render the progress circle based on the passed in model', function() {
|
||||
var progress = getProgress(2, 1, 3);
|
||||
|
||||
view = initView(progress);
|
||||
view.render();
|
||||
testCircle(progress);
|
||||
});
|
||||
|
||||
it('should render the progress text based on the passed in model', function() {
|
||||
var progress = getProgress(2, 1, 3);
|
||||
|
||||
view = initView(progress);
|
||||
view.render();
|
||||
testText(progress);
|
||||
});
|
||||
|
||||
SpecHelpers.withData({
|
||||
'should render the progress text with only completed courses': [5, 0, 0],
|
||||
'should render the progress text with only in progress courses': [0, 4, 0],
|
||||
'should render the progress circle with only not started courses': [0, 0, 5],
|
||||
'should render the progress text with no completed courses': [0, 2, 3],
|
||||
'should render the progress text with no in progress courses': [2, 0, 7],
|
||||
'should render the progress text with no not started courses': [2, 4, 0]
|
||||
}, testProgress);
|
||||
});
|
||||
});
|
||||
@@ -165,7 +165,6 @@
|
||||
'common/js/spec/components/paginated_view_spec.js',
|
||||
'common/js/spec/components/paging_header_spec.js',
|
||||
'common/js/spec/components/paging_footer_spec.js',
|
||||
'common/js/spec/components/progress_circle_view_spec.js',
|
||||
'common/js/spec/components/search_field_spec.js',
|
||||
'common/js/spec/components/view_utils_spec.js',
|
||||
'common/js/spec/utils/edx.utils.validate_spec.js'
|
||||
|
||||
Reference in New Issue
Block a user