diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js index 12a84d4a6..176041ecb 100644 --- a/webapp/pages/post/_id/_slug/index.spec.js +++ b/webapp/pages/post/_id/_slug/index.spec.js @@ -3,6 +3,7 @@ import Vuex from 'vuex' import Vue from 'vue' import PostSlug from './index.vue' import CommentList from '~/components/CommentList/CommentList' +import HcHashtag from '~/components/Hashtag/Hashtag' config.stubs['client-only'] = '' config.stubs['nuxt-link'] = '' @@ -143,5 +144,48 @@ describe('PostSlug', () => { }) }) }) + + describe('tags shown in tag cloud', () => { + beforeEach(async () => { + // Create backendData with tags, not alphabetically sorted. + backendData.post.tags = [ + { id: 'c' }, + { id: 'qw' }, + { id: 'BQ' }, + { id: '42' }, + { id: 'Bw' }, + { id: 'a' }, + ] + + wrapper = await Wrapper() + }) + + it('are present', async () => { + // Get length from backendData and compare against number of tags present in component. + expect(wrapper.findAll(HcHashtag).length).toBe(backendData.post.tags.length) + }) + + it('are alphabetically ordered', async () => { + // Get all HcHastag components + let wrappers = wrapper.findAll(HcHashtag).wrappers + // Exctract ID properties (tag names) from component. + let ids = [] + wrappers.forEach((x) => { + ids.push({ + id: x.props().id, + }) + }) + // Compare extracted IDs with solution. + let idsAlphabetically = [ + { id: '42' }, + { id: 'a' }, + { id: 'BQ' }, + { id: 'Bw' }, + { id: 'c' }, + { id: 'qw' }, + ] + expect(ids).toStrictEqual(idsAlphabetically) + }) + }) }) }) diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue index 9a4a796e1..2082cea0c 100644 --- a/webapp/pages/post/_id/_slug/index.vue +++ b/webapp/pages/post/_id/_slug/index.vue @@ -64,7 +64,7 @@
- +
@@ -179,6 +179,17 @@ export default { if (!author) return false return this.$store.getters['auth/user'].id === author.id }, + sortedTags() { + // Make sure the property is valid. + if (!this.post.tags || !this.post.tags.length) return false + // Sorting actually happens in place but that should not be a problem. + return this.post.tags.sort(function (a, b) { + // Converting to lowercase to make sort case insensitive. + const tagA = a.id.toLowerCase() + const tagB = b.id.toLowerCase() + return tagA < tagB ? -1 : tagA > tagB ? 1 : 0 + }) + }, }, methods: { reply(message) { diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue index 702de29ed..5dcaf4029 100644 --- a/webapp/pages/post/_id/_slug/more-info.vue +++ b/webapp/pages/post/_id/_slug/more-info.vue @@ -14,7 +14,7 @@

{{ $t('post.moreInfo.titleOfHashtagsSection') }}

- +

{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}

@@ -62,6 +62,17 @@ export default { post() { return this.Post ? this.Post[0] || {} : {} }, + sortedTags() { + // Make sure the property is valid. + if (!this.post.tags || !this.post.tags.length) return false + // Sorting actually happens in place but that should not be a problem. + return this.post.tags.sort(function (a, b) { + // Converting to lowercase to make sort case insensitive. + const tagA = a.id.toLowerCase() + const tagB = b.id.toLowerCase() + return tagA < tagB ? -1 : tagA > tagB ? 1 : 0 + }) + }, }, methods: { removePostFromList(deletedPost) {