Merge branch '207239-snippet-vueified-by-default' into 'master'

Enable snippets_edit_vue by default

See merge request gitlab-org/gitlab!42412

app/views/shared/snippets/_form.html.haml

-- if Feature.enabled?(:snippets_edit_vue)
+- if Feature.enabled?(:snippets_edit_vue, default_enabled: true)
   - available_visibility_levels = available_visibility_levels(@snippet)
   #js-snippet-edit.snippet-form{ data: {'project_path': @snippet.project&.full_path, 'snippet-gid': @snippet.new_record? ? '' : @snippet.to_global_id, 'markdown-preview-path': preview_markdown_path(parent), 'markdown-docs-path': help_page_path('user/markdown'), 'visibility-help-link': help_page_path("public_access/public_access"), 'visibility_levels': available_visibility_levels, 'selected_level': snippets_selected_visibility_level(available_visibility_levels, @snippet.visibility_level), 'multiple_levels_restricted': multiple_visibility_levels_restricted? } }
 - else

changelogs/unreleased/207239-snippet-vueified-by-default.yml

+---
+title: Refactored snippets edit form to Vue
+merge_request: 42412
+author:
+type: changed

config/feature_flags/development/snippets_edit_vue.yml

 ---
 name: snippets_edit_vue
-introduced_by_url: 
-rollout_issue_url: 
-group: 
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/25667
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/207239
+group: group::editor
 type: development
-default_enabled: false
+default_enabled: true

doc/api/graphql/reference/gitlab_schema.json

@@ -44259,59 +44259,6 @@
               },
               "isDeprecated": false,
               "deprecationReason": null
-            },
-            {
-              "name": "variables",
-              "description": "List of supported variables",
-              "args": [
-                {
-                  "name": "after",
-                  "description": "Returns the elements in the list that come after the specified cursor.",
-                  "type": {
-                    "kind": "SCALAR",
-                    "name": "String",
-                    "ofType": null
-                  },
-                  "defaultValue": null
-                },
-                {
-                  "name": "before",
-                  "description": "Returns the elements in the list that come before the specified cursor.",
-                  "type": {
-                    "kind": "SCALAR",
-                    "name": "String",
-                    "ofType": null
-                  },
-                  "defaultValue": null
-                },
-                {
-                  "name": "first",
-                  "description": "Returns the first _n_ elements from the list.",
-                  "type": {
-                    "kind": "SCALAR",
-                    "name": "Int",
-                    "ofType": null
-                  },
-                  "defaultValue": null
-                },
-                {
-                  "name": "last",
-                  "description": "Returns the last _n_ elements from the list.",
-                  "type": {
-                    "kind": "SCALAR",
-                    "name": "Int",
-                    "ofType": null
-                  },
-                  "defaultValue": null
-                }
-              ],
-              "type": {
-                "kind": "OBJECT",
-                "name": "SastCiConfigurationEntityConnection",
-                "ofType": null
-              },
-              "isDeprecated": false,
-              "deprecationReason": null
             }
           ],
           "inputFields": null,
@@ -44379,6 +44326,59 @@
               },
               "isDeprecated": false,
               "deprecationReason": null
+            },
+            {
+              "name": "variables",
+              "description": "List of supported variables",
+              "args": [
+                {
+                  "name": "after",
+                  "description": "Returns the elements in the list that come after the specified cursor.",
+                  "type": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  },
+                  "defaultValue": null
+                },
+                {
+                  "name": "before",
+                  "description": "Returns the elements in the list that come before the specified cursor.",
+                  "type": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  },
+                  "defaultValue": null
+                },
+                {
+                  "name": "first",
+                  "description": "Returns the first _n_ elements from the list.",
+                  "type": {
+                    "kind": "SCALAR",
+                    "name": "Int",
+                    "ofType": null
+                  },
+                  "defaultValue": null
+                },
+                {
+                  "name": "last",
+                  "description": "Returns the last _n_ elements from the list.",
+                  "type": {
+                    "kind": "SCALAR",
+                    "name": "Int",
+                    "ofType": null
+                  },
+                  "defaultValue": null
+                }
+              ],
+              "type": {
+                "kind": "OBJECT",
+                "name": "SastCiConfigurationEntityConnection",
+                "ofType": null
+              },
+              "isDeprecated": false,
+              "deprecationReason": null
             }
           ],
           "inputFields": null,

lib/gitlab/gon_helper.rb

@@ -46,7 +46,7 @@ module Gitlab
       push_frontend_feature_flag(:snippets_vue, default_enabled: true)
       push_frontend_feature_flag(:monaco_blobs, default_enabled: true)
       push_frontend_feature_flag(:monaco_ci, default_enabled: false)
-      push_frontend_feature_flag(:snippets_edit_vue, default_enabled: false)
+      push_frontend_feature_flag(:snippets_edit_vue, default_enabled: true)
       push_frontend_feature_flag(:webperf_experiment, default_enabled: false)
       push_frontend_feature_flag(:snippets_binary_blob, default_enabled: false)
 

spec/features/projects/snippets/create_snippet_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Projects > Snippets > Create Snippet', :js do
   include DropzoneHelper
+  include Spec::Support::Helpers::Features::SnippetSpecHelpers
 
   let_it_be(:user) { create(:user) }
   let_it_be(:project) do
@@ -16,96 +17,115 @@ RSpec.describe 'Projects > Snippets > Create Snippet', :js do
   let(:file_content) { 'Hello World!' }
   let(:md_description) { 'My Snippet **Description**' }
   let(:description) { 'My Snippet Description' }
+  let(:snippet_title_field) { 'project_snippet_title' }
 
-  before do
-    stub_feature_flags(snippets_vue: false)
-    stub_feature_flags(snippets_edit_vue: false)
+  shared_examples 'snippet creation' do
+    def fill_form
+      snippet_fill_in_form(title: title, content: file_content, description: md_description)
+    end
 
-    sign_in(user)
+    it 'shows collapsible description input' do
+      collapsed = description_field
 
-    visit new_project_snippet_path(project)
-  end
+      expect(page).not_to have_field(snippet_description_field)
+      expect(collapsed).to be_visible
 
-  def description_field
-    find('.js-description-input').find('input,textarea')
-  end
+      collapsed.click
 
-  def fill_form
-    fill_in 'project_snippet_title', with: title
+      expect(page).to have_field(snippet_description_field)
+      expect(collapsed).not_to be_visible
+    end
 
-    # Click placeholder first to expand full description field
-    description_field.click
-    fill_in 'project_snippet_description', with: md_description
+    it 'creates a new snippet' do
+      fill_form
+      click_button('Create snippet')
+      wait_for_requests
 
-    page.within('.file-editor') do
-      el = find('.inputarea')
-      el.send_keys file_content
+      expect(page).to have_content(title)
+      expect(page).to have_content(file_content)
+      page.within(snippet_description_view_selector) do
+        expect(page).to have_content(description)
+        expect(page).to have_selector('strong')
+      end
     end
-  end
 
-  it 'shows collapsible description input' do
-    collapsed = description_field
+    it 'uploads a file when dragging into textarea' do
+      fill_form
+      dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
 
-    expect(page).not_to have_field('project_snippet_description')
-    expect(collapsed).to be_visible
+      expect(snippet_description_value).to have_content('banana_sample')
 
-    collapsed.click
+      click_button('Create snippet')
+      wait_for_requests
 
-    expect(page).to have_field('project_snippet_description')
-    expect(collapsed).not_to be_visible
-  end
+      link = find('a.no-attachment-icon img[alt="banana_sample"]')['src']
+      expect(link).to match(%r{/#{Regexp.escape(project.full_path)}/uploads/\h{32}/banana_sample\.gif\z})
+    end
+
+    context 'when the git operation fails' do
+      let(:error) { 'Error creating the snippet' }
 
-  it 'creates a new snippet' do
-    fill_form
-    click_button('Create snippet')
-    wait_for_requests
+      before do
+        allow_next_instance_of(Snippets::CreateService) do |instance|
+          allow(instance).to receive(:create_commit).and_raise(StandardError, error)
+        end
 
-    expect(page).to have_content(title)
-    expect(page).to have_content(file_content)
-    page.within('.snippet-header .description') do
-      expect(page).to have_content(description)
-      expect(page).to have_selector('strong')
+        fill_form
+
+        click_button('Create snippet')
+        wait_for_requests
+      end
+
+      it 'renders the new page and displays the error' do
+        expect(page).to have_content(error)
+        expect(page).to have_content('New Snippet')
+      end
     end
   end
 
-  it 'uploads a file when dragging into textarea' do
-    fill_form
-    dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
+  context 'Vue application' do
+    let(:snippet_description_field) { 'snippet-description' }
+    let(:snippet_description_view_selector) { '.snippet-header .snippet-description' }
 
-    expect(page.find_field('project_snippet_description').value).to have_content('banana_sample')
+    before do
+      sign_in(user)
+
+      visit new_project_snippet_path(project)
+    end
 
-    click_button('Create snippet')
-    wait_for_requests
+    it_behaves_like 'snippet creation'
 
-    link = find('a.no-attachment-icon img[alt="banana_sample"]')['src']
-    expect(link).to match(%r{/#{Regexp.escape(project.full_path)}/uploads/\h{32}/banana_sample\.gif\z})
-  end
+    it 'does not allow submitting the form without title and content' do
+      fill_in snippet_title_field, with: title
 
-  it 'displays validation errors' do
-    fill_in 'project_snippet_title', with: title
-    click_button('Create snippet')
-    wait_for_requests
+      expect(page).not_to have_button('Create snippet')
 
-    expect(page).to have_selector('#error_explanation')
+      snippet_fill_in_form(title: title, content: file_content)
+      expect(page).to have_button('Create snippet')
+    end
   end
 
-  context 'when the git operation fails' do
-    let(:error) { 'Error creating the snippet' }
+  context 'non-Vue application' do
+    let(:snippet_description_field) { 'project_snippet_description' }
+    let(:snippet_description_view_selector) { '.snippet-header .description' }
 
     before do
-      allow_next_instance_of(Snippets::CreateService) do |instance|
-        allow(instance).to receive(:create_commit).and_raise(StandardError, error)
-      end
+      stub_feature_flags(snippets_vue: false)
+      stub_feature_flags(snippets_edit_vue: false)
 
-      fill_form
+      sign_in(user)
 
+      visit new_project_snippet_path(project)
+    end
+
+    it_behaves_like 'snippet creation'
+
+    it 'displays validation errors' do
+      fill_in snippet_title_field, with: title
       click_button('Create snippet')
       wait_for_requests
-    end
 
-    it 'renders the new page and displays the error' do
-      expect(page).to have_content(error)
-      expect(page).to have_content('New Snippet')
+      expect(page).to have_selector('#error_explanation')
     end
   end
 end

spec/features/projects/snippets/user_updates_snippet_spec.rb

@@ -3,57 +3,81 @@
 require 'spec_helper'
 
 RSpec.describe 'Projects > Snippets > User updates a snippet', :js do
+  include Spec::Support::Helpers::Features::SnippetSpecHelpers
+
   let_it_be(:user) { create(:user) }
   let_it_be(:project) { create(:project, namespace: user.namespace) }
   let_it_be(:snippet, reload: true) { create(:project_snippet, :repository, project: project, author: user) }
 
-  before do
-    stub_feature_flags(snippets_vue: false)
-    stub_feature_flags(snippets_edit_vue: false)
+  let(:snippet_title_field) { 'project_snippet_title' }
 
+  def bootstrap_snippet
     project.add_maintainer(user)
     sign_in(user)
 
-    visit(project_snippet_path(project, snippet))
+    page.visit(edit_project_snippet_path(project, snippet))
 
-    page.within('.detail-page-header') do
-      first(:link, 'Edit').click
-    end
     wait_for_all_requests
   end
 
-  it 'displays the snippet blob path and content' do
-    blob = snippet.blobs.first
+  shared_examples 'snippet update' do
+    it 'displays the snippet blob path and content' do
+      blob = snippet.blobs.first
 
-    aggregate_failures do
-      expect(page.find_field('project_snippet_file_name').value).to eq blob.path
-      expect(page.find('.file-content')).to have_content(blob.data.strip)
-      expect(page.find('.snippet-file-content', visible: false).value).to eq blob.data
+      aggregate_failures do
+        expect(snippet_get_first_blob_path).to eq blob.path
+        expect(snippet_get_first_blob_value).to have_content(blob.data.strip)
+      end
     end
-  end
 
-  it 'updates a snippet' do
-    fill_in('project_snippet_title', with: 'Snippet new title')
-    click_button('Save')
+    it 'updates a snippet' do
+      fill_in('project_snippet_title', with: 'Snippet new title')
+      click_button('Save')
+
+      expect(page).to have_content('Snippet new title')
+    end
+
+    context 'when the git operation fails' do
+      before do
+        allow_next_instance_of(Snippets::UpdateService) do |instance|
+          allow(instance).to receive(:create_commit).and_raise(StandardError, 'Error Message')
+        end
+
+        fill_in(snippet_title_field, with: 'Snippet new title')
+        fill_in(snippet_blob_path_field, match: :first, with: 'new_file_name')
+
+        click_button('Save')
+      end
 
-    expect(page).to have_content('Snippet new title')
+      it 'renders edit page and displays the error' do
+        expect(page.find('.flash-container')).to have_content('Error updating the snippet - Error Message')
+        expect(page).to have_content('Edit Snippet')
+      end
+    end
   end
 
-  context 'when the git operation fails' do
+  context 'Vue application' do
     before do
-      allow_next_instance_of(Snippets::UpdateService) do |instance|
-        allow(instance).to receive(:create_commit).and_raise(StandardError, 'Error Message')
-      end
+      bootstrap_snippet
+    end
 
-      fill_in('project_snippet_title', with: 'Snippet new title')
-      fill_in('project_snippet_file_name', with: 'new_file_name')
+    it_behaves_like 'snippet update' do
+      let(:snippet_blob_path_field) { 'snippet_file_name' }
+      let(:snippet_blob_content_selector) { '.file-content' }
+    end
+  end
 
-      click_button('Save')
+  context 'non-Vue application' do
+    before do
+      stub_feature_flags(snippets_vue: false)
+      stub_feature_flags(snippets_edit_vue: false)
+
+      bootstrap_snippet
     end
 
-    it 'renders edit page and displays the error' do
-      expect(page.find('.flash-container span').text).to eq('Error updating the snippet - Error Message')
-      expect(page).to have_content('Edit Snippet')
+    it_behaves_like 'snippet update' do
+      let(:snippet_blob_path_field) { 'project_snippet_file_name' }
+      let(:snippet_blob_content_selector) { '.file-content' }
     end
   end
 end

spec/features/snippets/spam_snippets_spec.rb

@@ -11,8 +11,6 @@ RSpec.shared_examples_for 'snippet editor' do
 
   before do
     stub_feature_flags(allow_possible_spam: false)
-    stub_feature_flags(snippets_vue: false)
-    stub_feature_flags(snippets_edit_vue: false)
     stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false')
 
     Gitlab::CurrentSettings.update!(
@@ -125,5 +123,20 @@ end
 RSpec.describe 'User creates snippet', :js do
   let_it_be(:user) { create(:user) }
 
-  it_behaves_like "snippet editor"
+  context 'Vue application' do
+    before do
+      stub_feature_flags(snippets_edit_vue: false)
+    end
+
+    it_behaves_like "snippet editor"
+  end
+
+  context 'non-Vue application' do
+    before do
+      stub_feature_flags(snippets_vue: false)
+      stub_feature_flags(snippets_edit_vue: false)
+    end
+
+    it_behaves_like "snippet editor"
+  end
 end

spec/features/snippets/user_creates_snippet_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'User creates snippet', :js do
   include DropzoneHelper
+  include Spec::Support::Helpers::Features::SnippetSpecHelpers
 
   let_it_be(:user) { create(:user) }
 
@@ -12,149 +13,163 @@ RSpec.describe 'User creates snippet', :js do
   let(:md_description) { 'My Snippet **Description**' }
   let(:description) { 'My Snippet Description' }
   let(:created_snippet) { Snippet.last }
-
-  before do
-    stub_feature_flags(snippets_vue: false)
-    stub_feature_flags(snippets_edit_vue: false)
-    sign_in(user)
-  end
+  let(:snippet_title_field) { 'personal_snippet_title' }
 
   def description_field
     find('.js-description-input').find('input,textarea')
   end
 
-  def fill_form
-    fill_in 'personal_snippet_title', with: title
-
-    # Click placeholder first to expand full description field
-    description_field.click
-    fill_in 'personal_snippet_description', with: md_description
-
-    page.within('.file-editor') do
-      el = find('.inputarea')
-      el.send_keys file_content
+  shared_examples 'snippet creation' do
+    def fill_form
+      snippet_fill_in_form(title: title, content: file_content, description: md_description)
     end
-  end
-
-  it 'Authenticated user creates a snippet' do
-    visit new_snippet_path
 
-    fill_form
+    it 'Authenticated user creates a snippet' do
+      fill_form
 
-    click_button('Create snippet')
-    wait_for_requests
+      click_button('Create snippet')
+      wait_for_requests
 
-    expect(page).to have_content(title)
-    page.within('.snippet-header .description') do
-      expect(page).to have_content(description)
-      expect(page).to have_selector('strong')
+      expect(page).to have_content(title)
+      page.within(snippet_description_view_selector) do
+        expect(page).to have_content(description)
+        expect(page).to have_selector('strong')
+      end
+      expect(page).to have_content(file_content)
     end
-    expect(page).to have_content(file_content)
-  end
 
-  it 'previews a snippet with file' do
-    visit new_snippet_path
+    it 'uploads a file when dragging into textarea' do
+      fill_form
+      dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
 
-    # Click placeholder first to expand full description field
-    description_field.click
-    fill_in 'personal_snippet_description', with: 'My Snippet'
-    dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
-    find('.js-md-preview-button').click
+      expect(snippet_description_value).to have_content('banana_sample')
 
-    page.within('#new_personal_snippet .md-preview-holder') do
-      expect(page).to have_content('My Snippet')
+      click_button('Create snippet')
+      wait_for_requests
 
       link = find('a.no-attachment-icon img.js-lazy-loaded[alt="banana_sample"]')['src']
-      expect(link).to match(%r{/uploads/-/system/user/#{user.id}/\h{32}/banana_sample\.gif\z})
+      expect(link).to match(%r{/uploads/-/system/personal_snippet/#{Snippet.last.id}/\h{32}/banana_sample\.gif\z})
 
-      # Adds a cache buster for checking if the image exists as Selenium is now handling the cached requests
-      # not anymore as requests when they come straight from memory cache.
       reqs = inspect_requests { visit("#{link}?ran=#{SecureRandom.base64(20)}") }
       expect(reqs.first.status_code).to eq(200)
     end
-  end
 
-  it 'uploads a file when dragging into textarea' do
-    visit new_snippet_path
+    context 'when the git operation fails' do
+      let(:error) { 'Error creating the snippet' }
 
-    fill_form
+      before do
+        allow_next_instance_of(Snippets::CreateService) do |instance|
+          allow(instance).to receive(:create_commit).and_raise(StandardError, error)
+        end
 
-    dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
+        fill_form
+        click_button('Create snippet')
+        wait_for_requests
+      end
+
+      it 'renders the new page and displays the error' do
+        expect(page).to have_content(error)
+        expect(page).to have_content('New Snippet')
 
-    expect(page.find_field("personal_snippet_description").value).to have_content('banana_sample')
+        action = find('form.snippet-form')['action']
+        expect(action).to include("/snippets")
+      end
+    end
 
-    click_button('Create snippet')
-    wait_for_requests
+    context 'when snippets default visibility level is restricted' do
+      before do
+        stub_application_setting(restricted_visibility_levels: [Gitlab::VisibilityLevel::PRIVATE],
+                                 default_snippet_visibility: Gitlab::VisibilityLevel::PRIVATE)
+      end
 
-    link = find('a.no-attachment-icon img.js-lazy-loaded[alt="banana_sample"]')['src']
-    expect(link).to match(%r{/uploads/-/system/personal_snippet/#{Snippet.last.id}/\h{32}/banana_sample\.gif\z})
+      it 'creates a snippet using the lowest available visibility level as default' do
+        visit new_snippet_path
 
-    reqs = inspect_requests { visit("#{link}?ran=#{SecureRandom.base64(20)}") }
-    expect(reqs.first.status_code).to eq(200)
-  end
+        fill_form
 
-  context 'when the git operation fails' do
-    let(:error) { 'Error creating the snippet' }
+        click_button('Create snippet')
+        wait_for_requests
 
-    before do
-      allow_next_instance_of(Snippets::CreateService) do |instance|
-        allow(instance).to receive(:create_commit).and_raise(StandardError, error)
+        expect(find('.blob-content')).to have_content(file_content)
+        expect(Snippet.last.visibility_level).to eq(Gitlab::VisibilityLevel::INTERNAL)
       end
+    end
 
-      visit new_snippet_path
+    it_behaves_like 'personal snippet with references' do
+      let(:container) { snippet_description_view_selector }
+      let(:md_description) { references }
 
-      fill_form
+      subject do
+        fill_form
+        click_button('Create snippet')
 
-      click_button('Create snippet')
-      wait_for_requests
+        wait_for_requests
+      end
     end
+  end
+
+  context 'Vue application' do
+    let(:snippet_description_field) { 'snippet-description' }
+    let(:snippet_description_view_selector) { '.snippet-header .snippet-description' }
 
-    it 'renders the new page and displays the error' do
-      expect(page).to have_content(error)
-      expect(page).to have_content('New Snippet')
+    before do
+      sign_in(user)
 
-      action = find('form.snippet-form')['action']
-      expect(action).to match(%r{/snippets\z})
+      visit new_snippet_path
     end
-  end
 
-  it 'validation fails for the first time' do
-    visit new_snippet_path
+    it_behaves_like 'snippet creation'
 
-    fill_in 'personal_snippet_title', with: title
-    click_button('Create snippet')
+    it 'validation fails for the first time' do
+      fill_in snippet_title_field, with: title
 
-    expect(page).to have_selector('#error_explanation')
+      expect(page).not_to have_button('Create snippet')
+
+      snippet_fill_in_form(title: title, content: file_content)
+      expect(page).to have_button('Create snippet')
+    end
   end
 
-  context 'when snippets default visibility level is restricted' do
+  context 'non-Vue application' do
+    let(:snippet_description_field) { 'personal_snippet_description' }
+    let(:snippet_description_view_selector) { '.snippet-header .description' }
+
     before do
-      stub_application_setting(restricted_visibility_levels: [Gitlab::VisibilityLevel::PRIVATE],
-                              default_snippet_visibility: Gitlab::VisibilityLevel::PRIVATE)
-    end
+      stub_feature_flags(snippets_vue: false)
+      stub_feature_flags(snippets_edit_vue: false)
+
+      sign_in(user)
 
-    it 'creates a snippet using the lowest available visibility level as default' do
       visit new_snippet_path
+    end
 
-      fill_form
+    it_behaves_like 'snippet creation'
 
+    it 'validation fails for the first time' do
+      fill_in snippet_title_field, with: title
       click_button('Create snippet')
-      wait_for_requests
 
-      expect(created_snippet.visibility_level).to eq(Gitlab::VisibilityLevel::INTERNAL)
+      expect(page).to have_selector('#error_explanation')
     end
-  end
 
-  it_behaves_like 'personal snippet with references' do
-    let(:container) { '.snippet-header .description' }
-    let(:md_description) { references }
+    it 'previews a snippet with file' do
+      # Click placeholder first to expand full description field
+      description_field.click
+      fill_in snippet_description_field, with: 'My Snippet'
+      dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
+      find('.js-md-preview-button').click
 
-    subject do
-      visit new_snippet_path
-      fill_form
-      click_button('Create snippet')
+      page.within('.md-preview-holder') do
+        expect(page).to have_content('My Snippet')
 
-      wait_for_requests
+        link = find('a.no-attachment-icon img.js-lazy-loaded[alt="banana_sample"]')['src']
+        expect(link).to match(%r{/uploads/-/system/user/#{user.id}/\h{32}/banana_sample\.gif\z})
+
+        # Adds a cache buster for checking if the image exists as Selenium is now handling the cached requests
+        # not anymore as requests when they come straight from memory cache.
+        reqs = inspect_requests { visit("#{link}?ran=#{SecureRandom.base64(20)}") }
+        expect(reqs.first.status_code).to eq(200)
+      end
     end
   end
 end

spec/features/snippets/user_edits_snippet_spec.rb

@@ -4,87 +4,114 @@ require 'spec_helper'
 
 RSpec.describe 'User edits snippet', :js do
   include DropzoneHelper
+  include Spec::Support::Helpers::Features::SnippetSpecHelpers
 
   let_it_be(:file_name) { 'test.rb' }
   let_it_be(:content) { 'puts "test"' }
   let_it_be(:user) { create(:user) }
   let_it_be(:snippet, reload: true) { create(:personal_snippet, :repository, :public, file_name: file_name, content: content, author: user) }
 
-  before do
-    stub_feature_flags(snippets_vue: false)
-    stub_feature_flags(snippets_edit_vue: false)
+  let(:snippet_title_field) { 'personal_snippet_title' }
 
-    sign_in(user)
+  shared_examples 'snippet editing' do
+    it 'displays the snippet blob path and content' do
+      blob = snippet.blobs.first
 
-    visit edit_snippet_path(snippet)
-    wait_for_all_requests
-  end
+      aggregate_failures do
+        expect(snippet_get_first_blob_path).to eq blob.path
+        expect(snippet_get_first_blob_value).to have_content(blob.data.strip)
+      end
+    end
 
-  it 'displays the snippet blob path and content' do
-    blob = snippet.blobs.first
+    it 'updates the snippet' do
+      fill_in snippet_title_field, with: 'New Snippet Title'
 
-    aggregate_failures do
-      expect(page.find_field('personal_snippet_file_name').value).to eq blob.path
-      expect(page.find('.file-content')).to have_content(blob.data.strip)
-      expect(page.find('.snippet-file-content', visible: false).value).to eq blob.data
+      click_button('Save changes')
+      wait_for_requests
+
+      expect(page).to have_content('New Snippet Title')
     end
-  end
 
-  it 'updates the snippet' do
-    fill_in 'personal_snippet_title', with: 'New Snippet Title'
+    it 'updates the snippet with files attached' do
+      dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
+      expect(snippet_description_value).to have_content('banana_sample')
 
-    click_button('Save changes')
-    wait_for_requests
+      click_button('Save changes')
+      wait_for_requests
 
-    expect(page).to have_content('New Snippet Title')
-  end
+      link = find('a.no-attachment-icon img:not(.lazy)[alt="banana_sample"]')['src']
+      expect(link).to match(%r{/uploads/-/system/personal_snippet/#{snippet.id}/\h{32}/banana_sample\.gif\z})
+    end
 
-  it 'updates the snippet with files attached' do
-    dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
-    expect(page.find_field('personal_snippet_description').value).to have_content('banana_sample')
+    it 'updates the snippet to make it internal' do
+      choose 'Internal'
 
-    click_button('Save changes')
-    wait_for_requests
+      click_button 'Save changes'
+      wait_for_requests
 
-    link = find('a.no-attachment-icon img:not(.lazy)[alt="banana_sample"]')['src']
-    expect(link).to match(%r{/uploads/-/system/personal_snippet/#{snippet.id}/\h{32}/banana_sample\.gif\z})
-  end
+      expect(page).to have_no_selector('[data-testid="lock-icon"]')
+      expect(page).to have_selector('[data-testid="shield-icon"]')
+    end
 
-  it 'updates the snippet to make it internal' do
-    choose 'Internal'
+    it 'updates the snippet to make it public' do
+      choose 'Public'
 
-    click_button 'Save changes'
-    wait_for_requests
+      click_button 'Save changes'
+      wait_for_requests
 
-    expect(page).to have_no_selector('[data-testid="lock-icon"]')
-    expect(page).to have_selector('[data-testid="shield-icon"]')
-  end
+      expect(page).to have_no_selector('[data-testid="lock-icon"]')
+      expect(page).to have_selector('[data-testid="earth-icon"]')
+    end
 
-  it 'updates the snippet to make it public' do
-    choose 'Public'
+    context 'when the git operation fails' do
+      before do
+        allow_next_instance_of(Snippets::UpdateService) do |instance|
+          allow(instance).to receive(:create_commit).and_raise(StandardError, 'Error Message')
+        end
 
-    click_button 'Save changes'
-    wait_for_requests
+        fill_in snippet_title_field, with: 'New Snippet Title'
+        fill_in snippet_blob_path_field, with: 'new_file_name', match: :first
 
-    expect(page).to have_no_selector('[data-testid="lock-icon"]')
-    expect(page).to have_selector('[data-testid="earth-icon"]')
-  end
+        click_button('Save changes')
+      end
 
-  context 'when the git operation fails' do
-    before do
-      allow_next_instance_of(Snippets::UpdateService) do |instance|
-        allow(instance).to receive(:create_commit).and_raise(StandardError, 'Error Message')
+      it 'renders edit page and displays the error' do
+        expect(page.find('.flash-container')).to have_content('Error updating the snippet - Error Message')
+        expect(page).to have_content('Edit Snippet')
       end
+    end
+  end
 
-      fill_in 'personal_snippet_title', with: 'New Snippet Title'
-      fill_in 'personal_snippet_file_name', with: 'new_file_name'
+  context 'Vue application' do
+    it_behaves_like 'snippet editing' do
+      let(:snippet_blob_path_field) { 'snippet_file_name' }
+      let(:snippet_blob_content_selector) { '.file-content' }
+      let(:snippet_description_field) { 'snippet-description' }
 
-      click_button('Save changes')
+      before do
+        sign_in(user)
+
+        visit edit_snippet_path(snippet)
+        wait_for_all_requests
+      end
     end
+  end
+
+  context 'non-Vue application' do
+    it_behaves_like 'snippet editing' do
+      let(:snippet_blob_path_field) { 'personal_snippet_file_name' }
+      let(:snippet_blob_content_selector) { '.file-content' }
+      let(:snippet_description_field) { 'personal_snippet_description' }
 
-    it 'renders edit page and displays the error' do
-      expect(page.find('.flash-container span').text).to eq('Error updating the snippet - Error Message')
-      expect(page).to have_content('Edit Snippet')
+      before do
+        stub_feature_flags(snippets_vue: false)
+        stub_feature_flags(snippets_edit_vue: false)
+
+        sign_in(user)
+
+        visit edit_snippet_path(snippet)
+        wait_for_all_requests
+      end
     end
   end
 end

spec/support/helpers/features/snippet_helpers.rb

+# frozen_string_literal: true
+
+# These helpers help you interact within the Editor Lite (single-file editor, snippets, etc.).
+#
+module Spec
+  module Support
+    module Helpers
+      module Features
+        module SnippetSpecHelpers
+          include ActionView::Helpers::JavaScriptHelper
+          include Spec::Support::Helpers::Features::EditorLiteSpecHelpers
+
+          def snippet_get_first_blob_path
+            page.find_field(snippet_blob_path_field, match: :first).value
+          end
+
+          def snippet_get_first_blob_value
+            page.find(snippet_blob_content_selector, match: :first)
+          end
+
+          def snippet_description_value
+            page.find_field(snippet_description_field).value
+          end
+
+          def snippet_fill_in_form(title:, content:, description: '')
+            # fill_in snippet_title_field, with: title
+            # editor_set_value(content)
+            fill_in snippet_title_field, with: title
+
+            if description
+              # Click placeholder first to expand full description field
+              description_field.click
+              fill_in snippet_description_field, with: description
+            end
+
+            page.within('.file-editor') do
+              el = find('.inputarea')
+              el.send_keys content
+            end
+          end
+
+          private
+
+          def description_field
+            find('.js-description-input').find('input,textarea')
+          end
+        end
+      end
+    end
+  end
+end