diff options
Diffstat (limited to 'spec/javascripts')
-rw-r--r-- | spec/javascripts/fixtures/mini_dropdown_graph.html.haml | 6 | ||||
-rw-r--r-- | spec/javascripts/pipelines/stage_spec.js | 121 |
2 files changed, 66 insertions, 61 deletions
diff --git a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml index 29370b974af..b532b48a95b 100644 --- a/spec/javascripts/fixtures/mini_dropdown_graph.html.haml +++ b/spec/javascripts/fixtures/mini_dropdown_graph.html.haml @@ -3,7 +3,7 @@ Dropdown %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container - .js-builds-dropdown-list.scrollable-menu + %li.js-builds-dropdown-list.scrollable-menu - .js-builds-dropdown-loading.builds-dropdown-loading.hidden - %span.fa.fa-spinner.fa-spin + %li.js-builds-dropdown-loading.hidden + %span.fa.fa-spinner diff --git a/spec/javascripts/pipelines/stage_spec.js b/spec/javascripts/pipelines/stage_spec.js index 2f1154bd999..a4f32a1faed 100644 --- a/spec/javascripts/pipelines/stage_spec.js +++ b/spec/javascripts/pipelines/stage_spec.js @@ -1,81 +1,86 @@ 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); - - renderedComponent = new StageComponent({ - propsData: { - stage, - }, - }).$mount(); + Vue.http.interceptors.push(interceptor); }); - it('should render the correct status svg', () => { - const minifiedComponent = minify(renderedComponent.$el.outerHTML); - const expectedSVG = minify(SUCCESS_SVG); - - expect(minifiedComponent).toContain(expectedSVG); + afterEach(() => { + Vue.http.interceptors = _.without( + Vue.http.interceptors, interceptor, + ); }); - }); - - describe('when request fails', () => { - it('closes dropdown', () => { - spyOn($, 'ajax').and.callFake(options => options.error()); - const StageComponent = Vue.extend(Stage); - const component = new StageComponent({ - propsData: { stage: { status: { icon: 'foo' } } }, - }).$mount(); + it('should close the dropdown', () => { + component.$el.click(); - expect( - component.$el.classList.contains('open'), - ).toEqual(false); + setTimeout(() => { + expect(component.$el.classList.contains('open')).toEqual(false); + }, 0); }); }); }); |