Skip to content
This repository has been archived by the owner on Jan 28, 2020. It is now read-only.

Commit

Permalink
Merge 1aca491 into 5cd4368
Browse files Browse the repository at this point in the history
  • Loading branch information
@amir-qayyum-khan
amir-qayyum-khan committed Nov 19, 2015
2 parents 5cd4368 + 1aca491 commit f4d6459
Show file tree
Hide file tree
Showing 6 changed files with 251 additions and 27 deletions.
11 changes: 8 additions & 3 deletions ui/jstests/learningresources/test-learning-resource.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,14 @@ define(
function (assert) {
var div = document.createElement("div");
assert.ok($(div).html().length === 0);
LearningResources.loader("repo", "1", function () {
}, function () {
}, div);
var options = {
"repoSlug": "repo",
"learningResourceId": "1",
"refreshFromAPI": this.refreshFromAPI,
"markDirty": function() {},
"closeLearningResourcePanel": function() {}
};
LearningResources.loader(options, div);
assert.ok($(div).html().length > 0);
}
);
Expand Down
6 changes: 6 additions & 0 deletions ui/jstests/learningresources/test_learning_resource_panel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ define(["QUnit", "react", "test_utils", "jquery", "lodash",

React.addons.TestUtils.renderIntoDocument(<LearningResourcePanel
repoSlug="repo"
markDirty={function() {}}
closeLearningResourcePanel={closeLearningResourcePanel}
learningResourceId="1"
ref={afterMount}/>);
Expand Down Expand Up @@ -300,6 +301,7 @@ define(["QUnit", "react", "test_utils", "jquery", "lodash",
React.addons.TestUtils.renderIntoDocument(<LearningResourcePanel
repoSlug="repo"
learningResourceId="1"
markDirty={function() {}}
closeLearningResourcePanel={closeLearningResourcePanel}
refreshFromAPI={refreshFromAPI}
ref={afterMount}/>);
Expand Down Expand Up @@ -353,6 +355,7 @@ define(["QUnit", "react", "test_utils", "jquery", "lodash",

React.addons.TestUtils.renderIntoDocument(<LearningResourcePanel
repoSlug="repo"
markDirty={function() {}}
closeLearningResourcePanel={closeLearningResourcePanel}
learningResourceId="1"
refreshFromAPI={refreshFromAPI}
Expand Down Expand Up @@ -386,6 +389,7 @@ define(["QUnit", "react", "test_utils", "jquery", "lodash",
};
React.addons.TestUtils.renderIntoDocument(<LearningResourcePanel
repoSlug="repo"
markDirty={function() {}}
closeLearningResourcePanel={closeLearningResourcePanel}
learningResourceId="1"
ref={afterMount}/>);
Expand Down Expand Up @@ -418,6 +422,7 @@ define(["QUnit", "react", "test_utils", "jquery", "lodash",
};
React.addons.TestUtils.renderIntoDocument(<LearningResourcePanel
repoSlug="repo"
markDirty={function() {}}
closeLearningResourcePanel={closeLearningResourcePanel}
learningResourceId="1"
ref={afterMount}/>);
Expand Down Expand Up @@ -482,6 +487,7 @@ define(["QUnit", "react", "test_utils", "jquery", "lodash",
<LearningResourcePanel
repoSlug="repo"
closeLearningResourcePanel={function() {}}
markDirty={function() {}}
learningResourceId="1"
ref={afterMount}/>
);
Expand Down
141 changes: 141 additions & 0 deletions ui/jstests/listing/test_listing.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -971,5 +971,146 @@ define(['QUnit', 'jquery', 'react', 'test_utils', 'utils', 'listing'],
);

});

QUnit.test('Open and close learning resource panel', function(assert) {
var done = assert.async();
var learningResourceResponse = {
"id": 1,
"learning_resource_type": "course",
"static_assets": [],
"title": "title",
"materialized_path": "/course",
"content_xml": "<course />",
"url_path": "",
"parent": null,
"copyright": "",
"xa_nr_views": 0,
"xa_nr_attempts": 0,
"xa_avg_grade": 0.0,
"xa_histogram_grade": 0.0,
"terms": ["required"]
};
var termResponseEasy = {
"id": 1,
"slug": "easy",
"label": "easy",
"weight": 1
};
var termResponseHard = {
"id": 2,
"slug": "hard",
"label": "hard",
"weight": 1
};
var preReqTermsResponseReq = {
"id": 3,
"slug": "required",
"label": "required",
"weight": 1
};
var preReqTermsResponseNotReq = {
"id": 4,
"slug": "notrequired",
"label": "notrequired",
"weight": 1
};
var vocabularyResponsePrereq = {
"id": 1,
"slug": "prerequisite",
"name": "prerequisite",
"description": "Prerequisite",
"vocabulary_type": "m",
"required": false,
"weight": 2147483647,
"terms": [preReqTermsResponseReq, preReqTermsResponseNotReq],
"multi_terms": true
};
var vocabularyResponseDifficulty = {
"id": 2,
"slug": "difficulty",
"name": "difficulty",
"description": "Difficulty",
"vocabulary_type": "f",
"required": false,
"weight": 2147483647,
"terms": [termResponseEasy, termResponseHard],
"multi_terms": true
};
var vocabulariesResponseFirst = {
"count": 1,
"next": "/api/v1/repositories/test/" +
"vocabularies/?type_name=course&page=2",
"previous": null,
"results": [vocabularyResponseDifficulty]
};
var vocabulariesResponseSecond = {
"count": 1,
"next": null,
"previous": "/api/v1/repositories/test/" +
"vocabularies/?type_name=course",
"results": [vocabularyResponsePrereq]
};

TestUtils.initMockjax({
url: '/api/v1/repositories/test/learning_resources/' +
'1/?remove_content_xml=true',
type: 'GET',
responseText: learningResourceResponse
});
TestUtils.initMockjax({
url: '/api/v1/repositories/test/vocabularies/?type_name=course',
type: 'GET',
responseText: vocabulariesResponseFirst
});
TestUtils.initMockjax({
url: '/api/v1/repositories/test/vocabularies/' +
'?type_name=course&page=2',
type: 'GET',
responseText: vocabulariesResponseSecond
});

var afterMount = function(component) {
waitForAjax(1, function() {
assert.notOk($('.cd-panel').hasClass("is-visible"));
component.openResourcePanel(1);
waitForAjax(3, function() {
assert.equal(component.state.currentResourceId , 1);
assert.ok($('.cd-panel').hasClass("is-visible"));
component.setState({
isLearningResourcePanelDirty: true
}, function () {
component.closeLearningResourcePanel();
assert.ok($('.cd-panel').hasClass("is-visible"),
"LR Panel should not close because it is marked dirty");
component.setState({
isLearningResourcePanelDirty: false
}, function() {
component.closeLearningResourcePanel();
assert.notOk($('.cd-panel').hasClass("is-visible"),
"LR Panel should close");
done();
});
});
});
});
};

var options = {
allExports: listingOptions.allExports,
sortingOptions: listingOptions.sortingOptions,
imageDir: listingOptions.imageDir,
pageSize: 25,
repoSlug: listingOptions.repoSlug,
loggedInUsername: listingOptions.loggedInUsername,
updateQueryString: updateQueryString,
getQueryString: getQueryString,
showConfirmationDialog: function() {},
ref: afterMount
};

React.addons.TestUtils.renderIntoDocument(
React.createElement(Listing.ListingContainer, options)
);
});
}
);
36 changes: 33 additions & 3 deletions ui/static/ui/js/learningresources/learning_resource_panel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',

this.setState({
vocabulariesAndTerms: newVocabulariesAndTerms
}, function () {
if (!_.eq(this.state.vocabulariesAndTerms,
this.state.vocabulariesAndTermsOriginal)) {
this.props.markDirty(true);
}
});
},

Expand Down Expand Up @@ -115,8 +120,7 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',
<button className="btn btn-lg btn-primary"
onClick={this.saveLearningResourcePanel}>
Save
</button>
<button className="btn btn-lg btn-success"
</button> <button className="btn btn-lg btn-success"
onClick={this.saveAndCloseLearningResourcePanel}>
Save and Close
</button>
Expand All @@ -133,7 +137,16 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',
this.setState({
description: event.target.value,
message: undefined
}, function() {
if (!_.eq(this.state.description, this.state.descriptionOriginal)) {
this.props.markDirty(true);
}
});

},
closeLearningResourcePanel: function(event) {
event.preventDefault();
this.props.closeLearningResourcePanel();
},
saveLearningResourcePanel: function (event) {
event.preventDefault();
Expand Down Expand Up @@ -167,6 +180,8 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',
thiz.setState({
message: "Form saved successfully!"
});
// user can close panel
thiz.props.markDirty(false);
if (closePanel) {
thiz.props.closeLearningResourcePanel();
}
Expand All @@ -179,6 +194,15 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',
thiz.setState({loaded: true});
});
},
componentWillUpdate: function(nextProps, nextState) {
// This code is added in case user make changes and then
// undo those changes himself.
if ((_.eq(nextState.description, this.state.descriptionOriginal)) &&
(_.eq(nextState.vocabulariesAndTerms,
this.state.vocabulariesAndTermsOriginal))) {
this.props.markDirty(false);
}
},
componentDidMount: function () {
var thiz = this;

Expand All @@ -204,6 +228,7 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',
message: undefined,
description: description,
previewUrl: previewUrl,
descriptionOriginal: _.cloneDeep(description),
});
return Utils.getVocabulariesAndTerms(
thiz.props.repoSlug, learningResourceType)
Expand All @@ -230,6 +255,9 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',

thiz.setState({
vocabulariesAndTerms: vocabulariesAndTerms,
vocabulariesAndTermsOriginal: _.cloneDeep(
vocabulariesAndTerms
)
});

if (vocabulariesAndTerms.length) {
Expand All @@ -255,7 +283,9 @@ define("learning_resource_panel", ['react', 'jquery', 'lodash',
return {
description: "",
vocabulariesAndTerms: [],
selectedVocabulary: {}
selectedVocabulary: {},
descriptionOriginal: "",
vocabulariesAndTermsOriginal: []
};
}
});
Expand Down
17 changes: 9 additions & 8 deletions ui/static/ui/js/learningresources/learning_resources.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@ define('learning_resources',
'use strict';

return {
loader: function (repoSlug, learningResourceId, refreshFromAPI,
closeLearningResourcePanel, container) {
/** Current list of options are:
repoSlug
learningResourceId
refreshFromAPI
markDirty
closeLearningResourcePanel
*/
loader: function (options, container) {
// Unmount and remount the component to ensure that its state
// is always up to date with the rest of the app.
React.unmountComponentAtNode(container);
React.render(<LearningResourcePanel
repoSlug={repoSlug}
learningResourceId={learningResourceId}
refreshFromAPI={refreshFromAPI}
closeLearningResourcePanel={closeLearningResourcePanel}
/>, container);
React.render(<LearningResourcePanel {...options} />, container);
}
};
});

0 comments on commit f4d6459

Please sign in to comment.