Adding selectors and test base

Adding all the needed selectors and the test base for
creating a design inside the issue. It is using a
manual approach since graphql is not ready.

app/assets/javascripts/design_management/components/delete_button.vue

@@ -63,7 +63,7 @@ export default {
     title: s__('DesignManagement|Are you sure you want to archive the selected designs?'),
     actionPrimary: {
       text: s__('DesignManagement|Archive designs'),
-      attributes: { variant: 'warning' },
+      attributes: { variant: 'warning', 'data-qa-selector': 'confirm_archiving_button' },
     },
     actionCancel: {
       text: __('Cancel'),

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

@@ -149,6 +149,7 @@ export default {
           :alt="filename"
           class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
           data-qa-selector="design_image"
+          :data-qa-filename="filename"
           @load="onImageLoad"
           @error="onImageError"
         />

app/assets/javascripts/design_management/pages/index.vue

@@ -351,6 +351,7 @@ export default {
               button-category="secondary"
               button-class="gl-mr-3"
               button-size="small"
+              data-qa-selector="archive_button"
               :loading="loading"
               :has-selected-designs="hasSelectedDesigns"
               @deleteSelectedDesigns="mutate()"
@@ -417,6 +418,8 @@ export default {
             :checked="isDesignSelected(design.filename)"
             type="checkbox"
             class="design-checkbox"
+            data-qa-selector="design_checkbox"
+            :data-qa-design="design.filename"
             @change="changeSelectedDesigns(design.filename)"
           />
         </li>
@@ -426,6 +429,7 @@ export default {
               :is-dragging-design="isDraggingDesign"
               :class="{ 'design-list-item design-list-item-new': !isDesignListEmpty }"
               :has-designs="hasDesigns"
+              data-qa-selector="design_dropzone_content"
               @change="onUploadDesign"
             />
           </li>

qa/qa.rb

@@ -91,6 +91,7 @@ module QA
     autoload :UserGPG, 'qa/resource/user_gpg'
     autoload :Visibility, 'qa/resource/visibility'
     autoload :ProjectSnippet, 'qa/resource/project_snippet'
+    autoload :Design, 'qa/resource/design'
 
     module KubernetesCluster
       autoload :Base, 'qa/resource/kubernetes_cluster/base'

qa/qa/page/component/design_management.rb

@@ -31,6 +31,16 @@ module QA
               element :design_file_name
               element :design_image
             end
+
+            view 'app/assets/javascripts/design_management/pages/index.vue' do
+              element :archive_button
+              element :design_checkbox
+              element :design_dropzone_content
+            end
+
+            view 'app/assets/javascripts/design_management/components/delete_button.vue' do
+              element :confirm_archiving_button
+            end
           end
         end
 
@@ -52,12 +62,14 @@ module QA
           # 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
+          within_element(:design_dropzone_content) do
             page.attach_file("design_file", design_file_path, make_visible: { display: 'block' })
+          end
 
           filename = ::File.basename(design_file_path)
 
           found = wait_until(reload: false, sleep_interval: 1) do
-            image = find_element(:design_image)
+            image = find_element(:design_image, filename: filename)
 
             has_element?(:design_file_name, text: filename) &&
               image["complete"] &&
@@ -71,11 +83,24 @@ module QA
           click_element(:design_file_name, text: filename)
         end
 
+        def select_design(filename)
+          click_element(:design_checkbox, design: filename)
+        end
+
+        def archive_selected_designs
+          click_element(:archive_button)
+          click_element(:confirm_archiving_button)
+        end
+
         def has_annotation?(note)
           within_element_by_index(:design_discussion_content, 0) do
             has_element?(:note_content, text: note)
           end
         end
+
+        def has_design?(filename)
+          has_element?(:design_file_name, text: filename)
+        end
       end
     end
   end

qa/qa/resource/design.rb

+# frozen_string_literal: true
+
+module QA
+  module Resource
+    class Design < Base
+      attribute :issue do
+        Issue.fabricate_via_api!
+      end
+
+      attribute :filepath do
+        ::File.absolute_path(::File.join('spec', 'fixtures', @filename))
+      end
+
+      attribute :id
+      attribute :filename
+
+      def initialize
+        @filename = 'banana_sample.gif'
+      end
+
+      # TODO This will be replaced as soon as file uploads over GraphQL are implemented
+      def fabricate!
+        issue.visit!
+
+        Page::Project::Issue::Show.perform do |issue|
+          issue.add_design(filepath)
+        end
+      end
+    end
+  end
+end

qa/qa/specs/features/browser_ui/3_create/design_management/archive_design_content_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create' do
+    context 'Design Management' do
+      let(:first_design) { Resource::Design.fabricate! }
+
+      let(:second_design) do
+        Resource::Design.fabricate! do |design|
+          design.issue = first_design.issue
+          design.filename = 'values.png'
+        end
+      end
+
+      let(:third_design) do
+        Resource::Design.fabricate! do |design|
+          design.issue = second_design.issue
+          design.filename = 'tanuki.jpg'
+        end
+      end
+
+      before do
+        Flow::Login.sign_in
+      end
+
+      it 'user archives a design', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/274' do
+        third_design.issue.visit!
+
+        Page::Project::Issue::Show.perform do |issue|
+          issue.select_design(third_design.filename)
+
+          issue.archive_selected_designs
+
+          expect(issue).not_to have_design(third_design.filename)
+          expect(issue).to have_design(first_design.filename)
+          expect(issue).to have_design(second_design.filename)
+        end
+
+        Page::Project::Issue::Show.perform do |issue|
+          issue.select_design(second_design.filename)
+          issue.select_design(first_design.filename)
+
+          issue.archive_selected_designs
+
+          expect(issue).not_to have_design(first_design.filename)
+          expect(issue).not_to have_design(second_design.filename)
+        end
+      end
+    end
+  end
+end

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

@@ -24,6 +24,7 @@ exports[`Design management list item component with notes renders item with mult
       <img
         alt="test"
         class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        data-qa-filename="test"
         data-qa-selector="design_image"
         src=""
       />
@@ -94,6 +95,7 @@ exports[`Design management list item component with notes renders item with sing
       <img
         alt="test"
         class="gl-display-block gl-mx-auto gl-max-w-full mh-100 design-img"
+        data-qa-filename="test"
         data-qa-selector="design_image"
         src=""
       />

spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -19,6 +19,7 @@ exports[`Design management index page designs does not render toolbar when there
       >
         <design-dropzone-stub
           class="design-list-item design-list-item-new"
+          data-qa-selector="design_dropzone_content"
           hasdesigns="true"
         />
       </li>
@@ -127,6 +128,7 @@ exports[`Design management index page designs renders designs list and header wi
             buttonclass="gl-mr-3"
             buttonsize="small"
             buttonvariant="warning"
+            data-qa-selector="archive_button"
           >
             
             Archive selected
@@ -151,6 +153,7 @@ exports[`Design management index page designs renders designs list and header wi
       >
         <design-dropzone-stub
           class="design-list-item design-list-item-new"
+          data-qa-selector="design_dropzone_content"
           hasdesigns="true"
         />
       </li>
@@ -172,6 +175,8 @@ exports[`Design management index page designs renders designs list and header wi
          
         <input
           class="design-checkbox"
+          data-qa-design="design-1-name"
+          data-qa-selector="design_checkbox"
           type="checkbox"
         />
       </li>
@@ -193,6 +198,8 @@ exports[`Design management index page designs renders designs list and header wi
          
         <input
           class="design-checkbox"
+          data-qa-design="design-2-name"
+          data-qa-selector="design_checkbox"
           type="checkbox"
         />
       </li>
@@ -214,6 +221,8 @@ exports[`Design management index page designs renders designs list and header wi
          
         <input
           class="design-checkbox"
+          data-qa-design="design-3-name"
+          data-qa-selector="design_checkbox"
           type="checkbox"
         />
       </li>
@@ -299,6 +308,7 @@ exports[`Design management index page when has no designs renders design dropzon
       >
         <design-dropzone-stub
           class=""
+          data-qa-selector="design_dropzone_content"
         />
       </li>
     </ol>