Merge branch 'notebook-katex-fixes' into 'master'

Fixes multi-line math in notebooks

Closes #30900 and #33074

See merge request !11789

2 files changed, 63 insertions, 0 deletions

diff --git a/spec/javascripts/fixtures/raw.rb b/spec/javascripts/fixtures/raw.rb
index 1ce622fc836..17533443d76 100644
--- a/spec/javascripts/fixtures/raw.rb
+++ b/spec/javascripts/fixtures/raw.rb
@@ -21,4 +21,10 @@ describe 'Raw files', '(JavaScript fixtures)', type: :controller do
 
     store_frontend_fixture(blob.data, example.description)
   end
+
+  it 'blob/notebook/math.json' do |example|
+    blob = project.repository.blob_at('93ee732', 'files/ipython/math.ipynb')
+
+    store_frontend_fixture(blob.data, example.description)
+  end
 end
diff --git a/spec/javascripts/notebook/cells/markdown_spec.js b/spec/javascripts/notebook/cells/markdown_spec.js
index 38c976f38d8..a88e9ed3d99 100644
--- a/spec/javascripts/notebook/cells/markdown_spec.js
+++ b/spec/javascripts/notebook/cells/markdown_spec.js
@@ -1,8 +1,11 @@
 import Vue from 'vue';
 import MarkdownComponent from '~/notebook/cells/markdown.vue';
+import katex from 'vendor/katex';
 
 const Component = Vue.extend(MarkdownComponent);
 
+window.katex = katex;
+
 describe('Markdown component', () => {
   let vm;
   let cell;
@@ -38,4 +41,58 @@ describe('Markdown component', () => {
   it('renders the markdown HTML', () => {
     expect(vm.$el.querySelector('.markdown h1')).not.toBeNull();
   });
+
+  describe('katex', () => {
+    beforeEach(() => {
+      json = getJSONFixture('blob/notebook/math.json');
+    });
+
+    it('renders multi-line katex', (done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[0],
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('.katex'),
+        ).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('renders inline katex', (done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[1],
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelector('p:first-child .katex'),
+        ).not.toBeNull();
+
+        done();
+      });
+    });
+
+    it('renders multiple inline katex', (done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[1],
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        expect(
+          vm.$el.querySelectorAll('p:nth-child(2) .katex').length,
+        ).toBe(4);
+
+        done();
+      });
+    });
+  });
 });