1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
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: {
outputs: [].concat(output),
count: 1,
},
});
vm.$mount();
};
beforeEach(() => {
// This is the output after rendering a jupyter notebook
json = getJSONFixture('blob/notebook/basic.json');
});
describe('text output', () => {
beforeEach((done) => {
const textType = json.cells[2];
createComponent(textType.outputs[0]);
setImmediate(() => {
done();
});
});
it('renders as plain text', () => {
expect(vm.$el.querySelector('pre')).not.toBeNull();
});
it('renders prompt', () => {
expect(vm.$el.querySelector('.prompt span')).not.toBeNull();
});
});
describe('image output', () => {
beforeEach((done) => {
const imageType = json.cells[3];
createComponent(imageType.outputs[0]);
setImmediate(() => {
done();
});
});
it('renders as an image', () => {
expect(vm.$el.querySelector('img')).not.toBeNull();
});
});
describe('html output', () => {
it('renders raw HTML', () => {
const htmlType = json.cells[4];
createComponent(htmlType.outputs[0]);
expect(vm.$el.querySelector('p')).not.toBeNull();
expect(vm.$el.querySelectorAll('p')).toHaveLength(1);
expect(vm.$el.textContent.trim()).toContain('test');
});
it('renders multiple raw HTML outputs', () => {
const htmlType = json.cells[4];
createComponent([htmlType.outputs[0], htmlType.outputs[0]]);
expect(vm.$el.querySelectorAll('p')).toHaveLength(2);
});
});
describe('LaTeX output', () => {
it('renders LaTeX', () => {
const output = {
data: {
'text/latex': ['$$F(k) = \\int_{-\\infty}^{\\infty} f(x) e^{2\\pi i k} dx$$'],
'text/plain': ['<IPython.core.display.Latex object>'],
},
metadata: {},
output_type: 'display_data',
};
createComponent(output);
expect(vm.$el.querySelector('.MathJax')).not.toBeNull();
});
});
describe('svg output', () => {
beforeEach((done) => {
const svgType = json.cells[5];
createComponent(svgType.outputs[0]);
setImmediate(() => {
done();
});
});
it('renders as an svg', () => {
expect(vm.$el.querySelector('svg')).not.toBeNull();
});
});
describe('default to plain text', () => {
beforeEach((done) => {
const unknownType = json.cells[6];
createComponent(unknownType.outputs[0]);
setImmediate(() => {
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) => {
const unknownType = json.cells[7];
createComponent(unknownType.outputs[0]);
setImmediate(() => {
expect(vm.$el.querySelector('pre')).not.toBeNull();
expect(vm.$el.textContent.trim()).toContain('testing');
done();
});
});
});
});
|
