diff options
author | Clement Ho <clemmakesapps@gmail.com> | 2018-09-25 20:03:40 +0000 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-09-25 20:03:40 +0000 |
commit | 2a6cd526acef109153be3f12571882a8e4d1cc89 (patch) | |
tree | 72120c5c42eb70a1a1bb5e25ed77da89c4ac841c /spec/javascripts | |
parent | 53e012a9c5a66d18c1bc5ba82cb205e3bc5eb3b4 (diff) | |
download | gitlab-ce-2a6cd526acef109153be3f12571882a8e4d1cc89.tar.gz |
Add gitlab-ui skeleton loading
Diffstat (limited to 'spec/javascripts')
-rw-r--r-- | spec/javascripts/ide/components/repo_loading_file_spec.js | 63 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js | 49 |
2 files changed, 0 insertions, 112 deletions
diff --git a/spec/javascripts/ide/components/repo_loading_file_spec.js b/spec/javascripts/ide/components/repo_loading_file_spec.js deleted file mode 100644 index 7c20b8302f9..00000000000 --- a/spec/javascripts/ide/components/repo_loading_file_spec.js +++ /dev/null @@ -1,63 +0,0 @@ -import Vue from 'vue'; -import store from '~/ide/stores'; -import repoLoadingFile from '~/ide/components/repo_loading_file.vue'; -import { resetStore } from '../helpers'; - -describe('RepoLoadingFile', () => { - let vm; - - function createComponent() { - const RepoLoadingFile = Vue.extend(repoLoadingFile); - - return new RepoLoadingFile({ - store, - }).$mount(); - } - - function assertLines(lines) { - lines.forEach((line, n) => { - const index = n + 1; - expect(line.classList.contains(`skeleton-line-${index}`)).toBeTruthy(); - }); - } - - function assertColumns(columns) { - columns.forEach(column => { - const container = column.querySelector('.animation-container'); - const lines = [...container.querySelectorAll(':scope > div')]; - - expect(container).toBeTruthy(); - expect(lines.length).toEqual(3); - assertLines(lines); - }); - } - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - }); - - it('renders 3 columns of animated LoC', () => { - vm = createComponent(); - const columns = [...vm.$el.querySelectorAll('td')]; - - expect(columns.length).toEqual(3); - assertColumns(columns); - }); - - it('renders 1 column of animated LoC if isMini', done => { - vm = createComponent(); - vm.$store.state.leftPanelCollapsed = true; - vm.$store.state.openFiles.push('test'); - - vm.$nextTick(() => { - const columns = [...vm.$el.querySelectorAll('td')]; - - expect(columns.length).toEqual(1); - assertColumns(columns); - - done(); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js deleted file mode 100644 index 34487885cf0..00000000000 --- a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js +++ /dev/null @@ -1,49 +0,0 @@ -import Vue from 'vue'; -import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; -import mountComponent from 'spec/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 3 skeleton lines by default', () => { - expect(vm.$el.querySelector('.skeleton-line-3')).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(); - }); - }); -}); |