Allow users to see full passed test list

On the report-page, we give the total number of passed tests
but do not allow a user to see the full test list. This patch
allows that functionality.

Change-Id: I204c2accd022388e9ae50fe0644a48ad28856d94
Closes-Bug: #1481464

refstack-ui/app/assets/css/style.css

@@ -6,6 +6,7 @@ body {
 
 a {
   text-decoration: none;
+  cursor: pointer;
 }
 
 a:hover {
@@ -72,10 +73,6 @@ h1, h2, h3, h4, h5, h6 {
   color: #4B4B4B;
 }
 
-.capabilities a, .criteria a {
-  cursor: pointer;
-}
-
 .capabilities .capability-list-item {
   border-bottom: 2px solid #AFAFAF;
   padding-bottom: .6em;
@@ -174,3 +171,12 @@ h1, h2, h3, h4, h5, h6 {
 .button-margin {
   margin-bottom: 1em;
 }
+
+.tests-modal-content {
+  overflow: auto;
+  max-height: calc(100vh - 100px);
+}
+
+.tests-modal-content textarea {
+  font-size: .9em;
+}

refstack-ui/app/components/results-report/partials/fullTestListModal.html

@@ -0,0 +1,13 @@
+<div class="modal-content">
+    <div class="modal-header">
+        <h4>All Passed Tests ({{tests.length}})</h4>
+    </div>
+    <div class="modal-body tests-modal-content">
+         <div class="form-group">
+             <textarea class="form-control" rows="20" id="tests" wrap="off">{{getTestListString()}}</textarea>
+         </div>
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-primary" type="button" ng-click="close()">Close</button>
+    </div>
+</div>

refstack-ui/app/components/results-report/partials/reportDetails.html

@@ -61,4 +61,3 @@ report page.
         </li>
     </ol>
 </accordion-group>
-

refstack-ui/app/components/results-report/resultsReport.html

@@ -8,7 +8,10 @@
                 <div ng-if="isEditingAllowed()"><strong>Cloud ID:</strong> {{resultsData.cpid}}<br /></div>
                 <strong>Upload Date:</strong> {{resultsData.created_at}} UTC<br />
                 <strong>Duration:</strong> {{resultsData.duration_seconds}} seconds<br />
-                <strong>Total Number of Passed Tests:</strong> {{resultsData.results.length}}<br />
+                <strong>Total Number of Passed Tests:</strong>
+                <a title="See all passed tests" ng-click="openFullTestListModal()">
+                    {{resultsData.results.length}}
+                </a><br />
                 <hr>
             </div>
         </div>
@@ -22,7 +25,6 @@
     </div>
 </div>
 
-
 <div ng-show="resultsData">
     <p>See how these results stack up against DefCore capabilities and OpenStack
         <a target="_blank" href="http://www.openstack.org/brand/interop/">target marketing programs.</a>

refstack-ui/app/components/results-report/resultsReportController.js

@@ -7,8 +7,8 @@ var refstackApp = angular.module('refstackApp');
  */
 refstackApp.controller('resultsReportController',
     ['$scope', '$http', '$stateParams',
-     '$window', 'refstackApiUrl', 'raiseAlert',
-     function ($scope, $http, $stateParams, $window,
+     '$window', '$modal', 'refstackApiUrl', 'raiseAlert',
+     function ($scope, $http, $stateParams, $window, $modal,
                refstackApiUrl, raiseAlert) {
          'use strict';
 
@@ -55,7 +55,6 @@ refstackApp.controller('resultsReportController',
                      $scope.updateCapabilities();
                  }).error(function (error) {
                      $scope.showError = true;
-                     $scope.resultsData = null;
                      $scope.error = 'Error retrieving version list: ' +
                          JSON.stringify(error);
                  });
@@ -129,6 +128,7 @@ refstackApp.controller('resultsReportController',
                          error.title, error.detail);
                  });
          };
+
          /**
           * This will contact the Refstack API server to retrieve the JSON
           * content of the capability file corresponding to the selected
@@ -456,7 +456,54 @@ refstackApp.controller('resultsReportController',
              }
          };
 
+         $scope.openFullTestListModal = function () {
+             $modal.open({
+                 templateUrl: '/components/results-report/partials' +
+                              '/fullTestListModal.html',
+                 backdrop: true,
+                 windowClass: 'modal',
+                 animation: true,
+                 controller: 'fullTestListModalController',
+                 size: 'lg',
+                 resolve: {
+                     tests: function () {
+                         return $scope.resultsData.results;
+                     }
+                 }
+             });
+         };
+
          getResults();
      }
     ]
 );
+
+
+/**
+ * Full Test List Modal Controller
+ * This controller is for the modal that appears if a user wants to see the
+ * full list of passed tests on a report page.
+ */
+refstackApp.controller('fullTestListModalController',
+    ['$scope', '$modalInstance', 'tests',
+     function ($scope, $modalInstance, tests) {
+         'use strict';
+
+         $scope.tests = tests;
+
+         /**
+          * This function will close/dismiss the modal.
+          */
+         $scope.close = function () {
+             $modalInstance.dismiss('exit');
+         };
+
+         /**
+          * This function will return a string representing the sorted
+          * tests list separated by newlines.
+          */
+         $scope.getTestListString = function () {
+             return $scope.tests.sort().join('\n');
+         };
+     }]
+);

refstack-ui/tests/unit/ControllerSpec.js

@@ -507,5 +507,50 @@ describe('Refstack controllers', function () {
                 scope.testStatus = 'flagged';
                 expect(scope.getTestCount(cap)).toEqual(3);
             });
+
+        it('should have a method to open a modal for the full passed test list',
+            function () {
+                var modal;
+                inject(function ($modal) {
+                    modal = $modal;
+                });
+                spyOn(modal, 'open');
+                scope.openFullTestListModal();
+                expect(modal.open).toHaveBeenCalled();
+            });
+    });
+
+    describe('fullTestListModalController', function () {
+        var scope;
+        var modalInstance;
+
+        beforeEach(inject(function ($rootScope, $controller) {
+            scope = $rootScope.$new();
+            modalInstance = {
+                dismiss: jasmine.createSpy('modalInstance.dismiss')
+            };
+            $controller('fullTestListModalController', {
+                $scope: scope,
+                $modalInstance: modalInstance,
+                tests: ['t1', 't2']
+            });
+        }));
+
+        it('should set a scope variable to the passed in tests', function () {
+            expect(scope.tests).toEqual(['t1', 't2']);
+        });
+
+        it('should have a method to close the modal',
+            function () {
+                scope.close();
+                expect(modalInstance.dismiss).toHaveBeenCalledWith('exit');
+            });
+
+        it('should have a method to convert the tests to a string',
+            function () {
+                scope.tests = ['t2', 't1', 't3'];
+                var expectedString = 't1\nt2\nt3';
+                expect(scope.getTestListString()).toEqual(expectedString);
+            });
     });
 });