Align nav-sidebar with design.gitlab.com docs

Updated nav-sidebar to reflect the documented
behaviour from the design.gitlab.com docs:
https://design.gitlab.com/regions/navigation#contextual-navigation

Updated rspec tests to reflect the expected behaviour

1 files changed, 43 insertions, 27 deletions

diff --git a/spec/features/projects/user_sees_sidebar_spec.rb b/spec/features/projects/user_sees_sidebar_spec.rb
index 736a574e937..383e8824b7b 100644
--- a/spec/features/projects/user_sees_sidebar_spec.rb
+++ b/spec/features/projects/user_sees_sidebar_spec.rb
@@ -4,14 +4,30 @@ describe 'Projects > User sees sidebar' do
   let(:user) { create(:user) }
   let(:project) { create(:project, :private, public_builds: false, namespace: user.namespace) }
 
-  context 'on a smaller screen', :js do
+  # NOTE: See documented behaviour https://design.gitlab.com/regions/navigation#contextual-navigation
+  context 'on different viewports', :js do
     include MobileHelpers
 
     before do
       sign_in(user)
     end
 
-    shared_examples 'has a collapsible mobile nav sidebar' do
+    shared_examples 'has a expanded nav sidebar' do
+      it 'has a expanded desktop nav-sidebar on load' do
+        expect(page).to have_content('Collapse sidebar')
+        expect(page).not_to have_selector('.sidebar-collapsed-desktop')
+        expect(page).not_to have_selector('.sidebar-expanded-mobile')
+      end
+
+      it 'can collapse the nav-sidebar' do
+        page.find('.nav-sidebar .js-toggle-sidebar').click
+        expect(page).to have_selector('.sidebar-collapsed-desktop')
+        expect(page).not_to have_content('Collapse sidebar')
+        expect(page).not_to have_selector('.sidebar-expanded-mobile')
+      end
+    end
+
+    shared_examples 'has a collapsed nav sidebar' do
       it 'has a collapsed desktop nav-sidebar on load' do
         expect(page).not_to have_content('Collapse sidebar')
         expect(page).not_to have_selector('.sidebar-expanded-mobile')
@@ -24,22 +40,20 @@ describe 'Projects > User sees sidebar' do
       end
     end
 
-    shared_examples 'has a desktop nav sidebar' do
-      it 'has a expanded desktop nav-sidebar on load' do
-        expect(page).to have_content('Collapse sidebar')
-        expect(page).not_to have_selector('.sidebar-collapsed-desktop')
+    shared_examples 'has a mobile nav-sidebar' do
+      it 'has a hidden nav-sidebar on load' do
+        expect(page).not_to have_content('.mobile-nav-open')
         expect(page).not_to have_selector('.sidebar-expanded-mobile')
       end
 
-      it 'can collapse the nav-sidebar' do
-        page.find('.nav-sidebar .js-toggle-sidebar').click
-        expect(page).to have_selector('.sidebar-collapsed-desktop')
-        expect(page).not_to have_content('Collapse sidebar')
-        expect(page).not_to have_selector('.sidebar-expanded-mobile')
+      it 'can expand the nav-sidebar' do
+        page.find('.toggle-mobile-nav').click
+        expect(page).to have_selector('.mobile-nav-open')
+        expect(page).to have_selector('.sidebar-expanded-mobile')
       end
     end
 
-    context 'with xs size' do
+    context 'with a extra small viewport' do
       before do
         resize_screen_xs
         visit project_path(project)
@@ -47,46 +61,48 @@ describe 'Projects > User sees sidebar' do
         expect(page).to have_selector('.toggle-mobile-nav')
       end
 
-      it 'has a collapsed nav-sidebar on load' do
-        expect(page).not_to have_content('.mobile-nav-open')
-        expect(page).not_to have_selector('.sidebar-expanded-mobile')
-      end
+      it_behaves_like 'has a mobile nav-sidebar'
+    end
 
-      it 'can expand the nav-sidebar' do
-        page.find('.toggle-mobile-nav').click
-        expect(page).to have_selector('.mobile-nav-open')
-        expect(page).to have_selector('.sidebar-expanded-mobile')
+    context 'with a small size viewport' do
+      before do
+        resize_screen_sm
+        visit project_path(project)
+        expect(page).to have_selector('.nav-sidebar')
+        expect(page).to have_selector('.toggle-mobile-nav')
       end
+
+      it_behaves_like 'has a mobile nav-sidebar'
     end
 
-    context 'with sm size' do
+    context 'with medium size viewport' do
       before do
-        resize_screen_sm
+        resize_window(768, 800)
         visit project_path(project)
         expect(page).to have_selector('.nav-sidebar')
       end
 
-      it_behaves_like 'has a collapsible mobile nav sidebar'
+      it_behaves_like 'has a collapsed nav sidebar'
     end
 
-    context 'with size 1199px' do
+    context 'with viewport size 1199px' do
       before do
         resize_window(1199, 800)
         visit project_path(project)
         expect(page).to have_selector('.nav-sidebar')
       end
 
-      it_behaves_like 'has a collapsible mobile nav sidebar'
+      it_behaves_like 'has a collapsed nav sidebar'
     end
 
-    context 'with a larger screen' do
+    context 'with a extra large viewport' do
       before do
         resize_window(1200, 800)
         visit project_path(project)
         expect(page).to have_selector('.nav-sidebar')
       end
 
-      it_behaves_like 'has a desktop nav sidebar'
+      it_behaves_like 'has a expanded nav sidebar'
     end
   end