1 files changed, 87 insertions, 10 deletions

diff --git a/spec/features/markdown/mermaid_spec.rb b/spec/features/markdown/mermaid_spec.rb
index 207678e07c3..c4994838d26 100644
--- a/spec/features/markdown/mermaid_spec.rb
+++ b/spec/features/markdown/mermaid_spec.rb
@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Mermaid rendering', :js do
+  let_it_be(:project) { create(:project, :public) }
+
   it 'renders Mermaid diagrams correctly' do
     description = <<~MERMAID
       ```mermaid
@@ -14,7 +16,6 @@ RSpec.describe 'Mermaid rendering', :js do
       ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -36,7 +37,6 @@ RSpec.describe 'Mermaid rendering', :js do
       ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -44,10 +44,33 @@ RSpec.describe 'Mermaid rendering', :js do
     wait_for_requests
     wait_for_mermaid
 
-    expected = '<text style=""><tspan xml:space="preserve" dy="1em" x="1">Line 1</tspan><tspan xml:space="preserve" dy="1em" x="1">Line 2</tspan></text>'
+    # From https://github.com/mermaid-js/mermaid/blob/d3f8f03a7d03a052e1fe0251d5a6d8d1f48d67ee/src/dagre-wrapper/createLabel.js#L79-L82
+    expected = %(<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Line 1<br>Line 2</div>)
     expect(page.html.scan(expected).count).to be(4)
   end
 
+  it 'does not allow XSS in HTML labels' do
+    description = <<~MERMAID
+      ```mermaid
+      graph LR;
+        A-->CLICK_HERE_AND_GET_BONUS;
+        click A alert "aaa"
+        click CLICK_HERE_AND_GET_BONUS "javascript:alert%28%64%6f%63%75%6d%65%6e%74%2e%64%6f%6d%61%69%6e%29" "Here is the XSS"
+      ```
+    MERMAID
+
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    wait_for_requests
+    wait_for_mermaid
+
+    # From https://github.com/mermaid-js/mermaid/blob/d3f8f03a7d03a052e1fe0251d5a6d8d1f48d67ee/src/dagre-wrapper/createLabel.js#L79-L82
+    expected = %(<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">CLICK_HERE_AND_GET_BONUS</div>)
+    expect(page.html).to include(expected)
+  end
+
   it 'renders only 2 Mermaid blocks and', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/234081' do
     description = <<~MERMAID
     ```mermaid
@@ -64,7 +87,6 @@ RSpec.describe 'Mermaid rendering', :js do
     ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -94,7 +116,6 @@ RSpec.describe 'Mermaid rendering', :js do
       </details>
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -108,7 +129,37 @@ RSpec.describe 'Mermaid rendering', :js do
 
       expect(svg[:style]).to match(/max-width/)
       expect(svg[:width].to_i).to eq(100)
-      expect(svg[:height].to_i).to be_within(5).of(220)
+      expect(svg[:height].to_i).to be_within(5).of(236)
+    end
+  end
+
+  it 'renders V2 state diagrams' do
+    description = <<~MERMAID
+    ```mermaid
+    stateDiagram-v2
+    [*] --> Idle
+    Idle --> Active : CONTINUE
+    state Active {
+        [*] --> Run
+        Run--> Stop: CONTINUE
+        Stop--> Run: CONTINUE
+
+        Run: Run
+        Run: entry/start
+        Run: check
+    }
+    ```
+    MERMAID
+
+    issue = create(:issue, project: project, description: description)
+
+    visit project_issue_path(project, issue)
+
+    wait_for_requests
+    wait_for_mermaid
+
+    page.within('.description') do
+      expect(page).to have_selector('svg')
     end
   end
 
@@ -123,7 +174,6 @@ RSpec.describe 'Mermaid rendering', :js do
       ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -144,7 +194,6 @@ RSpec.describe 'Mermaid rendering', :js do
     ```
     MERMAID
 
-    project = create(:project, :public)
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -183,8 +232,6 @@ RSpec.describe 'Mermaid rendering', :js do
 
     description *= 51
 
-    project = create(:project, :public)
-
     issue = create(:issue, project: project, description: description)
 
     visit project_issue_path(project, issue)
@@ -200,6 +247,36 @@ RSpec.describe 'Mermaid rendering', :js do
       expect(page).to have_selector('.js-lazy-render-mermaid-container')
     end
   end
+
+  it 'renders without any limits on wiki page', :js do
+    graph_edges = "A-->B;B-->A;"
+
+    description = <<~MERMAID
+    ```mermaid
+    graph LR
+    #{graph_edges}
+    ```
+    MERMAID
+
+    description *= 51
+
+    project = create(:project, :public)
+
+    wiki_page = build(:wiki_page, { container: project, content: description })
+    wiki_page.create message: 'mermaid test commit' # rubocop:disable Rails/SaveBang
+    wiki_page = project.wiki.find_page(wiki_page.slug)
+
+    visit project_wiki_path(project, wiki_page)
+
+    wait_for_requests
+    wait_for_mermaid
+
+    page.within('.js-wiki-page-content') do
+      expect(page).not_to have_selector('.lazy-alert-shown')
+
+      expect(page).not_to have_selector('.js-lazy-render-mermaid-container')
+    end
+  end
 end
 
 def wait_for_mermaid