Break up rendered output assertions for MR Widget Pipeline spec

We currently test all rendered output in a single spec (spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js):

it('should render template elements correctly', () => {
  expect(el.classList.contains('mr-widget-heading')).toBeTruthy();
  expect(el.querySelectorAll('.ci-status-icon.ci-status-icon-success').length).toEqual(1);
  expect(el.querySelector('.pipeline-id').textContent).toContain(`#${pipeline.id}`);
  expect(el.innerText).toContain('passed');
  expect(el.querySelector('.pipeline-id').getAttribute('href')).toEqual(pipeline.path);
  expect(el.querySelectorAll('.stage-container').length).toEqual(2);
  expect(el.querySelector('.js-ci-error')).toEqual(null);
  expect(el.querySelector('.js-commit-link').getAttribute('href')).toEqual(pipeline.commit.commit_path);
  expect(el.querySelector('.js-commit-link').textContent).toContain(pipeline.commit.short_id);
  expect(el.querySelector('.js-mr-coverage').textContent).toContain(`Coverage ${pipeline.coverage}%`);
});

These should be broken up into separate specs, so it's easier to debug failures and add to overtime.