BigW Consortium Gitlab

pipelines_table_row_spec.js 5.16 KB
Newer Older
1
import Vue from 'vue';
2
import tableRowComp from '~/pipelines/components/pipelines_table_row.vue';
3 4

describe('Pipelines Table Row', () => {
5
  const jsonFixtureName = 'pipelines/pipelines.json';
winh committed
6 7 8 9 10 11
  const buildComponent = (pipeline) => {
    const PipelinesTableRowComponent = Vue.extend(tableRowComp);
    return new PipelinesTableRowComponent({
      el: document.querySelector('.test-dom-element'),
      propsData: {
        pipeline,
12
        autoDevopsHelpPath: 'foo',
Filipa Lacerda committed
13
        viewType: 'root',
winh committed
14 15 16
      },
    }).$mount();
  };
17

18
  let component;
19
  let pipeline;
winh committed
20 21
  let pipelineWithoutAuthor;
  let pipelineWithoutCommit;
22 23

  preloadFixtures(jsonFixtureName);
24 25

  beforeEach(() => {
26 27 28
    const pipelines = getJSONFixture(jsonFixtureName).pipelines;

    pipeline = pipelines.find(p => p.user !== null && p.commit !== null);
29 30
    pipelineWithoutAuthor = pipelines.find(p => p.user === null && p.commit !== null);
    pipelineWithoutCommit = pipelines.find(p => p.user === null && p.commit === null);
winh committed
31
  });
32

winh committed
33 34
  afterEach(() => {
    component.$destroy();
35 36 37
  });

  it('should render a table row', () => {
winh committed
38
    component = buildComponent(pipeline);
39
    expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
40 41 42
  });

  describe('status column', () => {
winh committed
43 44 45 46
    beforeEach(() => {
      component = buildComponent(pipeline);
    });

47 48
    it('should render a pipeline link', () => {
      expect(
49
        component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
50 51 52 53 54
      ).toEqual(pipeline.path);
    });

    it('should render status text', () => {
      expect(
55
        component.$el.querySelector('.table-section.commit-link a').textContent,
56 57 58 59 60
      ).toContain(pipeline.details.status.text);
    });
  });

  describe('information column', () => {
winh committed
61 62 63 64
    beforeEach(() => {
      component = buildComponent(pipeline);
    });

65 66
    it('should render a pipeline link', () => {
      expect(
67
        component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
68 69 70 71 72
      ).toEqual(pipeline.path);
    });

    it('should render pipeline ID', () => {
      expect(
73
        component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
74 75 76 77 78 79
      ).toEqual(`#${pipeline.id}`);
    });

    describe('when a user is provided', () => {
      it('should render user information', () => {
        expect(
80
          component.$el.querySelector('.table-section:nth-child(2) a:nth-child(3)').getAttribute('href'),
81
        ).toEqual(pipeline.user.path);
82 83

        expect(
84
          component.$el.querySelector('.table-section:nth-child(2) img').getAttribute('data-original-title'),
85 86 87 88 89 90 91
        ).toEqual(pipeline.user.name);
      });
    });
  });

  describe('commit column', () => {
    it('should render link to commit', () => {
winh committed
92 93
      component = buildComponent(pipeline);

94
      const commitLink = component.$el.querySelector('.branch-commit .commit-sha');
winh committed
95 96 97 98 99 100 101 102 103 104 105 106
      expect(commitLink.getAttribute('href')).toEqual(pipeline.commit.commit_path);
    });

    const findElements = () => {
      const commitTitleElement = component.$el.querySelector('.branch-commit .commit-title');
      const commitAuthorElement = commitTitleElement.querySelector('a.avatar-image-container');

      if (!commitAuthorElement) {
        return { commitAuthorElement };
      }

      const commitAuthorLink = commitAuthorElement.getAttribute('href');
107
      const commitAuthorName = commitAuthorElement.querySelector('img.avatar').getAttribute('data-original-title');
winh committed
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124

      return { commitAuthorElement, commitAuthorLink, commitAuthorName };
    };

    it('renders nothing without commit', () => {
      expect(pipelineWithoutCommit.commit).toBe(null);
      component = buildComponent(pipelineWithoutCommit);

      const { commitAuthorElement } = findElements();

      expect(commitAuthorElement).toBe(null);
    });

    it('renders commit author', () => {
      component = buildComponent(pipeline);
      const { commitAuthorLink, commitAuthorName } = findElements();

125
      expect(commitAuthorLink).toEqual(pipeline.commit.author.path);
winh committed
126 127 128 129 130 131 132 133 134 135 136
      expect(commitAuthorName).toEqual(pipeline.commit.author.username);
    });

    it('renders commit with unregistered author', () => {
      expect(pipelineWithoutAuthor.commit.author).toBe(null);
      component = buildComponent(pipelineWithoutAuthor);

      const { commitAuthorLink, commitAuthorName } = findElements();

      expect(commitAuthorLink).toEqual(`mailto:${pipelineWithoutAuthor.commit.author_email}`);
      expect(commitAuthorName).toEqual(pipelineWithoutAuthor.commit.author_name);
137 138 139 140
    });
  });

  describe('stages column', () => {
winh committed
141 142 143 144
    beforeEach(() => {
      component = buildComponent(pipeline);
    });

145 146
    it('should render an icon for each stage', () => {
      expect(
147
        component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
148 149 150 151 152
      ).toEqual(pipeline.details.stages.length);
    });
  });

  describe('actions column', () => {
winh committed
153 154 155 156
    beforeEach(() => {
      component = buildComponent(pipeline);
    });

157 158
    it('should render the provided actions', () => {
      expect(
159
        component.$el.querySelectorAll('.table-section:nth-child(6) ul li').length,
160 161 162 163
      ).toEqual(pipeline.details.manual_actions.length);
    });
  });
});