Merge branch 'e2e-ci-cd-pipeline-dashboard' into 'master'

E2E test operations dashboard

See merge request gitlab-org/gitlab!35051

app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue

@@ -88,6 +88,7 @@ export default {
       type="search"
       class="mb-3"
       autofocus
+      data-qa-selector="project_search_field"
       @input="onInput"
     />
     <div class="d-flex flex-column">
@@ -107,6 +108,7 @@ export default {
               :project="project"
               :matcher="searchQuery"
               class="js-project-list-item"
+              data-qa-selector="project_list_item"
               @click="projectClicked(project)"
             />
           </div>

app/views/layouts/nav/_dashboard.html.haml

@@ -26,16 +26,16 @@
         %ul
           - if dashboard_nav_link?(:groups)
             %li.d-md-none
-              = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups' do
+              = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', data: { qa_selector: 'groups_link' } do
                 = _('Groups')
           - if dashboard_nav_link?(:activity)
             = nav_link(path: 'dashboard#activity') do
-              = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity' do
+              = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', data: { qa_selector: 'activity_link' } do
                 = _('Activity')
 
           - if dashboard_nav_link?(:milestones)
             = nav_link(controller: 'dashboard/milestones') do
-              = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones' do
+              = link_to dashboard_milestones_path, class: 'dashboard-shortcuts-milestones', data: { qa_selector: 'milestones_link' } do
                 = _('Milestones')
 
           - if dashboard_nav_link?(:snippets)

ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue

@@ -118,6 +118,7 @@ export default {
       :ok-title="s__('OperationsDashboard|Add projects')"
       :ok-disabled="okDisabled"
       ok-variant="success"
+      data-qa-selector="add_projects_modal"
       @cancel="onCancel"
       @ok="onOk"
     >
@@ -146,6 +147,7 @@ export default {
         variant="success"
         category="primary"
         data-testid="add-projects-button"
+        data-qa-selector="add_projects_button"
       >
         {{ s__('OperationsDashboard|Add projects') }}
       </gl-button>
@@ -185,6 +187,7 @@ export default {
             v-gl-modal="$options.modalId"
             variant="success"
             data-testid="add-projects-button"
+            data-qa-selector="add_projects_button"
           >
             {{ s__('OperationsDashboard|Add projects') }}
           </gl-button>

ee/app/assets/javascripts/operations/components/dashboard/project.vue

@@ -113,7 +113,10 @@ export default {
 };
 </script>
 <template>
-  <div class="js-dashboard-project dashboard-card card border-0">
+  <div
+    class="js-dashboard-project dashboard-card card border-0"
+    data-qa-selector="dashboard_project_card"
+  >
     <project-header
       :project="project"
       :has-pipeline-failed="hasPipelineFailed"

ee/app/views/dashboard/_nav_link_list.html.haml

 - if dashboard_nav_link?(:environments)
-  = link_to operations_environments_path, class: 'dropdown-item' do
+  = link_to operations_environments_path, class: 'dropdown-item', data: { qa_selector: 'environment_link' } do
     = _('Environments')
 - if dashboard_nav_link?(:operations)
-  = link_to operations_path, class: 'dropdown-item' do
+  = link_to operations_path, class: 'dropdown-item', data: { qa_selector: 'operations_link' } do
     = _('Operations')
 - if dashboard_nav_link?(:security)
-  = link_to security_root_path, class: 'dropdown-item' do
+  = link_to security_root_path, class: 'dropdown-item', data: { qa_selector: 'security_link' } do
     = _('Security')

qa/qa.rb

@@ -448,6 +448,7 @@ module QA
       autoload :ConfirmModal, 'qa/page/component/confirm_modal'
       autoload :CustomMetric, 'qa/page/component/custom_metric'
       autoload :DesignManagement, 'qa/page/component/design_management'
+      autoload :ProjectSelector, 'qa/page/component/project_selector'
 
       module Issuable
         autoload :Common, 'qa/page/component/issuable/common'

qa/qa/ee.rb

@@ -12,6 +12,8 @@ module QA
     end
 
     module Page
+      autoload :OperationsDashboard, 'qa/ee/page/operations_dashboard'
+
       module Component
         autoload :LicenseManagement, 'qa/ee/page/component/license_management'
         autoload :SecureReport, 'qa/ee/page/component/secure_report'
@@ -49,6 +51,7 @@ module QA
 
       module Main
         autoload :Banner, 'qa/ee/page/main/banner'
+        autoload :Menu, 'qa/ee/page/main/menu'
       end
 
       module Admin

qa/qa/ee/page/main/menu.rb

+# frozen_string_literal: true
+
+module QA
+  module EE
+    module Page
+      module Main
+        module Menu
+          extend QA::Page::PageConcern
+
+          def self.included(base)
+            super
+
+            base.view 'ee/app/views/dashboard/_nav_link_list.html.haml' do
+              element :environment_link
+              element :operations_link
+              element :security_link
+            end
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/ee/page/operations_dashboard.rb

+# frozen_string_literal: true
+
+module QA
+  module EE
+    module Page
+      class OperationsDashboard < QA::Page::Base
+        include QA::Page::Component::ProjectSelector
+        include QA::Page::Component::CiBadgeLink
+
+        view 'ee/app/assets/javascripts/operations/components/dashboard/dashboard.vue' do
+          element :add_projects_button
+          element :add_projects_modal
+        end
+
+        view 'ee/app/assets/javascripts/operations/components/dashboard/project.vue' do
+          element :dashboard_project_card
+        end
+
+        def add_project(project_name)
+          open_add_project_modal
+
+          within_add_projects_modal do
+            fill_project_search_input(project_name)
+            select_project
+            find('button.btn.btn-success').click
+          end
+        end
+
+        def remove_all_projects
+          project_cards.each do |card|
+            card.find('button.btn.js-remove-button').click
+          end
+        end
+
+        def has_project_card?
+          has_element? :dashboard_project_card
+        end
+
+        def find_project_card_by_name(name)
+          project_cards.each do |card|
+            title = card.find('div.card-header').find('a.gl-link')[:title]
+            return card if title.include? name
+          end
+        end
+
+        def pipeline_status(project_card)
+          project_card.find(element_selector_css(:status_badge)).text
+        end
+
+        private
+
+        def project_cards
+          all_elements(:dashboard_project_card, minimum: 1)
+        end
+
+        def within_add_projects_modal
+          within_element(:add_projects_modal) do
+            yield
+          end
+        end
+
+        def open_add_project_modal
+          click_element :add_projects_button
+        end
+      end
+    end
+  end
+end

qa/qa/page/component/project_selector.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module ProjectSelector
+        extend QA::Page::PageConcern
+
+        def self.included(base)
+          super
+
+          base.view 'app/assets/javascripts/vue_shared/components/project_selector/project_selector.vue' do
+            element :project_search_field
+            element :project_list_item
+          end
+        end
+
+        def fill_project_search_input(project_name)
+          fill_element :project_search_field, project_name
+        end
+
+        def select_project
+          click_element :project_list_item
+        end
+      end
+    end
+  end
+end

qa/qa/page/main/menu.rb

@@ -22,6 +22,9 @@ module QA
           element :groups_dropdown, required: true
           element :more_dropdown
           element :snippets_link
+          element :groups_link
+          element :activity_link
+          element :milestones_link
         end
 
         view 'app/views/layouts/nav/projects_dropdown/_show.html.haml' do
@@ -53,10 +56,10 @@ module QA
           end
         end
 
-        def go_to_snippets
+        def go_to_more_dropdown_option(option_name)
           within_top_menu do
             click_element :more_dropdown
-            click_element :snippets_link
+            click_element option_name
           end
         end
 
@@ -148,3 +151,5 @@ module QA
     end
   end
 end
+
+QA::Page::Main::Menu.prepend_if_ee('QA::EE::Page::Main::Menu')

qa/qa/specs/features/browser_ui/3_create/snippet/create_personal_snippet_spec.rb

@@ -6,7 +6,9 @@ module QA
       it 'User creates a personal snippet' do
         Flow::Login.sign_in
 
-        Page::Main::Menu.perform(&:go_to_snippets)
+        Page::Main::Menu.perform do |menu|
+          menu.go_to_more_dropdown_option(:snippets_link)
+        end
 
         Resource::Snippet.fabricate_via_browser_ui! do |snippet|
           snippet.title = 'Snippet title'

qa/qa/specs/features/ee/browser_ui/4_verify/pipeline_status_on_operation_dashboard_spec.rb

+# frozen_string_literal: true
+
+module QA
+  context 'Verify', :docker do
+    describe 'Operations Dashboard' do
+      let(:group) { Resource::Group.fabricate_via_api! }
+      let!(:runner) do
+        Resource::Runner.fabricate_via_api! do |runner|
+          runner.token = group.reload!.runners_token
+          runner.name = group.name
+          runner.tags = [group.name]
+        end
+      end
+
+      let(:project_with_tag) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'project-with-tag'
+          project.group = group
+        end
+      end
+
+      let(:project_without_tag) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'project-without-tag'
+          project.group = group
+        end
+      end
+
+      let(:project_without_ci) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'project-without-ci'
+          project.group = group
+        end
+      end
+
+      let(:project_with_failed_run) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'project-with-failed-run'
+          project.group = group
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+        setup_projects
+        Page::Main::Menu.perform do |menu|
+          menu.go_to_more_dropdown_option(:operations_link)
+        end
+      end
+
+      after do
+        runner.remove_via_api!
+      end
+
+      it 'has many pipelines with appropriate statuses' do
+        add_projects_to_board
+
+        EE::Page::OperationsDashboard.perform do |operation|
+          {
+              'project-with-tag' => 'passed',
+              'project-with-failed-run' => 'failed',
+              'project-without-tag' => 'pending',
+              'project-without-ci' => nil
+          }.each do |project_name, status|
+            project = operation.find_project_card_by_name(project_name)
+
+            if project_name == 'project-without-ci'
+              expect(project).to have_content('The branch for this project has no active pipeline configuration.')
+              next
+            end
+
+            expect(operation.pipeline_status(project)).to eq(status)
+          end
+        end
+
+        remove_projects
+      end
+
+      private
+
+      def commit_ci_file(project, file)
+        Resource::Repository::Commit.fabricate_via_api! do |commit|
+          commit.project = project
+          commit.commit_message = 'Add .gitlab-ci.yml'
+          commit.add_files([file])
+        end
+      end
+
+      def setup_projects
+        commit_ci_file(project_with_tag, ci_file_with_tag)
+        commit_ci_file(project_without_tag, ci_file_without_tag)
+        commit_ci_file(project_with_failed_run, ci_file_failed_run)
+      end
+
+      def add_projects_to_board
+        [project_with_tag, project_without_tag, project_without_ci, project_with_failed_run].each do |project|
+          EE::Page::OperationsDashboard.perform do |operation|
+            operation.add_project(project.name)
+
+            expect(operation).to have_project_card
+          end
+        end
+      end
+
+      def remove_projects
+        EE::Page::OperationsDashboard.perform do |operation|
+          operation.remove_all_projects
+          expect(operation).not_to have_project_card
+        end
+      end
+
+      def ci_file_with_tag
+        {
+            file_path: '.gitlab-ci.yml',
+            content: <<~YAML
+              test-success:
+                tags: ["#{group.name}"]
+                script: echo 'OK'
+            YAML
+        }
+      end
+
+      def ci_file_without_tag
+        {
+            file_path: '.gitlab-ci.yml',
+            content: <<~YAML
+              test-pending:
+                script: echo 'OK'
+            YAML
+        }
+      end
+
+      def ci_file_failed_run
+        {
+            file_path: '.gitlab-ci.yml',
+            content: <<~YAML
+              test-fail:
+                tags: ["#{group.name}"]
+                script: exit 1
+            YAML
+        }
+      end
+    end
+  end
+end