gitlab-org--gitlab-foss/spec/frontend/ide/components/repo_commit_section_spec.js

import { mount } from '@vue/test-utils';
import { keepAlive } from 'helpers/keep_alive_component_helper';
import EmptyState from '~/ide/components/commit_sidebar/empty_state.vue';
import RepoCommitSection from '~/ide/components/repo_commit_section.vue';
import { stageKeys } from '~/ide/constants';
import { createRouter } from '~/ide/ide_router';
import { createStore } from '~/ide/stores';
import { file } from '../helpers';

const TEST_NO_CHANGES_SVG = 'nochangessvg';

describe('RepoCommitSection', () => {
  let wrapper;
  let router;
  let store;

  function createComponent() {
    wrapper = mount(keepAlive(RepoCommitSection), { store });
  }

  function setupDefaultState() {
    store.state.noChangesStateSvgPath = 'svg';
    store.state.committedStateSvgPath = 'commitsvg';
    store.state.currentProjectId = 'abcproject';
    store.state.currentBranchId = 'main';
    store.state.projects.abcproject = {
      web_url: '',
      branches: {
        main: {
          workingReference: '1',
        },
      },
    };

    const files = [file('file1'), file('file2')].map((f) =>
      Object.assign(f, {
        type: 'blob',
        content: 'orginal content',
      }),
    );

    store.state.currentBranch = 'main';
    store.state.changedFiles = [];
    store.state.stagedFiles = [{ ...files[0] }, { ...files[1] }];
    store.state.stagedFiles.forEach((f) =>
      Object.assign(f, {
        changed: true,
        staged: true,
        content: 'testing',
      }),
    );

    files.forEach((f) => {
      store.state.entries[f.path] = f;
    });
  }

  beforeEach(() => {
    store = createStore();
    router = createRouter(store);

    jest.spyOn(store, 'dispatch');
    jest.spyOn(router, 'push').mockImplementation();
  });

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

  describe('empty state', () => {
    beforeEach(() => {
      store.state.noChangesStateSvgPath = TEST_NO_CHANGES_SVG;
      store.state.committedStateSvgPath = 'svg';

      createComponent();
    });

    it('renders no changes text', () => {
      expect(wrapper.find(EmptyState).text().trim()).toContain('No changes');
      expect(wrapper.find(EmptyState).find('img').attributes('src')).toBe(TEST_NO_CHANGES_SVG);
    });
  });

  describe('default', () => {
    beforeEach(() => {
      setupDefaultState();

      createComponent();
    });

    it('opens last opened file', () => {
      expect(store.state.openFiles.length).toBe(1);
      expect(store.state.openFiles[0].pending).toBe(true);
    });

    it('calls openPendingTab', () => {
      expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', {
        file: store.getters.lastOpenedFile,
        keyPrefix: stageKeys.staged,
      });
    });

    it('renders a commit section', () => {
      const allFiles = store.state.changedFiles.concat(store.state.stagedFiles);
      const changedFileNames = wrapper
        .findAll('.multi-file-commit-list > li')
        .wrappers.map((x) => x.text().trim());

      expect(changedFileNames).toEqual(allFiles.map((x) => x.path));
    });

    it('does not show empty state', () => {
      expect(wrapper.find(EmptyState).exists()).toBe(false);
    });
  });

  describe('if nothing is changed or staged', () => {
    beforeEach(() => {
      setupDefaultState();

      store.state.openFiles = [...Object.values(store.state.entries)];
      store.state.openFiles[0].active = true;
      store.state.stagedFiles = [];

      createComponent();
    });

    it('opens currently active file', () => {
      expect(store.state.openFiles.length).toBe(1);
      expect(store.state.openFiles[0].pending).toBe(true);

      expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', {
        file: store.state.entries[store.getters.activeFile.path],
        keyPrefix: stageKeys.unstaged,
      });
    });
  });

  describe('with unstaged file', () => {
    beforeEach(() => {
      setupDefaultState();

      store.state.changedFiles = store.state.stagedFiles.map((x) =>
        Object.assign(x, { staged: false }),
      );
      store.state.stagedFiles = [];

      createComponent();
    });

    it('calls openPendingTab with unstaged prefix', () => {
      expect(store.dispatch).toHaveBeenCalledWith('openPendingTab', {
        file: store.getters.lastOpenedFile,
        keyPrefix: stageKeys.unstaged,
      });
    });

    it('does not show empty state', () => {
      expect(wrapper.find(EmptyState).exists()).toBe(false);
    });
  });

  describe('activated', () => {
    let inititializeSpy;

    beforeEach(async () => {
      createComponent();

      inititializeSpy = jest.spyOn(wrapper.find(RepoCommitSection).vm, 'initialize');
      store.state.viewer = 'diff';

      await wrapper.vm.reactivate();
    });

    it('re initializes the component', () => {
      expect(inititializeSpy).toHaveBeenCalled();
    });
  });
});