# frozen_string_literal: true require 'spec_helper' RSpec.describe 'Copy as GFM', :js do include MarkupHelper include RepoHelpers include ActionView::Helpers::JavaScriptHelper describe 'Copying rendered GFM' do before do @feat = MarkdownFeature.new # `markdown` helper expects a `@project` variable @project = @feat.project user = create(:user) @project.add_maintainer(user) sign_in(user) 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
          * [~] Inapplicable task
          * [~] Inapplicable task with ~~del~~ and strike embedded
        GFM
        <<~GFM,
          1. [ ] Unchecked ordered task
          1. [x] Checked ordered task
          1. [~] Inapplicable ordered task
          1. [~] Inapplicable ordered task with ~~del~~ and strike embedded
        GFM
        <<~GFM
          * [ ] Unchecked loose list task
          * [x] Checked loose list task
          * [~] Inapplicable loose list task

            With a paragraph
          * [~] Inapplicable loose list task with ~~del~~ and strike embedded

            With a paragraph
        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,
        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('CustomEmojiFilter') do
        gfm = ':custom_emoji:'

        html = ''

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

      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 (del)~~',
        '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) }

    before do
      sign_in(project.first_owner)
    end

    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')
          wait_for_requests
        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')
          wait_for_requests
        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="LC10"]',
            '`end`'
          )
        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)
      expect(page).to have_selector('.js-syntax-highlight')
      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