# frozen_string_literal: true require 'spec_helper' describe 'Copy as GFM', :js do include MarkupHelper include RepoHelpers include ActionView::Helpers::JavaScriptHelper before do sign_in(create(:admin)) end describe 'Copying rendered GFM' do before do @feat = MarkdownFeature.new # `markdown` helper expects a `@project` variable @project = @feat.project visit project_issue_path(@project, @feat.issue) end # The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb transform GitLab Flavored Markdown (GFM) to HTML. # The nodes and marks referenced in app/assets/javascripts/behaviors/markdown/editor_extensions.js consequently transform that same HTML to GFM. # To make sure these filters and nodes/marks are properly aligned, this spec tests the GFM-to-HTML-to-GFM cycle # by verifying (`html_to_gfm(gfm_to_html(gfm)) == gfm`) for a number of examples of GFM for every filter, using the `verify` helper. # These are all in a single `it` for performance reasons. it 'works', :aggregate_failures do verify( 'nesting', '> 1. [x] **[$`2 + 2`$ {-=-}{+=+} 2^2 ~~:thumbsup:~~](http://google.com)**' ) verify( 'a real world example from the gitlab-ce README', <<~GFM # GitLab [![Build status](https://gitlab.com/gitlab-org/gitlab-foss/badges/master/build.svg)](https://gitlab.com/gitlab-org/gitlab-foss/commits/master) [![CE coverage report](https://gitlab.com/gitlab-org/gitlab-foss/badges/master/coverage.svg?job=coverage)](https://gitlab-org.gitlab.io/gitlab-ce/coverage-ruby) [![Code Climate](https://codeclimate.com/github/gitlabhq/gitlabhq.svg)](https://codeclimate.com/github/gitlabhq/gitlabhq) [![Core Infrastructure Initiative Best Practices](https://bestpractices.coreinfrastructure.org/projects/42/badge)](https://bestpractices.coreinfrastructure.org/projects/42) ## Canonical source The canonical source of GitLab Community Edition is [hosted on GitLab.com](https://gitlab.com/gitlab-org/gitlab-foss/). ## Open source software to collaborate on code To see how GitLab looks please see the [features page on our website](https://about.gitlab.com/features/). * Manage Git repositories with fine grained access controls that keep your code secure * Perform code reviews and enhance collaboration with merge requests * Complete continuous integration (CI) and CD pipelines to builds, test, and deploy your applications * Each project can also have an issue tracker, issue board, and a wiki * Used by more than 100,000 organizations, GitLab is the most popular solution to manage Git repositories on-premises * Completely free and open source (MIT Expat license) GFM ) aggregate_failures('an accidentally selected empty element') do gfm = '# Heading1' html = <<~HTML

Heading1


        HTML

        output_gfm = html_to_gfm(html)
        expect(output_gfm.strip).to eq(gfm.strip)
      end

      aggregate_failures('an accidentally selected other element') do
        gfm = 'Test comment with **Markdown!**'

        html = <<~HTML
          
  • Test comment with Markdown!

  • HTML output_gfm = html_to_gfm(html) expect(output_gfm.strip).to eq(gfm.strip) end verify( 'InlineDiffFilter', '{-Deleted text-}', '{+Added text+}' ) verify( 'TaskListFilter', <<~GFM, * [ ] Unchecked task * [x] Checked task GFM <<~GFM 1. [ ] Unchecked ordered task 1. [x] Checked ordered task GFM ) verify( 'ReferenceFilter', # issue reference @feat.issue.to_reference, # full issue reference @feat.issue.to_reference(full: true), # issue URL project_issue_url(@project, @feat.issue), # issue URL with note anchor project_issue_url(@project, @feat.issue, anchor: 'note_123'), # issue link "[Issue](#{project_issue_url(@project, @feat.issue)})", # issue link with note anchor "[Issue](#{project_issue_url(@project, @feat.issue, anchor: 'note_123')})" ) verify( 'AutolinkFilter', 'https://example.com' ) verify( 'TableOfContentsFilter', <<~GFM, [[_TOC_]] # Heading 1 ## Heading 2 GFM pipeline: :wiki, project_wiki: @project.wiki ) verify( 'EmojiFilter', ':thumbsup:' ) verify( 'ImageLinkFilter', '![Image](https://example.com/image.png)' ) verify_media_with_partial_path( '[test.txt](/uploads/a123/image.txt)', project_media_uri(@project, '/uploads/a123/image.txt') ) verify_media_with_partial_path( '![Image](/uploads/a123/image.png)', project_media_uri(@project, '/uploads/a123/image.png') ) verify( 'VideoLinkFilter', '![Video](https://example.com/video.mp4)' ) verify_media_with_partial_path( '![Video](/uploads/a123/video.mp4)', project_media_uri(@project, '/uploads/a123/video.mp4') ) verify( 'AudioLinkFilter', '![Audio](https://example.com/audio.wav)' ) verify_media_with_partial_path( '![Audio](/uploads/a123/audio.wav)', project_media_uri(@project, '/uploads/a123/audio.wav') ) verify( 'MathFilter: math as converted from GFM to HTML', '$`c = \pm\sqrt{a^2 + b^2}`$', # math block <<~GFM ```math c = \pm\sqrt{a^2 + b^2} ``` GFM ) aggregate_failures('MathFilter: math as transformed from HTML to KaTeX') do gfm = '$`c = \pm\sqrt{a^2 + b^2}`$' html = <<~HTML c = ± a 2 + b 2 c = \\pm\\sqrt{a^2 + b^2} HTML output_gfm = html_to_gfm(html) expect(output_gfm.strip).to eq(gfm.strip) end verify( 'MermaidFilter: mermaid as converted from GFM to HTML', <<~GFM ```mermaid graph TD; A-->B; ``` GFM ) aggregate_failures('MermaidFilter: mermaid as transformed from HTML to SVG') do gfm = <<~GFM ```mermaid graph TD; A-->B; ``` GFM html = <<~HTML
    A
    B
    graph TD; A-->B;
    HTML output_gfm = html_to_gfm(html) expect(output_gfm.strip).to eq(gfm.strip) end verify( 'SuggestionFilter: suggestion as converted from GFM to HTML', <<~GFM ```suggestion New And newer ``` GFM ) aggregate_failures('SuggestionFilter: suggestion as transformed from HTML to Vue component') do gfm = <<~GFM ```suggestion New And newer ``` GFM html = <<~HTML
    Suggested change
    9 Old
    9 New
    10 And newer
    HTML output_gfm = html_to_gfm(html) expect(output_gfm.strip).to eq(gfm.strip) end verify( 'SanitizationFilter', <<~GFM sub
    dt
    dt
    dd
    dd
    dt
    dt
    dd
    dd
    kbd q samp var HTML
    summary> details
    GFM ) verify( 'SanitizationFilter', <<~GFM, ``` Plain text ``` GFM <<~GFM, ```ruby def foo bar end ``` GFM <<~GFM Foo ```js Code goes here ``` GFM ) verify( 'MarkdownFilter', "Line with two spaces at the end \nto insert a linebreak", '`code`', '`` code with ` ticks ``', '> Quote', # multiline quote <<~GFM, > Multiline Quote > > With multiple paragraphs GFM '![Image](https://example.com/image.png)', '# Heading with no anchor link', '[Link](https://example.com)', <<~GFM, * List item * List item 2 GFM # multiline list item <<~GFM, * Multiline List item GFM # nested lists <<~GFM, * Nested * Lists GFM # list with blockquote <<~GFM, * List > Blockquote GFM <<~GFM, 1. Ordered list item 1. Ordered list item 2 GFM # multiline ordered list item <<~GFM, 1. Multiline Ordered list item GFM # nested ordered list <<~GFM, 1. Nested 1. Ordered lists GFM # list item followed by an HR <<~GFM, * list item --- GFM '# Heading', '## Heading', '### Heading', '#### Heading', '##### Heading', '###### Heading', '**Bold**', '*Italics*', '~~Strikethrough~~', '---', # table <<~GFM, | Centered | Right | Left | |:--------:|------:|------| | Foo | Bar | **Baz** | | Foo | Bar | **Baz** | GFM # table with empty heading <<~GFM | | x | y | |--|---|---| | a | 1 | 0 | | b | 0 | 1 | GFM ) end alias_method :gfm_to_html, :markdown def verify(label, *gfms) markdown_options = gfms.extract_options! aggregate_failures(label) do gfms.each do |gfm| html = gfm_to_html(gfm, markdown_options).gsub(/\A | \z/, '') output_gfm = html_to_gfm(html) expect(output_gfm.strip).to eq(gfm.strip) end end end def project_media_uri(project, media_path) "#{project_path(project)}#{media_path}" end def verify_media_with_partial_path(gfm, media_uri) html = gfm_to_html(gfm) output_gfm = html_to_gfm(html) expect(output_gfm).to include(media_uri) end # Fake a `current_user` helper def current_user @feat.user end end describe 'Copying code' do let(:project) { create(:project, :repository) } context 'from a diff' do shared_examples 'copying code from a diff' do context 'selecting one word of text' do it 'copies as inline code' do verify( '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"] .line .no', '`RuntimeError`', target: '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"]' ) end end context 'selecting one line of text' do it 'copies as inline code' do verify( '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"]', '`raise RuntimeError, "System commands must be given as an array of strings"`', target: '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"]' ) end end context 'selecting multiple lines of text' do it 'copies as a code block' do verify( '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_10"]', <<~GFM, ```ruby raise RuntimeError, "System commands must be given as an array of strings" end ``` GFM target: '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"]' ) end end end context 'inline diff' do before do visit project_commit_path(project, sample_commit.id, view: 'inline') end it_behaves_like 'copying code from a diff' end context 'parallel diff' do before do visit project_commit_path(project, sample_commit.id, view: 'parallel') end it_behaves_like 'copying code from a diff' context 'selecting code on the left' do it 'copies as a code block' do verify( '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_8_8"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_9_9"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_10"]', <<~GFM, ```ruby unless cmd.is_a?(Array) raise "System commands must be given as an array of strings" end ``` GFM target: '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_8_8"].left-side' ) end end context 'selecting code on the right' do it 'copies as a code block' do verify( '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_8_8"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_9_9"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_9"], [id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_10_10"]', <<~GFM, ```ruby unless cmd.is_a?(Array) raise RuntimeError, "System commands must be given as an array of strings" end ``` GFM target: '[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd_8_8"].right-side' ) end end end end context 'from a blob' do before do visit project_blob_path(project, File.join('master', 'files/ruby/popen.rb')) wait_for_requests end context 'selecting one word of text' do it 'copies as inline code' do verify( '.line[id="LC9"] .no', '`RuntimeError`' ) end end context 'selecting one line of text' do it 'copies as inline code' do verify( '.line[id="LC9"]', '`raise RuntimeError, "System commands must be given as an array of strings"`' ) end end context 'selecting multiple lines of text' do it 'copies as a code block' do verify( '.line[id="LC9"], .line[id="LC10"]', <<~GFM ```ruby raise RuntimeError, "System commands must be given as an array of strings" end ``` GFM ) end end end context 'from a GFM code block' do before do visit project_blob_path(project, File.join('markdown', 'doc/api/users.md')) wait_for_requests end context 'selecting one word of text' do it 'copies as inline code' do verify( '.line[id="LC27"] .nl', '`"bio"`' ) end end context 'selecting one line of text' do it 'copies as inline code' do verify( '.line[id="LC27"]', '`"bio": null,`' ) end end context 'selecting multiple lines of text' do it 'copies as a code block with the correct language' do verify( '.line[id="LC27"], .line[id="LC28"]', <<~GFM ```json "bio": null, "skype": "", ``` GFM ) end end end def verify(selector, gfm, target: nil) html = html_for_selector(selector) output_gfm = html_to_gfm(html, 'transformCodeSelection', target: target) wait_for_requests expect(output_gfm.strip).to eq(gfm.strip) end end def html_for_selector(selector) js = <<~JS (function(selector) { var els = document.querySelectorAll(selector); var htmls = [].slice.call(els).map(function(el) { return el.outerHTML; }); return htmls.join("\\n"); })("#{escape_javascript(selector)}") JS page.evaluate_script(js) end def html_to_gfm(html, transformer = 'transformGFMSelection', target: nil) js = <<~JS (function(html) { // Setting it off so the import already starts window.CopyAsGFM.nodeToGFM(document.createElement('div')); var transformer = window.CopyAsGFM[#{transformer.inspect}]; var node = document.createElement('div'); $(html).each(function() { node.appendChild(this) }); var targetSelector = #{target.to_json}; var target; if (targetSelector) { target = document.querySelector(targetSelector); } node = transformer(node, target); if (!node) return null; window.gfmCopytestRes = null; window.CopyAsGFM.nodeToGFM(node) .then((res) => { window.gfmCopytestRes = res; }); })("#{escape_javascript(html)}") JS page.execute_script(js) loop until page.evaluate_script('window.gfmCopytestRes !== null') page.evaluate_script('window.gfmCopytestRes') end end