diff --git a/README.md b/README.md index 0e8777f..2080942 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ export default Vue.extend({ > @@ -83,9 +84,10 @@ export default Vue.extend({ ## Features - [ ] Loading spinner - [ ] Support item head color variants -- [ ] Support `reverse` props +- [x] Support `reverse` props - [ ] Support custom icons - [ ] Refactor timeline and item into separate components +- [ ] Custom timestamp format ## Component Reference ### Properties diff --git a/dev/serve.vue b/dev/serve.vue index 38d9c0f..244c01c 100644 --- a/dev/serve.vue +++ b/dev/serve.vue @@ -45,6 +45,7 @@ export default Vue.extend({ > diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..6c85b3c --- /dev/null +++ b/jest.config.js @@ -0,0 +1,7 @@ +module.exports = { + preset: '@vue/cli-plugin-unit-jest', + verbose: true, + moduleNameMapper: { + '\\.css$': 'identity-obj-proxy' + } +} diff --git a/package.json b/package.json index c99436a..84e2777 100644 --- a/package.json +++ b/package.json @@ -26,16 +26,18 @@ }, "devDependencies": { "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.12.11", "@babel/polyfill": "^7.11.5", + "@babel/preset-env": "^7.12.11", "@rollup/plugin-alias": "^3.1.1", "@rollup/plugin-babel": "^5.2.2", "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.1", "@rollup/plugin-replace": "^2.3.4", "@vue/cli-plugin-babel": "^4.5.10", - "@vue/cli-service": "^4.5.10", "@vue/cli-plugin-eslint": "~4.5.0", + "@vue/cli-plugin-unit-jest": "^4.5.13", + "@vue/cli-service": "^4.5.10", + "@vue/test-utils": "^1.2.0", "cross-env": "^7.0.3", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", @@ -60,6 +62,7 @@ "standard": { "ignore": [ "*.config.js", + "src/__tests__/*.spec.js", "dist/" ] } diff --git a/src/__tests__/bootstrap-vue-timeline.spec.js b/src/__tests__/bootstrap-vue-timeline.spec.js new file mode 100644 index 0000000..a7e3fa8 --- /dev/null +++ b/src/__tests__/bootstrap-vue-timeline.spec.js @@ -0,0 +1,56 @@ +import { createLocalVue, mount } from '@vue/test-utils' +import { BootstrapVue } from 'bootstrap-vue' +import BootstrapVueTimeline from '../bootstrap-vue-timeline.vue' + +const sampleItems = [ + { + timestamp: Date.parse('2021-01-28T20:20:46.123Z'), + title: 'title 1', + content: 'content 1', + link: 'link 1' + }, + { + timestamp: Date.parse('2021-01-28T20:20:46.456Z'), + title: 'title 2', + content: 'content 2', + link: 'link 1' + }, + { + timestamp: Date.parse('2021-01-28T20:20:46.444Z'), + title: 'title 3', + content: 'content 3', + link: 'link 3' + } +] + +test('renders a timeline with items', () => { + const localVue = createLocalVue() + localVue.use(BootstrapVue) + + const wrapper = mount(BootstrapVueTimeline, { + localVue, + attachTo: document.body, + propsData: { + items: sampleItems, + reverse: false + } + }) + const text = wrapper.text() + expect(text).toMatch(/content 1[\s\S]*content 2[\s\S]*content 3/) +}) + +test('renders a timeline with items in reversed order', () => { + const localVue = createLocalVue() + localVue.use(BootstrapVue) + + const wrapper = mount(BootstrapVueTimeline, { + localVue, + attachTo: document.body, + propsData: { + items: sampleItems, + reverse: true + } + }) + const text = wrapper.text() + expect(text).toMatch(/content 3[\s\S]*content 2[\s\S]*content 1/) +}) diff --git a/src/bootstrap-vue-timeline.vue b/src/bootstrap-vue-timeline.vue index 11c8b42..9fe0bc4 100644 --- a/src/bootstrap-vue-timeline.vue +++ b/src/bootstrap-vue-timeline.vue @@ -8,9 +8,20 @@ Vue.component('b-list-group-item', BListGroupItem) Vue.component('b-tooltip', BTooltip) export default /*#__PURE__*/{ - name: 'BootstrapVueTimeline', // vue component name + name: 'BootstrapVueTimeline', props: { - items: Array + items: Array, + reverse: Boolean + }, + computed: { + orderedItems() { + const items = this.items + if (this.reverse) { + items.reverse() + } + + return items + } }, methods: { formatAgo(timestamp) { @@ -29,7 +40,7 @@ export default /*#__PURE__*/{