[SDPA-3163] Added Unit test & code review changes.

packages/components/Molecules/Card/CardKeydates.vue

@@ -1,7 +1,7 @@
 <template>
   <rpl-card-content :link="link" class="rpl-card-keydates">
     <h2 class="rpl-card-keydates__title" v-if="title">{{ title }}</h2>
-    <div class="rpl-card-keydates__keydate" v-for="(keydate, index) in keydatesTrimed" :key="index">
+    <div class="rpl-card-keydates__keydate" v-for="(keydate, index) in keydatesTrimmed" :key="index">
       <div class="rpl-card-keydates__keydate-date">
         <rpl-icon symbol="calendar" color="white" />
         <span>{{ keydate.date }}</span>
@@ -33,21 +33,23 @@ export default {
     RplIcon
   },
   computed: {
-    keydatesTrimed: function () {
-      let trimedKeyDates = this.keydates
+    keydatesTrimmed: function () {
+      let trimmedKeyDates = this.keydates
       const titleMaxLength = 80
       const titleMinLength = 40
-      const descriptionLength = 120
-      if (typeof window !== 'undefined') {
-        if (this.keydates.length > 1) {
-          trimedKeyDates = this.keydates.map(dates => ({
-            date: dates.date,
-            title: (dates.description.length > titleMaxLength && dates.title.length > titleMinLength) ? truncateText(dates.title, titleMinLength) : truncateText(dates.title, titleMaxLength),
-            description: dates.description.length > descriptionLength ? truncateText(dates.description, descriptionLength) : dates.description
-          }))
-        }
+      const descriptionMaxLength = 120
+      const descriptionMinLength = 80
+      const keydatesTitle = (description, title) => {
+        return (description.length > descriptionMinLength && title.length > titleMinLength) ? truncateText(title, titleMinLength) : truncateText(title, titleMaxLength)
       }
-      return trimedKeyDates
+      if (this.keydates.length > 1) {
+        trimmedKeyDates = this.keydates.map(dates => ({
+          date: dates.date,
+          title: keydatesTitle(dates.description, dates.title),
+          description: truncateText(dates.description, descriptionMaxLength)
+        }))
+      }
+      return trimmedKeyDates
     }
   }
 }

packages/components/Molecules/Card/__test__/cardKeydates.test.js

@@ -0,0 +1,148 @@
+import { mount } from '@vue/test-utils'
+import CardKeydates from '../CardKeydates'
+
+describe('CardKeydates', () => {
+  /*
+   * Checks if it is rendering one keydate from keydates.
+   * Check the number of characters to see if it is printing everything.
+   */
+  it('Renders when there is one keydate, unchanged.', () => {
+    const wrapper = mount(CardKeydates, {
+      propsData: {
+        title: 'Key calendar dates',
+        keydates: [
+          {
+            'date': '3 April',
+            'title': '2019 Premiers Sustainability Awards.',
+            'description': '33 finalists have been announced across 11 categories in the 2019 Premiers Sustainability Awards from a record number of entries. Winners will be announced at the awards ceremony 10 October.'
+          }
+        ],
+        link: {
+          'text': 'Read more',
+          'url': 'http://www.google.com'
+        }
+      },
+      mocks: {
+        rplOptions: {
+          hostname: 'localhost'
+        }
+      }
+    })
+    expect(wrapper.isVueInstance()).toEqual(true)
+    expect(wrapper.find('.rpl-card-keydates__keydate-date').text()).toHaveLength(7)
+    expect(wrapper.find('.rpl-card-keydates__keydate-title').text()).toHaveLength(36)
+    expect(wrapper.find('.rpl-card-keydates__keydate-description').text()).toHaveLength(190)
+  })
+
+  /*
+   * Checks if it is rendering two keydates from keydates.
+   * Check the number of classes it is printing.
+   */
+  it('Renders two keydates.', () => {
+    const wrapper = mount(CardKeydates, {
+      propsData: {
+        title: 'Key calendar dates',
+        keydates: [
+          {
+            'date': '3 April',
+            'title': 'Term two starts',
+            'description': 'Its back to the classroom as school start term two on the 16th April.'
+          },
+          {
+            'date': '23 April',
+            'title': 'ANZAC Day',
+            'description': 'National day of remembrance to commemorate the ANZACs.'
+          }
+        ],
+        link: {
+          'text': 'Read more',
+          'url': 'http://www.google.com'
+        }
+      },
+      mocks: {
+        rplOptions: {
+          hostname: 'localhost'
+        }
+      }
+    })
+    expect(wrapper.isVueInstance()).toEqual(true)
+    expect(wrapper.findAll('.rpl-card-keydates__keydate')).toHaveLength(2)
+    expect(wrapper.findAll('.rpl-card-keydates__keydate-date')).toHaveLength(2)
+    expect(wrapper.findAll('.rpl-card-keydates__keydate-title')).toHaveLength(2)
+    expect(wrapper.findAll('.rpl-card-keydates__keydate-description')).toHaveLength(2)
+  })
+
+  /*
+   * Checks if it is rendering truncated title & description.
+   * Description truncated at 120 char plus '...' equal 123 char.
+   * If description more than 80 char then title truncated at 40 char plus '...' equal 43.
+   */
+  it('Renders truncated title & description.', () => {
+    const wrapper = mount(CardKeydates, {
+      propsData: {
+        title: 'Key calendar dates',
+        keydates: [
+          {
+            'date': '3 April',
+            'title': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+            'description': 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat'
+          },
+          {
+            'date': '23 April',
+            'title': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+            'description': 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat'
+          }
+        ],
+        link: {
+          'text': 'Read more',
+          'url': 'http://www.google.com'
+        }
+      },
+      mocks: {
+        rplOptions: {
+          hostname: 'localhost'
+        }
+      }
+    })
+    expect(wrapper.isVueInstance()).toEqual(true)
+    expect(wrapper.find('.rpl-card-keydates__keydate-title').text()).toHaveLength(43)
+    expect(wrapper.find('.rpl-card-keydates__keydate-description').text()).toHaveLength(123)
+  })
+
+  /*
+   * Checks if it is rendering truncated title.
+   * Description does not get truncated.
+   * If description less than 80 char then title truncated at 80 char plus '...' equal 83.
+   */
+  it('Renders truncated title.', () => {
+    const wrapper = mount(CardKeydates, {
+      propsData: {
+        title: 'Key calendar dates',
+        keydates: [
+          {
+            'date': '3 April',
+            'title': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+            'description': 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore'
+          },
+          {
+            'date': '23 April',
+            'title': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+            'description': 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore'
+          }
+        ],
+        link: {
+          'text': 'Read more',
+          'url': 'http://www.google.com'
+        }
+      },
+      mocks: {
+        rplOptions: {
+          hostname: 'localhost'
+        }
+      }
+    })
+    expect(wrapper.isVueInstance()).toEqual(true)
+    expect(wrapper.find('.rpl-card-keydates__keydate-title').text()).toHaveLength(83)
+    expect(wrapper.find('.rpl-card-keydates__keydate-description').text()).toHaveLength(76)
+  })
+})

packages/ripple-nuxt-tide/lib/core/tide-helper.js

@@ -79,13 +79,3 @@ export const getFormattedSize = (fileSize) => {
   const i = Math.floor(Math.log(fileSize) / Math.log(k))
   return parseFloat((fileSize / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
-
-export const truncateText = (text, stop = 150, clamp) => {
-  if (text && typeof text === 'string') {
-    if (text.length > stop) {
-      return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
-    }
-    return text
-  }
-  return ''
-}

packages/ripple-nuxt-tide/modules/publication/pages/index.vue

@@ -32,7 +32,7 @@ import RplAnchorLinks from '@dpc-sdp/ripple-anchor-links'
 import RplMarkup from '@dpc-sdp/ripple-markup'
 import { RplPublicationPagination, RplPublicationAuthorInformation } from '@dpc-sdp/ripple-publication'
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
-import { truncateText } from '@dpc-sdp/ripple-nuxt-tide/lib/core/tide-helper'
+import { truncateText } from '@dpc-sdp/ripple-global/utils/helpers.js'
 import { RplCardNavigation } from '@dpc-sdp/ripple-card'
 
 export default {

packages/ripple-nuxt-tide/modules/search/lib/searchmixin.js

@@ -1,5 +1,5 @@
 import { cardColsSetting } from '../../../lib/config/layout.config.js'
-import { truncateText } from './../../../lib/core/tide-helper'
+import { truncateText } from '@dpc-sdp/ripple-global/utils/helpers.js'
 
 const searchMixin = {
   data () {