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
140
141
142
143
144
145
146
147
|
import { mount } from '@vue/test-utils';
import json from 'test_fixtures/blob/notebook/basic.json';
import Output from '~/notebook/cells/output/index.vue';
import MarkdownOutput from '~/notebook/cells/output/markdown.vue';
import DataframeOutput from '~/notebook/cells/output/dataframe.vue';
import {
relativeRawPath,
markdownCellContent,
outputWithDataframe,
outputWithDataframeContent,
} from '../../mock_data';
describe('Output component', () => {
let wrapper;
const createComponent = (output) => {
wrapper = mount(Output, {
provide: { relativeRawPath },
propsData: {
outputs: [].concat(output),
count: 1,
},
});
};
describe('text output', () => {
beforeEach(() => {
const textType = json.cells[2];
createComponent(textType.outputs[0]);
});
it('renders as plain text', () => {
expect(wrapper.find('pre').exists()).toBe(true);
});
it('renders prompt', () => {
expect(wrapper.find('.prompt span').exists()).toBe(true);
});
});
describe('image output', () => {
beforeEach(() => {
const imageType = json.cells[3];
createComponent(imageType.outputs[0]);
});
it('renders as an image', () => {
expect(wrapper.find('img').exists()).toBe(true);
});
});
describe('html output', () => {
it('renders raw HTML', () => {
const htmlType = json.cells[4];
createComponent(htmlType.outputs[0]);
const iframe = wrapper.find('iframe');
expect(iframe.exists()).toBe(true);
expect(iframe.element.getAttribute('sandbox')).toBe('');
expect(iframe.element.getAttribute('srcdoc')).toBe('<p>test</p>');
expect(iframe.element.getAttribute('scrolling')).toBe('auto');
});
it('renders multiple raw HTML outputs', () => {
const htmlType = json.cells[4];
createComponent([htmlType.outputs[0], htmlType.outputs[0]]);
expect(wrapper.findAll('iframe')).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(wrapper.find('.MathJax').exists()).toBe(true);
});
});
describe('svg output', () => {
beforeEach(() => {
const svgType = json.cells[5];
createComponent(svgType.outputs[0]);
});
it('renders as an svg', () => {
const iframe = wrapper.find('iframe');
expect(iframe.exists()).toBe(true);
expect(iframe.element.getAttribute('sandbox')).toBe('');
expect(iframe.element.getAttribute('srcdoc')).toBe('<svg></svg>');
});
});
describe('Markdown output', () => {
beforeEach(() => {
const markdownType = { data: { 'text/markdown': markdownCellContent } };
createComponent(markdownType);
});
it('renders a markdown component', () => {
expect(wrapper.findComponent(MarkdownOutput).props('rawCode')).toBe(markdownCellContent);
});
});
describe('Dataframe output', () => {
it('renders DataframeOutput component', () => {
createComponent(outputWithDataframe);
expect(wrapper.findComponent(DataframeOutput).props('rawCode')).toBe(
outputWithDataframeContent.join(''),
);
});
});
describe('default to plain text', () => {
beforeEach(() => {
const unknownType = json.cells[6];
createComponent(unknownType.outputs[0]);
});
it('renders as plain text', () => {
expect(wrapper.find('pre').exists()).toBe(true);
expect(wrapper.text()).toContain('testing');
});
it('renders prompt', () => {
expect(wrapper.find('.prompt span').exists()).toBe(true);
});
it("renders as plain text when doesn't recognise other types", () => {
const unknownType = json.cells[7];
createComponent(unknownType.outputs[0]);
expect(wrapper.find('pre').exists()).toBe(true);
expect(wrapper.text()).toContain('testing');
});
});
});
|
