Fix test, remove vue-filter relativeDateTime

cc @Tirokk @ulfgebhardt @appinteractive

This is a perfect example why I insist on writing tests. While debugging
@Tirokk and I discovered several design flaws and plugins that depend on
each other. The solution to all of this is not to use vue-filters plugin
at all! Vue-filters depends on Vuex, i18n, vuex-i18n, nuxt-modules and so
on.

This is just bad, bad, bad code. Start writing tests. Now.

We should start to refactor vue-filters and use components instead.
This commit is contained in:
Robert Schäfer 2019-04-10 18:39:15 +02:00
parent 68f0dde62f
commit a7354a054e
3 changed files with 48 additions and 13 deletions

View File

@ -1,24 +1,52 @@
import { shallowMount, createLocalVue } from '@vue/test-utils'
import RelativeDateTime from './index.vue'
import Filters from '../../plugins/vue-filters.js'
const localVue = createLocalVue()
localVue.use(Filters)
describe('RelativeDateTime', () => {
let wrapper
let mocks
let locale
beforeEach(() => {
wrapper = shallowMount(RelativeDateTime, {
mocks = {
$i18n: {
locale: () => locale
}
}
})
let Wrapper = () => {
return shallowMount(RelativeDateTime, {
mocks,
localVue,
propsData: {
dateTime: new Date()
}
})
})
}
it('renders', () => {
console.log(wrapper.html())
expect(wrapper.is('span')).toBe(true)
expect(Wrapper().is('span')).toBe(true)
})
describe("locale == 'en'", () => {
beforeEach(() => {
locale = 'en'
})
it('translates', () => {
expect(Wrapper().text()).toContain('today at')
})
})
describe("locale == 'de'", () => {
beforeEach(() => {
locale = 'de'
})
it('translates', () => {
expect(Wrapper().text()).toContain('heute um')
})
})
})

View File

@ -3,6 +3,18 @@
</template>
<script>
import formatRelative from 'date-fns/formatRelative'
import { enUS, de, nl, fr, pt, es, pl } from 'date-fns/locale'
const locales = {
en: enUS,
de,
nl,
fr,
es,
pt,
pl
}
export default {
name: 'HcRelativeDateTime',
props: {
@ -13,7 +25,8 @@ export default {
},
computed: {
relativeDateTime() {
return this.$filters.relativeDateTime(this.dateTime)
let locale = locales[this.$i18n.locale() || 'en']
return formatRelative(new Date(this.dateTime), new Date(), { locale })
}
}
}

View File

@ -34,12 +34,6 @@ export default ({ app }) => {
locale: getLocalizedFormat()
})
},
relativeDateTime: value => {
if (!value) return ''
return formatRelative(new Date(value), new Date(), {
locale: getLocalizedFormat()
})
},
number: (
value,
precision = 2,