summaryrefslogtreecommitdiff
path: root/spec/frontend/snippets/components/embed_dropdown_spec.js
blob: 8eb449656928d8dc5e0aed3031d770ad96e42ad4 (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
import { escape as esc } from 'lodash';
import { mount } from '@vue/test-utils';
import { GlFormInputGroup } from '@gitlab/ui';
import { TEST_HOST } from 'helpers/test_constants';
import EmbedDropdown from '~/snippets/components/embed_dropdown.vue';

const TEST_URL = `${TEST_HOST}/test/no">'xss`;

describe('snippets/components/embed_dropdown', () => {
  let wrapper;

  const createComponent = () => {
    wrapper = mount(EmbedDropdown, {
      propsData: {
        url: TEST_URL,
      },
    });
  };

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

  const findSectionsData = () => {
    const sections = [];
    let current = {};

    wrapper.findAll('[data-testid="header"],[data-testid="input"]').wrappers.forEach(x => {
      const type = x.attributes('data-testid');

      if (type === 'header') {
        current = {
          header: x.text(),
        };

        sections.push(current);
      } else {
        const value = x.find(GlFormInputGroup).props('value');
        const copyValue = x.find('button[title="Copy"]').attributes('data-clipboard-text');

        Object.assign(current, {
          value,
          copyValue,
        });
      }
    });

    return sections;
  };

  it('renders dropdown items', () => {
    createComponent();

    const embedValue = `<script src="${esc(TEST_URL)}.js"></script>`;

    expect(findSectionsData()).toEqual([
      {
        header: 'Embed',
        value: embedValue,
        copyValue: embedValue,
      },
      {
        header: 'Share',
        value: TEST_URL,
        copyValue: TEST_URL,
      },
    ]);
  });
});