tests fixed for clickedCount

webapp/components/PostTeaser/PostTeaser.spec.js

@@ -25,6 +25,7 @@ describe('PostTeaser', () => {
         disabled: false,
         shoutedCount: 0,
         commentsCount: 0,
+        clickedCount: 0,
         name: 'It is a post',
         author: {
           id: 'u1',

webapp/components/PostTeaser/PostTeaser.story.js

@@ -28,6 +28,7 @@ export const post = {
     shoutedCount: 5,
     commentedCount: 39,
     followedByCount: 2,
+    clickedCount: 42,
     followedByCurrentUser: true,
     location: null,
     badges: [

webapp/components/PostTeaser/PostTeaser.vue

@@ -6,9 +6,9 @@
     <base-card
       :lang="post.language"
       :class="{
-             'disabled-content': post.disabled,
+        'disabled-content': post.disabled,
-             '--blur-image': post.image && post.image.sensitive,
+        '--blur-image': post.image && post.image.sensitive,
-             }"
+      }"
       :highlight="isPinned"
     >
       <template v-if="post.image" #heroImage>
@@ -59,143 +59,143 @@
 </template>
 
 <script>
- import UserTeaser from '~/components/UserTeaser/UserTeaser'
+import UserTeaser from '~/components/UserTeaser/UserTeaser'
- import ContentMenu from '~/components/ContentMenu/ContentMenu'
+import ContentMenu from '~/components/ContentMenu/ContentMenu'
- import HcRibbon from '~/components/Ribbon'
+import HcRibbon from '~/components/Ribbon'
- import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
- import { mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
- import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
+import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
 
- export default {
+export default {
-   name: 'PostTeaser',
+  name: 'PostTeaser',
-   components: {
+  components: {
-     UserTeaser,
+    UserTeaser,
-     HcRibbon,
+    HcRibbon,
-     ContentMenu,
+    ContentMenu,
-     CounterIcon,
+    CounterIcon,
-   },
+  },
-   props: {
+  props: {
-     post: {
+    post: {
-       type: Object,
+      type: Object,
-       required: true,
+      required: true,
-     },
+    },
-     width: {
+    width: {
-       type: Object,
+      type: Object,
-       default: () => {},
+      default: () => {},
-     },
+    },
-   },
+  },
-   mounted() {
+  mounted() {
-     const { image } = this.post
+    const { image } = this.post
-     if (!image) return
+    if (!image) return
-     const width = this.$el.offsetWidth
+    const width = this.$el.offsetWidth
-     const height = Math.min(width / image.aspectRatio, 2000)
+    const height = Math.min(width / image.aspectRatio, 2000)
-     const imageElement = this.$el.querySelector('.hero-image')
+    const imageElement = this.$el.querySelector('.hero-image')
-     if (imageElement) {
+    if (imageElement) {
-       imageElement.style.height = `${height}px`
+      imageElement.style.height = `${height}px`
-     }
+    }
-   },
+  },
-   computed: {
+  computed: {
-     ...mapGetters({
+    ...mapGetters({
-       user: 'auth/user',
+      user: 'auth/user',
-     }),
+    }),
-     excerpt() {
+    excerpt() {
-       return this.$filters.removeLinks(this.post.contentExcerpt)
+      return this.$filters.removeLinks(this.post.contentExcerpt)
-     },
+    },
-     isAuthor() {
+    isAuthor() {
-       const { author } = this.post
+      const { author } = this.post
-       if (!author) return false
+      if (!author) return false
-       return this.user.id === this.post.author.id
+      return this.user.id === this.post.author.id
-     },
+    },
-     menuModalsData() {
+    menuModalsData() {
-       return postMenuModalsData(
+      return postMenuModalsData(
-         // "this.post" may not always be defined at the beginning …
+        // "this.post" may not always be defined at the beginning …
-         this.post ? this.$filters.truncate(this.post.title, 30) : '',
+        this.post ? this.$filters.truncate(this.post.title, 30) : '',
-         this.deletePostCallback,
+        this.deletePostCallback,
-       )
+      )
-     },
+    },
-     isPinned() {
+    isPinned() {
-       return this.post && this.post.pinned
+      return this.post && this.post.pinned
-     },
+    },
-   },
+  },
-   methods: {
+  methods: {
-     async deletePostCallback() {
+    async deletePostCallback() {
-       try {
+      try {
-         const {
+        const {
-           data: { DeletePost },
+          data: { DeletePost },
-         } = await this.$apollo.mutate(deletePostMutation(this.post.id))
+        } = await this.$apollo.mutate(deletePostMutation(this.post.id))
-         this.$toast.success(this.$t('delete.contribution.success'))
+        this.$toast.success(this.$t('delete.contribution.success'))
-         this.$emit('removePostFromList', DeletePost)
+        this.$emit('removePostFromList', DeletePost)
-       } catch (err) {
+      } catch (err) {
-         this.$toast.error(err.message)
+        this.$toast.error(err.message)
-       }
+      }
-     },
+    },
-     pinPost(post) {
+    pinPost(post) {
-       this.$emit('pinPost', post)
+      this.$emit('pinPost', post)
-     },
+    },
-     unpinPost(post) {
+    unpinPost(post) {
-       this.$emit('unpinPost', post)
+      this.$emit('unpinPost', post)
-     },
+    },
-   },
+  },
- }
+}
 </script>
 <style lang="scss">
- .post-teaser,
+.post-teaser,
- .post-teaser:hover,
+.post-teaser:hover,
- .post-teaser:active {
+.post-teaser:active {
-   position: relative;
+  position: relative;
-   display: block;
+  display: block;
-   height: 100%;
+  height: 100%;
-   color: $text-color-base;
+  color: $text-color-base;
 
-   > .ribbon {
+  > .ribbon {
-     position: absolute;
+    position: absolute;
-     top: 50%;
+    top: 50%;
-     right: -7px;
+    right: -7px;
-   }
+  }
- }
+}
 
- .post-teaser > .base-card {
+.post-teaser > .base-card {
-   display: flex;
+  display: flex;
-   flex-direction: column;
+  flex-direction: column;
-   height: 100%;
+  height: 100%;
 
-   &.--blur-image > .hero-image > .image {
+  &.--blur-image > .hero-image > .image {
-     filter: blur($blur-radius);
+    filter: blur($blur-radius);
-   }
+  }
 
-   > .content {
+  > .content {
-     flex-grow: 1;
+    flex-grow: 1;
-     margin-bottom: $space-small;
+    margin-bottom: $space-small;
-   }
+  }
 
-   > .footer {
+  > .footer {
-     display: flex;
+    display: flex;
-     justify-content: space-between;
+    justify-content: space-between;
-     align-items: center;
+    align-items: center;
 
-     > .categories-placeholder {
+    > .categories-placeholder {
-       flex-grow: 1;
+      flex-grow: 1;
-     }
+    }
 
-     > .counter-icon {
+    > .counter-icon {
-       display: block;
+      display: block;
-       margin-right: $space-small;
+      margin-right: $space-small;
-       opacity: $opacity-disabled;
+      opacity: $opacity-disabled;
-     }
+    }
 
-     > .content-menu {
+    > .content-menu {
-       position: relative;
+      position: relative;
-       z-index: $z-index-post-teaser-link;
+      z-index: $z-index-post-teaser-link;
-     }
+    }
 
-     .ds-tag {
+    .ds-tag {
-       margin: 0;
+      margin: 0;
-       margin-right: $space-xx-small;
+      margin-right: $space-xx-small;
-     }
+    }
-   }
+  }
 
-   .user-teaser {
+  .user-teaser {
-     margin-bottom: $space-small;
+    margin-bottom: $space-small;
-   }
+  }
- }
+}
 </style>

webapp/components/generic/SearchPost/SearchPost.spec.js

@@ -15,6 +15,7 @@ describe('SearchPost.vue', () => {
         title: 'Post Title',
         commentsCount: 3,
         shoutedCount: 6,
+        clickedCount: 5,
         createdAt: '23.08.2019',
         author: {
           name: 'Post Author',

webapp/components/generic/SearchPost/SearchPost.vue

@@ -5,6 +5,7 @@
       <span class="counts">
         <counter-icon icon="comments" :count="option.commentsCount" soft />
         <counter-icon icon="bullhorn" :count="option.shoutedCount" soft />
+        <counter-icon icon="eye" :count="option.clickedCount" soft />
       </span>
       {{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
     </div>

webapp/components/generic/SearchableInput/SearchableInput.story.js

@@ -14,6 +14,7 @@ export const searchResults = [
     value: 'User Post by Jenny',
     shoutedCount: 0,
     commentsCount: 4,
+    clickedCount: 8,
     createdAt: '2019-11-13T03:03:16.155Z',
     author: {
       id: 'u3',
@@ -29,6 +30,7 @@ export const searchResults = [
     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
     shoutedCount: 0,
     commentsCount: 0,
+    clickedCount: 9,
     createdAt: '2019-11-13T03:00:45.478Z',
     author: {
       id: 'u6',
@@ -44,6 +46,7 @@ export const searchResults = [
     value: 'This is post #7',
     shoutedCount: 1,
     commentsCount: 1,
+    clickedCount: 1,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',
@@ -59,6 +62,7 @@ export const searchResults = [
     value: 'This is post #12',
     shoutedCount: 0,
     commentsCount: 12,
+    clickedCount: 14,
     createdAt: '2019-11-13T03:00:23.098Z',
     author: {
       id: 'u6',

webapp/graphql/Search.js

@@ -12,6 +12,7 @@ export const searchQuery = gql`
         ...post
         commentsCount
         shoutedCount
+        clickedCount
         author {
           ...user
         }
@@ -40,6 +41,7 @@ export const searchPosts = gql`
         ...tagsCategoriesAndPinned
         commentsCount
         shoutedCount
+        clickedCount
         author {
           ...user
         }

webapp/storybook/helpers.js

@@ -81,6 +81,7 @@ const helpers = {
         slug: faker.lorem.slug(title),
         shoutedCount: faker.random.number(),
         commentsCount: faker.random.number(),
+        clickedCount: faker.random.number(),
       }
     })
   },