Commit cf3d5810 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

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

Enable Markdown preview for issues, merge requests, milestones, and notes
parents c7db2661 742e6eee
...@@ -24,6 +24,51 @@ $(document).ready -> ...@@ -24,6 +24,51 @@ $(document).ready ->
"opacity": 0 "opacity": 0
"display": "none" "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( dropzone = $(".div-dropzone").dropzone(
url: project_image_path_upload url: project_image_path_upload
dictDefaultMessage: "" dictDefaultMessage: ""
......
...@@ -36,12 +36,6 @@ class @Notes ...@@ -36,12 +36,6 @@ class @Notes
# delete note attachment # delete note attachment
$(document).on "click", ".js-note-attachment-delete", @removeAttachment $(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 # reset main target form after submit
$(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm $(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm
...@@ -77,8 +71,6 @@ class @Notes ...@@ -77,8 +71,6 @@ class @Notes
$(document).off "click", ".note-edit-cancel" $(document).off "click", ".note-edit-cancel"
$(document).off "click", ".js-note-delete" $(document).off "click", ".js-note-delete"
$(document).off "click", ".js-note-attachment-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 "ajax:complete", ".js-main-target-form"
$(document).off "click", ".js-choose-note-attachment-button" $(document).off "click", ".js-choose-note-attachment-button"
$(document).off "click", ".js-discussion-reply-button" $(document).off "click", ".js-discussion-reply-button"
...@@ -165,47 +157,6 @@ class @Notes ...@@ -165,47 +157,6 @@ class @Notes
# cleanup after successfully creating a diff/discussion note # cleanup after successfully creating a diff/discussion note
@removeDiscussionNoteForm(form) @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. Called in response the main target form has been successfully submitted.
...@@ -220,7 +171,7 @@ class @Notes ...@@ -220,7 +171,7 @@ class @Notes
form.find(".js-errors").remove() form.find(".js-errors").remove()
# reset text and preview # 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" form.find(".js-note-text").val("").trigger "input"
### ###
...@@ -270,8 +221,8 @@ class @Notes ...@@ -270,8 +221,8 @@ class @Notes
form.removeClass "js-new-note-form" form.removeClass "js-new-note-form"
# setup preview buttons # setup preview buttons
form.find(".js-note-write-button, .js-note-preview-button").tooltip placement: "left" form.find(".js-md-write-button, .js-md-preview-button").tooltip placement: "left"
previewButton = form.find(".js-note-preview-button") previewButton = form.find(".js-md-preview-button")
form.find(".js-note-text").on "input", -> form.find(".js-note-text").on "input", ->
if $(this).val().trim() isnt "" if $(this).val().trim() isnt ""
previewButton.removeClass("turn-off").addClass "turn-on" previewButton.removeClass("turn-off").addClass "turn-on"
......
...@@ -50,3 +50,28 @@ ...@@ -50,3 +50,28 @@
margin-bottom: 0; margin-bottom: 0;
transition: opacity 200ms ease-in-out; 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;
}
}
}
...@@ -227,7 +227,6 @@ ul.notes { ...@@ -227,7 +227,6 @@ ul.notes {
margin-bottom: 0; margin-bottom: 0;
} }
.note-preview-holder,
.note_text { .note_text {
background: #FFF; background: #FFF;
border: 1px solid #ddd; border: 1px solid #ddd;
...@@ -246,15 +245,6 @@ ul.notes { ...@@ -246,15 +245,6 @@ ul.notes {
.note_text { .note_text {
width: 100%; width: 100%;
} }
.nav-tabs {
margin-bottom: 0;
border: none;
li a,
li.active a {
border: 1px solid #DDD;
}
}
} }
/* loading indicator */ /* loading indicator */
......
...@@ -61,10 +61,6 @@ class Projects::NotesController < Projects::ApplicationController ...@@ -61,10 +61,6 @@ class Projects::NotesController < Projects::ApplicationController
end end
end end
def preview
render text: view_context.markdown(params[:note])
end
private private
def note def note
......
...@@ -147,6 +147,10 @@ class ProjectsController < ApplicationController ...@@ -147,6 +147,10 @@ class ProjectsController < ApplicationController
render json: { star_count: @project.star_count } render json: { star_count: @project.star_count }
end end
def markdown_preview
render text: view_context.markdown(params[:md_text])
end
private private
def upload_path def upload_path
......
...@@ -14,17 +14,20 @@ ...@@ -14,17 +14,20 @@
.form-group.issuable-description .form-group.issuable-description
= f.label :description, 'Description', class: 'control-label' = f.label :description, 'Description', class: 'control-label'
.col-sm-10 .col-sm-10
= render 'projects/zen', f: f, attr: :description,
classes: 'description form-control' = render layout: 'projects/md_preview' do
.col-sm-12.hint = render 'projects/zen', f: f, attr: :description,
.pull-left classes: 'description form-control'
Parsed with .col-sm-12.hint
#{link_to 'GitLab Flavored Markdown', help_page_path('markdown', 'markdown'), target: '_blank'}. .pull-left
.pull-right Parsed with
Attach images (JPG, PNG, GIF) by dragging &amp; dropping #{link_to 'GitLab Flavored Markdown', help_page_path('markdown', 'markdown'), target: '_blank'}.
or #{link_to 'selecting them', '#', class: 'markdown-selector' }. .pull-right
.clearfix Attach images (JPG, PNG, GIF) by dragging &amp; dropping
.error-alert or #{link_to 'selecting them', '#', class: 'markdown-selector' }.
.clearfix
.error-alert
%hr %hr
.form-group .form-group
.issue-assignee .issue-assignee
......
%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
...@@ -21,12 +21,13 @@ ...@@ -21,12 +21,13 @@
.form-group .form-group
.light .light
= f.label :description, "Description" = f.label :description, "Description"
= render 'projects/zen', f: f, attr: :description, = render layout: 'projects/md_preview' do
classes: 'description form-control' = render 'projects/zen', f: f, attr: :description,
.clearfix.hint classes: 'description form-control'
.pull-left Description is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}. .clearfix.hint
.pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }. .pull-left Description is parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}.
.error-alert .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.
.error-alert
.form-group .form-group
.issue-assignee .issue-assignee
= f.label :assignee_id do = f.label :assignee_id do
......
...@@ -18,13 +18,14 @@ ...@@ -18,13 +18,14 @@
.col-sm-10 .col-sm-10
= f.text_field :title, maxlength: 255, class: "form-control" = f.text_field :title, maxlength: 255, class: "form-control"
%p.hint Required %p.hint Required
.form-group .form-group.milestone-description
= f.label :description, "Description", class: "control-label" = f.label :description, "Description", class: "control-label"
.col-sm-10 .col-sm-10
= render 'projects/zen', f: f, attr: :description, classes: 'description form-control' = render layout: 'projects/md_preview' do
.hint = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
.pull-left Milestones are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}. .hint
.pull-left Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }. .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 .clearfix
.error-alert .error-alert
.col-md-6 .col-md-6
......
...@@ -5,23 +5,13 @@ ...@@ -5,23 +5,13 @@
= f.hidden_field :noteable_id = f.hidden_field :noteable_id
= f.hidden_field :noteable_type = f.hidden_field :noteable_type
%ul.nav.nav-tabs = render layout: 'projects/md_preview' do
%li.active = render 'projects/zen', f: f, attr: :note,
= link_to '#note-write-holder', class: 'js-note-write-button' do classes: 'note_text js-note-text'
Write .light.clearfix
%li .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
= link_to '#note-preview-holder', class: 'js-note-preview-button', data: { url: preview_project_notes_path(@project) } do .pull-right Attach images (JPG, PNG, GIF) by dragging &amp; dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
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 &amp; dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
.note-preview-holder.hide
.js-note-preview
.note-form-actions .note-form-actions
.buttons .buttons
......
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
.note-edit-form .note-edit-form
= form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f| = 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 .form-actions.clearfix
= f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button" = f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"
......
...@@ -186,6 +186,7 @@ Gitlab::Application.routes.draw do ...@@ -186,6 +186,7 @@ Gitlab::Application.routes.draw do
post :unarchive post :unarchive
post :upload_image post :upload_image
post :toggle_star post :toggle_star
get :markdown_preview
get :autocomplete_sources get :autocomplete_sources
end end
...@@ -329,10 +330,6 @@ Gitlab::Application.routes.draw do ...@@ -329,10 +330,6 @@ Gitlab::Application.routes.draw do
member do member do
delete :delete_attachment delete :delete_attachment
end end
collection do
post :preview
end
end end
end end
end end
......
...@@ -16,12 +16,12 @@ Feature: Project Commits Comments ...@@ -16,12 +16,12 @@ Feature: Project Commits Comments
@javascript @javascript
Scenario: I can't preview without text Scenario: I can't preview without text
Given I haven't written any comment 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 @javascript
Scenario: I can preview with text Scenario: I can preview with text
Given I write a comment like "Nice" Given I write a comment like ":+1: Nice"
Then I should see the comment preview button Then The comment preview tab should be display rendered Markdown
@javascript @javascript
Scenario: I preview a comment Scenario: I preview a comment
...@@ -32,7 +32,7 @@ Feature: Project Commits Comments ...@@ -32,7 +32,7 @@ Feature: Project Commits Comments
@javascript @javascript
Scenario: I can edit after preview Scenario: I can edit after preview
Given I preview a comment text like "Bug fixed :smile:" 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 @javascript
Scenario: I have a reset form after posting from preview Scenario: I have a reset form after posting from preview
......
...@@ -58,13 +58,13 @@ Feature: Project Commits Diff Comments ...@@ -58,13 +58,13 @@ Feature: Project Commits Diff Comments
Scenario: I can't preview without text Scenario: I can't preview without text
Given I open a diff comment form Given I open a diff comment form
And I haven't written any diff comment text 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 @javascript
Scenario: I can preview with text Scenario: I can preview with text
Given I open a diff comment form Given I open a diff comment form
And I write a diff comment like ":-1: I don't like this" 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 @javascript
Scenario: I preview a diff comment Scenario: I preview a diff comment
...@@ -75,7 +75,7 @@ Feature: Project Commits Diff Comments ...@@ -75,7 +75,7 @@ Feature: Project Commits Diff Comments
@javascript @javascript
Scenario: I can edit after preview Scenario: I can edit after preview
Given I preview a diff comment text like "Should fix it :smile:" 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 @javascript
Scenario: The form gets removed after posting Scenario: The form gets removed after posting
......
...@@ -159,3 +159,37 @@ Feature: Project Issues ...@@ -159,3 +159,37 @@ Feature: Project Issues
Given project "Shop" has "Tasks-closed" closed issue with task markdown Given project "Shop" has "Tasks-closed" closed issue with task markdown
When I visit issue page "Tasks-closed" When I visit issue page "Tasks-closed"
Then Task checkboxes should be disabled 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
...@@ -187,3 +187,34 @@ Feature: Project Merge Requests ...@@ -187,3 +187,34 @@ Feature: Project Merge Requests
And I visit merge request page "MR-task-open" And I visit merge request page "MR-task-open"
And I click link "Close" And I click link "Close"
Then Task checkboxes should be disabled 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
class Spinach::Features::ProjectIssues < Spinach::FeatureSteps class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
include SharedAuthentication include SharedAuthentication
include SharedIssuable
include SharedProject include SharedProject
include SharedNote include SharedNote
include SharedPaths include SharedPaths
......
class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
include SharedAuthentication include SharedAuthentication
include SharedIssuable
include SharedProject include SharedProject
include SharedNote include SharedNote
include SharedPaths include SharedPaths
......
...@@ -32,7 +32,7 @@ module SharedDiffNote ...@@ -32,7 +32,7 @@ module SharedDiffNote
click_diff_line(sample_commit.line_code) click_diff_line(sample_commit.line_code)
within("#{diff_file_selector} form[rel$='#{sample_commit.line_code}']") do within("#{diff_file_selector} form[rel$='#{sample_commit.line_code}']") do
fill_in "note[note]", with: "Should fix it :smile:" fill_in "note[note]", with: "Should fix it :smile:"
find(".js-note-preview-button").trigger("click") find('.js-md-preview-button').click
end end
end end
...@@ -41,7 +41,7 @@ module SharedDiffNote ...@@ -41,7 +41,7 @@ module SharedDiffNote
within("#{diff_file_selector} form[rel$='#{sample_commit.del_line_code}']") do within("#{diff_file_selector} form[rel$='#{sample_commit.del_line_code}']") do
fill_in "note[note]", with: "DRY this up" fill_in "note[note]", with: "DRY this up"
find(".js-note-preview-button").trigger("click") find('.js-md-preview-button').click
end end
end end
...@@ -71,9 +71,10 @@ module SharedDiffNote ...@@ -71,9 +71,10 @@ module SharedDiffNote
end end
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 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
end end
...@@ -131,27 +132,28 @@ module SharedDiffNote ...@@ -131,27 +132,28 @@ module SharedDiffNote
step 'I should see the diff comment preview' do step 'I should see the diff comment preview' do
within("#{diff_file_selector} form") 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
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 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
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 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
end end
step 'I should see two separate previews' do step 'I should see two separate previews' do
within(diff_file_selector) do within(diff_file_selector) do
page.should have_css(".js-note-preview", visible: true, count: 2) expect(page).to have_css('.js-md-preview', visible: true, count: 2)
page.should have_content("Should fix it") expect(page).to have_content('Should fix it')
page.should have_content("DRY this up") expect(page).to have_content('DRY this up')
end end
end end
......
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
...@@ -54,4 +54,49 @@ EOT ...@@ -54,4 +54,49 @@ EOT
'div.description li.task-list-item input[type="checkbox"]:disabled' 'div.description li.task-list-item input[type="checkbox"]:disabled'
) )
end 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 end
...@@ -23,7 +23,7 @@ module SharedNote ...@@ -23,7 +23,7 @@ module SharedNote
step 'I preview a comment text like "Bug fixed :smile:"' do step 'I preview a comment text like "Bug fixed :smile:"' do
within(".js-main-target-form") do within(".js-main-target-form") do
fill_in "note[note]", with: "Bug fixed :smile:" fill_in "note[note]", with: "Bug fixed :smile:"
find(".js-note-preview-button").trigger("click") find('.js-md-preview-button').click
end end
end end
...@@ -33,9 +33,9 @@ module SharedNote ...@@ -33,9 +33,9 @@ module SharedNote
end end
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 within(".js-main-target-form") do
fill_in "note[note]", with: "Nice" fill_in 'note[note]', with: ':+1: Nice'
end end
end end
...@@ -51,13 +51,14 @@ module SharedNote ...@@ -51,13 +51,14 @@ module SharedNote
step 'I should not see the comment preview' do step 'I should not see the comment preview' do
within(".js-main-target-form") 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
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 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
end end
...@@ -79,21 +80,22 @@ module SharedNote ...@@ -79,21 +80,22 @@ module SharedNote
end end
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 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
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 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
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 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
end end
......
...@@ -19,8 +19,9 @@ describe 'Comments' do ...@@ -19,8 +19,9 @@ describe 'Comments' do
it 'should be valid' do it 'should be valid' do
should have_css(".js-main-target-form", visible: true, count: 1) should have_css(".js-main-target-form", visible: true, count: 1)
find(".js-main-target-form input[type=submit]").value.should == "Add Comment" 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') do
within(".js-main-target-form") { should have_css(".js-note-preview-button", visible: false) } expect(page).not_to have_link('Cancel')
end
end end
describe "with text" do describe "with text" do
...@@ -31,8 +32,10 @@ describe 'Comments' do ...@@ -31,8 +32,10 @@ describe 'Comments' do
end end
it 'should have enable submit button and preview button' do 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') do
within(".js-main-target-form") { should have_css(".js-note-preview-button", visible: true) } 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 end
end end
...@@ -41,15 +44,17 @@ describe 'Comments' do ...@@ -41,15 +44,17 @@ describe 'Comments' do
before do before do
within(".js-main-target-form") do within(".js-main-target-form") do
fill_in "note[note]", with: "This is awsome!" 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" click_button "Add Comment"
end end
end end
it 'should be added and form reset' do it 'should be added and form reset' do
should have_content("This is awsome!") 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') do
within(".js-main-target-form") { should have_css(".js-note-preview", visible: false) } 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) } within(".js-main-target-form") { should have_css(".js-note-text", visible: true) }
end end
end end
...@@ -172,11 +177,11 @@ describe 'Comments' do ...@@ -172,11 +177,11 @@ describe 'Comments' do
# add two separate texts and trigger previews on both # add two separate texts and trigger previews on both
within("tr[id='#{line_code}'] + .js-temp-notes-holder") do within("tr[id='#{line_code}'] + .js-temp-notes-holder") do
fill_in "note[note]", with: "One comment on line 7" fill_in "note[note]", with: "One comment on line 7"
find(".js-note-preview-button").trigger("click") find('.js-md-preview-button').click
end end
within("tr[id='#{line_code_2}'] + .js-temp-notes-holder") do within("tr[id='#{line_code_2}'] + .js-temp-notes-holder") do
fill_in "note[note]", with: "Another comment on line 10" 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 end
end end
......
...@@ -53,13 +53,14 @@ shared_examples "RESTful project resources" do ...@@ -53,13 +53,14 @@ shared_examples "RESTful project resources" do
end end
end end
# projects POST /projects(.:format) projects#create # projects POST /projects(.:format) projects#create
# new_project GET /projects/new(.:format) projects#new # new_project GET /projects/new(.:format) projects#new
# files_project GET /:id/files(.:format) projects#files # files_project GET /:id/files(.:format) projects#files
# edit_project GET /:id/edit(.:format) projects#edit # edit_project GET /:id/edit(.:format) projects#edit
# project GET /:id(.:format) projects#show # project GET /:id(.:format) projects#show
# PUT /:id(.:format) projects#update # PUT /:id(.:format) projects#update
# DELETE /:id(.:format) projects#destroy # DELETE /:id(.:format) projects#destroy
# markdown_preview_project GET /:id/markdown_preview(.:format) projects#markdown_preview
describe ProjectsController, "routing" do describe ProjectsController, "routing" do
it "to #create" do it "to #create" do
post("/projects").should route_to('projects#create') post("/projects").should route_to('projects#create')
...@@ -88,6 +89,12 @@ describe ProjectsController, "routing" do ...@@ -88,6 +89,12 @@ describe ProjectsController, "routing" do
it "to #destroy" do it "to #destroy" do
delete("/gitlab/gitlabhq").should route_to('projects#destroy', id: 'gitlab/gitlabhq') delete("/gitlab/gitlabhq").should route_to('projects#destroy', id: 'gitlab/gitlabhq')
end end
it 'to #markdown_preview' do
get('/gitlab/gitlabhq/markdown_preview').should(
route_to('projects#markdown_preview', id: 'gitlab/gitlabhq')
)
end
end end
# pages_project_wikis GET /:project_id/wikis/pages(.:format) projects/wikis#pages # pages_project_wikis GET /:project_id/wikis/pages(.:format) projects/wikis#pages
...@@ -387,15 +394,10 @@ describe Projects::IssuesController, "routing" do ...@@ -387,15 +394,10 @@ describe Projects::IssuesController, "routing" do
end end
end end
# preview_project_notes POST /:project_id/notes/preview(.:format) notes#preview
# project_notes GET /:project_id/notes(.:format) notes#index # project_notes GET /:project_id/notes(.:format) notes#index
# POST /:project_id/notes(.:format) notes#create # POST /:project_id/notes(.:format) notes#create
# project_note DELETE /:project_id/notes/:id(.:format) notes#destroy # project_note DELETE /:project_id/notes/:id(.:format) notes#destroy
describe Projects::NotesController, "routing" do 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 it_behaves_like "RESTful project resources" do
let(:actions) { [:index, :create, :destroy] } let(:actions) { [:index, :create, :destroy] }
let(:controller) { 'notes' } let(:controller) { 'notes' }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment