import { shallowMount } from '@vue/test-utils';

import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';

import { returnUrl, savedContentMeta } from '../mock_data';

describe('~/static_site_editor/components/saved_changes_message.vue', () => {
  let wrapper;
  const { branch, commit, mergeRequest } = savedContentMeta;
  const props = {
    branch,
    commit,
    mergeRequest,
    returnUrl,
  };
  const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' });
  const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' });
  const findBranchLink = () => wrapper.find({ ref: 'branchLink' });
  const findCommitLink = () => wrapper.find({ ref: 'commitLink' });
  const findMergeRequestLink = () => wrapper.find({ ref: 'mergeRequestLink' });

  beforeEach(() => {
    wrapper = shallowMount(SavedChangesMessage, {
      propsData: props,
    });
  });

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

  it.each`
    text                    | findEl                    | url
    ${'Return to site'}     | ${findReturnToSiteButton} | ${props.returnUrl}
    ${'View merge request'} | ${findMergeRequestButton} | ${props.mergeRequest.url}
  `('renders "$text" button link', ({ text, findEl, url }) => {
    const btn = findEl();

    expect(btn.exists()).toBe(true);
    expect(btn.text()).toBe(text);
    expect(btn.attributes('href')).toBe(url);
  });

  it.each`
    desc               | findEl                  | prop
    ${'branch'}        | ${findBranchLink}       | ${props.branch}
    ${'commit'}        | ${findCommitLink}       | ${props.commit}
    ${'merge request'} | ${findMergeRequestLink} | ${props.mergeRequest}
  `('renders $desc link', ({ findEl, prop }) => {
    const el = findEl();

    expect(el.exists()).toBe(true);
    expect(el.text()).toBe(prop.label);
    expect(el.attributes('href')).toBe(prop.url);
  });
});
