mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +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 { shallowMount, createLocalVue } from '@vue/test-utils'
|
||||||
import RelativeDateTime from './index.vue'
|
import RelativeDateTime from './index.vue'
|
||||||
|
|
||||||
import Filters from '../../plugins/vue-filters.js'
|
|
||||||
const localVue = createLocalVue()
|
const localVue = createLocalVue()
|
||||||
localVue.use(Filters)
|
|
||||||
|
|
||||||
describe('RelativeDateTime', () => {
|
describe('RelativeDateTime', () => {
|
||||||
let wrapper
|
let wrapper
|
||||||
|
let mocks
|
||||||
|
let locale
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
wrapper = shallowMount(RelativeDateTime, {
|
mocks = {
|
||||||
|
$i18n: {
|
||||||
|
locale: () => locale
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let Wrapper = () => {
|
||||||
|
return shallowMount(RelativeDateTime, {
|
||||||
|
mocks,
|
||||||
localVue,
|
localVue,
|
||||||
propsData: {
|
propsData: {
|
||||||
dateTime: new Date()
|
dateTime: new Date()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
}
|
||||||
|
|
||||||
it('renders', () => {
|
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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: 'HcRelativeDateTime',
|
name: 'HcRelativeDateTime',
|
||||||
props: {
|
props: {
|
||||||
@ -13,7 +25,8 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
relativeDateTime() {
|
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()
|
locale: getLocalizedFormat()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
relativeDateTime: value => {
|
|
||||||
if (!value) return ''
|
|
||||||
return formatRelative(new Date(value), new Date(), {
|
|
||||||
locale: getLocalizedFormat()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
number: (
|
number: (
|
||||||
value,
|
value,
|
||||||
precision = 2,
|
precision = 2,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user