gitlab-ce/spec/frontend/diffs/components/diff_file_header_spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { cloneDeep } from 'lodash';

import { mockTracking, triggerEvent } from 'helpers/tracking_helper';

import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import diffDiscussionsMockData from '../mock_data/diff_discussions';
import { truncateSha } from '~/lib/utils/text_utility';
import { diffViewerModes } from '~/ide/constants';
import { __, sprintf } from '~/locale';
import { scrollToElement } from '~/lib/utils/common_utils';

jest.mock('~/lib/utils/common_utils');

const diffFile = Object.freeze(
  Object.assign(diffDiscussionsMockData.diff_file, {
    edit_path: 'link:/to/edit/path',
    blob: {
      id: '848ed9407c6730ff16edb3dd24485a0eea24292a',
      path: 'lib/base.js',
      name: 'base.js',
      mode: '100644',
      readable_text: true,
      icon: 'doc-text',
    },
  }),
);

const localVue = createLocalVue();
localVue.use(Vuex);

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

  const diffHasExpandedDiscussionsResultMock = jest.fn();
  const diffHasDiscussionsResultMock = jest.fn();
  const defaultMockStoreConfig = {
    state: {},
    modules: {
      diffs: {
        namespaced: true,
        getters: {
          diffHasExpandedDiscussions: () => diffHasExpandedDiscussionsResultMock,
          diffHasDiscussions: () => diffHasDiscussionsResultMock,
        },
        actions: {
          toggleFileDiscussions: jest.fn(),
          toggleFileDiscussionWrappers: jest.fn(),
          toggleFullDiff: jest.fn(),
          toggleActiveFileByHash: jest.fn(),
        },
      },
    },
  };

  afterEach(() => {
    [
      diffHasDiscussionsResultMock,
      diffHasExpandedDiscussionsResultMock,
      ...Object.values(mockStoreConfig.modules.diffs.actions),
    ].forEach(mock => mock.mockReset());

    wrapper.destroy();
  });

  const findHeader = () => wrapper.find({ ref: 'header' });
  const findTitleLink = () => wrapper.find({ ref: 'titleWrapper' });
  const findExpandButton = () => wrapper.find({ ref: 'expandDiffToFullFileButton' });
  const findFileActions = () => wrapper.find('.file-actions');
  const findModeChangedLine = () => wrapper.find({ ref: 'fileMode' });
  const findLfsLabel = () => wrapper.find('.label-lfs');
  const findToggleDiscussionsButton = () => wrapper.find({ ref: 'toggleDiscussionsButton' });
  const findExternalLink = () => wrapper.find({ ref: 'externalLink' });
  const findReplacedFileButton = () => wrapper.find({ ref: 'replacedFileButton' });
  const findViewFileButton = () => wrapper.find({ ref: 'viewButton' });
  const findCollapseIcon = () => wrapper.find({ ref: 'collapseIcon' });
  const findEditButton = () => wrapper.find({ ref: 'editButton' });

  const createComponent = props => {
    mockStoreConfig = cloneDeep(defaultMockStoreConfig);
    const store = new Vuex.Store(mockStoreConfig);

    wrapper = shallowMount(DiffFileHeader, {
      propsData: {
        diffFile,
        canCurrentUserFork: false,
        viewDiffsFileByFile: false,
        ...props,
      },
      localVue,
      store,
    });
  };

  it.each`
    visibility   | collapsible
    ${'visible'} | ${true}
    ${'hidden'}  | ${false}
  `('collapse toggle is $visibility if collapsible is $collapsible', ({ collapsible }) => {
    createComponent({ collapsible });
    expect(findCollapseIcon().exists()).toBe(collapsible);
  });

  it.each`
    expanded | icon
    ${true}  | ${'chevron-down'}
    ${false} | ${'chevron-right'}
  `('collapse icon is $icon if expanded is $expanded', ({ icon, expanded }) => {
    createComponent({ expanded, collapsible: true });
    expect(findCollapseIcon().props('name')).toBe(icon);
  });

  it('when header is clicked emits toggleFile', () => {
    createComponent();
    findHeader().trigger('click');

    return wrapper.vm.$nextTick().then(() => {
      expect(wrapper.emitted().toggleFile).toBeDefined();
    });
  });

  it('when collapseIcon is clicked emits toggleFile', () => {
    createComponent({ collapsible: true });
    findCollapseIcon().vm.$emit('click', new Event('click'));
    return wrapper.vm.$nextTick().then(() => {
      expect(wrapper.emitted().toggleFile).toBeDefined();
    });
  });

  it('when other element in header is clicked does not emits toggleFile', () => {
    createComponent({ collapsible: true });
    findTitleLink().trigger('click');

    return wrapper.vm.$nextTick().then(() => {
      expect(wrapper.emitted().toggleFile).not.toBeDefined();
    });
  });

  describe('copy to clipboard', () => {
    beforeEach(() => {
      createComponent();
    });

    it('displays a copy to clipboard button', () => {
      expect(wrapper.find(ClipboardButton).exists()).toBe(true);
    });

    it('triggers the copy to clipboard tracking event', () => {
      const trackingSpy = mockTracking('_category_', wrapper.vm.$el, jest.spyOn);

      triggerEvent('[data-testid="diff-file-copy-clipboard"]');

      expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_copy_file_button', {
        label: 'diff_copy_file_path_button',
        property: 'diff_copy_file',
      });
    });
  });

  describe('for submodule', () => {
    const submoduleDiffFile = {
      ...diffFile,
      submodule: true,
      submodule_link: 'link://to/submodule',
    };

    it('prefers submodule_tree_url over submodule_link for href', () => {
      const submoduleTreeUrl = 'some://tree/url';
      createComponent({
        discussionLink: 'discussionLink',
        diffFile: {
          ...submoduleDiffFile,
          submodule_tree_url: 'some://tree/url',
        },
      });

      expect(findTitleLink().attributes('href')).toBe(submoduleTreeUrl);
    });

    it('uses submodule_link for href if submodule_tree_url does not exists', () => {
      const submoduleLink = 'link://to/submodule';
      createComponent({
        discussionLink: 'discussionLink',
        diffFile: submoduleDiffFile,
      });

      expect(findTitleLink().attributes('href')).toBe(submoduleLink);
    });

    it('uses file_path + SHA as link text', () => {
      createComponent({
        diffFile: submoduleDiffFile,
      });

      expect(findTitleLink().text()).toContain(
        `${diffFile.file_path} @ ${truncateSha(diffFile.blob.id)}`,
      );
    });

    it('does not render file actions', () => {
      createComponent({
        diffFile: submoduleDiffFile,
        addMergeRequestButtons: true,
      });
      expect(findFileActions().exists()).toBe(false);
    });

    it('renders submodule icon', () => {
      createComponent({
        diffFile: submoduleDiffFile,
      });

      expect(wrapper.find(FileIcon).props('submodule')).toBe(true);
    });
  });

  describe('for any file', () => {
    const otherModes = Object.keys(diffViewerModes).filter(m => m !== 'mode_changed');

    it('for mode_changed file mode displays mode changes', () => {
      createComponent({
        diffFile: {
          ...diffFile,
          a_mode: 'old-mode',
          b_mode: 'new-mode',
          viewer: {
            ...diffFile.viewer,
            name: diffViewerModes.mode_changed,
          },
        },
      });
      expect(findModeChangedLine().text()).toMatch(/old-mode.+new-mode/);
    });

    it.each(otherModes.map(m => [m]))('for %s file mode does not display mode changes', mode => {
      createComponent({
        diffFile: {
          ...diffFile,
          a_mode: 'old-mode',
          b_mode: 'new-mode',
          viewer: {
            ...diffFile.viewer,
            name: diffViewerModes[mode],
          },
        },
      });
      expect(findModeChangedLine().exists()).toBeFalsy();
    });

    it('displays the LFS label for files stored in LFS', () => {
      createComponent({
        diffFile: { ...diffFile, stored_externally: true, external_storage: 'lfs' },
      });
      expect(findLfsLabel().exists()).toBe(true);
    });

    it('does not display the LFS label for files stored in repository', () => {
      createComponent({
        diffFile: { ...diffFile, stored_externally: false },
      });
      expect(findLfsLabel().exists()).toBe(false);
    });

    it('does not render view replaced file button if no replaced view path is present', () => {
      createComponent({
        diffFile: { ...diffFile, replaced_view_path: null },
      });
      expect(findReplacedFileButton().exists()).toBe(false);
    });

    describe('when addMergeRequestButtons is false', () => {
      it('does not render file actions', () => {
        createComponent({ addMergeRequestButtons: false });
        expect(findFileActions().exists()).toBe(false);
      });
      it('should not render edit button', () => {
        createComponent({ addMergeRequestButtons: false });
        expect(findEditButton().exists()).toBe(false);
      });
    });

    describe('when addMergeRequestButtons is true', () => {
      describe('without discussions', () => {
        it('does not render a toggle discussions button', () => {
          diffHasDiscussionsResultMock.mockReturnValue(false);
          createComponent({ addMergeRequestButtons: true });
          expect(findToggleDiscussionsButton().exists()).toBe(false);
        });
      });

      describe('with discussions', () => {
        it('dispatches toggleFileDiscussionWrappers when user clicks on toggle discussions button', () => {
          diffHasDiscussionsResultMock.mockReturnValue(true);
          createComponent({ addMergeRequestButtons: true });
          expect(findToggleDiscussionsButton().exists()).toBe(true);
          findToggleDiscussionsButton().vm.$emit('click');
          expect(
            mockStoreConfig.modules.diffs.actions.toggleFileDiscussionWrappers,
          ).toHaveBeenCalledWith(expect.any(Object), diffFile);
        });
      });

      it('should show edit button', () => {
        createComponent({
          addMergeRequestButtons: true,
        });
        expect(findEditButton().exists()).toBe(true);
      });

      describe('view on environment button', () => {
        it('is displayed when external url is provided', () => {
          const externalUrl = 'link://to/external';
          const formattedExternalUrl = 'link://formatted';
          createComponent({
            diffFile: {
              ...diffFile,
              external_url: externalUrl,
              formatted_external_url: formattedExternalUrl,
            },
            addMergeRequestButtons: true,
          });
          expect(findExternalLink().exists()).toBe(true);
        });

        it('is hidden by default', () => {
          createComponent({ addMergeRequestButtons: true });
          expect(findExternalLink().exists()).toBe(false);
        });
      });

      describe('without file blob', () => {
        beforeEach(() => {
          createComponent({ diffFile: { ...diffFile, blob: false } });
        });

        it('should not render toggle discussions button', () => {
          expect(findToggleDiscussionsButton().exists()).toBe(false);
        });

        it('should not render edit button', () => {
          expect(findEditButton().exists()).toBe(false);
        });
      });
      describe('with file blob', () => {
        it('should render correct file view button', () => {
          const viewPath = 'link://view-path';
          createComponent({
            diffFile: { ...diffFile, view_path: viewPath },
            addMergeRequestButtons: true,
          });
          expect(findViewFileButton().attributes('href')).toBe(viewPath);
          expect(findViewFileButton().text()).toEqual(
            `View file @ ${diffFile.content_sha.substr(0, 8)}`,
          );
        });
      });
    });

    describe('expand full file button', () => {
      describe('when diff is fully expanded', () => {
        it('is not rendered', () => {
          createComponent({
            diffFile: {
              ...diffFile,
              is_fully_expanded: true,
            },
          });
          expect(findExpandButton().exists()).toBe(false);
        });
      });
      describe('when diff is not fully expanded', () => {
        const fullyNotExpandedFileProps = {
          diffFile: {
            ...diffFile,
            is_fully_expanded: false,
            edit_path: 'link/to/edit/path.txt',
            isShowingFullFile: false,
          },
          addMergeRequestButtons: true,
        };

        it('renders expand to full file button if not showing full file already', () => {
          createComponent(fullyNotExpandedFileProps);
          expect(findExpandButton().exists()).toBe(true);
        });

        it('renders loading icon when loading full file', () => {
          createComponent(fullyNotExpandedFileProps);
          expect(findExpandButton().exists()).toBe(true);
        });

        it('toggles full diff on click', () => {
          createComponent(fullyNotExpandedFileProps);
          findExpandButton().vm.$emit('click');
          expect(mockStoreConfig.modules.diffs.actions.toggleFullDiff).toHaveBeenCalled();
        });
      });
    });

    it('uses discussionPath for link if it is defined', () => {
      const discussionPath = 'link://to/discussion';
      createComponent({
        discussionPath,
      });
      expect(findTitleLink().attributes('href')).toBe(discussionPath);
    });

    it('uses local anchor for link as last resort', () => {
      createComponent();
      expect(findTitleLink().attributes('href')).toMatch(/^#diff-content/);
    });

    describe('when local anchor for link is clicked', () => {
      beforeEach(() => {
        createComponent();
      });

      it('scrolls to target', () => {
        findTitleLink().trigger('click');
        expect(scrollToElement).toHaveBeenCalled();
      });

      it('updates anchor in URL', () => {
        findTitleLink().trigger('click');
        expect(window.location.href).toMatch(/#diff-content/);
      });
    });
  });

  describe('for new file', () => {
    it('displays the path', () => {
      createComponent({ diffFile: { ...diffFile, new_file: true } });
      expect(findTitleLink().text()).toBe(diffFile.file_path);
    });
  });

  describe('for deleted file', () => {
    it('displays the path', () => {
      createComponent({ diffFile: { ...diffFile, deleted_file: true } });
      expect(findTitleLink().text()).toBe(
        sprintf(__('%{filePath} deleted'), { filePath: diffFile.file_path }, false),
      );
    });

    it('does not show edit button', () => {
      createComponent({ diffFile: { ...diffFile, deleted_file: true } });
      expect(findEditButton().exists()).toBe(false);
    });
  });

  describe('for renamed file', () => {
    it('displays old and new path if the file was renamed', () => {
      createComponent({
        diffFile: {
          ...diffFile,
          renamed_file: true,
          old_path_html: 'old',
          new_path_html: 'new',
        },
      });
      expect(findTitleLink().text()).toMatch(/^old.+new/s);
    });
  });

  describe('for replaced file', () => {
    it('renders view replaced file button', () => {
      const replacedViewPath = 'some/path';
      createComponent({
        diffFile: {
          ...diffFile,
          replaced_view_path: replacedViewPath,
        },
        addMergeRequestButtons: true,
      });
      expect(findReplacedFileButton().exists()).toBe(true);
    });
  });
});