correctly updates commit data after committing changes

also merges data in after a fetch to save overriting all data.
changed the render keys to save a full re-render when any data changes

2 files changed, 51 insertions, 3 deletions

diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
index c45f8a18d1f..bf9181fb09c 100644
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -20,7 +20,7 @@ describe('RepoFile', () => {
     resetStore(vm.$store);
   });
 
-  it('renders link, icon, name and last commit details', () => {
+  it('renders link, icon and name', () => {
     const RepoFile = Vue.extend(repoFile);
     vm = new RepoFile({
       store,
@@ -37,10 +37,9 @@ describe('RepoFile', () => {
     expect(vm.$el.querySelector(`.${vm.file.icon}`).style.marginLeft).toEqual('0px');
     expect(name.href).toMatch(`/${vm.file.url}`);
     expect(name.textContent.trim()).toEqual(vm.file.name);
-    expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(vm.file.lastCommit.message);
-    expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated);
     expect(fileIcon.classList.contains(vm.file.icon)).toBeTruthy();
     expect(fileIcon.style.marginLeft).toEqual(`${vm.file.level * 10}px`);
+    expect(vm.$el.querySelectorAll('.animation-container').length).toBe(2);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
new file mode 100644
index 00000000000..a5db0b2c59e
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js
@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Skeleton loading container', () => {
+  let vm;
+
+  beforeEach(() => {
+    const component = Vue.extend(skeletonLoadingContainer);
+    vm = mountComponent(component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders 6 skeleton lines by default', () => {
+    expect(vm.$el.querySelector('.skeleton-line-6')).not.toBeNull();
+  });
+
+  it('renders in full mode by default', () => {
+    expect(vm.$el.classList.contains('animation-container-small')).toBeFalsy();
+  });
+
+  describe('small', () => {
+    beforeEach((done) => {
+      vm.small = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('renders in small mode', () => {
+      expect(vm.$el.classList.contains('animation-container-small')).toBeTruthy();
+    });
+  });
+
+  describe('lines', () => {
+    beforeEach((done) => {
+      vm.lines = 5;
+
+      Vue.nextTick(done);
+    });
+
+    it('renders 5 lines', () => {
+      expect(vm.$el.querySelector('.skeleton-line-5')).not.toBeNull();
+      expect(vm.$el.querySelector('.skeleton-line-6')).toBeNull();
+    });
+  });
+});