E2E Create project badge spec

app/assets/javascripts/badges/components/badge.vue

@@ -74,7 +74,14 @@ export default {
 
 <template>
   <div>
-    <a v-show="!isLoading && !hasError" :href="linkUrl" target="_blank" rel="noopener noreferrer">
+    <a
+      v-show="!isLoading && !hasError"
+      :href="linkUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      data-qa-selector="badge_image_link"
+      :data-qa-link-url="linkUrl"
+    >
       <img
         :src="imageUrlWithRetries"
         class="project-badge"

app/assets/javascripts/badges/components/badge_form.vue

@@ -182,7 +182,7 @@ export default {
     @submit.prevent.stop="onSubmit"
   >
     <gl-form-group :label="s__('Badges|Name')" label-for="badge-name">
-      <gl-form-input id="badge-name" v-model="name" />
+      <gl-form-input id="badge-name" v-model="name" data-qa-selector="badge_name_field" />
     </gl-form-group>
 
     <div class="form-group">
@@ -191,6 +191,7 @@ export default {
       <input
         id="badge-link-url"
         v-model="linkUrl"
+        data-qa-selector="badge_link_url_field"
         type="URL"
         class="form-control gl-form-input"
         required
@@ -206,6 +207,7 @@ export default {
       <input
         id="badge-image-url"
         v-model="imageUrl"
+        data-qa-selector="badge_image_url_field"
         type="URL"
         class="form-control gl-form-input"
         required
@@ -246,7 +248,13 @@ export default {
       </gl-button>
     </div>
     <div v-else class="form-group">
-      <gl-button :loading="isSaving" type="submit" variant="confirm" category="primary">
+      <gl-button
+        :loading="isSaving"
+        type="submit"
+        variant="confirm"
+        category="primary"
+        data-qa-selector="add_badge_button"
+      >
         {{ s__('Badges|Add badge') }}
       </gl-button>
     </div>

app/assets/javascripts/badges/components/badge_list.vue

@@ -34,8 +34,14 @@ export default {
       <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
       <span v-else>{{ s__('Badges|This project has no badges') }}</span>
     </div>
-    <div v-else class="card-body">
-      <badge-list-row v-for="badge in badges" :key="badge.id" :badge="badge" />
+    <div v-else class="card-body" data-qa-selector="badge_list_content">
+      <badge-list-row
+        v-for="badge in badges"
+        :key="badge.id"
+        :badge="badge"
+        data-qa-selector="badge_list_row"
+        :data-qa-badge-name="badge.name"
+      />
     </div>
   </div>
 </template>

app/views/projects/_home_panel.html.haml

@@ -71,11 +71,13 @@
     = render_if_exists "projects/home_mirror"
 
   - if @project.badges.present?
-    .project-badges.mb-2
+    .project-badges.mb-2{ data: { qa_selector: 'project_badges_content' } }
       - @project.badges.each do |badge|
-        %a.gl-mr-3{ href: badge.rendered_link_url(@project),
+        - badge_link_url = badge.rendered_link_url(@project)
+        %a.gl-mr-3{ href: badge_link_url,
           target: '_blank',
-          rel: 'noopener noreferrer' }>
+          rel: 'noopener noreferrer',
+          data: { qa_selector: 'badge_image_link', qa_link_url: badge_link_url } }>
           %img.project-badge{ src: badge.rendered_image_url(@project),
             'aria-hidden': true,
             alt: 'Project badge' }>

app/views/projects/edit.html.haml

@@ -40,7 +40,7 @@
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
 
-%section.settings.no-animate{ class: ('expanded' if expanded) }
+%section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'badges_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')

qa/qa/page/component/badges.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      class Badges < Page::Base
+        view 'app/assets/javascripts/badges/components/badge_form.vue' do
+          element :badge_name_field
+          element :badge_link_url_field
+          element :badge_image_url_field
+          element :add_badge_button
+        end
+
+        view 'app/assets/javascripts/badges/components/badge_list.vue' do
+          element :badge_list_content
+          element :badge_list_row
+        end
+
+        view 'app/assets/javascripts/badges/components/badge.vue' do
+          element :badge_image_link
+        end
+
+        def fill_name(name)
+          fill_element :badge_name_field, name
+        end
+
+        def fill_link_url(url)
+          fill_element :badge_link_url_field, url
+        end
+
+        def fill_image_url(url)
+          fill_element :badge_image_url_field, url
+        end
+
+        def click_add_badge_button
+          click_element :add_badge_button
+        end
+
+        def has_badge?(badge_name)
+          within_element(:badge_list_content) do
+            has_element?(:badge_list_row, badge_name: badge_name)
+          end
+        end
+
+        def has_visible_badge_image_link?(link_url)
+          within_element(:badge_list_content) do
+            has_element?(:badge_image_link, link_url: link_url)
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/page/project/settings/main.rb

@@ -9,11 +9,13 @@ module QA
           include Component::Select2
           include SubMenus::Project
           include Component::Breadcrumbs
+          include Layout::Flash
 
           view 'app/views/projects/edit.html.haml' do
             element :advanced_settings_content
             element :merge_request_settings_content
             element :visibility_features_permissions_content
+            element :badges_settings_content
           end
 
           view 'app/views/projects/settings/_general.html.haml' do
@@ -51,6 +53,12 @@ module QA
               VisibilityFeaturesPermissions.perform(&block)
             end
           end
+
+          def expand_badges_settings(&block)
+            expand_content(:badges_settings_content) do
+              Component::Badges.perform(&block)
+            end
+          end
         end
       end
     end

qa/qa/page/project/show.rb

@@ -39,6 +39,8 @@ module QA
           element :forked_from_link
           element :project_name_content
           element :project_id_content
+          element :project_badges_content
+          element :badge_image_link
         end
 
         view 'app/views/projects/_files.html.haml' do
@@ -179,6 +181,12 @@ module QA
             has_css?('.tree-holder')
           end
         end
+
+        def has_visible_badge_image_link?(link_url)
+          within_element(:project_badges_content) do
+            has_element?(:badge_image_link, link_url: link_url)
+          end
+        end
       end
     end
   end

qa/qa/resource/badge_base.rb

+# frozen_string_literal: true
+
+module QA
+  module Resource
+    class BadgeBase < Base
+      attributes :id,
+                 :name,
+                 :link_url,
+                 :image_url
+
+      def initialize
+        @name = "qa-badge-#{SecureRandom.hex(8)}"
+      end
+
+      def fabricate!
+        Page::Component::Badges.perform do |badges|
+          badges.fill_name(name)
+          badges.fill_link_url(link_url)
+          badges.fill_image_url(image_url)
+          badges.click_add_badge_button
+        end
+      end
+    end
+  end
+end

qa/qa/resource/group_badge.rb

@@ -2,12 +2,8 @@
 
 module QA
   module Resource
-    class GroupBadge < Base
-      attributes :id,
-                 :name,
-                 :link_url,
-                 :image_url,
-                 :group
+    class GroupBadge < BadgeBase
+      attribute :group
 
       # API get path
       #

qa/qa/resource/project_badge.rb

+# frozen_string_literal: true
+
+module QA
+  module Resource
+    class ProjectBadge < BadgeBase
+      def initialize
+        super
+
+        @link_url = "#{Runtime::Scenario.gitlab_address}/%{project_path}"
+        @image_url = "#{Runtime::Scenario.gitlab_address}/%{project_path}/badges/%{default_branch}/pipeline.svg"
+      end
+
+      def fabricate!
+        Page::Project::Menu.perform(&:go_to_general_settings)
+        Page::Project::Settings::Main.perform(&:expand_badges_settings)
+
+        super
+      end
+    end
+  end
+end

qa/qa/specs/features/browser_ui/1_manage/project/create_project_badge_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Manage' do
+    describe 'Create project badge' do
+      let(:badge_name) { "project-badge-#{SecureRandom.hex(8)}" }
+      let(:expected_badge_link_url) { "#{Runtime::Scenario.gitlab_address}/#{project.path_with_namespace}" }
+      let(:expected_badge_image_url) { "#{Runtime::Scenario.gitlab_address}/#{project.path_with_namespace}/badges/main/pipeline.svg" }
+      let(:project) do
+        Resource::Project.fabricate_via_api! do |project|
+          project.name = 'badge-test-project'
+          project.initialize_with_readme = true
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+        project.visit!
+      end
+
+      it 'creates project badge successfully', testcase: 'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/350065' do
+        Resource::ProjectBadge.fabricate! do |badge|
+          badge.name = badge_name
+        end
+
+        Page::Project::Settings::Main.perform do |project_settings|
+          expect(project_settings).to have_notice('New badge added.')
+        end
+
+        Page::Component::Badges.perform do |badges|
+          aggregate_failures do
+            expect(badges).to have_badge(badge_name)
+            expect(badges).to have_visible_badge_image_link(expected_badge_link_url)
+            expect(badges.asset_exists?(expected_badge_image_url)).to be_truthy
+          end
+        end
+
+        project.visit!
+
+        Page::Project::Show.perform do |project|
+          expect(project).to have_visible_badge_image_link(expected_badge_link_url)
+          expect(project.asset_exists?(expected_badge_image_url)).to be_truthy
+        end
+      end
+
+      after do
+        project&.remove_via_api!
+      end
+    end
+  end
+end