From cd163ebcbbb631dba0b3f22b3feedac670361aca Mon Sep 17 00:00:00 2001
From: benjaminapetersen <admin@benjaminapetersen.me>
Date: Tue, 22 Aug 2017 10:00:44 -0400
Subject: [PATCH] fix(empty state): Change h1 to h4 styled as h1, update to use
 unique id's generated by view

- fix issue #575
- h1 changed to h4 styled as h1
- update id's to be unique using {{$id}}
  - example: id="blank-state-pf-title-{{$id}}"
---
 src/views/empty-state.html                    |  8 ++++----
 test/notification/notification-drawer.spec.js |  8 ++++----
 test/table/tableview/table-view.spec.js       |  6 +++---
 test/views/cardview/card-view.spec.js         |  2 +-
 test/views/empty-state.spec.js                | 14 +++++++-------
 test/views/listview/list-view.spec.js         |  2 +-
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/views/empty-state.html b/src/views/empty-state.html
index 84ca98c89..d4c9059d6 100644
--- a/src/views/empty-state.html
+++ b/src/views/empty-state.html
@@ -2,13 +2,13 @@
   <div ng-if="$ctrl.config.icon" class="blank-slate-pf-icon">
     <span class="{{$ctrl.config.icon}}"></span>
   </div>
-  <h1 id="title">
+  <h4 id="blank-state-pf-title-{{$id}}" class="h1 blank-state-pf-title">
     {{$ctrl.config.title}}
-  </h1>
-  <p id="info" ng-if="$ctrl.config.info">
+  </h4>
+  <p id="blank-state-pf-info-{{$id}}" class="blank-state-pf-info" ng-if="$ctrl.config.info">
     {{$ctrl.config.info}}
   </p>
-  <p id="helpLink" ng-if="$ctrl.config.helpLink">
+  <p id="blank-state-pf-helpLink-{{$id}}" class="blank-state-pf-helpLink" ng-if="$ctrl.config.helpLink">
     {{$ctrl.config.helpLink.label}} <a href="{{$ctrl.config.helpLink.url}}">{{$ctrl.config.helpLink.urlLabel}}</a>.
   </p>
   <div ng-if="$ctrl.hasMainActions()" class="blank-slate-pf-main-action">
diff --git a/test/notification/notification-drawer.spec.js b/test/notification/notification-drawer.spec.js
index 9f530408d..4229937c2 100644
--- a/test/notification/notification-drawer.spec.js
+++ b/test/notification/notification-drawer.spec.js
@@ -593,7 +593,7 @@ describe('Component:  pfNotificationDrawer', function () {
     var emptyStates = element.find('.blank-slate-pf');
     expect(emptyStates.length).toBe(1);
 
-    var title = angular.element(emptyStates[0]).find('#title').html();
+    var title = angular.element(emptyStates[0]).find('.blank-state-pf-title').html();
     expect(_.trim(title)).toBe('There are no notifications to display.');
   });
 
@@ -609,7 +609,7 @@ describe('Component:  pfNotificationDrawer', function () {
     var emptyStates = element.find('.blank-slate-pf');
     expect(emptyStates.length).toBe(1);
 
-    var title = angular.element(emptyStates[0]).find('#title').html();
+    var title = angular.element(emptyStates[0]).find('.blank-state-pf-title').html();
     expect(_.trim(title)).toBe('Nothing');
   });
 
@@ -617,10 +617,10 @@ describe('Component:  pfNotificationDrawer', function () {
     var emptyStates = element.find('.blank-slate-pf');
     expect(emptyStates.length).toBe(2);
 
-    var title = angular.element(emptyStates[0]).find('#title').html();
+    var title = angular.element(emptyStates[0]).find('.blank-state-pf-title').html();
     expect(_.trim(title)).toBe('There are no notifications to display.');
 
-    title = angular.element(emptyStates[1]).find('#title').html();
+    title = angular.element(emptyStates[1]).find('.blank-state-pf-title').html();
     expect(_.trim(title)).toBe('Nothing');
   });
 });
diff --git a/test/table/tableview/table-view.spec.js b/test/table/tableview/table-view.spec.js
index 6536bd032..faa1bea5e 100644
--- a/test/table/tableview/table-view.spec.js
+++ b/test/table/tableview/table-view.spec.js
@@ -85,21 +85,21 @@ describe('Component: pfTableView', function () {
     basicSetup();
     $scope.items = null;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('');
+    expect(element.find('.blank-state-pf-title').text()).toContain('');
   });
 
   it('should show the empty state when items is empty', function () {
     basicSetup();
     $scope.items = [];
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.blank-state-pf-title').text()).toContain('No Items Available');
   });
 
   it('should show the empty state when the config property is specified', function () {
     basicSetup();
     $scope.config.itemsAvailable = false;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.blank-state-pf-title').text()).toContain('No Items Available');
   });
 
   it('should show the correct number of items', function () {
diff --git a/test/views/cardview/card-view.spec.js b/test/views/cardview/card-view.spec.js
index c737820bc..afb28a99d 100644
--- a/test/views/cardview/card-view.spec.js
+++ b/test/views/cardview/card-view.spec.js
@@ -224,6 +224,6 @@ describe('Component:  pfCardView', function () {
   it('should show the empty state when specified', function () {
     $scope.cardConfig.itemsAvailable = false;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.blank-state-pf-title').text()).toContain('No Items Available');
   });
 })
diff --git a/test/views/empty-state.spec.js b/test/views/empty-state.spec.js
index 1698648f7..fba46c985 100644
--- a/test/views/empty-state.spec.js
+++ b/test/views/empty-state.spec.js
@@ -1,4 +1,4 @@
-describe('Component:  pfEnptyState', function () {
+describe('Component:  pfEmptyState', function () {
   var $scope;
   var $compile;
   var element;
@@ -68,9 +68,9 @@ describe('Component:  pfEnptyState', function () {
     compileHTML('<pf-empty-state config="config" action-buttons="actionButtons"></pf-empty-state>', $scope);
 
     expect(element.find('.pficon-add-circle-o').length).toBe(1);
-    expect(element.find('#title').text()).toContain('Empty State Title');
-    expect(element.find('#info').text()).toContain('This is the Empty State component');
-    expect(element.find('#helpLink').text()).toContain('For more information please see');
+    expect(element.find('.blank-state-pf-title').text()).toContain('Empty State Title');
+    expect(element.find('.blank-state-pf-info').text()).toContain('This is the Empty State component');
+    expect(element.find('.blank-state-pf-helpLink').text()).toContain('For more information please see');
     expect(element.find('a').text()).toContain('pfExample');
     expect(element.find('a').prop('href')).toContain('#/api/patternfly.views.component:pfEmptyState');
 
@@ -89,11 +89,11 @@ describe('Component:  pfEnptyState', function () {
   it('should only display main default title when no config and actionButtons defined', function () {
     compileHTML('<pf-empty-state></pf-empty-state>', $scope);
 
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.blank-state-pf-title').text()).toContain('No Items Available');
 
     expect(element.find('.blank-slate-pf-icon').length).toBe(0);
-    expect(element.find('#info').length).toBe(0);
-    expect(element.find('#helpLink').length).toBe(0);
+    expect(element.find('.info').length).toBe(0);
+    expect(element.find('.helpLink').length).toBe(0);
     expect(element.find('button').length).toBe(0);
   });
 });
diff --git a/test/views/listview/list-view.spec.js b/test/views/listview/list-view.spec.js
index a8a47b018..412eef3c4 100644
--- a/test/views/listview/list-view.spec.js
+++ b/test/views/listview/list-view.spec.js
@@ -603,6 +603,6 @@ describe('Component:  pfDataList', function () {
   it('should show the empty state when specified', function () {
     $scope.listConfig.itemsAvailable = false;
     $scope.$digest();
-    expect(element.find('#title').text()).toContain('No Items Available');
+    expect(element.find('.blank-state-pf-title').text()).toContain('No Items Available');
   });
 });