diff options
author | Phil Hughes <me@iamphill.com> | 2018-07-10 10:38:48 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-07-10 10:38:48 +0300 |
commit | ca1deb9e5ec1429a65d73b3352d1207301f9fc6f (patch) | |
tree | 0d68172f70befd52d725284230bab49ee0bd0332 /spec | |
parent | 255db3d59792e9bac92f4327b4e324e2bd32810a (diff) | |
parent | 8186bb39031b189396b57def9de202ddf65cbcbb (diff) |
Merge branch '48951-clean-up' into 'master'
Resolve "MR refactor: All actions under diff module are being exported twice"
Closes #48951
See merge request gitlab-org/gitlab-ce!20499
Diffstat (limited to 'spec')
-rw-r--r-- | spec/javascripts/diffs/components/changed_files_spec.js | 91 |
1 files changed, 48 insertions, 43 deletions
diff --git a/spec/javascripts/diffs/components/changed_files_spec.js b/spec/javascripts/diffs/components/changed_files_spec.js index 2d57af6137c..f737e8fa38e 100644 --- a/spec/javascripts/diffs/components/changed_files_spec.js +++ b/spec/javascripts/diffs/components/changed_files_spec.js @@ -1,12 +1,17 @@ import Vue from 'vue'; -import $ from 'jquery'; +import Vuex from 'vuex'; import { mountComponentWithStore } from 'spec/helpers'; -import store from '~/diffs/store'; -import ChangedFiles from '~/diffs/components/changed_files.vue'; +import diffsModule from '~/diffs/store/modules'; +import changedFiles from '~/diffs/components/changed_files.vue'; describe('ChangedFiles', () => { - const Component = Vue.extend(ChangedFiles); - const createComponent = props => mountComponentWithStore(Component, { props, store }); + const Component = Vue.extend(changedFiles); + const store = new Vuex.Store({ + modules: { + diffs: diffsModule, + }, + }); + let vm; beforeEach(() => { @@ -14,6 +19,7 @@ describe('ChangedFiles', () => { <div id="dummy-element"></div> <div class="js-tabs-affix"></div> `); + const props = { diffFiles: [ { @@ -26,7 +32,8 @@ describe('ChangedFiles', () => { }, ], }; - vm = createComponent(props); + + vm = mountComponentWithStore(Component, { props, store }); }); describe('with single file added', () => { @@ -40,58 +47,56 @@ describe('ChangedFiles', () => { }); }); - describe('template', () => { - describe('diff view mode buttons', () => { - let inlineButton; - let parallelButton; + describe('diff view mode buttons', () => { + let inlineButton; + let parallelButton; - beforeEach(() => { - inlineButton = vm.$el.querySelector('.js-inline-diff-button'); - parallelButton = vm.$el.querySelector('.js-parallel-diff-button'); - }); + beforeEach(() => { + inlineButton = vm.$el.querySelector('.js-inline-diff-button'); + parallelButton = vm.$el.querySelector('.js-parallel-diff-button'); + }); + + it('should have Inline and Side-by-side buttons', () => { + expect(inlineButton).toBeDefined(); + expect(parallelButton).toBeDefined(); + }); + + it('should add active class to Inline button', done => { + vm.$store.state.diffs.diffViewType = 'inline'; + + vm.$nextTick(() => { + expect(inlineButton.classList.contains('active')).toEqual(true); + expect(parallelButton.classList.contains('active')).toEqual(false); - it('should have Inline and Side-by-side buttons', () => { - expect(inlineButton).toBeDefined(); - expect(parallelButton).toBeDefined(); + done(); }); + }); - it('should add active class to Inline button', done => { - vm.$store.state.diffs.diffViewType = 'inline'; + it('should toggle active state of buttons when diff view type changed', done => { + vm.$store.state.diffs.diffViewType = 'parallel'; - vm.$nextTick(() => { - expect(inlineButton.classList.contains('active')).toEqual(true); - expect(parallelButton.classList.contains('active')).toEqual(false); + vm.$nextTick(() => { + expect(inlineButton.classList.contains('active')).toEqual(false); + expect(parallelButton.classList.contains('active')).toEqual(true); - done(); - }); + done(); }); + }); - it('should toggle active state of buttons when diff view type changed', done => { - vm.$store.state.diffs.diffViewType = 'parallel'; + describe('clicking them', () => { + it('should toggle the diff view type', done => { + parallelButton.click(); vm.$nextTick(() => { expect(inlineButton.classList.contains('active')).toEqual(false); expect(parallelButton.classList.contains('active')).toEqual(true); - done(); - }); - }); - - describe('clicking them', () => { - it('should toggle the diff view type', done => { - $(parallelButton).click(); + inlineButton.click(); vm.$nextTick(() => { - expect(inlineButton.classList.contains('active')).toEqual(false); - expect(parallelButton.classList.contains('active')).toEqual(true); - - $(inlineButton).click(); - - vm.$nextTick(() => { - expect(inlineButton.classList.contains('active')).toEqual(true); - expect(parallelButton.classList.contains('active')).toEqual(false); - done(); - }); + expect(inlineButton.classList.contains('active')).toEqual(true); + expect(parallelButton.classList.contains('active')).toEqual(false); + done(); }); }); }); |