spec/frontend/super_sidebar/components/sidebar_portal_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
66
67
68

import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import SidebarPortal from '~/super_sidebar/components/sidebar_portal.vue';
import SidebarPortalTarget from '~/super_sidebar/components/sidebar_portal_target.vue';

describe('SidebarPortal', () => {
  let targetWrapper;

  const Target = {
    components: { SidebarPortalTarget },
    props: ['show'],
    template: '<sidebar-portal-target v-if="show" />',
  };

  const Source = {
    components: { SidebarPortal },
    template: '<sidebar-portal><br data-testid="test"></sidebar-portal>',
  };

  const mountSource = () => {
    mount(Source);
  };

  const mountTarget = ({ show = true } = {}) => {
    targetWrapper = mount(Target, {
      propsData: { show },
      attachTo: document.body,
    });
  };

  const findTestContent = () => targetWrapper.find('[data-testid="test"]');

  it('renders content into the target', async () => {
    mountTarget();
    await nextTick();

    mountSource();
    await nextTick();

    expect(findTestContent().exists()).toBe(true);
  });

  it('waits for target to be available before rendering', async () => {
    mountSource();
    await nextTick();

    mountTarget();
    await nextTick();

    expect(findTestContent().exists()).toBe(true);
  });

  it('supports conditional rendering of target', async () => {
    mountTarget({ show: false });
    await nextTick();

    mountSource();
    await nextTick();

    expect(findTestContent().exists()).toBe(false);

    await targetWrapper.setProps({ show: true });
    expect(findTestContent().exists()).toBe(true);

    await targetWrapper.setProps({ show: false });
    expect(findTestContent().exists()).toBe(false);
  });
});