summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2017-02-23 15:27:01 +0000
committerPhil Hughes <me@iamphill.com>2017-02-23 15:27:01 +0000
commit7512af29fc5fd94da2ac74a3188eb76b9a366c2a (patch)
treef70b63c02f0e9805f6880614508d64eea4c9f095
parent8cc61d0b2a3507609665c3c5d3e8a475772c6b87 (diff)
downloadgitlab-ce-7512af29fc5fd94da2ac74a3188eb76b9a366c2a.tar.gz
Issue boards card in JS
Moved the issue boards card template into the JS. This helps to improve the code coverage & will eventually make it easier to move this to .vue files
-rw-r--r--app/assets/javascripts/boards/components/board_card.js69
-rw-r--r--app/assets/javascripts/boards/components/board_card.js.es661
-rw-r--r--app/assets/javascripts/boards/components/board_list.js.es64
-rw-r--r--app/views/projects/boards/_show.html.haml1
-rw-r--r--app/views/projects/boards/components/_card.html.haml10
-rw-r--r--spec/javascripts/boards/board_card_spec.js164
6 files changed, 235 insertions, 74 deletions
diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
new file mode 100644
index 00000000000..39fa183425a
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -0,0 +1,69 @@
+/* global Vue */
+require('./issue_card_inner');
+
+const Store = gl.issueBoards.BoardsStore;
+
+module.exports = {
+ name: 'BoardsIssueCard',
+ template: `
+ <li class="card"
+ :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+ :index="index"
+ :data-issue-id="issue.id"
+ @mousedown="mouseDown"
+ @mousemove="mouseMove"
+ @mouseup="showIssue($event)">
+ <issue-card-inner
+ :list="list"
+ :issue="issue"
+ :issue-link-base="issueLinkBase"
+ :root-path="rootPath" />
+ </li>
+ `,
+ components: {
+ 'issue-card-inner': gl.issueBoards.IssueCardInner,
+ },
+ props: {
+ list: Object,
+ issue: Object,
+ issueLinkBase: String,
+ disabled: Boolean,
+ index: Number,
+ rootPath: String,
+ },
+ data () {
+ return {
+ showDetail: false,
+ detailIssue: Store.detail
+ };
+ },
+ computed: {
+ issueDetailVisible () {
+ return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
+ }
+ },
+ methods: {
+ mouseDown () {
+ this.showDetail = true;
+ },
+ mouseMove() {
+ this.showDetail = false;
+ },
+ showIssue (e) {
+ const targetTagName = e.target.tagName.toLowerCase();
+
+ if (targetTagName === 'a' || targetTagName === 'button') return;
+
+ if (this.showDetail) {
+ this.showDetail = false;
+
+ if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+ Store.detail.issue = {};
+ } else {
+ Store.detail.issue = this.issue;
+ Store.detail.list = this.list;
+ }
+ }
+ }
+ }
+};
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
deleted file mode 100644
index 0ea66bd027c..00000000000
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ /dev/null
@@ -1,61 +0,0 @@
-/* eslint-disable comma-dangle, space-before-function-paren, dot-notation */
-/* global Vue */
-
-require('./issue_card_inner');
-
-(() => {
- const Store = gl.issueBoards.BoardsStore;
-
- window.gl = window.gl || {};
- window.gl.issueBoards = window.gl.issueBoards || {};
-
- gl.issueBoards.BoardCard = Vue.extend({
- template: '#js-board-list-card',
- components: {
- 'issue-card-inner': gl.issueBoards.IssueCardInner,
- },
- props: {
- list: Object,
- issue: Object,
- issueLinkBase: String,
- disabled: Boolean,
- index: Number,
- rootPath: String,
- },
- data () {
- return {
- showDetail: false,
- detailIssue: Store.detail
- };
- },
- computed: {
- issueDetailVisible () {
- return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
- }
- },
- methods: {
- mouseDown () {
- this.showDetail = true;
- },
- mouseMove() {
- this.showDetail = false;
- },
- showIssue (e) {
- const targetTagName = e.target.tagName.toLowerCase();
-
- if (targetTagName === 'a' || targetTagName === 'button') return;
-
- if (this.showDetail) {
- this.showDetail = false;
-
- if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
- Store.detail.issue = {};
- } else {
- Store.detail.issue = this.issue;
- Store.detail.list = this.list;
- }
- }
- }
- }
- });
-})();
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 60b0a30af3f..d92047cc0f8 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -2,7 +2,7 @@
/* global Vue */
/* global Sortable */
-require('./board_card');
+const boardCard = require('./board_card');
require('./board_new_issue');
(() => {
@@ -14,7 +14,7 @@ require('./board_new_issue');
gl.issueBoards.BoardList = Vue.extend({
template: '#js-board-list-template',
components: {
- 'board-card': gl.issueBoards.BoardCard,
+ boardCard,
'board-new-issue': gl.issueBoards.BoardNewIssue
},
props: {
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
index f5ca9607823..b3bc6010efb 100644
--- a/app/views/projects/boards/_show.html.haml
+++ b/app/views/projects/boards/_show.html.haml
@@ -8,7 +8,6 @@
%script#js-board-template{ type: "text/x-template" }= render "projects/boards/components/board"
%script#js-board-list-template{ type: "text/x-template" }= render "projects/boards/components/board_list"
- %script#js-board-list-card{ type: "text/x-template" }= render "projects/boards/components/card"
= render "projects/issues/head"
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
deleted file mode 100644
index 891c2c46251..00000000000
--- a/app/views/projects/boards/components/_card.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%li.card{ ":class" => '{ "user-can-drag": !disabled && issue.id, "is-disabled": disabled || !issue.id, "is-active": issueDetailVisible }',
- ":index" => "index",
- ":data-issue-id" => "issue.id",
- "@mousedown" => "mouseDown",
- "@mousemove" => "mouseMove",
- "@mouseup" => "showIssue($event)" }
- %issue-card-inner{ ":list" => "list",
- ":issue" => "issue",
- ":issue-link-base" => "issueLinkBase",
- ":root-path" => "rootPath" }
diff --git a/spec/javascripts/boards/board_card_spec.js b/spec/javascripts/boards/board_card_spec.js
new file mode 100644
index 00000000000..5c1ea930523
--- /dev/null
+++ b/spec/javascripts/boards/board_card_spec.js
@@ -0,0 +1,164 @@
+/* global Vue */
+/* global List */
+/* global listObj */
+
+require('~/boards/models/list');
+require('~/boards/models/label');
+require('~/boards/stores/boards_store');
+const boardCard = require('~/boards/components/board_card');
+require('./mock_data');
+
+describe('Issue card', () => {
+ let vm;
+
+ beforeEach((done) => {
+ Vue.http.interceptors.push(boardsMockInterceptor);
+
+ gl.boardService = new BoardService('/test/issue-boards/board', '', '1');
+ gl.issueBoards.BoardsStore.create();
+ gl.issueBoards.BoardsStore.detail.issue = {};
+
+ const BoardCardComp = Vue.extend(boardCard);
+ const list = new List(listObj);
+ const label1 = new ListLabel({
+ id: 3,
+ title: 'testing 123',
+ color: 'blue',
+ text_color: 'white',
+ description: 'test',
+ });
+
+ setTimeout(() => {
+ list.issues[0].labels.push(label1);
+
+ vm = new BoardCardComp({
+ propsData: {
+ list,
+ issue: list.issues[0],
+ issueLinkBase: '/',
+ disabled: false,
+ index: 0,
+ rootPath: '/',
+ },
+ }).$mount();;
+ done();
+ }, 0);
+ });
+
+ afterEach(() => {
+ Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+ });
+
+ it('returns false when detailIssue is empty', () => {
+ expect(vm.issueDetailVisible).toBe(false);
+ });
+
+ it('returns true when detailIssue is equal to card issue', () => {
+ gl.issueBoards.BoardsStore.detail.issue = vm.issue;
+
+ expect(vm.issueDetailVisible).toBe(true);
+ });
+
+ it('adds user-can-drag class if not disabled', () => {
+ expect(vm.$el.classList.contains('user-can-drag')).toBe(true);
+ });
+
+ it('does not add user-can-drag class disabled', (done) => {
+ vm.disabled = true;
+
+ setTimeout(() => {
+ expect(vm.$el.classList.contains('user-can-drag')).toBe(false);
+ done();
+ }, 0);
+ });
+
+ it('does not add disabled class', () => {
+ expect(vm.$el.classList.contains('is-disabled')).toBe(false);
+ });
+
+ it('adds disabled class is disabled is true', (done) => {
+ vm.disabled = true;
+
+ setTimeout(() => {
+ expect(vm.$el.classList.contains('is-disabled')).toBe(true);
+ done();
+ }, 0);
+ });
+
+ describe('mouse events', () => {
+ const triggerEvent = (eventName, el = vm.$el) => {
+ const event = document.createEvent('MouseEvents');
+ event.initMouseEvent(eventName, true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
+
+ el.dispatchEvent(event);
+ };
+
+ it('sets showDetail to true on mousedown', () => {
+ triggerEvent('mousedown');
+
+ expect(vm.showDetail).toBe(true);
+ });
+
+ it('sets showDetail to false on mousemove', () => {
+ triggerEvent('mousedown');
+
+ expect(vm.showDetail).toBe(true);
+
+ triggerEvent('mousemove');
+
+ expect(vm.showDetail).toBe(false);
+ });
+
+ it('does not set detail issue if showDetail is false', () => {
+ expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+ });
+
+ it('does not set detail issue if link is clicked', () => {
+ triggerEvent('mouseup', vm.$el.querySelector('a'));
+
+ expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+ });
+
+ it('does not set detail issue if button is clicked', () => {
+ triggerEvent('mouseup', vm.$el.querySelector('button'));
+
+ expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+ });
+
+ it('does not set detail issue if showDetail is false', () => {
+ triggerEvent('mouseup');
+
+ expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+ });
+
+ it('sets detail issue to card issue on mouse up', () => {
+ triggerEvent('mousedown');
+ triggerEvent('mouseup');
+
+ expect(gl.issueBoards.BoardsStore.detail.issue).toEqual(vm.issue);
+ expect(gl.issueBoards.BoardsStore.detail.list).toEqual(vm.list);
+ });
+
+ it('adds active class if detail issue is set', (done) => {
+ triggerEvent('mousedown');
+ triggerEvent('mouseup');
+
+ setTimeout(() => {
+ expect(vm.$el.classList.contains('is-active')).toBe(true);
+ done();
+ }, 0);
+ });
+
+ it('resets detail issue to empty if already set', () => {
+ triggerEvent('mousedown');
+ triggerEvent('mouseup');
+
+ expect(gl.issueBoards.BoardsStore.detail.issue).toEqual(vm.issue);
+
+ triggerEvent('mousedown');
+ triggerEvent('mouseup');
+
+ expect(gl.issueBoards.BoardsStore.detail.issue).toEqual({});
+ });
+ });
+});