diff options
Diffstat (limited to 'spec/javascripts/pipelines/stage_spec.js')
-rw-r--r-- | spec/javascripts/pipelines/stage_spec.js | 156 |
1 files changed, 102 insertions, 54 deletions
diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js index 2f1154bd999..1b96b2e3d51 100644 --- a/spec/javascripts/pipelines/stage_spec.js +++ b/spec/javascripts/pipelines/stage_spec.js @@ -1,81 +1,129 @@ import Vue from 'vue'; -import { SUCCESS_SVG } from '~/ci_status_icons'; -import Stage from '~/pipelines/components/stage'; +import stage from '~/pipelines/components/stage.vue'; + +describe('Pipelines stage component', () => { + let StageComponent; + let component; + + beforeEach(() => { + StageComponent = Vue.extend(stage); + + component = new StageComponent({ + propsData: { + stage: { + status: { + group: 'success', + icon: 'icon_status_success', + title: 'success', + }, + dropdown_path: 'foo', + }, + updateDropdown: false, + }, + }).$mount(); + }); -function minify(string) { - return string.replace(/\s/g, ''); -} + it('should render a dropdown with the status icon', () => { + expect(component.$el.getAttribute('class')).toEqual('dropdown'); + expect(component.$el.querySelector('svg')).toBeDefined(); + expect(component.$el.querySelector('button').getAttribute('data-toggle')).toEqual('dropdown'); + }); -describe('Pipelines Stage', () => { - describe('data', () => { - let stageReturnValue; + describe('with successfull request', () => { + const interceptor = (request, next) => { + next(request.respondWith(JSON.stringify({ html: 'foo' }), { + status: 200, + })); + }; beforeEach(() => { - stageReturnValue = Stage.data(); + Vue.http.interceptors.push(interceptor); }); - it('should return object with .builds and .spinner', () => { - expect(stageReturnValue).toEqual({ - builds: '', - spinner: '<span class="fa fa-spinner fa-spin"></span>', - }); + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, interceptor, + ); }); - }); - describe('computed', () => { - describe('svgHTML', function () { - let stage; - let svgHTML; + it('should render the received data', (done) => { + component.$el.querySelector('button').click(); - beforeEach(() => { - stage = { stage: { status: { icon: 'icon_status_success' } } }; - - svgHTML = Stage.computed.svgHTML.call(stage); - }); - - it("should return the correct icon for the stage's status", () => { - expect(svgHTML).toBe(SUCCESS_SVG); - }); + setTimeout(() => { + expect( + component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(), + ).toEqual('foo'); + done(); + }, 0); }); }); - describe('when mounted', () => { - let StageComponent; - let renderedComponent; - let stage; + describe('when request fails', () => { + const interceptor = (request, next) => { + next(request.respondWith(JSON.stringify({}), { + status: 500, + })); + }; beforeEach(() => { - stage = { status: { icon: 'icon_status_success' } }; - - StageComponent = Vue.extend(Stage); + Vue.http.interceptors.push(interceptor); + }); - renderedComponent = new StageComponent({ - propsData: { - stage, - }, - }).$mount(); + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, interceptor, + ); }); - it('should render the correct status svg', () => { - const minifiedComponent = minify(renderedComponent.$el.outerHTML); - const expectedSVG = minify(SUCCESS_SVG); + it('should close the dropdown', () => { + component.$el.click(); - expect(minifiedComponent).toContain(expectedSVG); + setTimeout(() => { + expect(component.$el.classList.contains('open')).toEqual(false); + }, 0); }); }); - describe('when request fails', () => { - it('closes dropdown', () => { - spyOn($, 'ajax').and.callFake(options => options.error()); - const StageComponent = Vue.extend(Stage); + describe('update endpoint correctly', () => { + const updatedInterceptor = (request, next) => { + if (request.url === 'bar') { + next(request.respondWith(JSON.stringify({ html: 'this is the updated content' }), { + status: 200, + })); + } + next(); + }; + + beforeEach(() => { + Vue.http.interceptors.push(updatedInterceptor); + }); - const component = new StageComponent({ - propsData: { stage: { status: { icon: 'foo' } } }, - }).$mount(); + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, updatedInterceptor, + ); + }); - expect( - component.$el.classList.contains('open'), - ).toEqual(false); + it('should update the stage to request the new endpoint provided', (done) => { + component.stage = { + status: { + group: 'running', + icon: 'running', + title: 'running', + }, + dropdown_path: 'bar', + }; + + Vue.nextTick(() => { + component.$el.querySelector('button').click(); + + setTimeout(() => { + expect( + component.$el.querySelector('.js-builds-dropdown-container ul').textContent.trim(), + ).toEqual('this is the updated content'); + done(); + }); + }); }); }); }); |