Changed behavior to use AJAX calls for listing page updates

mitodl · Sep 8, 2015 · 9a24833 · 9a24833
1 parent cd4aed0
commit 9a24833
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 108 deletions.
diff --git a/search/tests/test_search_view.py b/search/tests/test_search_view.py
diff --git a/ui/jstests/test-learning-resource.jsx b/ui/jstests/test-learning-resource.jsx
@@ -329,16 +329,23 @@ define(['QUnit', 'jquery', 'react', 'lodash', 'learning_resources',
     function(assert) {
       var done = assert.async();
 
+      var refreshCount = 0;
+      var refreshFromAPI = function() {
+        refreshCount++;
+      };
+
       var afterMount = function(component) {
         // wait for calls to populate form
         waitForAjax(3, function () {
           var $node = $(React.findDOMNode(component));
 
+          assert.equal(refreshCount, 0);
           var saveButton = $node.find("button")[0];
           React.addons.TestUtils.Simulate.click(saveButton);
           waitForAjax(1, function() {
             assert.equal(component.state.message,
               "Form saved successfully!");
+            assert.equal(refreshCount, 1);
             done();
           });
         });
@@ -347,18 +354,27 @@ define(['QUnit', 'jquery', 'react', 'lodash', 'learning_resources',
       React.addons.TestUtils.renderIntoDocument(<LearningResourcePanel
         repoSlug="repo"
         learningResourceId="1"
+        refreshFromAPI={refreshFromAPI}
         ref={afterMount} />);
     }
   );
   QUnit.test(
     'An error should show up on AJAX failure while saving form',
     function(assert) {
       var done = assert.async();
+
+      var refreshCount = 0;
+      var refreshFromAPI = function() {
+        refreshCount++;
+      };
+
       var afterMount = function(component) {
         // wait for calls to populate form
         waitForAjax(3, function () {
           var $node = $(React.findDOMNode(component));
 
+          assert.equal(0, refreshCount);
+
           TestUtils.replaceMockjax({
             url: '/api/v1/repositories/repo/learning_resources/1/',
             type: 'PATCH',
@@ -371,6 +387,8 @@ define(['QUnit', 'jquery', 'react', 'lodash', 'learning_resources',
               component.state.message,
               {error: "Unable to save form"}
             );
+
+            assert.equal(0, refreshCount);
             done();
           });
         });
@@ -379,6 +397,7 @@ define(['QUnit', 'jquery', 'react', 'lodash', 'learning_resources',
       React.addons.TestUtils.renderIntoDocument(<LearningResourcePanel
         repoSlug="repo"
         learningResourceId="1"
+        refreshFromAPI={refreshFromAPI}
         ref={afterMount} />);
     }
   );
@@ -481,7 +500,7 @@ define(['QUnit', 'jquery', 'react', 'lodash', 'learning_resources',
     function(assert) {
       var div = document.createElement("div");
       assert.equal(0, $(div).find("textarea").size());
-      LearningResources.loader("repo", "1", div);
+      LearningResources.loader("repo", "1", function() {}, div);
       assert.equal(2, $(div).find("textarea").size());
     }
   );

diff --git a/ui/jstests/test_listing_resources.jsx b/ui/jstests/test_listing_resources.jsx
@@ -220,12 +220,14 @@ define(['QUnit', 'jquery', 'listing_resources', 'react',
           $buttonGroup.find("button").first().text(),
           sortingOptions.current[1]
         );
-        var actual = _.map($(node).find(".dropdown-menu li a"), function(link) {
-          var id = $(link).attr('href').replace(
-            "/repositories/test/?sortby=", "");
-          return [id, $(link).text()];
-        });
-        assert.deepEqual(actual, sortingOptions.all);
+        var sortText = _.map($(node).find(".dropdown-menu li a"),
+          function(link) {
+            return $(link).text();
+          }
+        );
+        assert.deepEqual(sortText, _.map(sortingOptions.all, function(option) {
+          return option[1];
+        }));
 
         done();
       };

diff --git a/ui/static/ui/js/learning_resources.jsx b/ui/static/ui/js/learning_resources.jsx
@@ -338,6 +338,7 @@ define('learning_resources', [
         thiz.setState({
           message: "Form saved successfully!"
         });
+        thiz.props.refreshFromAPI();
       }).fail(function () {
         thiz.setState({
           message: {error: "Unable to save form"}
@@ -431,12 +432,14 @@ define('learning_resources', [
     TermSelect: TermSelect,
     VocabSelect: VocabSelect,
     LearningResourcePanel: LearningResourcePanel,
-    loader: function (repoSlug, learningResourceId, container) {
+    loader: function (repoSlug, learningResourceId, refreshFromAPI, 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}
+        repoSlug={repoSlug}
+        learningResourceId={learningResourceId}
+        refreshFromAPI={refreshFromAPI}
         />, container);
     }
   };