Merge pull request #8052 from mr-vinn/markdown-preview

Enable Markdown preview for issues, merge requests, milestones, and notes

app/assets/javascripts/markdown_area.js.coffee

@@ -24,6 +24,51 @@ $(document).ready ->
     "opacity": 0
     "display": "none"
 
+  # Preview button
+  $(document).off "click", ".js-md-preview-button"
+  $(document).on "click", ".js-md-preview-button", (e) ->
+    ###
+    Shows the Markdown preview.
+
+    Lets the server render GFM into Html and displays it.
+    ###
+    e.preventDefault()
+    form = $(this).closest("form")
+    # toggle tabs
+    form.find(".js-md-write-button").parent().removeClass "active"
+    form.find(".js-md-preview-button").parent().addClass "active"
+
+    # toggle content
+    form.find(".md-write-holder").hide()
+    form.find(".md-preview-holder").show()
+
+    preview = form.find(".js-md-preview")
+    mdText = form.find(".markdown-area").val()
+    if mdText.trim().length is 0
+      preview.text "Nothing to preview."
+    else
+      preview.text "Loading..."
+      $.get($(this).data("url"),
+        md_text: mdText
+      ).success (previewData) ->
+        preview.html previewData
+
+  # Write button
+  $(document).off "click", ".js-md-write-button"
+  $(document).on "click", ".js-md-write-button", (e) ->
+    ###
+    Shows the Markdown textarea.
+    ###
+    e.preventDefault()
+    form = $(this).closest("form")
+    # toggle tabs
+    form.find(".js-md-write-button").parent().addClass "active"
+    form.find(".js-md-preview-button").parent().removeClass "active"
+
+    # toggle content
+    form.find(".md-write-holder").show()
+    form.find(".md-preview-holder").hide()
+
   dropzone = $(".div-dropzone").dropzone(
     url: project_image_path_upload
     dictDefaultMessage: ""

app/assets/javascripts/notes.js.coffee

@@ -36,12 +36,6 @@ class @Notes
     # delete note attachment
     $(document).on "click", ".js-note-attachment-delete", @removeAttachment
 
-    # Preview button
-    $(document).on "click", ".js-note-preview-button", @previewNote
-
-    # Preview button
-    $(document).on "click", ".js-note-write-button", @writeNote
-
     # reset main target form after submit
     $(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm
 
@@ -77,8 +71,6 @@ class @Notes
     $(document).off "click", ".note-edit-cancel"
     $(document).off "click", ".js-note-delete"
     $(document).off "click", ".js-note-attachment-delete"
-    $(document).off "click", ".js-note-preview-button"
-    $(document).off "click", ".js-note-write-button"
     $(document).off "ajax:complete", ".js-main-target-form"
     $(document).off "click", ".js-choose-note-attachment-button"
     $(document).off "click", ".js-discussion-reply-button"
@@ -165,47 +157,6 @@ class @Notes
     # cleanup after successfully creating a diff/discussion note
     @removeDiscussionNoteForm(form)
 
-  ###
-  Shows write note textarea.
-  ###
-  writeNote: (e) ->
-    e.preventDefault()
-    form = $(this).closest("form")
-    # toggle tabs
-    form.find(".js-note-write-button").parent().addClass "active"
-    form.find(".js-note-preview-button").parent().removeClass "active"
-
-    # toggle content
-    form.find(".note-write-holder").show()
-    form.find(".note-preview-holder").hide()
-
-  ###
-  Shows the note preview.
-
-  Lets the server render GFM into Html and displays it.
-  ###
-  previewNote: (e) ->
-    e.preventDefault()
-    form = $(this).closest("form")
-    # toggle tabs
-    form.find(".js-note-write-button").parent().removeClass "active"
-    form.find(".js-note-preview-button").parent().addClass "active"
-
-    # toggle content
-    form.find(".note-write-holder").hide()
-    form.find(".note-preview-holder").show()
-
-    preview = form.find(".js-note-preview")
-    noteText = form.find(".js-note-text").val()
-    if noteText.trim().length is 0
-      preview.text "Nothing to preview."
-    else
-      preview.text "Loading..."
-      $.post($(this).data("url"),
-        note: noteText
-      ).success (previewData) ->
-        preview.html previewData
-
   ###
   Called in response the main target form has been successfully submitted.
 
@@ -220,7 +171,7 @@ class @Notes
     form.find(".js-errors").remove()
 
     # reset text and preview
-    form.find(".js-note-write-button").click()
+    form.find(".js-md-write-button").click()
     form.find(".js-note-text").val("").trigger "input"
 
   ###
@@ -270,8 +221,8 @@ class @Notes
     form.removeClass "js-new-note-form"
 
     # setup preview buttons
-    form.find(".js-note-write-button, .js-note-preview-button").tooltip placement: "left"
-    previewButton = form.find(".js-note-preview-button")
+    form.find(".js-md-write-button, .js-md-preview-button").tooltip placement: "left"
+    previewButton = form.find(".js-md-preview-button")
     form.find(".js-note-text").on "input", ->
       if $(this).val().trim() isnt ""
         previewButton.removeClass("turn-off").addClass "turn-on"

app/assets/stylesheets/generic/markdown_area.scss

@@ -50,3 +50,28 @@
   margin-bottom: 0;
   transition: opacity 200ms ease-in-out;
 }
+
+.md-preview-holder {
+  background: #FFF;
+  border: 1px solid #ddd;
+  min-height: 100px;
+  padding: 5px;
+  font-size: 14px;
+  box-shadow: none;
+}
+
+.new_note,
+.edit_note,
+.issuable-description,
+.milestone-description,
+.merge-request-form {
+  .nav-tabs {
+    margin-bottom: 0;
+    border: none;
+
+    li a,
+    li.active a {
+      border: 1px solid #DDD;
+    }
+  }
+}

app/assets/stylesheets/sections/notes.scss

@@ -227,7 +227,6 @@ ul.notes {
     margin-bottom: 0;
   }
 
-  .note-preview-holder,
   .note_text {
     background: #FFF;
     border: 1px solid #ddd;
@@ -246,15 +245,6 @@ ul.notes {
   .note_text {
     width: 100%;
   }
-  .nav-tabs {
-    margin-bottom: 0;
-    border: none;
-
-    li a,
-    li.active a {
-      border: 1px solid #DDD;
-    }
-  }
 }
 
 /* loading indicator */

app/controllers/projects/notes_controller.rb

@@ -61,10 +61,6 @@ class Projects::NotesController < Projects::ApplicationController
     end
   end
 
-  def preview
-    render text: view_context.markdown(params[:note])
-  end
-
   private
 
   def note

app/controllers/projects_controller.rb

@@ -147,6 +147,10 @@ class ProjectsController < ApplicationController
     render json: { star_count: @project.star_count }
   end
 
+  def markdown_preview
+    render text: view_context.markdown(params[:md_text])
+  end
+
   private
 
   def upload_path

app/views/projects/_issuable_form.html.haml

@@ -14,17 +14,20 @@
 .form-group.issuable-description
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10
-    = render 'projects/zen', f: f, attr: :description,
-                             classes: 'description form-control'
-    .col-sm-12.hint
-      .pull-left
-        Parsed with
-        #{link_to 'GitLab Flavored Markdown', help_page_path('markdown', 'markdown'), target: '_blank'}.
-      .pull-right
-        Attach images (JPG, PNG, GIF) by dragging & dropping
-        or #{link_to 'selecting them', '#', class: 'markdown-selector' }.
-    .clearfix
-    .error-alert
+
+    = render layout: 'projects/md_preview' do
+      = render 'projects/zen', f: f, attr: :description,
+                               classes: 'description form-control'
+      .col-sm-12.hint
+        .pull-left
+          Parsed with
+          #{link_to 'GitLab Flavored Markdown', help_page_path('markdown', 'markdown'), target: '_blank'}.
+        .pull-right
+          Attach images (JPG, PNG, GIF) by dragging & dropping
+          or #{link_to 'selecting them', '#', class: 'markdown-selector' }.
+
+      .clearfix
+      .error-alert
 %hr
 .form-group
   .issue-assignee

app/views/projects/_md_preview.html.haml

+%ul.nav.nav-tabs
+  %li.active
+    = link_to '#md-write-holder', class: 'js-md-write-button' do
+      Write
+  %li
+    = link_to '#md-preview-holder', class: 'js-md-preview-button',
+        data: { url: markdown_preview_project_path(@project) } do
+      Preview
+%div
+  .md-write-holder
+    = yield
+  .md-preview-holder.hide
+    .js-md-preview

app/views/projects/merge_requests/_new_submit.html.haml

@@ -21,12 +21,13 @@
       .form-group
         .light
           = f.label :description, "Description"
-        = render 'projects/zen', f: f, attr: :description,
-                                 classes: 'description form-control'
-        .clearfix.hint
-          .pull-left Description is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
-          .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
-        .error-alert
+        = render layout: 'projects/md_preview' do
+          = render 'projects/zen', f: f, attr: :description,
+                                   classes: 'description form-control'
+          .clearfix.hint
+            .pull-left Description is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
+            .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
+          .error-alert
       .form-group
         .issue-assignee
           = f.label :assignee_id do

app/views/projects/milestones/_form.html.haml

@@ -18,13 +18,14 @@
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: "form-control"
           %p.hint Required
-      .form-group
+      .form-group.milestone-description
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
-          = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
-          .hint
-            .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
-            .pull-left Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
+          = render layout: 'projects/md_preview' do
+            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
+            .hint
+              .pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
+              .pull-left Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
           .clearfix
           .error-alert
     .col-md-6

app/views/projects/notes/_form.html.haml

@@ -5,23 +5,13 @@
   = f.hidden_field :noteable_id
   = f.hidden_field :noteable_type
 
-  %ul.nav.nav-tabs
-    %li.active
-      = link_to '#note-write-holder', class: 'js-note-write-button' do
-        Write
-    %li
-      = link_to '#note-preview-holder', class: 'js-note-preview-button', data: { url: preview_project_notes_path(@project) } do
-        Preview
-  %div
-    .note-write-holder
-      = render 'projects/zen', f: f, attr: :note,
-                               classes: 'note_text js-note-text'
-      .light.clearfix
-        .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
-        .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
+  = render layout: 'projects/md_preview' do
+    = render 'projects/zen', f: f, attr: :note,
+                             classes: 'note_text js-note-text'
+    .light.clearfix
+      .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
+      .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
 
-    .note-preview-holder.hide
-      .js-note-preview
 
   .note-form-actions
     .buttons

app/views/projects/notes/_note.html.haml

@@ -40,7 +40,8 @@
 
         .note-edit-form
           = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
-            = f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on'
+            = render layout: 'projects/md_preview' do
+              = f.text_area :note, class: 'note_text js-note-text markdown-area js-gfm-input turn-on'
 
             .form-actions.clearfix
               = f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"

config/routes.rb

@@ -186,6 +186,7 @@ Gitlab::Application.routes.draw do
       post :unarchive
       post :upload_image
       post :toggle_star
+      get :markdown_preview
       get :autocomplete_sources
     end
 
@@ -329,10 +330,6 @@ Gitlab::Application.routes.draw do
         member do
           delete :delete_attachment
         end
-
-        collection do
-          post :preview
-        end
       end
     end
   end

features/project/commits/comments.feature

@@ -16,12 +16,12 @@ Feature: Project Commits Comments
   @javascript
   Scenario: I can't preview without text
     Given I haven't written any comment text
-    Then I should not see the comment preview button
+    Then The comment preview tab should say there is nothing to do
 
   @javascript
   Scenario: I can preview with text
-    Given I write a comment like "Nice"
-    Then I should see the comment preview button
+    Given I write a comment like ":+1: Nice"
+    Then The comment preview tab should be display rendered Markdown
 
   @javascript
   Scenario: I preview a comment
@@ -32,7 +32,7 @@ Feature: Project Commits Comments
   @javascript
   Scenario: I can edit after preview
     Given I preview a comment text like "Bug fixed :smile:"
-    Then I should see the comment edit button
+    Then I should see the comment write tab
 
   @javascript
   Scenario: I have a reset form after posting from preview

features/project/commits/diff_comments.feature

@@ -58,13 +58,13 @@ Feature: Project Commits Diff Comments
   Scenario: I can't preview without text
     Given I open a diff comment form
     And I haven't written any diff comment text
-    Then I should not see the diff comment preview button
+    Then The diff comment preview tab should say there is nothing to do
 
   @javascript
   Scenario: I can preview with text
     Given I open a diff comment form
     And I write a diff comment like ":-1: I don't like this"
-    Then I should see the diff comment preview button
+    Then The diff comment preview tab should display rendered Markdown
 
   @javascript
   Scenario: I preview a diff comment
@@ -75,7 +75,7 @@ Feature: Project Commits Diff Comments
   @javascript
   Scenario: I can edit after preview
     Given I preview a diff comment text like "Should fix it :smile:"
-    Then I should see the diff comment edit button
+    Then I should see the diff comment write tab
 
   @javascript
   Scenario: The form gets removed after posting

features/project/issues/issues.feature

@@ -159,3 +159,37 @@ Feature: Project Issues
     Given project "Shop" has "Tasks-closed" closed issue with task markdown
     When I visit issue page "Tasks-closed"
     Then Task checkboxes should be disabled
+
+  # Issue description preview
+
+  @javascript
+  Scenario: I can't preview without text
+    Given I click link "New Issue"
+    And I haven't written any description text
+    Then The Markdown preview tab should say there is nothing to do
+
+  @javascript
+  Scenario: I can preview with text
+    Given I click link "New Issue"
+    And I write a description like ":+1: Nice"
+    Then The Markdown preview tab should display rendered Markdown
+
+  @javascript
+  Scenario: I preview an issue description
+    Given I click link "New Issue"
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown preview
+    And I should not see the Markdown text field
+
+  @javascript
+  Scenario: I can edit after preview
+    Given I click link "New Issue"
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown write tab
+
+  @javascript
+  Scenario: I can preview when editing an existing issue
+    Given I click link "Release 0.4"
+    And I click link "Edit" for the issue
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown write tab

features/project/merge_requests.feature

@@ -187,3 +187,34 @@ Feature: Project Merge Requests
     And I visit merge request page "MR-task-open"
     And I click link "Close"
     Then Task checkboxes should be disabled
+
+  # Description preview
+
+  @javascript
+  Scenario: I can't preview without text
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit" for the merge request
+    And I haven't written any description text
+    Then The Markdown preview tab should say there is nothing to do
+
+  @javascript
+  Scenario: I can preview with text
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit" for the merge request
+    And I write a description like ":+1: Nice"
+    Then The Markdown preview tab should display rendered Markdown
+
+  @javascript
+  Scenario: I preview a merge request description
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit" for the merge request
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown preview
+    And I should not see the Markdown text field
+
+  @javascript
+  Scenario: I can edit after preview
+    Given I visit merge request page "Bug NS-04"
+    And I click link "Edit" for the merge request
+    And I preview a description text like "Bug fixed :smile:"
+    Then I should see the Markdown write tab

features/steps/project/issues/issues.rb

 class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
   include SharedAuthentication
+  include SharedIssuable
   include SharedProject
   include SharedNote
   include SharedPaths

features/steps/project/merge_requests.rb

 class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   include SharedAuthentication
+  include SharedIssuable
   include SharedProject
   include SharedNote
   include SharedPaths

features/steps/shared/diff_note.rb

@@ -32,7 +32,7 @@ module SharedDiffNote
     click_diff_line(sample_commit.line_code)
     within("#{diff_file_selector} form[rel$='#{sample_commit.line_code}']") do
       fill_in "note[note]", with: "Should fix it :smile:"
-      find(".js-note-preview-button").trigger("click")
+      find('.js-md-preview-button').click
     end
   end
 
@@ -41,7 +41,7 @@ module SharedDiffNote
 
     within("#{diff_file_selector} form[rel$='#{sample_commit.del_line_code}']") do
       fill_in "note[note]", with: "DRY this up"
-      find(".js-note-preview-button").trigger("click")
+      find('.js-md-preview-button').click
     end
   end
 
@@ -71,9 +71,10 @@ module SharedDiffNote
     end
   end
 
-  step 'I should not see the diff comment preview button' do
+  step 'The diff comment preview tab should say there is nothing to do' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-preview-button", visible: false)
+      find('.js-md-preview-button').click
+      expect(find('.js-md-preview')).to have_content('Nothing to preview.')
     end
   end
 
@@ -131,27 +132,28 @@ module SharedDiffNote
 
   step 'I should see the diff comment preview' do
     within("#{diff_file_selector} form") do
-      page.should have_css(".js-note-preview", visible: false)
+      expect(page).to have_css('.js-md-preview', visible: true)
     end
   end
 
-  step 'I should see the diff comment edit button' do
+  step 'I should see the diff comment write tab' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-write-button", visible: true)
+      expect(page).to have_css('.js-md-write-button', visible: true)
     end
   end
 
-  step 'I should see the diff comment preview button' do
+  step 'The diff comment preview tab should display rendered Markdown' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-preview-button", visible: true)
+      find('.js-md-preview-button').click
+      expect(find('.js-md-preview')).to have_css('img.emoji', visible: true)
     end
   end
 
   step 'I should see two separate previews' do
     within(diff_file_selector) do
-      page.should have_css(".js-note-preview", visible: true, count: 2)
-      page.should have_content("Should fix it")
-      page.should have_content("DRY this up")
+      expect(page).to have_css('.js-md-preview', visible: true, count: 2)
+      expect(page).to have_content('Should fix it')
+      expect(page).to have_content('DRY this up')
     end
   end
 

features/steps/shared/issuable.rb

+module SharedIssuable
+  include Spinach::DSL
+
+  def edit_issuable
+    find('.issue-btn-group').click_link 'Edit'
+  end
+
+  step 'I click link "Edit" for the merge request' do
+    edit_issuable
+  end
+
+  step 'I click link "Edit" for the issue' do
+    edit_issuable
+  end
+end

features/steps/shared/markdown.rb

@@ -54,4 +54,49 @@ EOT
       'div.description li.task-list-item input[type="checkbox"]:disabled'
     )
   end
+
+  step 'I should not see the Markdown preview' do
+    expect(find('.gfm-form .js-md-preview')).not_to be_visible
+  end
+
+  step 'The Markdown preview tab should say there is nothing to do' do
+    within('.gfm-form') do
+      find('.js-md-preview-button').click
+      expect(find('.js-md-preview')).to have_content('Nothing to preview.')
+    end
+  end
+
+  step 'I should not see the Markdown text field' do
+    expect(find('.gfm-form textarea')).not_to be_visible
+  end
+
+  step 'I should see the Markdown write tab' do
+    expect(find('.gfm-form')).to have_css('.js-md-write-button', visible: true)
+  end
+
+  step 'I should see the Markdown preview' do
+    expect(find('.gfm-form')).to have_css('.js-md-preview', visible: true)
+  end
+
+  step 'The Markdown preview tab should display rendered Markdown' do
+    within('.gfm-form') do
+      find('.js-md-preview-button').click
+      expect(find('.js-md-preview')).to have_css('img.emoji', visible: true)
+    end
+  end
+
+  step 'I write a description like ":+1: Nice"' do
+    find('.gfm-form').fill_in 'Description', with: ':+1: Nice'
+  end
+
+  step 'I preview a description text like "Bug fixed :smile:"' do
+    within('.gfm-form') do
+      fill_in 'Description', with: 'Bug fixed :smile:'
+      find('.js-md-preview-button').click
+    end
+  end
+
+  step 'I haven\'t written any description text' do
+    find('.gfm-form').fill_in 'Description', with: ''
+  end
 end

features/steps/shared/note.rb

@@ -23,7 +23,7 @@ module SharedNote
   step 'I preview a comment text like "Bug fixed :smile:"' do
     within(".js-main-target-form") do
       fill_in "note[note]", with: "Bug fixed :smile:"
-      find(".js-note-preview-button").trigger("click")
+      find('.js-md-preview-button').click
     end
   end
 
@@ -33,9 +33,9 @@ module SharedNote
     end
   end
 
-  step 'I write a comment like "Nice"' do
+  step 'I write a comment like ":+1: Nice"' do
     within(".js-main-target-form") do
-      fill_in "note[note]", with: "Nice"
+      fill_in 'note[note]', with: ':+1: Nice'
     end
   end
 
@@ -51,13 +51,14 @@ module SharedNote
 
   step 'I should not see the comment preview' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview", visible: false)
+      expect(find('.js-md-preview')).not_to be_visible
     end
   end
 
-  step 'I should not see the comment preview button' do
+  step 'The comment preview tab should say there is nothing to do' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview-button", visible: false)
+      find('.js-md-preview-button').click
+      expect(find('.js-md-preview')).to have_content('Nothing to preview.')
     end
   end
 
@@ -79,21 +80,22 @@ module SharedNote
     end
   end
 
-  step 'I should see the comment edit button' do
+  step 'I should see the comment write tab' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-write-button", visible: true)
+      expect(page).to have_css('.js-md-write-button', visible: true)
     end
   end
 
-  step 'I should see the comment preview' do
+  step 'The comment preview tab should be display rendered Markdown' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview", visible: true)
+      find('.js-md-preview-button').click
+      expect(find('.js-md-preview')).to have_css('img.emoji', visible: true)
     end
   end
 
-  step 'I should see the comment preview button' do
+  step 'I should see the comment preview' do
     within(".js-main-target-form") do
-      page.should have_css(".js-note-preview-button", visible: true)
+      expect(page).to have_css('.js-md-preview', visible: true)
     end
   end
 

spec/features/notes_on_merge_requests_spec.rb

@@ -19,8 +19,9 @@ describe 'Comments' do
       it 'should be valid' do
         should have_css(".js-main-target-form", visible: true, count: 1)
         find(".js-main-target-form input[type=submit]").value.should == "Add Comment"
-        within(".js-main-target-form") { should_not have_link("Cancel") }
-        within(".js-main-target-form") { should have_css(".js-note-preview-button", visible: false) }
+        within('.js-main-target-form') do
+          expect(page).not_to have_link('Cancel')
+        end
       end
 
       describe "with text" do
@@ -31,8 +32,10 @@ describe 'Comments' do
         end
 
         it 'should have enable submit button and preview button' do
-          within(".js-main-target-form") { should_not have_css(".js-comment-button[disabled]") }
-          within(".js-main-target-form") { should have_css(".js-note-preview-button", visible: true) }
+          within('.js-main-target-form') do
+            expect(page).not_to have_css('.js-comment-button[disabled]')
+            expect(page).to have_css('.js-md-preview-button', visible: true)
+          end
         end
       end
     end
@@ -41,15 +44,17 @@ describe 'Comments' do
       before do
         within(".js-main-target-form") do
           fill_in "note[note]", with: "This is awsome!"
-          find(".js-note-preview-button").trigger("click")
+          find('.js-md-preview-button').click
           click_button "Add Comment"
         end
       end
 
       it 'should be added and form reset' do
         should have_content("This is awsome!")
-        within(".js-main-target-form") { should have_no_field("note[note]", with: "This is awesome!") }
-        within(".js-main-target-form") { should have_css(".js-note-preview", visible: false) }
+        within('.js-main-target-form') do
+          expect(page).to have_no_field('note[note]', with: 'This is awesome!')
+          expect(page).to have_css('.js-md-preview', visible: :hidden)
+        end
         within(".js-main-target-form") { should have_css(".js-note-text", visible: true) }
       end
     end
@@ -172,11 +177,11 @@ describe 'Comments' do
           # add two separate texts and trigger previews on both
           within("tr[id='#{line_code}'] + .js-temp-notes-holder") do
             fill_in "note[note]", with: "One comment on line 7"
-            find(".js-note-preview-button").trigger("click")
+            find('.js-md-preview-button').click
           end
           within("tr[id='#{line_code_2}'] + .js-temp-notes-holder") do
             fill_in "note[note]", with: "Another comment on line 10"
-            find(".js-note-preview-button").trigger("click")
+            find('.js-md-preview-button').click
           end
         end
       end

spec/routing/project_routing_spec.rb

@@ -53,13 +53,14 @@ shared_examples "RESTful project resources" do
   end
 end
 
-#      projects POST   /projects(.:format)     projects#create
-#   new_project GET    /projects/new(.:format) projects#new
-# files_project GET    /:id/files(.:format)    projects#files
-#  edit_project GET    /:id/edit(.:format)     projects#edit
-#       project GET    /:id(.:format)          projects#show
-#               PUT    /:id(.:format)          projects#update
-#               DELETE /:id(.:format)          projects#destroy
+#                 projects POST   /projects(.:format)     projects#create
+#              new_project GET    /projects/new(.:format) projects#new
+#            files_project GET    /:id/files(.:format)    projects#files
+#             edit_project GET    /:id/edit(.:format)     projects#edit
+#                  project GET    /:id(.:format)          projects#show
+#                          PUT    /:id(.:format)          projects#update
+#                          DELETE /:id(.:format)          projects#destroy
+# markdown_preview_project GET    /:id/markdown_preview(.:format) projects#markdown_preview
 describe ProjectsController, "routing" do
   it "to #create" do
     post("/projects").should route_to('projects#create')
@@ -88,6 +89,12 @@ describe ProjectsController, "routing" do
   it "to #destroy" do
     delete("/gitlab/gitlabhq").should route_to('projects#destroy', id: 'gitlab/gitlabhq')
   end
+
+  it 'to #markdown_preview' do
+    get('/gitlab/gitlabhq/markdown_preview').should(
+      route_to('projects#markdown_preview', id: 'gitlab/gitlabhq')
+    )
+  end
 end
 
 #  pages_project_wikis GET    /:project_id/wikis/pages(.:format)       projects/wikis#pages
@@ -387,15 +394,10 @@ describe Projects::IssuesController, "routing" do
   end
 end
 
-# preview_project_notes POST   /:project_id/notes/preview(.:format) notes#preview
 #         project_notes GET    /:project_id/notes(.:format)         notes#index
 #                       POST   /:project_id/notes(.:format)         notes#create
 #          project_note DELETE /:project_id/notes/:id(.:format)     notes#destroy
 describe Projects::NotesController, "routing" do
-  it "to #preview" do
-    post("/gitlab/gitlabhq/notes/preview").should route_to('projects/notes#preview', project_id: 'gitlab/gitlabhq')
-  end
-
   it_behaves_like "RESTful project resources" do
     let(:actions)    { [:index, :create, :destroy] }
     let(:controller) { 'notes' }