Help Section Overhaul and edit tests

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

src/components/HelpSection.vue

@@ -19,7 +19,6 @@ function workTitle(form) {
 }
 
 function workAuthor(form) {
-    console.log('Getting work author: ', form.creatorName)
     if (form.creatorName) {
         const creatorNameNoLink = `<span rel="cc:attributionName">${form.creatorName}</span>`
         return form.creatorProfileUrl ? `by <a rel="cc:attributionURL"  href="${form.creatorProfileUrl}">${creatorNameNoLink}</a>` : `by ${creatorNameNoLink}`
@@ -28,46 +27,17 @@ function workAuthor(form) {
 
 function workLicense(ccLicenseURL, shortLicenseName) {
     const baseAssetsPath = 'https://search.creativecommons.org/static/img'
-    const licenseLink = `<a  rel="license" href="${ccLicenseURL}" style="margin-right: 5px;">${shortLicenseName.toUpperCase()}</a>`
-    let licenseIcons = `<img style="height: inherit;margin-right: 3px;display: inline-block;" src="${baseAssetsPath}/cc_icon.svg" />`
-    console.log('Icons: ', licenseIcons)
+    const licenseLink = `<a rel="license" href="${ccLicenseURL}" target="_blank" rel="noopener noreferrer" style="display: inline-block;">${shortLicenseName.toUpperCase()}`
+    let licenseIcons = `<img style="height: 22px!important;margin-left: 3px;vertical-align:text-bottom;" src="${baseAssetsPath}/cc_icon.svg" />`
     if (shortLicenseName) {
         if (shortLicenseName.includes('CC0')) {
             shortLicenseName = 'CC CC0 1.0'
         }
         licenseIcons += shortLicenseName.slice(3, shortLicenseName.length - 4).split('-').map(license =>
-            `<img style="height: inherit;margin-right: 3px;display: inline-block;" src="${baseAssetsPath}/cc-${license.toLowerCase()}_icon.svg" />`
+            `<img style="margin-top: 2px;height: 22px!important;margin-left: 3px;vertical-align:text-bottom;" src="${baseAssetsPath}/cc-${license.toLowerCase()}_icon.svg" />`
         ).join('')
-        const licenseImgLink = `<a href="${ccLicenseURL}" target="_blank" rel="noopener noreferrer" style="display: inline-block;opacity: .7;margin-top: 2px;margin-left: 3px;height: 22px !important;vertical-align:text-bottom">${licenseIcons}</a>`
+        const licenseImgLink = `<span class="license-icons" style="opacity:.7">${licenseIcons}</span></a>`
         return `${licenseLink}${licenseImgLink}`
     }
 }
-
-// function attributionHtml(form, ccLicenseURL, shortLicenseName) {
-// The default string in English is:
-// This work is licensed under CC BY 4.0
-// String if each form field is filled in
-// 'My work" by Author is licensed under CC BY 4.0
-// const baseAssetsPath = 'https://search.creativecommons.org/static/img'
-// const workTitle = form.workTitle ? `${form.workTitle}` : 'This work'
-// const workLink = form.workUrl ? `<a href="${form.workUrl}">${workTitle}</a>` : workTitle
-// const creatorNameNoLink = `<span>${form.authorName}</span>`
-// const creatorNameLink = form.creatorProfileUrl ? `<a href="${form.creatorProfileUrl}">${creatorNameNoLink}</a>` : creatorNameNoLink
-// const creator = `<span> by ${creatorNameLink}</span>`
-// const licenseLink = ` is licensed under <a  rel="license" href="${ccLicenseURL}" style="margin-right: 5px;">${shortLicenseName.toUpperCase()}</a>`
-
-// let licenseIcons = `<img style="height: inherit;margin-right: 3px;display: inline-block;" src="${baseAssetsPath}/cc_icon.svg" />` // eslint-disable-line global-require, import/no-dynamic-require
-// if (shortLicenseName) {
-//     licenseIcons += shortLicenseName.slice(3, shortLicenseName.length - 4).split('-').map(license =>
-//        `<img style="height: inherit;margin-right: 3px;display: inline-block;"
-//        src="${baseAssetsPath}/cc-${license.toLowerCase()}_icon.svg" />` // eslint-disable-line global-require, import/no-dynamic-require
-//    ).join('')
-// }
-
-// const licenseImgLink = `<a href="${ccLicenseURL}" target="_blank" rel="noopener noreferrer" style="display: inline-block;opacity: .7;margin-top: 2px;margin-left: 3px;height: 22px !important;">${licenseIcons}</a>`
-// return `<p style="font-size: 0.9rem;">${workLink}${creator}${licenseLink}${licenseImgLink}</p>`
-// return { title: workTitle(form), author: workAuthor(form) }
-// }
-
-// export default attributionHtml
 export { workAuthor, workTitle, workLicense }

src/utils/attributionHtml.js

@@ -1,7 +1,9 @@
-import { createLocalVue, mount } from '@vue/test-utils'
+import {config, createLocalVue, mount} from '@vue/test-utils'
 import SelectedLicenseDropdown from '@/components/SelectedLicenseDropdown'
 import Buefy from 'buefy'
 import LicenseUtilities from '@/utils/license-utilities'
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
 
 const value = {
     shortName: 'CC BY 4.0',
@@ -20,6 +22,19 @@ describe('LicenseDropdown.vue', () => {
         const localVue = createLocalVue()
         localVue.use(Buefy)
         localVue.use(LicenseUtilities)
+        Vue.use(VueI18n)
+        const messages = require('@/locales/en.json')
+        const i18n = new VueI18n({
+            locale: 'en',
+            fallbackLocale: 'en',
+            messages: messages
+        })
+
+        config.mocks.i18n = i18n
+
+        config.mocks.$t = (key) => {
+            return i18n.messages[key]
+        }
         wrapper = mount(SelectedLicenseDropdown, {
             localVue,
             propsData: {
@@ -28,9 +43,6 @@ describe('LicenseDropdown.vue', () => {
         })
     })
     describe('correctly displays initial information and options when mounted', () => {
-        it('renders the label', () => {
-            expect(wrapper.html()).toContain('Current selection')
-        })
 
         it('initializes with base license names', () => {
             expect(wrapper.vm.$props.value.shortName).toEqual('CC BY 4.0')

tests/unit/specs/components/LicenseDropdown.spec.js

@@ -1,19 +1,21 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import SelectedLicenseCode from '@/components/SelectedLicenseCode'
+import { mount, createLocalVue, config } from '@vue/test-utils'
 import Buefy from 'buefy'
-import sinon from 'sinon'
+import SelectedLicenseCode from '@/components/SelectedLicenseCode'
 import LicenseUtilities from '@/utils/license-utilities'
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
 
 const value = {
     shortName: 'CC BY 4.0',
     fullName: 'Attribution 4.0 International',
-    personalDetails: {
-        authorName: '',
+    attributionDetails: {
+        creatorName: '',
+        creatorProfileUrl: '',
         workTitle: '',
-        workUrl: '',
-        sourceWorkUrl: ''
+        workUrl: ''
     }
 }
+
 // mock dom methods
 function _mockDomMethodsForClipboardJS(value) {
     window.getSelection = () => ({
@@ -28,24 +30,32 @@ function _mockDomMethodsForClipboardJS(value) {
 
 describe('SelectedLicenseCode.vue', () => {
     let wrapper
-    let spy
 
     beforeEach(() => {
         const localVue = createLocalVue()
         localVue.use(Buefy)
         localVue.use(LicenseUtilities)
+        Vue.use(VueI18n)
+        const messages = require('@/locales/en.json')
+        const i18n = new VueI18n({
+            locale: 'en',
+            fallbackLocale: 'en',
+            messages: messages
+        })
+
+        config.mocks.i18n = i18n
+
+        config.mocks.$t = (key) => {
+            return i18n.messages[key]
+        }
 
         _mockDomMethodsForClipboardJS()
-        spy = sinon.stub()
         wrapper = mount(SelectedLicenseCode, {
             localVue,
             propsData: {
                 value: value
             },
-            attachToDocument: true,
-            destroyed() {
-                spy()
-            }
+            attachToDocument: true
         })
     })
     // Snapshot tests
@@ -106,4 +116,20 @@ describe('SelectedLicenseCode.vue', () => {
         expect(emittedEvents).toHaveProperty('copyFailed')
         expect(emittedEvents.copyFailed.length).toBe(1)
     })
+
+    // Test generated HTML
+    it('Generates correct license HTML', () => {
+        const generatedHtml = wrapper.find('#license-code')
+        expect(generatedHtml.text()).toContain('is licensed under CC BY 4.0')
+        // check that icon links are correct
+        // There are two icons - CC & BY
+        expect(generatedHtml.findAll('img')).toHaveLength(2)
+        // There are three links: two icons and license name
+        expect(generatedHtml.findAll('a')).toHaveLength(1)
+        console.log(generatedHtml.find('a').attributes('href'))
+        expect(generatedHtml.find('a').attributes('href')).toEqual('https://creativecommons.org/licenses/by/4.0/?ref=ccchooser')
+        // check that the text is correct
+        console.log(wrapper.vm.authorElement)
+        // check that changing fields generate correct texts
+    })
 })

tests/unit/specs/components/SelectedLicenseCode.spec.js

@@ -1,7 +1,9 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import {shallowMount, createLocalVue, config} from '@vue/test-utils'
 import SelectedLicenseInfo from '@/components/SelectedLicenseInfo'
 import Buefy from 'buefy'
 import LicenseUtilities from '@/utils/license-utilities'
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
 
 describe('SelectedLicenseInfo.vue', () => {
     let wrapper
@@ -11,6 +13,19 @@ describe('SelectedLicenseInfo.vue', () => {
         const localVue = createLocalVue()
         localVue.use(Buefy)
         localVue.use(LicenseUtilities)
+        Vue.use(VueI18n)
+        const messages = require('@/locales/en.json')
+        const i18n = new VueI18n({
+            locale: 'en',
+            fallbackLocale: 'en',
+            messages: messages
+        })
+
+        config.mocks.i18n = i18n
+
+        config.mocks.$t = (key) => {
+            return i18n.messages[key]
+        }
 
         wrapper = shallowMount(SelectedLicenseInfo, {
             localVue,