Updates XBlock renders its own template. Adds expand and collapse JS + jasmine tests.

ECOM-2809

lms/static/js/courseware/toggle_element_visibility.js

@@ -0,0 +1,42 @@
+;(function (define) {
+    'use strict';
+
+    define(["jquery"],
+        function ($) {
+
+            return function () {
+                // define variables for code legibility
+                var toggleActionElements = $('.toggle-visibility-button');
+
+                var updateToggleActionText = function (targetElement, actionElement) {
+                    var show_text = actionElement.data('show');
+                    var hide_text = actionElement.data('hide');
+
+                    if (targetElement.is(":visible")) {
+                        if (hide_text) {
+                            actionElement.html(actionElement.data('hide'));
+                        } else {
+                            actionElement.hide();
+                        }
+                    } else {
+                        if (show_text) {
+                            actionElement.html(actionElement.data('show'));
+                        }
+                    }
+                };
+
+                $.each(toggleActionElements, function (i, elem) {
+                    var toggleActionElement = $(elem);
+                    var toggleTargetElement = toggleActionElement.siblings('.toggle-visibility-element');
+
+                    updateToggleActionText(toggleTargetElement, toggleActionElement);
+
+                    toggleActionElement.on('click', function (event) {
+                        event.preventDefault();
+                        toggleTargetElement.toggleClass('hidden');
+                        updateToggleActionText(toggleTargetElement, toggleActionElement);
+                    });
+                });
+            };
+        });
+})(define || RequireJS.define);

lms/static/js/fixtures/courseware/course_updates.html

@@ -0,0 +1,45 @@
+<div class="recent-updates">
+    <article>
+        <h2 class="date">December 1, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Hide</a>
+        <div class="toggle-visibility-element article-content ">
+            <h1>Assignment 1</h1>
+            <p>Please submit your first assignment before due date.</p>
+        </div>
+    </article>
+    <article>
+        <h2 class="date">December 1, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content">
+            <h1>Quiz 1</h1>
+            <p>You have a quiz due on coming friday.</p>
+        </div>
+    </article>
+    <article>
+        <h2 class="date">November 26, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content hidden">
+            <h1>Assignment update</h1>
+            <p>Please submit your first assignment before due date.</p>
+        </div>
+    </article>
+</div>
+<div class="old-updates hidden toggle-visibility-element">
+    <article>
+        <h2 class="date">November 20, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content hidden"><h1>Orientation</h1>
+            <p>Orientation will held on monday</p>
+        </div>
+    </article>
+    <article>
+        <h2 class="date">November 19, 2015</h2>
+        <a class="toggle-visibility-button" data-hide="Hide" data-show="Show">Show</a>
+        <div class="toggle-visibility-element article-content hidden"><h1>Course starting</h1>
+            <p>Starting info about course.</p>
+        </div>
+    </article>
+</div>
+<a class="toggle-visibility-button show-older-updates" data-hide="" data-show="Show Earlier Course Updates">
+    Show Earlier Course Updates
+</a>

lms/static/js/spec/courseware/updates_visibility.js

@@ -0,0 +1,36 @@
+define(['jquery', 'js/courseware/toggle_element_visibility'],
+    function ($, ToggleElementVisibility) {
+        'use strict';
+
+        describe('show/hide with mouse click', function () {
+
+            beforeEach(function() {
+                loadFixtures('js/fixtures/courseware/course_updates.html');
+                /*jshint newcap: false */
+                ToggleElementVisibility();
+                /*jshint newcap: true */
+            });
+
+            it('ensures update will hide on hide button click', function () {
+                var $shownUpdate = $('.toggle-visibility-element:not(.hidden)').first();
+                $shownUpdate.siblings('.toggle-visibility-button').trigger('click');
+                expect($shownUpdate).toHaveClass('hidden');
+            });
+
+            it('ensures update will show on show button click', function () {
+                var $hiddenUpdate = $('.toggle-visibility-element.hidden').first();
+                $hiddenUpdate.siblings('.toggle-visibility-button').trigger('click');
+                expect($hiddenUpdate).not.toHaveClass('hidden');
+            });
+
+            it('ensures old updates will show on button click', function () {
+                // on page load old updates will be hidden
+                var $oldUpdates = $('.toggle-visibility-element.old-updates');
+                expect($oldUpdates).toHaveClass('hidden');
+
+                // on click on show earlier update button old updates will be shown
+                $('.toggle-visibility-button.show-older-updates').trigger('click');
+                expect($oldUpdates).not.toHaveClass('hidden');
+            });
+        });
+    });

lms/static/js/spec/main.js

@@ -708,6 +708,7 @@
         'lms/include/js/spec/edxnotes/collections/notes_spec.js',
         'lms/include/js/spec/search/search_spec.js',
         'lms/include/js/spec/navigation_spec.js',
+        'lms/include/js/spec/courseware/updates_visibility.js',
         'lms/include/js/spec/discovery/collections/filters_spec.js',
         'lms/include/js/spec/discovery/models/course_card_spec.js',
         'lms/include/js/spec/discovery/models/course_directory_spec.js',