Add reverse property and add tests

Author: junjizhi

README.md

@@ -74,6 +74,7 @@ export default Vue.extend({
     >
       <b-timeline
         :items="timelineItems"
+        :reverse="false"
       />
     </b-card>
   </div>
@@ -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

dev/serve.vue

@@ -45,6 +45,7 @@ export default Vue.extend({
     >
       <bootstrap-vue-timeline
         :items="timelineItems"
+        :reverse="true"
       />
     </b-card>
   </div>

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest',
+  verbose: true,
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy'
+  }
+}

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/"
     ]
   }

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/)
+})

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__*/{
 <template>
   <b-list-group>
     <b-list-group-item
-      v-for="(item, index) in items"
+      v-for="(item, index) in orderedItems"
       :key="item.timestamp + item.title"
       :href="item.link"
       class="flex-column align-items-start"