diff options
Diffstat (limited to 'spec')
| -rw-r--r-- | spec/javascripts/fixtures/raw.rb | 24 | ||||
| -rw-r--r-- | spec/javascripts/notebook/cells/code_spec.js | 55 | ||||
| -rw-r--r-- | spec/javascripts/notebook/cells/markdown_spec.js | 41 | ||||
| -rw-r--r-- | spec/javascripts/notebook/cells/output/index_spec.js | 126 | ||||
| -rw-r--r-- | spec/javascripts/notebook/cells/prompt_spec.js | 56 | ||||
| -rw-r--r-- | spec/javascripts/notebook/index_spec.js | 98 | ||||
| -rw-r--r-- | spec/javascripts/notebook/lib/highlight_spec.js | 15 | ||||
| -rw-r--r-- | spec/support/test_env.rb | 3 |
8 files changed, 417 insertions, 1 deletions
diff --git a/spec/javascripts/fixtures/raw.rb b/spec/javascripts/fixtures/raw.rb new file mode 100644 index 00000000000..1ce622fc836 --- /dev/null +++ b/spec/javascripts/fixtures/raw.rb @@ -0,0 +1,24 @@ +require 'spec_helper' + +describe 'Raw files', '(JavaScript fixtures)', type: :controller do + include JavaScriptFixturesHelpers + + let(:namespace) { create(:namespace, name: 'frontend-fixtures' )} + let(:project) { create(:project, namespace: namespace, path: 'raw-project') } + + before(:all) do + clean_frontend_fixtures('blob/notebook/') + end + + it 'blob/notebook/basic.json' do |example| + blob = project.repository.blob_at('6d85bb69', 'files/ipython/basic.ipynb') + + store_frontend_fixture(blob.data, example.description) + end + + it 'blob/notebook/worksheets.json' do |example| + blob = project.repository.blob_at('6d85bb69', 'files/ipython/worksheets.ipynb') + + store_frontend_fixture(blob.data, example.description) + end +end 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(); + }); +}); diff --git a/spec/support/test_env.rb b/spec/support/test_env.rb index 60c2096a126..eb0f1efe55b 100644 --- a/spec/support/test_env.rb +++ b/spec/support/test_env.rb @@ -38,7 +38,8 @@ module TestEnv 'deleted-image-test' => '6c17798', 'wip' => 'b9238ee', 'csv' => '3dd0896', - 'v1.1.0' => 'b83d6e3' + 'v1.1.0' => 'b83d6e3', + 'add-ipython-files' => '6d85bb69' }.freeze # gitlab-test-fork is a fork of gitlab-fork, but we don't necessarily |