Alphabetically sorting tags using compute functions on index and more-info page. Added test checking tags are present and shown alphabetically.

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'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
@@ -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)
+      })
+    })
   })
 })

webapp/pages/post/_id/_slug/index.vue

@@ -64,7 +64,7 @@
       <!-- Tags -->
       <div v-if="post.tags && post.tags.length" class="tags">
         <ds-space margin="xx-small" />
-        <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
+        <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
       </div>
       <ds-space margin-top="x-large">
         <ds-flex :gutter="{ lg: 'small' }">
@@ -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) {

webapp/pages/post/_id/_slug/more-info.vue

@@ -14,7 +14,7 @@
       <h3>
         {{ $t('post.moreInfo.titleOfHashtagsSection') }}
       </h3>
-      <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
+      <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
     </template>
     <h3>{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}</h3>
     <ds-section>
@@ -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) {