repo_sidebar_spec.js 5.03 KB
Newer Older
1
import Vue from 'vue';
2 3
import Helper from '~/repo/helpers/repo_helper';
import RepoService from '~/repo/services/repo_service';
4 5
import RepoStore from '~/repo/stores/repo_store';
import repoSidebar from '~/repo/components/repo_sidebar.vue';
Phil Hughes's avatar
Phil Hughes committed
6
import { file } from '../mock_data';
7

Mike Greiling's avatar
Mike Greiling committed
8
describe('RepoSidebar', () => {
Tim Zallmann's avatar
Tim Zallmann committed
9 10
  let vm;

11 12 13 14 15 16
  function createComponent() {
    const RepoSidebar = Vue.extend(repoSidebar);

    return new RepoSidebar().$mount();
  }

Tim Zallmann's avatar
Tim Zallmann committed
17 18
  afterEach(() => {
    vm.$destroy();
Phil Hughes's avatar
Phil Hughes committed
19 20 21

    RepoStore.files = [];
    RepoStore.openedFiles = [];
Tim Zallmann's avatar
Tim Zallmann committed
22 23
  });

24
  it('renders a sidebar', () => {
Phil Hughes's avatar
Phil Hughes committed
25
    RepoStore.files = [file()];
Jacob Schatz's avatar
Jacob Schatz committed
26
    RepoStore.openedFiles = [];
Phil Hughes's avatar
Phil Hughes committed
27
    RepoStore.isRoot = true;
Tim Zallmann's avatar
Tim Zallmann committed
28 29

    vm = createComponent();
30 31 32 33 34
    const thead = vm.$el.querySelector('thead');
    const tbody = vm.$el.querySelector('tbody');

    expect(vm.$el.id).toEqual('sidebar');
    expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
Phil Hughes's avatar
Phil Hughes committed
35 36 37
    expect(thead.querySelector('.name').textContent.trim()).toEqual('Name');
    expect(thead.querySelector('.last-commit').textContent.trim()).toEqual('Last commit');
    expect(thead.querySelector('.last-update').textContent.trim()).toEqual('Last update');
38
    expect(tbody.querySelector('.repo-file-options')).toBeFalsy();
39
    expect(tbody.querySelector('.prev-directory')).toBeFalsy();
40 41 42 43 44 45 46 47
    expect(tbody.querySelector('.loading-file')).toBeFalsy();
    expect(tbody.querySelector('.file')).toBeTruthy();
  });

  it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', () => {
    RepoStore.openedFiles = [{
      id: 0,
    }];
Tim Zallmann's avatar
Tim Zallmann committed
48
    vm = createComponent();
49 50

    expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
Phil Hughes's avatar
Phil Hughes committed
51 52
    expect(vm.$el.querySelector('thead')).toBeTruthy();
    expect(vm.$el.querySelector('thead .repo-file-options')).toBeTruthy();
53 54 55
  });

  it('renders 5 loading files if tree is loading and not hasFiles', () => {
Phil Hughes's avatar
Phil Hughes committed
56
    RepoStore.loading.tree = true;
57
    RepoStore.files = [];
Tim Zallmann's avatar
Tim Zallmann committed
58
    vm = createComponent();
59 60

    expect(vm.$el.querySelectorAll('tbody .loading-file').length).toEqual(5);
61
  });
62

Phil Hughes's avatar
Phil Hughes committed
63 64 65
  it('renders a prev directory if is not root', () => {
    RepoStore.files = [file()];
    RepoStore.isRoot = false;
66
    RepoStore.loading.tree = false;
Tim Zallmann's avatar
Tim Zallmann committed
67
    vm = createComponent();
68 69 70

    expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
  });
71

72 73 74 75 76 77 78 79 80 81 82 83 84
  describe('flattendFiles', () => {
    it('returns a flattend array of files', () => {
      const f = file();
      f.files.push(file('testing 123'));
      const files = [f, file()];
      vm = createComponent();
      vm.files = files;

      expect(vm.flattendFiles.length).toBe(3);
      expect(vm.flattendFiles[1].name).toBe('testing 123');
    });
  });

85 86 87
  describe('methods', () => {
    describe('fileClicked', () => {
      it('should fetch data for new file', () => {
88
        spyOn(Helper, 'getContent').and.callThrough();
Phil Hughes's avatar
Phil Hughes committed
89
        RepoStore.files = [file()];
90
        RepoStore.isRoot = true;
Tim Zallmann's avatar
Tim Zallmann committed
91
        vm = createComponent();
92

Phil Hughes's avatar
Phil Hughes committed
93
        vm.fileClicked(RepoStore.files[0]);
94

Phil Hughes's avatar
Phil Hughes committed
95
        expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[0]);
96 97
      });

98
      it('should not fetch data for already opened files', () => {
Phil Hughes's avatar
Phil Hughes committed
99 100
        const f = file();
        spyOn(Helper, 'getFileFromPath').and.returnValue(f);
101
        spyOn(RepoStore, 'setActiveFiles');
Tim Zallmann's avatar
Tim Zallmann committed
102
        vm = createComponent();
Phil Hughes's avatar
Phil Hughes committed
103
        vm.fileClicked(f);
104

Phil Hughes's avatar
Phil Hughes committed
105
        expect(RepoStore.setActiveFiles).toHaveBeenCalledWith(f);
106 107
      });

108
      it('should hide files in directory if already open', () => {
Phil Hughes's avatar
Phil Hughes committed
109 110 111 112 113
        spyOn(Helper, 'setDirectoryToClosed').and.callThrough();
        const f = file();
        f.opened = true;
        f.type = 'tree';
        RepoStore.files = [f];
Tim Zallmann's avatar
Tim Zallmann committed
114
        vm = createComponent();
115

Phil Hughes's avatar
Phil Hughes committed
116
        vm.fileClicked(RepoStore.files[0]);
117

Phil Hughes's avatar
Phil Hughes committed
118
        expect(Helper.setDirectoryToClosed).toHaveBeenCalledWith(RepoStore.files[0]);
119 120 121 122 123 124
      });
    });

    describe('goToPreviousDirectoryClicked', () => {
      it('should hide files in directory if already open', () => {
        const prevUrl = 'foo/bar';
Tim Zallmann's avatar
Tim Zallmann committed
125
        vm = createComponent();
126 127 128 129 130 131

        vm.goToPreviousDirectoryClicked(prevUrl);

        expect(RepoService.url).toEqual(prevUrl);
      });
    });
132 133

    describe('back button', () => {
Phil Hughes's avatar
Phil Hughes committed
134 135 136 137 138 139 140 141 142 143
      beforeEach(() => {
        const f = file();
        const file2 = Object.assign({}, file());
        file2.url = 'test';
        RepoStore.files = [f, file2];
        RepoStore.openedFiles = [];
        RepoStore.isRoot = true;

        vm = createComponent();
      });
144 145 146

      it('render previous file when using back button', () => {
        spyOn(Helper, 'getContent').and.callThrough();
Tim Zallmann's avatar
Tim Zallmann committed
147

Phil Hughes's avatar
Phil Hughes committed
148 149
        vm.fileClicked(RepoStore.files[1]);
        expect(Helper.getContent).toHaveBeenCalledWith(RepoStore.files[1]);
150 151 152

        history.pushState({
          key: Math.random(),
Phil Hughes's avatar
Phil Hughes committed
153
        }, '', RepoStore.files[1].url);
154 155 156 157
        const popEvent = document.createEvent('Event');
        popEvent.initEvent('popstate', true, true);
        window.dispatchEvent(popEvent);

Phil Hughes's avatar
Phil Hughes committed
158
        expect(Helper.getContent.calls.mostRecent().args[0].url).toContain(RepoStore.files[1].url);
159 160

        window.history.pushState({}, null, '/');
161 162
      });
    });
163
  });
164
});