Merge remote-tracking branch 'upstream/master' into 27377-preload-pipeline-entity27377-preload-pipeline-entity

* upstream/master: (2534 commits)
  Update VERSION to 9.3.0-pre
  Update CHANGELOG.md for 9.2.0
  removes unnecessary redundacy in usage ping doc
  Respect the typo as rubocop said
  Add a test to ensure this works on MySQL
  Change pipelines schedules help page path
  change domain to hostname in usage ping doc
  Fixes broken MySQL migration for retried
  Show password field mask while editing service settings
  Add notes for supported schedulers and cloud providers
  Move environment monitoring to environments doc
  Add docs for change of Cache/Artifact restore order"
  Avoid resource intensive login checks if password is not provided
  Change translation for 'coding' by 'desarrollo' for Spanish
  Add to docs: issues multiple assignees
  rename "Add emoji" and "Award emoji" to "Add reaction" where appropriate
  Add project and group notification settings info
  32570 Fix border-bottom for project activity tab
  Add users endpoint to frontend API class
  Rename users on mysql
  ...

6 files changed, 391 insertions, 0 deletions

diff --git a/spec/javascripts/notebook/cells/code_spec.js b/spec/javascripts/notebook/cells/code_spec.js
new file mode 100644
index 00000000000..0c432d73f67
--- /dev/null
+++ b/spec/javascripts/notebook/cells/code_spec.js
@@ -0,0 +1,55 @@
+import Vue from 'vue';
+import CodeComponent from '~/notebook/cells/code.vue';
+
+const Component = Vue.extend(CodeComponent);
+
+describe('Code component', () => {
+  let vm;
+  let json;
+
+  beforeEach(() => {
+    json = getJSONFixture('blob/notebook/basic.json');
+  });
+
+  describe('without output', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[0],
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('does not render output prompt', () => {
+      expect(vm.$el.querySelectorAll('.prompt').length).toBe(1);
+    });
+  });
+
+  describe('with output', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          cell: json.cells[2],
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('does not render output prompt', () => {
+      expect(vm.$el.querySelectorAll('.prompt').length).toBe(2);
+    });
+
+    it('renders output cell', () => {
+      expect(vm.$el.querySelector('.output')).toBeDefined();
+    });
+  });
+});
diff --git a/spec/javascripts/notebook/cells/markdown_spec.js b/spec/javascripts/notebook/cells/markdown_spec.js
new file mode 100644
index 00000000000..38c976f38d8
--- /dev/null
+++ b/spec/javascripts/notebook/cells/markdown_spec.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import MarkdownComponent from '~/notebook/cells/markdown.vue';
+
+const Component = Vue.extend(MarkdownComponent);
+
+describe('Markdown component', () => {
+  let vm;
+  let cell;
+  let json;
+
+  beforeEach((done) => {
+    json = getJSONFixture('blob/notebook/basic.json');
+
+    cell = json.cells[1];
+
+    vm = new Component({
+      propsData: {
+        cell,
+      },
+    });
+    vm.$mount();
+
+    setTimeout(() => {
+      done();
+    });
+  });
+
+  it('does not render promot', () => {
+    expect(vm.$el.querySelector('.prompt span')).toBeNull();
+  });
+
+  it('does not render the markdown text', () => {
+    expect(
+      vm.$el.querySelector('.markdown').innerHTML.trim(),
+    ).not.toEqual(cell.source.join(''));
+  });
+
+  it('renders the markdown HTML', () => {
+    expect(vm.$el.querySelector('.markdown h1')).not.toBeNull();
+  });
+});
diff --git a/spec/javascripts/notebook/cells/output/index_spec.js b/spec/javascripts/notebook/cells/output/index_spec.js
new file mode 100644
index 00000000000..dbf79f85c7c
--- /dev/null
+++ b/spec/javascripts/notebook/cells/output/index_spec.js
@@ -0,0 +1,126 @@
+import Vue from 'vue';
+import CodeComponent from '~/notebook/cells/output/index.vue';
+
+const Component = Vue.extend(CodeComponent);
+
+describe('Output component', () => {
+  let vm;
+  let json;
+
+  const createComponent = (output) => {
+    vm = new Component({
+      propsData: {
+        output,
+        count: 1,
+      },
+    });
+    vm.$mount();
+  };
+
+  beforeEach(() => {
+    json = getJSONFixture('blob/notebook/basic.json');
+  });
+
+  describe('text output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[2].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders as plain text', () => {
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+    });
+
+    it('renders promot', () => {
+      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+    });
+  });
+
+  describe('image output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[3].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders as an image', () => {
+      expect(vm.$el.querySelector('img')).not.toBeNull();
+    });
+
+    it('does not render the prompt', () => {
+      expect(vm.$el.querySelector('.prompt span')).toBeNull();
+    });
+  });
+
+  describe('html output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[4].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders raw HTML', () => {
+      expect(vm.$el.querySelector('p')).not.toBeNull();
+      expect(vm.$el.textContent.trim()).toBe('test');
+    });
+
+    it('does not render the prompt', () => {
+      expect(vm.$el.querySelector('.prompt span')).toBeNull();
+    });
+  });
+
+  describe('svg output', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[5].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders as an svg', () => {
+      expect(vm.$el.querySelector('svg')).not.toBeNull();
+    });
+
+    it('does not render the prompt', () => {
+      expect(vm.$el.querySelector('.prompt span')).toBeNull();
+    });
+  });
+
+  describe('default to plain text', () => {
+    beforeEach((done) => {
+      createComponent(json.cells[6].outputs[0]);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders as plain text', () => {
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+      expect(vm.$el.textContent.trim()).toContain('testing');
+    });
+
+    it('renders promot', () => {
+      expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
+    });
+
+    it('renders as plain text when doesn\'t recognise other types', (done) => {
+      createComponent(json.cells[7].outputs[0]);
+
+      setTimeout(() => {
+        expect(vm.$el.querySelector('pre')).not.toBeNull();
+        expect(vm.$el.textContent.trim()).toContain('testing');
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/notebook/cells/prompt_spec.js b/spec/javascripts/notebook/cells/prompt_spec.js
new file mode 100644
index 00000000000..207fa433a59
--- /dev/null
+++ b/spec/javascripts/notebook/cells/prompt_spec.js
@@ -0,0 +1,56 @@
+import Vue from 'vue';
+import PromptComponent from '~/notebook/cells/prompt.vue';
+
+const Component = Vue.extend(PromptComponent);
+
+describe('Prompt component', () => {
+  let vm;
+
+  describe('input', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          type: 'In',
+          count: 1,
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders in label', () => {
+      expect(vm.$el.textContent.trim()).toContain('In');
+    });
+
+    it('renders count', () => {
+      expect(vm.$el.textContent.trim()).toContain('1');
+    });
+  });
+
+  describe('output', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          type: 'Out',
+          count: 1,
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders in label', () => {
+      expect(vm.$el.textContent.trim()).toContain('Out');
+    });
+
+    it('renders count', () => {
+      expect(vm.$el.textContent.trim()).toContain('1');
+    });
+  });
+});
diff --git a/spec/javascripts/notebook/index_spec.js b/spec/javascripts/notebook/index_spec.js
new file mode 100644
index 00000000000..bd63ab35426
--- /dev/null
+++ b/spec/javascripts/notebook/index_spec.js
@@ -0,0 +1,98 @@
+import Vue from 'vue';
+import Notebook from '~/notebook/index.vue';
+
+const Component = Vue.extend(Notebook);
+
+describe('Notebook component', () => {
+  let vm;
+  let json;
+  let jsonWithWorksheet;
+
+  beforeEach(() => {
+    json = getJSONFixture('blob/notebook/basic.json');
+    jsonWithWorksheet = getJSONFixture('blob/notebook/worksheets.json');
+  });
+
+  describe('without JSON', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          notebook: {},
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('does not render', () => {
+      expect(vm.$el.tagName).toBeUndefined();
+    });
+  });
+
+  describe('with JSON', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          notebook: json,
+          codeCssClass: 'js-code-class',
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders cells', () => {
+      expect(vm.$el.querySelectorAll('.cell').length).toBe(json.cells.length);
+    });
+
+    it('renders markdown cell', () => {
+      expect(vm.$el.querySelector('.markdown')).not.toBeNull();
+    });
+
+    it('renders code cell', () => {
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+    });
+
+    it('add code class to code blocks', () => {
+      expect(vm.$el.querySelector('.js-code-class')).not.toBeNull();
+    });
+  });
+
+  describe('with worksheets', () => {
+    beforeEach((done) => {
+      vm = new Component({
+        propsData: {
+          notebook: jsonWithWorksheet,
+          codeCssClass: 'js-code-class',
+        },
+      });
+      vm.$mount();
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders cells', () => {
+      expect(vm.$el.querySelectorAll('.cell').length).toBe(jsonWithWorksheet.worksheets[0].cells.length);
+    });
+
+    it('renders markdown cell', () => {
+      expect(vm.$el.querySelector('.markdown')).not.toBeNull();
+    });
+
+    it('renders code cell', () => {
+      expect(vm.$el.querySelector('pre')).not.toBeNull();
+    });
+
+    it('add code class to code blocks', () => {
+      expect(vm.$el.querySelector('.js-code-class')).not.toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/notebook/lib/highlight_spec.js b/spec/javascripts/notebook/lib/highlight_spec.js
new file mode 100644
index 00000000000..d71c5718858
--- /dev/null
+++ b/spec/javascripts/notebook/lib/highlight_spec.js
@@ -0,0 +1,15 @@
+import Prism from '~/notebook/lib/highlight';
+
+describe('Highlight library', () => {
+  it('imports python language', () => {
+    expect(Prism.languages.python).toBeDefined();
+  });
+
+  it('uses custom CSS classes', () => {
+    const el = document.createElement('div');
+    el.innerHTML = Prism.highlight('console.log("a");', Prism.languages.javascript);
+
+    expect(el.querySelector('.s')).not.toBeNull();
+    expect(el.querySelector('.nf')).not.toBeNull();
+  });
+});