E2E for Content Editor in Wiki

See https://gitlab.com/gitlab-org/quality/testcases/-/issues/1861

app/assets/javascripts/content_editor/components/content_editor.vue

@@ -93,7 +93,12 @@ export default {
     <div>
       <editor-state-observer @docUpdate="notifyChange" @focus="focus" @blur="blur" />
       <content-editor-error />
-      <div data-testid="content-editor" class="md-area" :class="{ 'is-focused': focused }">
+      <div
+        data-testid="content-editor"
+        data-qa-selector="content_editor_container"
+        class="md-area"
+        :class="{ 'is-focused': focused }"
+      >
         <top-toolbar ref="toolbar" class="gl-mb-4" />
         <formatting-bubble-menu />
         <div v-if="isLoadingContent" class="gl-w-full gl-display-flex gl-justify-content-center">

app/assets/javascripts/content_editor/components/toolbar_image_button.vue

@@ -98,6 +98,7 @@ export default {
       name="content_editor_image"
       :accept="$options.acceptedMimes"
       class="gl-display-none"
+      data-qa-selector="file_upload_field"
       @change="onFileSelect"
     />
   </gl-dropdown>

app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue

@@ -61,6 +61,7 @@ export default {
     <gl-dropdown
       v-gl-tooltip="$options.i18n.placeholder"
       size="small"
+      data-qa-selector="text_style_dropdown"
       :disabled="!activeItem"
       :text="activeItemLabel"
     >
@@ -69,6 +70,8 @@ export default {
         :key="index"
         is-check-item
         :is-checked="isActive(item)"
+        data-qa-selector="text_style_menu_item"
+        :data-qa-text-style="item.label"
         @click="execute(item)"
       >
         {{ item.label }}

app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue

@@ -397,6 +397,7 @@ export default {
           v-if="showContentEditorAlert"
           class="gl-mb-6"
           variant="info"
+          data-qa-selector="try_new_editor_container"
           :primary-button-text="$options.i18n.contentEditor.useNewEditor.primaryLabel"
           :secondary-button-text="$options.i18n.contentEditor.useNewEditor.secondaryLabel"
           :dismiss-label="$options.i18n.contentEditor.useNewEditor.secondaryLabel"

qa/qa.rb

@@ -544,6 +544,7 @@ module QA
       autoload :AccessTokens, 'qa/page/component/access_tokens'
       autoload :CommitModal, 'qa/page/component/commit_modal'
       autoload :VisibilitySetting, 'qa/page/component/visibility_setting'
+      autoload :ContentEditor, 'qa/page/component/content_editor'
 
       module Import
         autoload :Gitlab, 'qa/page/component/import/gitlab'

qa/qa/page/component/content_editor.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module ContentEditor
+        extend QA::Page::PageConcern
+
+        def self.included(base)
+          super
+
+          base.view 'app/assets/javascripts/content_editor/components/content_editor.vue' do
+            element :content_editor_container
+          end
+
+          base.view 'app/assets/javascripts/content_editor/components/toolbar_text_style_dropdown.vue' do
+            element :text_style_dropdown
+            element :text_style_menu_item
+          end
+
+          base.view 'app/assets/javascripts/content_editor/components/toolbar_image_button.vue' do
+            element :file_upload_field
+          end
+        end
+
+        def add_heading(heading, text)
+          within_element(:content_editor_container) do
+            text_area.set(text)
+            # wait for text style option to become active after typing
+            has_active_element?(:text_style_dropdown, wait: 1)
+            click_element(:text_style_dropdown)
+            within_element(:text_style_dropdown) do
+              click_element(:text_style_menu_item, text_style: heading)
+            end
+          end
+        end
+
+        def upload_image(image_path)
+          within_element(:content_editor_container) do
+            # add image on a new line
+            text_area.send_keys(:return)
+            find_element(:file_upload_field, visible: false).send_keys(image_path)
+          end
+        end
+
+        private
+
+        def text_area
+          find('[contenteditable="true"]', visible: false)
+        end
+      end
+    end
+  end
+end

qa/qa/page/component/wiki.rb

@@ -68,6 +68,18 @@ module QA
         def has_no_page?
           has_element?(:create_first_page_link)
         end
+
+        def has_heading?(heading_type, text)
+          within_element(:wiki_page_content) do
+            has_css?(heading_type, text: text)
+          end
+        end
+
+        def has_image?(image_file_name)
+          within_element(:wiki_page_content) do
+            has_css?("img[src$='#{image_file_name}']")
+          end
+        end
       end
     end
   end

qa/qa/page/component/wiki_page_form.rb

@@ -14,6 +14,7 @@ module QA
             element :wiki_content_textarea
             element :wiki_message_textbox
             element :wiki_submit_button
+            element :try_new_editor_container
           end
 
           base.view 'app/assets/javascripts/pages/shared/wikis/components/delete_wiki_modal.vue' do
@@ -41,6 +42,12 @@ module QA
           click_element(:delete_button, Page::Modal::DeleteWiki)
           Page::Modal::DeleteWiki.perform(&:confirm_deletion)
         end
+
+        def use_new_editor
+          within_element(:try_new_editor_container) do
+            click_button('Use the new editor')
+          end
+        end
       end
     end
   end

qa/qa/page/project/wiki/edit.rb

@@ -7,6 +7,7 @@ module QA
         class Edit < Base
           include Page::Component::WikiPageForm
           include Page::Component::WikiSidebar
+          include Page::Component::ContentEditor
         end
       end
     end

qa/qa/specs/features/browser_ui/3_create/wiki/content_editor_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Create' do
+    context 'Content Editor' do
+      let(:initial_wiki) { Resource::Wiki::ProjectPage.fabricate_via_api! }
+      let(:page_title) { 'Content Editor Page' }
+      let(:heading_text) { 'My New Heading' }
+      let(:image_file_name) { 'testfile.png' }
+
+      before do
+        Flow::Login.sign_in
+      end
+
+      after do
+        initial_wiki.project.remove_via_api!
+      end
+
+      it 'creates a formatted Wiki page with an image uploaded', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/1861' do
+        initial_wiki.visit!
+
+        Page::Project::Wiki::Show.perform(&:click_new_page)
+
+        Page::Project::Wiki::Edit.perform do |edit|
+          edit.set_title(page_title)
+          edit.use_new_editor
+          edit.add_heading('Heading 1', heading_text)
+          edit.upload_image(File.absolute_path(File.join('qa', 'fixtures', 'designs', image_file_name)))
+        end
+
+        Page::Project::Wiki::Edit.perform(&:click_submit)
+
+        Page::Project::Wiki::Show.perform do |wiki|
+          aggregate_failures 'page shows expected content' do
+            expect(wiki).to have_title(page_title)
+            expect(wiki).to have_heading('h1', heading_text)
+            expect(wiki).to have_image(image_file_name)
+          end
+        end
+      end
+    end
+  end
+end