ee_ancestor_tree_spec.js 2.07 KB
Newer Older
1
import { GlLoadingIcon } from '@gitlab/ui';
2
import { shallowMount } from '@vue/test-utils';
3
import { escape } from 'lodash';
4
import AncestorsTree from 'ee/sidebar/components/ancestors_tree/ancestors_tree.vue';
5 6

describe('AncestorsTreeContainer', () => {
7
  let wrapper;
8 9 10 11 12
  const ancestors = [
    { id: 1, url: '', title: 'A', state: 'open' },
    { id: 2, url: '', title: 'B', state: 'open' },
  ];

13 14 15 16 17 18 19 20 21 22
  const defaultProps = {
    ancestors,
    isFetching: false,
  };

  const createComponent = (props = {}) => {
    wrapper = shallowMount(AncestorsTree, {
      propsData: { ...defaultProps, ...props },
    });
  };
23 24

  afterEach(() => {
25 26 27 28
    if (wrapper) {
      wrapper.destroy();
      wrapper = null;
    }
29 30
  });

31 32 33 34
  const findTooltip = () => wrapper.find('.collapse-truncated-title');
  const containsTimeline = () => wrapper.contains('.vertical-timeline');
  const containsValue = () => wrapper.contains('.value');

35
  it('renders all ancestors rows', () => {
36 37 38
    createComponent();

    expect(wrapper.findAll('.vertical-timeline-row')).toHaveLength(ancestors.length);
39 40 41
  });

  it('renders tooltip with the immediate parent', () => {
42 43 44
    createComponent();

    expect(findTooltip().text()).toBe(ancestors.slice(-1)[0].title);
45 46
  });

47
  it('does not render timeline when fetching', () => {
48 49
    createComponent({
      isFetching: true,
50
    });
51 52 53

    expect(containsTimeline()).toBe(false);
    expect(containsValue()).toBe(false);
54 55
  });

56
  it('render `None` when ancestors is an empty array', () => {
57 58
    createComponent({
      ancestors: [],
59
    });
60 61 62

    expect(containsTimeline()).toBe(false);
    expect(containsValue()).not.toBe(false);
63 64
  });

65
  it('render loading icon when isFetching is true', () => {
66 67
    createComponent({
      isFetching: true,
68
    });
69 70

    expect(wrapper.contains(GlLoadingIcon)).toBe(true);
71
  });
72

73
  it('escapes html in the tooltip', () => {
74
    const title = '<script>alert(1);</script>';
75
    const escapedTitle = escape(title);
76

77 78
    createComponent({
      ancestors: [{ id: 1, url: '', title, state: 'open' }],
79
    });
80 81

    expect(findTooltip().text()).toBe(escapedTitle);
82
  });
83
});