MDL-63457 block_myoverview: Functionality and test updates
authorPeter <peter@moodle.com>
Wed, 24 Oct 2018 02:23:47 +0000 (10:23 +0800)
committerPeter <peter@moodle.com>
Mon, 29 Oct 2018 00:36:59 +0000 (08:36 +0800)
* Add identifiers for each card in the view
* Update js to hide instead of reload block
* Behat test updates

blocks/myoverview/amd/build/view.min.js
blocks/myoverview/amd/src/view.js
blocks/myoverview/templates/view-cards.mustache
blocks/myoverview/templates/view-list.mustache
blocks/myoverview/templates/view-summary.mustache
blocks/myoverview/tests/behat/block_myoverview_dashboard.feature
blocks/myoverview/tests/behat/block_myoverview_favourite.feature
blocks/myoverview/tests/behat/block_myoverview_hidden.feature

index 53c65f1..4fec7f0 100644 (file)
Binary files a/blocks/myoverview/amd/build/view.min.js and b/blocks/myoverview/amd/build/view.min.js differ
index e799775..91ce046 100644 (file)
@@ -28,7 +28,6 @@ define(
     'core/paged_content_factory',
     'core/custom_interaction_events',
     'core/notification',
-    'core/ajax',
     'core/templates',
 ],
 function(
@@ -37,7 +36,6 @@ function(
     PagedContentFactory,
     CustomEvents,
     Notification,
-    Ajax,
     Templates
 ) {
 
@@ -234,6 +232,19 @@ function(
         }).catch(Notification.exception);
     };
 
+    var toggleHiddenFromCard = function(root, courseId, status) {
+        var element = root.find('[data-course-id="' + courseId + '"][data-region="course-content"]');
+
+        loadedPages.forEach(function(courseList) {
+            courseList.courses.forEach(function(course, index) {
+                if (course.id == courseId) {
+                    courseList.courses[index].hidden = status;
+                    element.css('display', 'none');
+                }
+            });
+        });
+    };
+
     /**
      * Set the courses favourite status and push to repository
      *
@@ -347,7 +358,7 @@ function(
      *
      * @param {Object} root The myoverview block container element.
      */
-    var registerEventListeners = function(root, content) {
+    var registerEventListeners = function(root) {
         CustomEvents.define(root, [
             CustomEvents.events.activate
         ]);
@@ -384,8 +395,7 @@ function(
             };
             Repository.updateUserPreferences(request);
 
-            // Reload the paged content based on the hidden course
-            initializePagedContent(root, content);
+            toggleHiddenFromCard(root, id, true);
             data.originalEvent.preventDefault();
         });
 
@@ -404,8 +414,7 @@ function(
 
             Repository.updateUserPreferences(request);
 
-            // Reload the paged content based on the hidden course
-            initializePagedContent(root, content);
+            toggleHiddenFromCard(root, id, false);
             data.originalEvent.preventDefault();
         });
     };
index ce97c1f..7ff2b1a 100644 (file)
@@ -36,7 +36,9 @@
 
 <div class="card-deck dashboard-card-deck" role="list">
 {{#courses}}
-    <div class="card dashboard-card" role="listitem">
+    <div class="card dashboard-card" role="listitem"
+        data-region="course-content"
+        data-course-id="{{{id}}}">
         <a href="{{viewurl}}" tabindex="-1">
             <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
                 <span class="sr-only">{{#str}}aria:courseimage, block_myoverview{{/str}}</span>
index 389036b..ea6bfa8 100644 (file)
@@ -36,7 +36,9 @@
 
 <ul class="list-group">
 {{#courses}}
-    <li class="list-group-item course-listitem">
+    <li class="list-group-item course-listitem"
+        data-region="course-content"
+        data-course-id="{{{id}}}">
         <div class="row-fluid">
             <div class="{{#hasprogress}}col-6 span6{{/hasprogress}}{{^hasprogress}}col-11 span11{{/hasprogress}} p-l-0">
                 <div class="d-flex align-items-center">
index 73779ee..444c701 100644 (file)
@@ -36,7 +36,9 @@
 }}
 <div role="list">
 {{#courses}}
-    <div class="course-summaryitem m-b-1 p-2" role="listitem">
+    <div class="course-summaryitem m-b-1 p-2" role="listitem"
+        data-region="course-content"
+        data-course-id="{{{id}}}">
         <div class="row-fluid d-flex">
             <a href="{{viewurl}}" class="col-sm-4 col-xl-3 span4 position-relative" tabindex="-1">
                 <div class="position-absolute">
index e67576a..427be51 100644 (file)
@@ -163,8 +163,8 @@ Feature: The my overview block allows users to easily access their courses
     Given I log in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "In progress" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Hide from view" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Hide from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
     Then I should see "Course 3" in the "Course overview" "block"
     Then I should see "Course 4" in the "Course overview" "block"
@@ -177,8 +177,8 @@ Feature: The my overview block allows users to easily access their courses
     Given I log in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "Past" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 1')]" "xpath_element"
-    And I click on "Hide from view" "link" in the "//div[@class='card course-card' and contains(.,'Course 1')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 1')]" "xpath_element"
+    And I click on "Hide from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 1')]" "xpath_element"
     And I reload the page
     Then I should not see "Course 1" in the "Course overview" "block"
     And I should not see "Course 2" in the "Course overview" "block"
@@ -191,8 +191,8 @@ Feature: The my overview block allows users to easily access their courses
     Given I log in as "student1"
     And I click on "All" "button" in the "Course overview" "block"
     When I click on "Future" "link" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 5')]" "xpath_element"
-    And I click on "Hide from view" "link" in the "//div[@class='card course-card' and contains(.,'Course 5')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
+    And I click on "Hide from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 5')]" "xpath_element"
     And I reload the page
     Then I should not see "Course 5" in the "Course overview" "block"
     And I should not see "Course 1" in the "Course overview" "block"
index 973b634..08527be 100644 (file)
@@ -28,11 +28,11 @@ Feature: The my overview block allows users to favourite their courses
     When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
-    Then "//div[@role='listitem' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
-    And "//div[@role='listitem' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should not exist
-    And "//div[@role='listitem' and contains(.,'Course 2')]//span[@data-region='not-favourite' and @aria-hidden='true']" "xpath_element" should exist
-    And "//div[@role='listitem' and contains(.,'Course 1')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
-    And "//div[@role='listitem' and contains(.,'Course 3')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
+    Then "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
+    And "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should not exist
+    And "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='not-favourite' and @aria-hidden='true']" "xpath_element" should exist
+    And "//div[@class='card dashboard-card' and contains(.,'Course 1')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
+    And "//div[@class='card dashboard-card' and contains(.,'Course 3')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And I log out
 
   Scenario: Star a course and switch display to list
index 9a60437..94021d1 100644 (file)
@@ -25,18 +25,18 @@ Feature: The my overview block allows users to favourite their courses
 
   Scenario: Test hide toggle functionality
     Given I log in as "student1"
-    When I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Hide from view" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
+    When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Hide from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
     Then I should not see "Course 2" in the "Course overview" "block"
     And I log out
 
   Scenario: Test hide toggle functionality w/ favorites
     Given I log in as "student1"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Hide from view" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Hide from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     When I reload the page
     Then I should not see "Course 2" in the "Course overview" "block"
     And I click on "All" "button" in the "Course overview" "block"
@@ -49,12 +49,12 @@ Feature: The my overview block allows users to favourite their courses
 
   Scenario: Test show toggle functionality
     Given I log in as "student1"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Hide from view" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Hide from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     When I click on "All" "button" in the "Course overview" "block"
     And I click on "Hidden" "link" in the "Course overview" "block"
-    When I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Show this course" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
+    When I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Show this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     And I reload the page
     And I click on "Hidden" "button" in the "Course overview" "block"
     When I click on "All" "link" in the "Course overview" "block"
@@ -63,15 +63,15 @@ Feature: The my overview block allows users to favourite their courses
 
   Scenario: Test show toggle functionality w/ favorites
     Given I log in as "student1"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Star this course" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Hide from view" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Star this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Hide from view" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     And I click on "All" "button" in the "Course overview" "block"
     And I click on "Hidden" "link" in the "Course overview" "block"
     And I should see "Course 2" in the "Course overview" "block"
-    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
-    And I click on "Show this course" "link" in the "//div[@class='card course-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on ".coursemenubtn" "css_element" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
+    And I click on "Show this course" "link" in the "//div[@class='card dashboard-card' and contains(.,'Course 2')]" "xpath_element"
     When I reload the page
     Then I should not see "Course 2" in the "Course overview" "block"
     And I click on "Hidden" "button" in the "Course overview" "block"