Add latest changes from gitlab-org/gitlab@master

1 files changed, 138 insertions, 0 deletions

diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
new file mode 100644
index 00000000000..f78c5f25ee7
--- /dev/null
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -0,0 +1,138 @@
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import TreeList from '~/diffs/components/tree_list.vue';
+import createStore from '~/diffs/store/modules';
+
+describe('Diffs tree list component', () => {
+  let wrapper;
+  const getFileRows = () => wrapper.findAll('.file-row');
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+
+  const createComponent = state => {
+    const store = new Vuex.Store({
+      modules: {
+        diffs: createStore(),
+      },
+    });
+
+    // Setup initial state
+    store.state.diffs.diffFiles.push('test');
+    store.state.diffs = {
+      addedLines: 10,
+      removedLines: 20,
+      ...store.state.diffs,
+      ...state,
+    };
+
+    wrapper = mount(TreeList, {
+      store,
+      localVue,
+      propsData: { hideFileStats: false },
+    });
+  };
+
+  beforeEach(() => {
+    localStorage.removeItem('mr_diff_tree_list');
+
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders empty text', () => {
+    expect(wrapper.text()).toContain('No files found');
+  });
+
+  describe('with files', () => {
+    beforeEach(() => {
+      const treeEntries = {
+        'index.js': {
+          addedLines: 0,
+          changed: true,
+          deleted: false,
+          fileHash: 'test',
+          key: 'index.js',
+          name: 'index.js',
+          path: 'app/index.js',
+          removedLines: 0,
+          tempFile: true,
+          type: 'blob',
+          parentPath: 'app',
+        },
+        app: {
+          key: 'app',
+          path: 'app',
+          name: 'app',
+          type: 'tree',
+          tree: [],
+        },
+      };
+
+      createComponent({
+        treeEntries,
+        tree: [treeEntries['index.js'], treeEntries.app],
+      });
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('renders tree', () => {
+      expect(getFileRows()).toHaveLength(2);
+      expect(
+        getFileRows()
+          .at(0)
+          .text(),
+      ).toContain('index.js');
+      expect(
+        getFileRows()
+          .at(1)
+          .text(),
+      ).toContain('app');
+    });
+
+    it('hides file stats', () => {
+      wrapper.setProps({ hideFileStats: true });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.file-row-stats').exists()).toBe(false);
+      });
+    });
+
+    it('calls toggleTreeOpen when clicking folder', () => {
+      jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
+
+      getFileRows()
+        .at(1)
+        .trigger('click');
+
+      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
+    });
+
+    it('calls scrollToFile when clicking blob', () => {
+      jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
+
+      wrapper.find('.file-row').trigger('click');
+
+      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'app/index.js');
+    });
+
+    it('renders as file list when renderTreeList is false', () => {
+      wrapper.vm.$store.state.diffs.renderTreeList = false;
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(getFileRows()).toHaveLength(1);
+      });
+    });
+
+    it('renders file paths when renderTreeList is false', () => {
+      wrapper.vm.$store.state.diffs.renderTreeList = false;
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.file-row').text()).toContain('index.js');
+      });
+    });
+  });
+});