spec/frontend/vue_shared/components/code_block_highlighted_spec.js


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

import { shallowMount } from '@vue/test-utils';
import CodeBlock from '~/vue_shared/components/code_block_highlighted.vue';
import waitForPromises from 'helpers/wait_for_promises';

describe('Code Block Highlighted', () => {
  let wrapper;

  const code = 'const foo = 1;';

  const createComponent = (propsData = {}) => {
    wrapper = shallowMount(CodeBlock, { propsData });
  };

  afterEach(() => {
    wrapper.destroy();
  });

  it('renders highlighted code if language is supported', async () => {
    createComponent({ code, language: 'javascript' });

    await waitForPromises();

    expect(wrapper.element).toMatchInlineSnapshot(`
      <code-block-stub
        class="highlight"
        code=""
        maxheight="initial"
      >
        <span>
          <span
            class="hljs-keyword"
          >
            const
          </span>
           foo = 
          <span
            class="hljs-number"
          >
            1
          </span>
          ;
        </span>
      </code-block-stub>
    `);
  });

  it("renders plain text if language isn't supported", async () => {
    createComponent({ code, language: 'foobar' });
    await waitForPromises();

    expect(wrapper.emitted('error')).toEqual([[expect.any(TypeError)]]);

    expect(wrapper.element).toMatchInlineSnapshot(`
      <code-block-stub
        class="highlight"
        code=""
        maxheight="initial"
      >
        <span>
          const foo = 1;
        </span>
      </code-block-stub>
    `);
  });
});