Merge branch 'no-sidebar-on-action-btn-click' into 'master'

dismiss sidebar on action button click

Closes #27227

See merge request !8798

2 files changed, 114 insertions, 0 deletions

diff --git a/spec/javascripts/fixtures/projects.rb b/spec/javascripts/fixtures/projects.rb
new file mode 100644
index 00000000000..56513219e1e
--- /dev/null
+++ b/spec/javascripts/fixtures/projects.rb
@@ -0,0 +1,28 @@
+require 'spec_helper'
+
+describe ProjectsController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, namespace: namespace, path: 'builds-project') }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('projects/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'projects/dashboard.html.raw' do |example|
+    get :show,
+      namespace_id: project.namespace.to_param,
+      id: project.to_param
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/project_dashboard_spec.js.es6 b/spec/javascripts/project_dashboard_spec.js.es6
new file mode 100644
index 00000000000..24833b4eb57
--- /dev/null
+++ b/spec/javascripts/project_dashboard_spec.js.es6
@@ -0,0 +1,86 @@
+require('~/sidebar');
+
+(() => {
+  describe('Project dashboard page', () => {
+    let $pageWithSidebar = null;
+    let $sidebarToggle = null;
+    let sidebar = null;
+    const fixtureTemplate = 'projects/dashboard.html.raw';
+
+    const assertSidebarStateExpanded = (shouldBeExpanded) => {
+      expect(sidebar.isExpanded).toBe(shouldBeExpanded);
+      expect($pageWithSidebar.hasClass('page-sidebar-expanded')).toBe(shouldBeExpanded);
+    };
+
+    preloadFixtures(fixtureTemplate);
+    beforeEach(() => {
+      loadFixtures(fixtureTemplate);
+
+      $pageWithSidebar = $('.page-with-sidebar');
+      $sidebarToggle = $('.toggle-nav-collapse');
+
+      // otherwise instantiating the Sidebar for the second time
+      // won't do anything, as the Sidebar is a singleton class
+      gl.Sidebar.singleton = null;
+      sidebar = new gl.Sidebar();
+    });
+
+    it('can show the sidebar when the toggler is clicked', () => {
+      assertSidebarStateExpanded(false);
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+    });
+
+    it('should dismiss the sidebar when clone button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const cloneButton = $('.project-clone-holder a.clone-dropdown-btn');
+      cloneButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when download button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const downloadButton = $('.project-action-button .btn:has(i.fa-download)');
+      downloadButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when add button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const addButton = $('.project-action-button .btn:has(i.fa-plus)');
+      addButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when notification button clicked', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      const notifButton = $('.js-notification-toggle-btns .notifications-btn');
+      notifButton.click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when clicking on the body', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      $('body').click();
+      assertSidebarStateExpanded(false);
+    });
+
+    it('should dismiss the sidebar when clicking on the project description header', () => {
+      $sidebarToggle.click();
+      assertSidebarStateExpanded(true);
+
+      $('.project-home-panel').click();
+      assertSidebarStateExpanded(false);
+    });
+  });
+})();