spec/frontend/registry/explorer/components/details_page/tags_loader_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

import { shallowMount } from '@vue/test-utils';
import component from '~/registry/explorer/components/details_page/tags_loader.vue';
import { GlSkeletonLoader } from '../../stubs';

describe('TagsLoader component', () => {
  let wrapper;

  const findGlSkeletonLoaders = () => wrapper.findAll(GlSkeletonLoader);

  const mountComponent = () => {
    wrapper = shallowMount(component, {
      stubs: {
        GlSkeletonLoader,
      },
      // set the repeat to 1 to avoid a long and verbose snapshot
      loader: {
        ...component.loader,
        repeat: 1,
      },
    });
  };

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

  it('produces the correct amount of loaders ', () => {
    mountComponent();
    expect(findGlSkeletonLoaders().length).toBe(1);
  });

  it('has the correct props', () => {
    mountComponent();
    expect(
      findGlSkeletonLoaders()
        .at(0)
        .props(),
    ).toMatchObject({
      width: component.loader.width,
      height: component.loader.height,
    });
  });

  it('has the correct markup', () => {
    mountComponent();
    expect(wrapper.element).toMatchSnapshot();
  });
});