From 7ad626e348faaea6f186759dada36079d531f6fd Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Sat, 28 Jan 2017 18:39:01 +0000 Subject: Use same folder structure in spec for vue shared resources --- .../commit/pipelines/pipelines_bundle.js.es6 | 61 ++++++++++ .../commit/pipelines/pipelines_service.js.es6 | 77 ++++++++++++ .../commit/pipelines/pipelines_store.js.es6 | 30 +++++ .../javascripts/commit/pipelines_bundle.js.es6 | 61 ---------- .../javascripts/commit/pipelines_service.js.es6 | 77 ------------ .../javascripts/commit/pipelines_store.js.es6 | 30 ----- app/views/projects/commit/pipelines.html.haml | 2 +- config/application.rb | 2 +- .../vue_common_components/commit_spec.js.es6 | 131 --------------------- .../vue_shared/components/commit_spec.js.es6 | 131 +++++++++++++++++++++ 10 files changed, 301 insertions(+), 301 deletions(-) create mode 100644 app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 create mode 100644 app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 create mode 100644 app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 delete mode 100644 app/assets/javascripts/commit/pipelines_bundle.js.es6 delete mode 100644 app/assets/javascripts/commit/pipelines_service.js.es6 delete mode 100644 app/assets/javascripts/commit/pipelines_store.js.es6 delete mode 100644 spec/javascripts/vue_common_components/commit_spec.js.es6 create mode 100644 spec/javascripts/vue_shared/components/commit_spec.js.es6 diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 new file mode 100644 index 00000000000..d2547f0b4a8 --- /dev/null +++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js.es6 @@ -0,0 +1,61 @@ +/* eslint-disable no-new */ +/* global Vue, VueResource */ + +//= require vue +//= require vue-resource +//= require ./pipelines_store +//= require ./pipelines_service +//= require vue_shared/components/commit +//= require vue_shared/vue_resource_interceptor +//= require vue_shared/components/pipelines_table + +/** + * Commits View > Pipelines Tab > Pipelines Table. + * + * Renders Pipelines table in pipelines tab in the commits show view. + * + * Uses `pipelines-table-component` to render Pipelines table with an API call. + * Endpoint is provided in HTML and passed as scope. + * We need a store to make the request and store the received environemnts. + * + * Necessary SVG in the table are provided as props. This should be refactored + * as soon as we have Webpack and can load them directly into JS files. + */ +(() => { + window.gl = window.gl || {}; + gl.Commits = gl.Commits || {}; + + if (gl.Commits.PipelinesTableView) { + gl.Commits.PipelinesTableView.$destroy(true); + } + + gl.Commits.PipelinesTableView = new Vue({ + + el: document.querySelector('#commit-pipeline-table-view'), + + /** + * Accesses the DOM to provide the needed data. + * Returns the necessary props to render `pipelines-table-component` component. + * + * @return {Object} Props for `pipelines-table-component` + */ + data() { + const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset; + + return { + scope: pipelinesTableData.pipelinesData, + store: new CommitsPipelineStore(), + service: new PipelinesService(), + svgs: pipelinesTableData, + }; + }, + + components: { + 'pipelines-table-component': gl.pipelines.PipelinesTableComponent, + }, + + template: ` + + `, + }); +}); diff --git a/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 new file mode 100644 index 00000000000..7d773e0d361 --- /dev/null +++ b/app/assets/javascripts/commit/pipelines/pipelines_service.js.es6 @@ -0,0 +1,77 @@ +/* globals Vue */ +/* eslint-disable no-unused-vars, no-param-reassign */ + +/** + * Pipelines service. + * + * Used to fetch the data used to render the pipelines table. + * Used Vue.Resource + */ + +window.gl = window.gl || {}; +gl.pipelines = gl.pipelines || {}; + +class PipelinesService { + constructor(root) { + Vue.http.options.root = root; + + this.pipelines = Vue.resource(root); + + Vue.http.interceptors.push((request, next) => { + // needed in order to not break the tests. + if ($.rails) { + request.headers['X-CSRF-Token'] = $.rails.csrfToken(); + } + next(); + }); + } + + /** + * Given the root param provided when the class is initialized, will + * make a GET request. + * + * @return {Promise} + */ + all() { + return this.pipelines.get(); + } +} + +gl.pipelines.PipelinesService = PipelinesService; + +// const pageValues = (headers) => { +// const normalized = gl.utils.normalizeHeaders(headers); +// +// const paginationInfo = { +// perPage: +normalized['X-PER-PAGE'], +// page: +normalized['X-PAGE'], +// total: +normalized['X-TOTAL'], +// totalPages: +normalized['X-TOTAL-PAGES'], +// nextPage: +normalized['X-NEXT-PAGE'], +// previousPage: +normalized['X-PREV-PAGE'], +// }; +// +// return paginationInfo; +// }; + +// gl.PipelineStore = class { +// fetchDataLoop(Vue, pageNum, url, apiScope) { +// const goFetch = () => +// this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`) +// .then((response) => { +// const pageInfo = pageValues(response.headers); +// this.pageInfo = Object.assign({}, this.pageInfo, pageInfo); +// +// const res = JSON.parse(response.body); +// this.count = Object.assign({}, this.count, res.count); +// this.pipelines = Object.assign([], this.pipelines, res); +// +// this.pageRequest = false; +// }, () => { +// this.pageRequest = false; +// return new Flash('Something went wrong on our end.'); +// }); +// +// goFetch(); +// } +// }; diff --git a/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 new file mode 100644 index 00000000000..bc748bece5d --- /dev/null +++ b/app/assets/javascripts/commit/pipelines/pipelines_store.js.es6 @@ -0,0 +1,30 @@ +/* global gl, Flash */ +/* eslint-disable no-param-reassign, no-underscore-dangle */ +/*= require vue_realtime_listener/index.js */ + +/** + * Pipelines' Store for commits view. + * + * Used to store the Pipelines rendered in the commit view in the pipelines table. + * + * TODO: take care of timeago instances in here + */ + +(() => { + const CommitPipelineStore = { + state: {}, + + create() { + this.state.pipelines = []; + + return this; + }, + + storePipelines(pipelines = []) { + this.state.pipelines = pipelines; + return pipelines; + }, + }; + + return CommitPipelineStore; +})(); diff --git a/app/assets/javascripts/commit/pipelines_bundle.js.es6 b/app/assets/javascripts/commit/pipelines_bundle.js.es6 deleted file mode 100644 index d2547f0b4a8..00000000000 --- a/app/assets/javascripts/commit/pipelines_bundle.js.es6 +++ /dev/null @@ -1,61 +0,0 @@ -/* eslint-disable no-new */ -/* global Vue, VueResource */ - -//= require vue -//= require vue-resource -//= require ./pipelines_store -//= require ./pipelines_service -//= require vue_shared/components/commit -//= require vue_shared/vue_resource_interceptor -//= require vue_shared/components/pipelines_table - -/** - * Commits View > Pipelines Tab > Pipelines Table. - * - * Renders Pipelines table in pipelines tab in the commits show view. - * - * Uses `pipelines-table-component` to render Pipelines table with an API call. - * Endpoint is provided in HTML and passed as scope. - * We need a store to make the request and store the received environemnts. - * - * Necessary SVG in the table are provided as props. This should be refactored - * as soon as we have Webpack and can load them directly into JS files. - */ -(() => { - window.gl = window.gl || {}; - gl.Commits = gl.Commits || {}; - - if (gl.Commits.PipelinesTableView) { - gl.Commits.PipelinesTableView.$destroy(true); - } - - gl.Commits.PipelinesTableView = new Vue({ - - el: document.querySelector('#commit-pipeline-table-view'), - - /** - * Accesses the DOM to provide the needed data. - * Returns the necessary props to render `pipelines-table-component` component. - * - * @return {Object} Props for `pipelines-table-component` - */ - data() { - const pipelinesTableData = document.querySelector('#commit-pipeline-table-view').dataset; - - return { - scope: pipelinesTableData.pipelinesData, - store: new CommitsPipelineStore(), - service: new PipelinesService(), - svgs: pipelinesTableData, - }; - }, - - components: { - 'pipelines-table-component': gl.pipelines.PipelinesTableComponent, - }, - - template: ` - - `, - }); -}); diff --git a/app/assets/javascripts/commit/pipelines_service.js.es6 b/app/assets/javascripts/commit/pipelines_service.js.es6 deleted file mode 100644 index 7d773e0d361..00000000000 --- a/app/assets/javascripts/commit/pipelines_service.js.es6 +++ /dev/null @@ -1,77 +0,0 @@ -/* globals Vue */ -/* eslint-disable no-unused-vars, no-param-reassign */ - -/** - * Pipelines service. - * - * Used to fetch the data used to render the pipelines table. - * Used Vue.Resource - */ - -window.gl = window.gl || {}; -gl.pipelines = gl.pipelines || {}; - -class PipelinesService { - constructor(root) { - Vue.http.options.root = root; - - this.pipelines = Vue.resource(root); - - Vue.http.interceptors.push((request, next) => { - // needed in order to not break the tests. - if ($.rails) { - request.headers['X-CSRF-Token'] = $.rails.csrfToken(); - } - next(); - }); - } - - /** - * Given the root param provided when the class is initialized, will - * make a GET request. - * - * @return {Promise} - */ - all() { - return this.pipelines.get(); - } -} - -gl.pipelines.PipelinesService = PipelinesService; - -// const pageValues = (headers) => { -// const normalized = gl.utils.normalizeHeaders(headers); -// -// const paginationInfo = { -// perPage: +normalized['X-PER-PAGE'], -// page: +normalized['X-PAGE'], -// total: +normalized['X-TOTAL'], -// totalPages: +normalized['X-TOTAL-PAGES'], -// nextPage: +normalized['X-NEXT-PAGE'], -// previousPage: +normalized['X-PREV-PAGE'], -// }; -// -// return paginationInfo; -// }; - -// gl.PipelineStore = class { -// fetchDataLoop(Vue, pageNum, url, apiScope) { -// const goFetch = () => -// this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`) -// .then((response) => { -// const pageInfo = pageValues(response.headers); -// this.pageInfo = Object.assign({}, this.pageInfo, pageInfo); -// -// const res = JSON.parse(response.body); -// this.count = Object.assign({}, this.count, res.count); -// this.pipelines = Object.assign([], this.pipelines, res); -// -// this.pageRequest = false; -// }, () => { -// this.pageRequest = false; -// return new Flash('Something went wrong on our end.'); -// }); -// -// goFetch(); -// } -// }; diff --git a/app/assets/javascripts/commit/pipelines_store.js.es6 b/app/assets/javascripts/commit/pipelines_store.js.es6 deleted file mode 100644 index bc748bece5d..00000000000 --- a/app/assets/javascripts/commit/pipelines_store.js.es6 +++ /dev/null @@ -1,30 +0,0 @@ -/* global gl, Flash */ -/* eslint-disable no-param-reassign, no-underscore-dangle */ -/*= require vue_realtime_listener/index.js */ - -/** - * Pipelines' Store for commits view. - * - * Used to store the Pipelines rendered in the commit view in the pipelines table. - * - * TODO: take care of timeago instances in here - */ - -(() => { - const CommitPipelineStore = { - state: {}, - - create() { - this.state.pipelines = []; - - return this; - }, - - storePipelines(pipelines = []) { - this.state.pipelines = pipelines; - return pipelines; - }, - }; - - return CommitPipelineStore; -})(); diff --git a/app/views/projects/commit/pipelines.html.haml b/app/views/projects/commit/pipelines.html.haml index f4937a03f03..09bd4288b9c 100644 --- a/app/views/projects/commit/pipelines.html.haml +++ b/app/views/projects/commit/pipelines.html.haml @@ -4,7 +4,7 @@ = render 'ci_menu' - content_for :page_specific_javascripts do - = page_specific_javascript_tag("commit/pipelines_bundle.js") + = page_specific_javascript_tag("commit/pipelines/pipelines_bundle.js") #commit-pipeline-table-view{ data: { pipelines_data: pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id)}} .pipeline-svgs{ data: { "commit_icon_svg" => custom_icon("icon_commit"), diff --git a/config/application.rb b/config/application.rb index 88c5e27d17d..281a660ddee 100644 --- a/config/application.rb +++ b/config/application.rb @@ -105,7 +105,7 @@ module Gitlab config.assets.precompile << "merge_conflicts/merge_conflicts_bundle.js" config.assets.precompile << "boards/test_utils/simulate_drag.js" config.assets.precompile << "environments/environments_bundle.js" - config.assets.precompile << "commit/pipelines_bundle.js" + config.assets.precompile << "commit/pipelines/pipelines_bundle.js" config.assets.precompile << "blob_edit/blob_edit_bundle.js" config.assets.precompile << "snippet/snippet_bundle.js" config.assets.precompile << "terminal/terminal_bundle.js" diff --git a/spec/javascripts/vue_common_components/commit_spec.js.es6 b/spec/javascripts/vue_common_components/commit_spec.js.es6 deleted file mode 100644 index caf84ec63e2..00000000000 --- a/spec/javascripts/vue_common_components/commit_spec.js.es6 +++ /dev/null @@ -1,131 +0,0 @@ -//= require vue_shared/components/commit - -describe('Commit component', () => { - let props; - let component; - - it('should render a code-fork icon if it does not represent a tag', () => { - setFixtures('
'); - component = new window.gl.CommitComponent({ - el: document.querySelector('.test-commit-container'), - propsData: { - tag: false, - commitRef: { - name: 'master', - ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', - }, - commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', - shortSha: 'b7836edd', - title: 'Commit message', - author: { - avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png', - web_url: 'https://gitlab.com/jschatz1', - username: 'jschatz1', - }, - }, - }); - - expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork'); - }); - - describe('Given all the props', () => { - beforeEach(() => { - setFixtures('
'); - - props = { - tag: true, - commitRef: { - name: 'master', - ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', - }, - commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', - shortSha: 'b7836edd', - title: 'Commit message', - author: { - avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png', - web_url: 'https://gitlab.com/jschatz1', - username: 'jschatz1', - }, - commitIconSvg: '', - }; - - component = new window.gl.CommitComponent({ - el: document.querySelector('.test-commit-container'), - propsData: props, - }); - }); - - it('should render a tag icon if it represents a tag', () => { - expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-tag'); - }); - - it('should render a link to the ref url', () => { - expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.commitRef.ref_url); - }); - - it('should render the ref name', () => { - expect(component.$el.querySelector('.branch-name').textContent).toContain(props.commitRef.name); - }); - - it('should render the commit short sha with a link to the commit url', () => { - expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commitUrl); - expect(component.$el.querySelector('.commit-id').textContent).toContain(props.shortSha); - }); - - it('should render the given commitIconSvg', () => { - expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg'); - }); - - describe('Given commit title and author props', () => { - it('should render a link to the author profile', () => { - expect( - component.$el.querySelector('.commit-title .avatar-image-container').getAttribute('href'), - ).toEqual(props.author.web_url); - }); - - it('Should render the author avatar with title and alt attributes', () => { - expect( - component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title'), - ).toContain(props.author.username); - expect( - component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt'), - ).toContain(`${props.author.username}'s avatar`); - }); - }); - - it('should render the commit title', () => { - expect( - component.$el.querySelector('a.commit-row-message').getAttribute('href'), - ).toEqual(props.commitUrl); - expect( - component.$el.querySelector('a.commit-row-message').textContent, - ).toContain(props.title); - }); - }); - - describe('When commit title is not provided', () => { - it('should render default message', () => { - setFixtures('
'); - props = { - tag: false, - commitRef: { - name: 'master', - ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', - }, - commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', - shortSha: 'b7836edd', - title: null, - author: {}, - }; - - component = new window.gl.CommitComponent({ - el: document.querySelector('.test-commit-container'), - propsData: props, - }); - - expect( - component.$el.querySelector('.commit-title span').textContent, - ).toContain('Cant find HEAD commit for this branch'); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/commit_spec.js.es6 b/spec/javascripts/vue_shared/components/commit_spec.js.es6 new file mode 100644 index 00000000000..caf84ec63e2 --- /dev/null +++ b/spec/javascripts/vue_shared/components/commit_spec.js.es6 @@ -0,0 +1,131 @@ +//= require vue_shared/components/commit + +describe('Commit component', () => { + let props; + let component; + + it('should render a code-fork icon if it does not represent a tag', () => { + setFixtures('
'); + component = new window.gl.CommitComponent({ + el: document.querySelector('.test-commit-container'), + propsData: { + tag: false, + commitRef: { + name: 'master', + ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', + }, + commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + shortSha: 'b7836edd', + title: 'Commit message', + author: { + avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png', + web_url: 'https://gitlab.com/jschatz1', + username: 'jschatz1', + }, + }, + }); + + expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork'); + }); + + describe('Given all the props', () => { + beforeEach(() => { + setFixtures('
'); + + props = { + tag: true, + commitRef: { + name: 'master', + ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', + }, + commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + shortSha: 'b7836edd', + title: 'Commit message', + author: { + avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png', + web_url: 'https://gitlab.com/jschatz1', + username: 'jschatz1', + }, + commitIconSvg: '', + }; + + component = new window.gl.CommitComponent({ + el: document.querySelector('.test-commit-container'), + propsData: props, + }); + }); + + it('should render a tag icon if it represents a tag', () => { + expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-tag'); + }); + + it('should render a link to the ref url', () => { + expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.commitRef.ref_url); + }); + + it('should render the ref name', () => { + expect(component.$el.querySelector('.branch-name').textContent).toContain(props.commitRef.name); + }); + + it('should render the commit short sha with a link to the commit url', () => { + expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commitUrl); + expect(component.$el.querySelector('.commit-id').textContent).toContain(props.shortSha); + }); + + it('should render the given commitIconSvg', () => { + expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg'); + }); + + describe('Given commit title and author props', () => { + it('should render a link to the author profile', () => { + expect( + component.$el.querySelector('.commit-title .avatar-image-container').getAttribute('href'), + ).toEqual(props.author.web_url); + }); + + it('Should render the author avatar with title and alt attributes', () => { + expect( + component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title'), + ).toContain(props.author.username); + expect( + component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt'), + ).toContain(`${props.author.username}'s avatar`); + }); + }); + + it('should render the commit title', () => { + expect( + component.$el.querySelector('a.commit-row-message').getAttribute('href'), + ).toEqual(props.commitUrl); + expect( + component.$el.querySelector('a.commit-row-message').textContent, + ).toContain(props.title); + }); + }); + + describe('When commit title is not provided', () => { + it('should render default message', () => { + setFixtures('
'); + props = { + tag: false, + commitRef: { + name: 'master', + ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', + }, + commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + shortSha: 'b7836edd', + title: null, + author: {}, + }; + + component = new window.gl.CommitComponent({ + el: document.querySelector('.test-commit-container'), + propsData: props, + }); + + expect( + component.$el.querySelector('.commit-title span').textContent, + ).toContain('Cant find HEAD commit for this branch'); + }); + }); +}); -- cgit v1.2.1