diff --git a/README.md b/README.md
index 2080942..3ccc9e5 100644
--- a/README.md
+++ b/README.md
@@ -47,19 +47,16 @@ export default Vue.extend({
{
timestamp: Date.parse('2021-05-29T20:20:46.444Z'),
title: 'Dolore ullamco exercitation commodo',
- content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.',
- link: 'https://example1.com'
+ content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.'
},
{
timestamp: Date.parse('2021-05-28T20:20:46.444Z'),
- title: 'Voluptate pariatur dolore laborum eu',
- link: '#'
+ title: 'Voluptate pariatur dolore laborum eu'
},
{
timestamp: Date.parse('2021-01-28T20:20:46.444Z'),
title: 'Mollit aliqua velit nostrud ipsum',
- content: 'Magna officia est fugiat sit esse consectetur labore elit nulla duis consectetur. Et sit velit ad ipsum officia.',
- link: '#'
+ content: 'Magna officia est fugiat sit esse consectetur labore elit nulla duis consectetur. Et sit velit ad ipsum officia.'
}
]
}
@@ -74,7 +71,8 @@ export default Vue.extend({
>
@@ -82,7 +80,7 @@ export default Vue.extend({
```
## Features
-- [ ] Loading spinner
+- [x] Loading spinner
- [ ] Support item head color variants
- [x] Support `reverse` props
- [ ] Support custom icons
diff --git a/babel.config.js b/babel.config.js
index de59089..9af5b52 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -12,5 +12,5 @@ const buildPresets = [
],
];
module.exports = {
- presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+ presets: buildPresets,
};
diff --git a/dev/serve.vue b/dev/serve.vue
index 244c01c..b53b849 100644
--- a/dev/serve.vue
+++ b/dev/serve.vue
@@ -45,7 +45,8 @@ export default Vue.extend({
>
diff --git a/src/__tests__/bootstrap-vue-timeline.spec.js b/src/__tests__/bootstrap-vue-timeline.spec.js
index a7e3fa8..495f82c 100644
--- a/src/__tests__/bootstrap-vue-timeline.spec.js
+++ b/src/__tests__/bootstrap-vue-timeline.spec.js
@@ -1,56 +1,58 @@
-import { createLocalVue, mount } from '@vue/test-utils'
-import { BootstrapVue } from 'bootstrap-vue'
+import { createLocalVue, shallowMount } from '@vue/test-utils'
+import { BootstrapVue, BSpinner } 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'
+ content: 'content 1'
},
{
timestamp: Date.parse('2021-01-28T20:20:46.456Z'),
title: 'title 2',
- content: 'content 2',
- link: 'link 1'
+ content: 'content 2'
},
{
timestamp: Date.parse('2021-01-28T20:20:46.444Z'),
title: 'title 3',
- content: 'content 3',
- link: 'link 3'
+ content: 'content 3'
}
]
-test('renders a timeline with items', () => {
- const localVue = createLocalVue()
- localVue.use(BootstrapVue)
+describe('bootstrap vue timeline component', () => {
+ let localVue
- const wrapper = mount(BootstrapVueTimeline, {
- localVue,
- attachTo: document.body,
- propsData: {
- items: sampleItems,
- reverse: false
- }
+ beforeEach(() => {
+ localVue = createLocalVue()
+ localVue.use(BootstrapVue)
})
- 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)
+ test('renders a timeline with items in reversed order', () => {
+ const wrapper = shallowMount(BootstrapVueTimeline, {
+ localVue,
+ propsData: {
+ items: sampleItems,
+ reverse: true
+ }
+ })
+ const text = wrapper.text()
+ expect(text).toMatch(/content 3[\s\S]*content 2[\s\S]*content 1/)
+ })
+
+ test('renders a timeline with items with a spinner', () => {
+ const wrapper = shallowMount(BootstrapVueTimeline, {
+ localVue,
+ propsData: {
+ items: sampleItems,
+ reverse: false,
+ loading: true
+ }
+ })
+ const text = wrapper.text()
+ expect(text).toMatch(/content 1[\s\S]*content 2[\s\S]*content 3/)
- const wrapper = mount(BootstrapVueTimeline, {
- localVue,
- attachTo: document.body,
- propsData: {
- items: sampleItems,
- reverse: true
- }
+ const spinner = wrapper.findComponent(BSpinner)
+ expect(spinner.exists()).toBe(true)
})
- const text = wrapper.text()
- expect(text).toMatch(/content 3[\s\S]*content 2[\s\S]*content 1/)
-})
+})
\ No newline at end of file
diff --git a/src/bootstrap-vue-timeline.vue b/src/bootstrap-vue-timeline.vue
index 9fe0bc4..243ba1a 100644
--- a/src/bootstrap-vue-timeline.vue
+++ b/src/bootstrap-vue-timeline.vue
@@ -1,29 +1,40 @@