@whitewizard/countdown 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Dockerfile +5 -5
- package/countdown.vue +115 -105
- package/package.json +35 -35
- package/readme.md +13 -13
- package/test/Countdown.test.js +93 -93
- package/test/karma.conf.js +43 -43
package/Dockerfile
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
FROM node:8.4
|
|
2
|
-
|
|
3
|
-
WORKDIR /usr/src/app
|
|
4
|
-
COPY . /usr/src/app
|
|
5
|
-
|
|
1
|
+
FROM node:8.4
|
|
2
|
+
|
|
3
|
+
WORKDIR /usr/src/app
|
|
4
|
+
COPY . /usr/src/app
|
|
5
|
+
|
|
6
6
|
RUN npm install
|
package/countdown.vue
CHANGED
|
@@ -1,106 +1,116 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="countdown-wrap" :class="{'countdown-ended': hasCountDownEnded}">
|
|
3
|
-
<slot></slot>
|
|
4
|
-
<div class="countdown-data" v-for="(part, i) in getDateDataParts">
|
|
5
|
-
<span class="countdown-data__date-part">{{ getDatePart(i) }}</span>
|
|
6
|
-
<span class="countdown-data__separator">{{ getSeparator(i) }}</span>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
</template>
|
|
10
|
-
|
|
11
|
-
<script>
|
|
12
|
-
import leftPad from 'left-pad';
|
|
13
|
-
import moment from 'moment';
|
|
14
|
-
|
|
15
|
-
export default {
|
|
16
|
-
props: {
|
|
17
|
-
format: {
|
|
18
|
-
type: String,
|
|
19
|
-
default: 'hours:minutes:seconds'
|
|
20
|
-
},
|
|
21
|
-
separators: {
|
|
22
|
-
type: [String, Array],
|
|
23
|
-
default: 'h:m:s'
|
|
24
|
-
},
|
|
25
|
-
end: {
|
|
26
|
-
type: String,
|
|
27
|
-
required: true
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
data() {
|
|
31
|
-
return {
|
|
32
|
-
timeDiff: null
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
created() {
|
|
36
|
-
this.checkTimeDiff();
|
|
37
|
-
},
|
|
38
|
-
computed: {
|
|
39
|
-
getDateDataParts() {
|
|
40
|
-
return this.format.split(':');
|
|
41
|
-
},
|
|
42
|
-
getSeparators() {
|
|
43
|
-
return this.separators.split(':');
|
|
44
|
-
},
|
|
45
|
-
hasCountDownEnded() {
|
|
46
|
-
return this.timeDiff < 1000;
|
|
47
|
-
},
|
|
48
|
-
getDiffArray() {
|
|
49
|
-
// if difference is NULL or 0 (zero), either way show zeroes to user
|
|
50
|
-
if (!this.timeDiff) return [];
|
|
51
|
-
let diffArray = [];
|
|
52
|
-
|
|
53
|
-
// generate values for each time unit
|
|
54
|
-
this.getDateDataParts.forEach(part => {
|
|
55
|
-
let wholeDuration = moment.duration(this.timeDiff);
|
|
56
|
-
|
|
57
|
-
let partDuration;
|
|
58
|
-
|
|
59
|
-
if (!diffArray.length) {
|
|
60
|
-
// first unit value needs to include all the time that isn't included in smaller units
|
|
61
|
-
// get whole duration as largest unit and round down
|
|
62
|
-
partDuration = Math.floor(wholeDuration.as(part));
|
|
63
|
-
} else {
|
|
64
|
-
partDuration = Math.floor(wholeDuration.get(part));
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
diffArray.push(partDuration);
|
|
68
|
-
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
return diffArray;
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
methods: {
|
|
75
|
-
getDatePart(i) {
|
|
76
|
-
return leftPad(this.getDiffArray[i] || 0, 2, 0);
|
|
77
|
-
},
|
|
78
|
-
getSeparator(i) {
|
|
79
|
-
if (typeof this.separators !== 'string' && this.separators.length === 2) {
|
|
80
|
-
return this.separators[this.getDatePart(i) === '01' ? 1 : 0].split(':')[i];
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div class="countdown-wrap" :class="{'countdown-ended': hasCountDownEnded}">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
<div class="countdown-data" v-for="(part, i) in getDateDataParts">
|
|
5
|
+
<span class="countdown-data__date-part">{{ getDatePart(i) }}</span>
|
|
6
|
+
<span class="countdown-data__separator">{{ getSeparator(i) }}</span>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
import leftPad from 'left-pad';
|
|
13
|
+
import moment from 'moment';
|
|
14
|
+
|
|
15
|
+
export default {
|
|
16
|
+
props: {
|
|
17
|
+
format: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: 'hours:minutes:seconds'
|
|
20
|
+
},
|
|
21
|
+
separators: {
|
|
22
|
+
type: [String, Array],
|
|
23
|
+
default: 'h:m:s'
|
|
24
|
+
},
|
|
25
|
+
end: {
|
|
26
|
+
type: String,
|
|
27
|
+
required: true
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
data() {
|
|
31
|
+
return {
|
|
32
|
+
timeDiff: null
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
created() {
|
|
36
|
+
this.checkTimeDiff();
|
|
37
|
+
},
|
|
38
|
+
computed: {
|
|
39
|
+
getDateDataParts() {
|
|
40
|
+
return this.format.split(':');
|
|
41
|
+
},
|
|
42
|
+
getSeparators() {
|
|
43
|
+
return this.separators.split(':');
|
|
44
|
+
},
|
|
45
|
+
hasCountDownEnded() {
|
|
46
|
+
return this.timeDiff < 1000;
|
|
47
|
+
},
|
|
48
|
+
getDiffArray() {
|
|
49
|
+
// if difference is NULL or 0 (zero), either way show zeroes to user
|
|
50
|
+
if (!this.timeDiff) return [];
|
|
51
|
+
let diffArray = [];
|
|
52
|
+
|
|
53
|
+
// generate values for each time unit
|
|
54
|
+
this.getDateDataParts.forEach(part => {
|
|
55
|
+
let wholeDuration = moment.duration(this.timeDiff);
|
|
56
|
+
|
|
57
|
+
let partDuration;
|
|
58
|
+
|
|
59
|
+
if (!diffArray.length) {
|
|
60
|
+
// first unit value needs to include all the time that isn't included in smaller units
|
|
61
|
+
// get whole duration as largest unit and round down.
|
|
62
|
+
partDuration = Math.floor(wholeDuration.as(part));
|
|
63
|
+
} else {
|
|
64
|
+
partDuration = Math.floor(wholeDuration.get(part));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
diffArray.push(partDuration);
|
|
68
|
+
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
return diffArray;
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
methods: {
|
|
75
|
+
getDatePart(i) {
|
|
76
|
+
return leftPad(this.getDiffArray[i] || 0, 2, 0);
|
|
77
|
+
},
|
|
78
|
+
getSeparator(i) {
|
|
79
|
+
if (typeof this.separators !== 'string' && this.separators.length === 2) {
|
|
80
|
+
return this.separators[this.getDatePart(i) === '01' ? 1 : 0].split(':')[i];
|
|
81
|
+
} else if (typeof this.separators !== 'string' && this.separators.length === 3) { //for Russian
|
|
82
|
+
let separatorIndex = 0;
|
|
83
|
+
const timeDigit = Number(this.getDatePart(i))
|
|
84
|
+
if (timeDigit % 10 === 1 && timeDigit !== 11) {
|
|
85
|
+
separatorIndex = 1;
|
|
86
|
+
} else if ([2, 3, 4].includes(timeDigit % 10) && !([12, 13, 14].includes(timeDigit))) {
|
|
87
|
+
separatorIndex = 2;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
return this.separators[separatorIndex].split(':')[i];
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
return this.getSeparators[i];
|
|
94
|
+
},
|
|
95
|
+
getTimeDiff() {
|
|
96
|
+
return moment(this.end).diff(moment().format());
|
|
97
|
+
},
|
|
98
|
+
checkTimeDiff() {
|
|
99
|
+
this.timeDiff = this.getTimeDiff();
|
|
100
|
+
|
|
101
|
+
if (this.hasCountDownEnded) {
|
|
102
|
+
this.timeDiff = 0;
|
|
103
|
+
this.onCountDownEnd();
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
setTimeout(this.checkTimeDiff, 1000);
|
|
108
|
+
},
|
|
109
|
+
onCountDownEnd() {
|
|
110
|
+
this.$emit('countDownEnd', {
|
|
111
|
+
el: this.$el
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
106
116
|
</script>
|
package/package.json
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@whitewizard/countdown",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Universal countdown Vue component",
|
|
5
|
-
"main": "countdown.vue",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"test": "karma start test/karma.conf.js --single-run --no-auto-watch",
|
|
8
|
-
"test:junit": "karma start test/karma.conf.js --single-run --no-auto-watch --reporters junit"
|
|
9
|
-
},
|
|
10
|
-
"author": "Mikk Narusk",
|
|
11
|
-
"license": "ISC",
|
|
12
|
-
"dependencies": {
|
|
13
|
-
"left-pad": "^1.1.3",
|
|
14
|
-
"moment": "^2.19.1"
|
|
15
|
-
},
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"babel-core": "^6.26.0",
|
|
18
|
-
"babel-loader": "^7.1.2",
|
|
19
|
-
"chai": "^4.1.2",
|
|
20
|
-
"karma": "^1.7.1",
|
|
21
|
-
"karma-firefox-launcher": "^1.0.1",
|
|
22
|
-
"karma-junit-reporter": "^1.2.0",
|
|
23
|
-
"karma-mocha": "^1.3.0",
|
|
24
|
-
"karma-webpack": "^2.0.5",
|
|
25
|
-
"mocha": "^4.0.1",
|
|
26
|
-
"pre-commit": "^1.2.2",
|
|
27
|
-
"vue": "^2.5.2",
|
|
28
|
-
"vue-loader": "^13.3.0",
|
|
29
|
-
"vue-template-compiler": "^2.5.2",
|
|
30
|
-
"webpack": "^3.8.1"
|
|
31
|
-
},
|
|
32
|
-
"pre-commit": [
|
|
33
|
-
"test"
|
|
34
|
-
]
|
|
35
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@whitewizard/countdown",
|
|
3
|
+
"version": "1.0.6",
|
|
4
|
+
"description": "Universal countdown Vue component",
|
|
5
|
+
"main": "countdown.vue",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "karma start test/karma.conf.js --single-run --no-auto-watch",
|
|
8
|
+
"test:junit": "karma start test/karma.conf.js --single-run --no-auto-watch --reporters junit"
|
|
9
|
+
},
|
|
10
|
+
"author": "Mikk Narusk",
|
|
11
|
+
"license": "ISC",
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"left-pad": "^1.1.3",
|
|
14
|
+
"moment": "^2.19.1"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"babel-core": "^6.26.0",
|
|
18
|
+
"babel-loader": "^7.1.2",
|
|
19
|
+
"chai": "^4.1.2",
|
|
20
|
+
"karma": "^1.7.1",
|
|
21
|
+
"karma-firefox-launcher": "^1.0.1",
|
|
22
|
+
"karma-junit-reporter": "^1.2.0",
|
|
23
|
+
"karma-mocha": "^1.3.0",
|
|
24
|
+
"karma-webpack": "^2.0.5",
|
|
25
|
+
"mocha": "^4.0.1",
|
|
26
|
+
"pre-commit": "^1.2.2",
|
|
27
|
+
"vue": "^2.5.2",
|
|
28
|
+
"vue-loader": "^13.3.0",
|
|
29
|
+
"vue-template-compiler": "^2.5.2",
|
|
30
|
+
"webpack": "^3.8.1"
|
|
31
|
+
},
|
|
32
|
+
"pre-commit": [
|
|
33
|
+
"test"
|
|
34
|
+
]
|
|
35
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
## Countdown Vue component
|
|
2
|
-
|
|
3
|
-
### Usage:
|
|
4
|
-
* `import Countdown from @whitewizard/countdown`
|
|
5
|
-
* Implements an unnamed slot to display something inside component.
|
|
6
|
-
* Slot usage: [Vue.js slots](https://vuejs.org/v2/guide/components.html#Single-Slot)
|
|
7
|
-
* Root element gets 'countdown-ended' class when countdown end is reached.
|
|
8
|
-
* Emits 'countDownEnd' event with root HTML element as `event.el`
|
|
9
|
-
* Event usage: `<Countdown @countDownEnd="myHandler" />`
|
|
10
|
-
|
|
11
|
-
### Props:
|
|
12
|
-
* format {String}. String representing units to display, separated by colons. Default: `hours:minutes:seconds`
|
|
13
|
-
* separators {String}. Text to show between countdown data elements, separated by colons. Default: `h:m:s`
|
|
1
|
+
## Countdown Vue component
|
|
2
|
+
|
|
3
|
+
### Usage:
|
|
4
|
+
* `import Countdown from @whitewizard/countdown`
|
|
5
|
+
* Implements an unnamed slot to display something inside component.
|
|
6
|
+
* Slot usage: [Vue.js slots](https://vuejs.org/v2/guide/components.html#Single-Slot)
|
|
7
|
+
* Root element gets 'countdown-ended' class when countdown end is reached.
|
|
8
|
+
* Emits 'countDownEnd' event with root HTML element as `event.el`
|
|
9
|
+
* Event usage: `<Countdown @countDownEnd="myHandler" />`
|
|
10
|
+
|
|
11
|
+
### Props:
|
|
12
|
+
* format {String}. String representing units to display, separated by colons. Default: `hours:minutes:seconds`
|
|
13
|
+
* separators {String}. Text to show between countdown data elements, separated by colons. Default: `h:m:s`
|
|
14
14
|
* end {String} RFC 3339 datetime string. Represents countdown end time. Required. ([RFC 3339](https://tools.ietf.org/html/rfc3339))
|
package/test/Countdown.test.js
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
import Vue from 'vue'
|
|
2
|
-
import Countdown from '../countdown.vue'
|
|
3
|
-
import {assert} from 'chai';
|
|
4
|
-
import moment from 'moment';
|
|
5
|
-
|
|
6
|
-
Vue.config.productionTip = false;
|
|
7
|
-
Vue.config.devtools = false;
|
|
8
|
-
|
|
9
|
-
function getViewModel (Component, propsData) {
|
|
10
|
-
const Constructor = Vue.extend(Component);
|
|
11
|
-
return new Constructor({ propsData }).$mount();
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
describe('Countdown component: ', () => {
|
|
15
|
-
describe('computed properties: ', () => {
|
|
16
|
-
|
|
17
|
-
it('getDateDataParts returns correct array of dateparts', () => {
|
|
18
|
-
const format = ['h', 'm', 's'];
|
|
19
|
-
|
|
20
|
-
let res = Countdown.computed.getDateDataParts.call({format: format.join(':')});
|
|
21
|
-
assert.deepEqual(res, format);
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
it('getSeparators returns correct array of separators', () => {
|
|
25
|
-
const separators = ['h', 'min', 'sekundit'];
|
|
26
|
-
|
|
27
|
-
let res = Countdown.computed.getSeparators.call({separators: separators.join(':')});
|
|
28
|
-
assert.deepEqual(res, separators);
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
it('hasCountDownEnded returns true if timeDiff is < 1000', (done) => {
|
|
32
|
-
const hasCountDownEnded = (timeDiff) => Countdown.computed.hasCountDownEnded.call({timeDiff});
|
|
33
|
-
|
|
34
|
-
assert.isTrue(hasCountDownEnded(0));
|
|
35
|
-
assert.isTrue(hasCountDownEnded(-2000));
|
|
36
|
-
assert.isTrue(hasCountDownEnded(999));
|
|
37
|
-
assert.isFalse(hasCountDownEnded(1000));
|
|
38
|
-
assert.isFalse(hasCountDownEnded(1001));
|
|
39
|
-
assert.isFalse(hasCountDownEnded(5000));
|
|
40
|
-
done();
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
it('getDiffArray returns correct array', () => {
|
|
44
|
-
const format = ['minutes', 'seconds'];
|
|
45
|
-
const getDiffArray = (timeDiff) => Countdown.computed.getDiffArray.call({
|
|
46
|
-
timeDiff,
|
|
47
|
-
getDateDataParts: format
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
assert.lengthOf(getDiffArray(0), 0, 'returns empty array if timeDiff is 0');
|
|
51
|
-
assert.lengthOf(getDiffArray(12345), format.length, 'array has same length as format');
|
|
52
|
-
assert.deepEqual(getDiffArray(1000*60*60*2 + 1000*60 + 1000*4), [121, 4], 'calculates array members correctly')
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
describe('methods: ', () => {
|
|
57
|
-
it('getDatePart result is correctly padded', () => {
|
|
58
|
-
const getDatePart = diffArray => Countdown.methods.getDatePart.call({getDiffArray: diffArray}, 1);
|
|
59
|
-
|
|
60
|
-
assert.equal(getDatePart([0, 1, 2]), '01');
|
|
61
|
-
assert.equal(getDatePart([0, 123, 2]), '123')
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
it('getSeparator returns correct separator', () => {
|
|
65
|
-
const separators = ['h', 'm', 's'],
|
|
66
|
-
res = Countdown.methods.getSeparator.call({separators, getSeparators: separators }, 1);
|
|
67
|
-
|
|
68
|
-
assert.equal(res, 'm');
|
|
69
|
-
});
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
describe('Countdown functionality: ', () => {
|
|
73
|
-
it('emits countDownEnd event if timeDiff is < 1000', (done) => {
|
|
74
|
-
let vm = getViewModel(Countdown, {
|
|
75
|
-
end: moment().add(500, 'milliseconds').format()
|
|
76
|
-
}).$mount();
|
|
77
|
-
|
|
78
|
-
vm.$on('countDownEnd', () => {
|
|
79
|
-
done();
|
|
80
|
-
})
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
it('root element has countdown-ended class if timeDiff is < 1000', (done) => {
|
|
84
|
-
let vm = getViewModel(Countdown, {
|
|
85
|
-
end: moment().add(100, 'milliseconds').format()
|
|
86
|
-
}).$mount();
|
|
87
|
-
|
|
88
|
-
vm.$nextTick(() => {
|
|
89
|
-
assert.isTrue(vm.$el.className.includes('countdown-ended'));
|
|
90
|
-
done();
|
|
91
|
-
})
|
|
92
|
-
})
|
|
93
|
-
})
|
|
1
|
+
import Vue from 'vue'
|
|
2
|
+
import Countdown from '../countdown.vue'
|
|
3
|
+
import {assert} from 'chai';
|
|
4
|
+
import moment from 'moment';
|
|
5
|
+
|
|
6
|
+
Vue.config.productionTip = false;
|
|
7
|
+
Vue.config.devtools = false;
|
|
8
|
+
|
|
9
|
+
function getViewModel (Component, propsData) {
|
|
10
|
+
const Constructor = Vue.extend(Component);
|
|
11
|
+
return new Constructor({ propsData }).$mount();
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
describe('Countdown component: ', () => {
|
|
15
|
+
describe('computed properties: ', () => {
|
|
16
|
+
|
|
17
|
+
it('getDateDataParts returns correct array of dateparts', () => {
|
|
18
|
+
const format = ['h', 'm', 's'];
|
|
19
|
+
|
|
20
|
+
let res = Countdown.computed.getDateDataParts.call({format: format.join(':')});
|
|
21
|
+
assert.deepEqual(res, format);
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
it('getSeparators returns correct array of separators', () => {
|
|
25
|
+
const separators = ['h', 'min', 'sekundit'];
|
|
26
|
+
|
|
27
|
+
let res = Countdown.computed.getSeparators.call({separators: separators.join(':')});
|
|
28
|
+
assert.deepEqual(res, separators);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it('hasCountDownEnded returns true if timeDiff is < 1000', (done) => {
|
|
32
|
+
const hasCountDownEnded = (timeDiff) => Countdown.computed.hasCountDownEnded.call({timeDiff});
|
|
33
|
+
|
|
34
|
+
assert.isTrue(hasCountDownEnded(0));
|
|
35
|
+
assert.isTrue(hasCountDownEnded(-2000));
|
|
36
|
+
assert.isTrue(hasCountDownEnded(999));
|
|
37
|
+
assert.isFalse(hasCountDownEnded(1000));
|
|
38
|
+
assert.isFalse(hasCountDownEnded(1001));
|
|
39
|
+
assert.isFalse(hasCountDownEnded(5000));
|
|
40
|
+
done();
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
it('getDiffArray returns correct array', () => {
|
|
44
|
+
const format = ['minutes', 'seconds'];
|
|
45
|
+
const getDiffArray = (timeDiff) => Countdown.computed.getDiffArray.call({
|
|
46
|
+
timeDiff,
|
|
47
|
+
getDateDataParts: format
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
assert.lengthOf(getDiffArray(0), 0, 'returns empty array if timeDiff is 0');
|
|
51
|
+
assert.lengthOf(getDiffArray(12345), format.length, 'array has same length as format');
|
|
52
|
+
assert.deepEqual(getDiffArray(1000*60*60*2 + 1000*60 + 1000*4), [121, 4], 'calculates array members correctly')
|
|
53
|
+
});
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
describe('methods: ', () => {
|
|
57
|
+
it('getDatePart result is correctly padded', () => {
|
|
58
|
+
const getDatePart = diffArray => Countdown.methods.getDatePart.call({getDiffArray: diffArray}, 1);
|
|
59
|
+
|
|
60
|
+
assert.equal(getDatePart([0, 1, 2]), '01');
|
|
61
|
+
assert.equal(getDatePart([0, 123, 2]), '123')
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
it('getSeparator returns correct separator', () => {
|
|
65
|
+
const separators = ['h', 'm', 's'],
|
|
66
|
+
res = Countdown.methods.getSeparator.call({separators, getSeparators: separators }, 1);
|
|
67
|
+
|
|
68
|
+
assert.equal(res, 'm');
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
describe('Countdown functionality: ', () => {
|
|
73
|
+
it('emits countDownEnd event if timeDiff is < 1000', (done) => {
|
|
74
|
+
let vm = getViewModel(Countdown, {
|
|
75
|
+
end: moment().add(500, 'milliseconds').format()
|
|
76
|
+
}).$mount();
|
|
77
|
+
|
|
78
|
+
vm.$on('countDownEnd', () => {
|
|
79
|
+
done();
|
|
80
|
+
})
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
it('root element has countdown-ended class if timeDiff is < 1000', (done) => {
|
|
84
|
+
let vm = getViewModel(Countdown, {
|
|
85
|
+
end: moment().add(100, 'milliseconds').format()
|
|
86
|
+
}).$mount();
|
|
87
|
+
|
|
88
|
+
vm.$nextTick(() => {
|
|
89
|
+
assert.isTrue(vm.$el.className.includes('countdown-ended'));
|
|
90
|
+
done();
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
94
|
});
|
package/test/karma.conf.js
CHANGED
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
module.exports = function(config) {
|
|
2
|
-
config.set({
|
|
3
|
-
frameworks: ['mocha'],
|
|
4
|
-
|
|
5
|
-
files: [
|
|
6
|
-
'*.js'
|
|
7
|
-
],
|
|
8
|
-
browsers: ['Firefox'],
|
|
9
|
-
|
|
10
|
-
junitReporter: {
|
|
11
|
-
outputDir: 'reports'
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
client: {
|
|
15
|
-
mocha: {
|
|
16
|
-
// change Karma's debug.html to the mocha web reporter
|
|
17
|
-
reporter: 'html',
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
preprocessors: {
|
|
21
|
-
'Countdown.test.js': ['webpack']
|
|
22
|
-
},
|
|
23
|
-
webpack: {
|
|
24
|
-
output: {
|
|
25
|
-
path: '/build',
|
|
26
|
-
filename: 'countdown.js',
|
|
27
|
-
},
|
|
28
|
-
module: {
|
|
29
|
-
rules: [
|
|
30
|
-
{
|
|
31
|
-
test: /\.vue$/,
|
|
32
|
-
loader: 'vue-loader'
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
test: /\.js$/,
|
|
36
|
-
loader: 'babel-loader',
|
|
37
|
-
exclude: ['/node_modules', '/build'],
|
|
38
|
-
include: '/test'
|
|
39
|
-
}
|
|
40
|
-
]
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
});
|
|
1
|
+
module.exports = function(config) {
|
|
2
|
+
config.set({
|
|
3
|
+
frameworks: ['mocha'],
|
|
4
|
+
|
|
5
|
+
files: [
|
|
6
|
+
'*.js'
|
|
7
|
+
],
|
|
8
|
+
browsers: ['Firefox'],
|
|
9
|
+
|
|
10
|
+
junitReporter: {
|
|
11
|
+
outputDir: 'reports'
|
|
12
|
+
},
|
|
13
|
+
|
|
14
|
+
client: {
|
|
15
|
+
mocha: {
|
|
16
|
+
// change Karma's debug.html to the mocha web reporter
|
|
17
|
+
reporter: 'html',
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
preprocessors: {
|
|
21
|
+
'Countdown.test.js': ['webpack']
|
|
22
|
+
},
|
|
23
|
+
webpack: {
|
|
24
|
+
output: {
|
|
25
|
+
path: '/build',
|
|
26
|
+
filename: 'countdown.js',
|
|
27
|
+
},
|
|
28
|
+
module: {
|
|
29
|
+
rules: [
|
|
30
|
+
{
|
|
31
|
+
test: /\.vue$/,
|
|
32
|
+
loader: 'vue-loader'
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
test: /\.js$/,
|
|
36
|
+
loader: 'babel-loader',
|
|
37
|
+
exclude: ['/node_modules', '/build'],
|
|
38
|
+
include: '/test'
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
44
|
};
|