Add e2e test for design management

Includes new QA selectors (and removing some unused ones).
Gives Issue a default title.
Allows click_element to accept a text param

ee/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -108,7 +108,10 @@ export default {
 <template>
   <div class="design-discussion-wrapper">
     <div class="badge badge-pill" type="button">{{ discussionIndex }}</div>
-    <div class="design-discussion bordered-box position-relative">
+    <div
+      class="design-discussion bordered-box position-relative"
+      data-qa-selector="design_discussion_content"
+    >
       <design-note v-for="note in discussion.notes" :key="note.id" :note="note" />
       <div class="reply-wrapper">
         <reply-placeholder

ee/app/assets/javascripts/design_management/components/design_notes/design_note.vue

@@ -51,6 +51,6 @@ export default {
         </span>
       </template>
     </span>
-    <div class="note-text md" v-html="note.bodyHtml"></div>
+    <div class="note-text md" data-qa-selector="note_content" v-html="note.bodyHtml"></div>
   </timeline-entry-item>
 </template>

ee/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue

@@ -50,10 +50,10 @@ export default {
         slot="textarea"
         ref="textarea"
         :value="value"
-        class="note-textarea js-gfm-input js-autosize markdown-area
-        qa-description-textarea"
+        class="note-textarea js-gfm-input js-autosize markdown-area"
         dir="auto"
         data-supports-quick-actions="false"
+        data-qa-selector="note_textarea"
         :aria-label="__('Description')"
         :placeholder="__('Write a comment…')"
         @input="$emit('input', $event.target.value)"
@@ -66,10 +66,10 @@ export default {
     <div class="note-form-actions">
       <button
         :disabled="!hasValue || isSaving"
-        class="btn btn-success js-comment-button js-comment-submit-button
-                    qa-comment-button"
+        class="btn btn-success js-comment-button js-comment-submit-button"
         type="submit"
         data-track-event="click_button"
+        data-qa-selector="save_comment_button"
         @click.prevent="$emit('submitForm')"
       >
         {{ __('Save comment') }}

ee/app/assets/javascripts/design_management/components/design_overlay.vue

@@ -54,6 +54,7 @@ export default {
     <button
       type="button"
       class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
+      data-qa-selector="design_image"
       @click="clickedImage($event.offsetX, $event.offsetY)"
     ></button>
     <button

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -84,7 +84,7 @@ export default {
     </div>
     <div class="card-footer d-flex w-100">
       <div class="d-flex flex-column str-truncated-100">
-        <span class="bold str-truncated-100">{{ name }}</span>
+        <span class="bold str-truncated-100" data-qa-selector="design_file_name">{{ name }}</span>
         <span v-if="updatedAt" class="str-truncated-100">
           {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" />
         </span>

ee/app/views/projects/issues/_discussion.html.haml

@@ -5,7 +5,7 @@
         = _('Discussion')
         %span.badge.badge-pill.js-discussions-count
     %li
-      = link_to '#designs-tab', class: 'js-issue-tabs', id: 'designs', role: 'tab', 'aria-controls': 'js-designs', 'aria-selected': 'false', data: { toggle: 'tab', target: '#designs-tab' } do
+      = link_to '#designs-tab', class: 'js-issue-tabs', id: 'designs', role: 'tab', 'aria-controls': 'js-designs', 'aria-selected': 'false', data: { toggle: 'tab', target: '#designs-tab', qa_selector: 'designs_tab' } do
         = _('Designs')
         %span.badge.badge-pill.js-designs-count
   .tab-content

ee/spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -25,6 +25,7 @@ exports[`Design management list item component hides comment count 1`] = `
     >
       <span
         class="bold str-truncated-100"
+        data-qa-selector="design_file_name"
       >
         test
       </span>
@@ -85,6 +86,7 @@ exports[`Design management list item component renders item with correct status
     >
       <span
         class="bold str-truncated-100"
+        data-qa-selector="design_file_name"
       >
         test
       </span>
@@ -145,6 +147,7 @@ exports[`Design management list item component renders item with correct status
     >
       <span
         class="bold str-truncated-100"
+        data-qa-selector="design_file_name"
       >
         test
       </span>
@@ -205,6 +208,7 @@ exports[`Design management list item component renders item with correct status
     >
       <span
         class="bold str-truncated-100"
+        data-qa-selector="design_file_name"
       >
         test
       </span>
@@ -252,6 +256,7 @@ exports[`Design management list item component renders item with multiple commen
     >
       <span
         class="bold str-truncated-100"
+        data-qa-selector="design_file_name"
       >
         test
       </span>
@@ -317,6 +322,7 @@ exports[`Design management list item component renders item with no status icon
     >
       <span
         class="bold str-truncated-100"
+        data-qa-selector="design_file_name"
       >
         test
       </span>
@@ -364,6 +370,7 @@ exports[`Design management list item component renders item with single comment
     >
       <span
         class="bold str-truncated-100"
+        data-qa-selector="design_file_name"
       >
         test
       </span>

qa/qa/ee.rb

@@ -13,6 +13,8 @@ module QA
 
     module Page
       module Component
+        autoload :DesignManagement, 'qa/ee/page/component/design_management'
+
         module WebIDE
           autoload :WebTerminalPanel, 'qa/ee/page/component/web_ide/web_terminal_panel'
         end

qa/qa/ee/page/component/design_management.rb

+# frozen_string_literal: true
+
+module QA
+  module EE
+    module Page
+      module Component
+        module DesignManagement
+          def self.prepended(page)
+            page.module_eval do
+              view 'ee/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue' do
+                element :design_discussion_content
+              end
+
+              view 'ee/app/assets/javascripts/design_management/components/design_notes/design_note.vue' do
+                element :note_content
+              end
+
+              view 'ee/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue' do
+                element :note_textarea
+                element :save_comment_button
+              end
+
+              view 'ee/app/assets/javascripts/design_management/components/design_overlay.vue' do
+                element :design_image
+              end
+
+              view 'ee/app/assets/javascripts/design_management/components/list/item.vue' do
+                element :design_file_name
+              end
+            end
+          end
+
+          def add_annotation(note)
+            click_element(:design_image)
+            fill_element(:note_textarea, note)
+            click_element(:save_comment_button)
+
+            # It takes a moment for the annotation to be saved.
+            # We'll check for the annotation in a test, but here we'll at least
+            # wait for the "Save comment" button to disappear
+            saved = has_no_element?(:save_comment_button)
+
+            raise ExpectationNotMet, %q(There was a problem while adding the annotation) unless saved
+          end
+
+          def add_design(design_file_path)
+            # `attach_file` doesn't seem able to find element via data attributes.
+            # It accepts a `class:` option, but that only works for class attributes
+            # It doesn't work as a CSS selector.
+            # So instead we use the name attribute as a locator
+            page.attach_file("design_file", design_file_path, make_visible: { display: 'block' })
+
+            filename = ::File.basename(design_file_path)
+
+            found = wait(reload: false) do
+              has_element?(:design_file_name, text: filename)
+            end
+
+            raise ElementNotFound, %Q(Attempted to attach design "#{filename}" but it did not appear) unless found
+          end
+
+          def click_design(filename)
+            click_element(:design_file_name, text: filename)
+          end
+
+          def has_annotation?(note)
+            within_element_by_index(:design_discussion_content, 0) do
+              has_element?(:note_content, text: note)
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -6,6 +6,8 @@ module QA
       module Project
         module Issue
           module Show
+            include Page::Component::DesignManagement
+
             def self.prepended(page)
               page.module_eval do
                 view 'ee/app/assets/javascripts/related_issues/components/related_issues_block.vue' do
@@ -19,9 +21,17 @@ module QA
                   element :weight_input_field
                   element :weight_no_value_content
                 end
+
+                view 'ee/app/views/projects/issues/_discussion.html.haml' do
+                  element :designs_tab
+                end
               end
             end
 
+            def click_designs_tab
+              click_element(:designs_tab)
+            end
+
             def click_remove_weight_link
               click_element(:remove_weight_link)
             end

qa/qa/page/base.rb

@@ -94,8 +94,8 @@ module QA
       end
 
       # replace with (..., page = self.class)
-      def click_element(name, page = nil)
-        find_element(name).click
+      def click_element(name, page = nil, text: nil)
+        find_element(name, text: nil).click
         page.validate_elements_present! if page
       end
 

qa/qa/resource/issue.rb

 # frozen_string_literal: true
 
+require 'securerandom'
+
 module QA
   module Resource
     class Issue < Base
@@ -20,6 +22,7 @@ module QA
       def initialize
         @assignee_ids = []
         @labels = []
+        @title = "Issue title #{SecureRandom.hex(8)}"
       end
 
       def fabricate!
@@ -27,10 +30,10 @@ module QA
 
         Page::Project::Show.perform(&:go_to_new_issue)
 
-        Page::Project::Issue::New.perform do |page| # rubocop:disable QA/AmbiguousPageObjectName
-          page.add_title(@title)
-          page.add_description(@description)
-          page.create_new_issue
+        Page::Project::Issue::New.perform do |new_page|
+          new_page.add_title(@title)
+          new_page.add_description(@description)
+          new_page.create_new_issue
         end
       end
 

qa/qa/specs/features/ee/browser_ui/3_create/design_management_spec.rb

+# frozen_string_literal: true
+
+module QA
+  context 'Create' do
+    describe 'Design management' do
+      let(:issue) { Resource::Issue.fabricate_via_api! }
+      let(:design_filename) { 'banana_sample.gif' }
+      let(:design) { File.absolute_path(File.join('spec', 'fixtures', design_filename)) }
+      let(:annotation) { "This design is great!" }
+
+      before do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.perform(&:sign_in_using_credentials)
+      end
+
+      it 'user adds a design and annotation' do
+        issue.visit!
+
+        Page::Project::Issue::Show.perform do |show|
+          show.click_designs_tab
+          show.add_design(design)
+          show.click_design(design_filename)
+          show.add_annotation(annotation)
+
+          expect(show).to have_annotation(annotation)
+        end
+      end
+    end
+  end
+end

qa/qa/support/page/logging.rb

@@ -59,9 +59,10 @@ module QA
           elements
         end
 
-        def click_element(name, page = nil)
+        def click_element(name, page = nil, **kwargs)
           msg = ["clicking :#{name}"]
           msg << ", expecting to be at #{page.class}" if page
+          msg << "with args #{kwargs}"
 
           log(msg.compact.join(' '))