summaryrefslogtreecommitdiff
path: root/spec/javascripts/notebook/cells/output/index_spec.js
blob: dbf79f85c7cb1530a71a40dc2667842e962142cc (plain)
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
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();
      });
    });
  });
});