Merge branch 'qa/e2e-test-issue-board-focus-mode' into 'master'

Add end-to-end test for issue board focus mode

Closes gitlab-org/quality/testcases#182

See merge request gitlab-org/gitlab-ee!16300

ee/app/assets/javascripts/boards/toggle_focus.js

@@ -31,6 +31,7 @@ export default (ModalStore, boardsStore, $boardApp) => {
         <a
           href="#"
           class="btn btn-default has-tooltip prepend-left-10 js-focus-mode-btn"
+          data-qa-selector="focus_mode_button"
           role="button"
           aria-label="Toggle focus mode"
           title="Toggle focus mode"

qa/qa/ee/page/project/issue/board/show.rb

@@ -28,6 +28,17 @@ module QA
                 element :board_list_header
               end
 
+              view 'ee/app/assets/javascripts/boards/toggle_focus.js' do
+                element :focus_mode_button
+              end
+
+              # The `focused_board` method does not use `find_element` with an element defined
+              # with the attribute `data-qa-selector` since such element is not unique when the
+              # `is-focused` class is not set, and it was not possible to find a better solution.
+              def focused_board
+                find('.issue-boards-content.js-focus-mode-board.is-focused')
+              end
+
               def boards_dropdown
                 find_element(:boards_dropdown)
               end
@@ -56,6 +67,10 @@ module QA
                 end
               end
 
+              def click_focus_mode_button
+                click_element(:focus_mode_button)
+              end
+
               private
 
               def wait_boards_list_finish_loading

qa/qa/specs/features/ee/browser_ui/2_plan/issue_boards/focus_mode_spec.rb

+# frozen_string_literal: true
+
+module QA
+  context 'Plan' do
+    describe 'Issue board focus mode' do
+      let(:project) do
+        QA::Resource::Project.fabricate_via_api! do |project|
+          project.name = 'sample-project-issue-board-focus-mode'
+        end
+      end
+
+      before do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.perform(&:sign_in_using_credentials)
+      end
+
+      it 'focuses on issue board' do
+        project.visit!
+
+        Page::Project::Menu.perform(&:go_to_boards)
+        EE::Page::Project::Issue::Board::Show.perform do |show|
+          show.click_focus_mode_button
+
+          expect(show.focused_board).to be_visible
+        end
+      end
+    end
+  end
+end