mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
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:
parent
68f0dde62f
commit
a7354a054e
@ -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')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -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 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user