Add QA test

FirstClassProjectSecurityDashboard QA test checks for presence of Vue.js
widgets after a Vulnerability has been clicked on by the end user.

ee/app/assets/javascripts/vulnerabilities/components/details.vue

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <div class="md">
+  <div class="md" data-qa-selector="vulnerability_details">
     <h1 class="mt-3 mb-2 border-bottom-0" data-testid="title">{{ vulnerability.title }}</h1>
     <h3 class="mt-0">{{ __('Description') }}</h3>
     <p data-testid="description">{{ finding.description }}</p>

ee/app/assets/javascripts/vulnerabilities/components/footer.vue

@@ -153,7 +153,7 @@ export default {
 };
 </script>
 <template>
-  <div>
+  <div data-qa-selector="vulnerability_footer">
     <solution-card v-if="hasSolution" v-bind="solutionInfo" />
 
     <div v-if="finding.issue_feedback || finding.merge_request_feedback" class="card">

ee/app/assets/javascripts/vulnerabilities/components/header.vue

@@ -216,7 +216,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div data-qa-selector="vulnerability_header">
     <resolution-alert
       v-if="showResolutionAlert"
       :vulnerability-id="vulnerability.id"

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue

@@ -199,7 +199,12 @@ export default {
 
       <template #cell(title)="{ item }">
         <div class="d-flex flex-column flex-sm-row align-items-end align-items-sm-start">
-          <gl-link class="text-body js-description" :href="item.vulnerabilityPath">
+          <gl-link
+            class="text-body js-description"
+            :href="item.vulnerabilityPath"
+            data-qa-selector="vulnerability"
+            :data-qa-vulnerability-description="`${item.title}`"
+          >
             {{ item.title }}
           </gl-link>
           <issue-link v-if="issue(item)" :issue="issue(item)" />

qa/qa/ee.rb

@@ -152,6 +152,8 @@ module QA
         module Secure
           autoload :Show, 'qa/ee/page/project/secure/show'
           autoload :DependencyList, 'qa/ee/page/project/secure/dependency_list'
+          autoload :SecurityDashboard, 'qa/ee/page/project/secure/security_dashboard'
+          autoload :VulnerabilityDetails, 'qa/ee/page/project/secure/vulnerability_details'
         end
 
         module PathLocks

qa/qa/ee/page/project/secure/security_dashboard.rb

+# frozen_string_literal: true
+
+module QA
+  module EE
+    module Page
+      module Project
+        module Secure
+          class SecurityDashboard < QA::Page::Base
+            view 'ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue' do
+              element :vulnerability
+            end
+
+            def has_vulnerability?(description:)
+              has_element?(:vulnerability, vulnerability_description: description)
+            end
+
+            def click_vulnerability(description:)
+              return false unless has_vulnerability?(description: description)
+
+              click_element(:vulnerability, vulnerability_description: description)
+            end
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/ee/page/project/secure/vulnerability_details.rb

+# frozen_string_literal: true
+
+module QA
+  module EE
+    module Page
+      module Project
+        module Secure
+          class VulnerabilityDetails < QA::Page::Base
+            view 'ee/app/assets/javascripts/vulnerabilities/components/header.vue' do
+              element :vulnerability_header
+            end
+
+            view 'ee/app/assets/javascripts/vulnerabilities/components/details.vue' do
+              element :vulnerability_details
+            end
+
+            view 'ee/app/assets/javascripts/vulnerabilities/components/footer.vue' do
+              element :vulnerability_footer
+            end
+
+            def has_component?(component_name:)
+              has_element?(component_name.to_sym)
+            end
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/specs/features/ee/browser_ui/secure/first_class_project_security_dashboard_spec.rb

+# frozen_string_literal: true
+
+module QA
+  context 'Secure', :docker, :runner do
+    describe 'Security Dashboard in a Project' do
+      let(:vuln_name) { "CVE-2017-18269 in glibc" }
+
+      before(:all) do
+        @executor = "qa-runner-#{Time.now.to_i}"
+
+        Flow::Login.sign_in
+
+        @project = Resource::Project.fabricate_via_api! do |p|
+          p.name = Runtime::Env.auto_devops_project_name || 'project-with-secure'
+          p.description = 'Project with Secure'
+          p.auto_devops_enabled = false
+          p.initialize_with_readme = true
+        end
+
+        @runner = Resource::Runner.fabricate! do |runner|
+          runner.project = @project
+          runner.name = @executor
+          runner.tags = %w[qa test]
+        end
+
+        # Push fixture to generate Secure reports
+        @source = Resource::Repository::ProjectPush.fabricate! do |push|
+          push.project = @project
+          push.directory = Pathname
+            .new(__dir__)
+            .join('../../../../../ee/fixtures/secure_premade_reports')
+          push.commit_message = 'Create Secure compatible application to serve premade reports'
+          push.branch_name = 'secure-mr'
+        end
+
+        @merge_request = Resource::MergeRequest.fabricate_via_api! do |mr|
+          mr.project = @project
+          mr.source_branch = 'secure-mr'
+          mr.target_branch = 'master'
+          mr.source = @source
+          mr.target = 'master'
+          mr.target_new_branch = false
+        end
+
+        @merge_request.visit!
+        Page::MergeRequest::Show.perform do |merge_request|
+          merge_request.merge!
+        end
+        Page::Project::Menu.perform(&:click_ci_cd_pipelines)
+        Page::Project::Pipeline::Index.perform(&:wait_for_latest_pipeline_success)
+      end
+
+      after(:all) do
+        @runner.remove_via_api!
+
+        Runtime::Feature.enable('job_log_json') if @job_log_json_flag_enabled
+      end
+
+      it 'shows vulnerability details' do
+        @project.visit!
+
+        Page::Project::Menu.perform(&:click_on_security_dashboard)
+
+        EE::Page::Project::Secure::SecurityDashboard.perform do |security_dashboard|
+          expect(security_dashboard).to have_vulnerability(description: vuln_name)
+          security_dashboard.click_vulnerability(description: vuln_name)
+        end
+
+        EE::Page::Project::Secure::VulnerabilityDetails.perform do |vulnerability_details|
+          expect(vulnerability_details).to have_component(component_name: :vulnerability_header)
+          expect(vulnerability_details).to have_component(component_name: :vulnerability_details)
+          expect(vulnerability_details).to have_component(component_name: :vulnerability_footer)
+        end
+      end
+    end
+  end
+end