Fix modals

package.json

@@ -46,7 +46,7 @@
         "@vue/eslint-config-standard": "^5.0.1",
         "@vue/test-utils": "1.0.0-beta.29",
         "babel-eslint": "^10.0.3",
-        "chromedriver": "79",
+        "chromedriver": "83",
         "clipboardy": "^2.1.0",
         "eslint": "^6.8.0",
         "eslint-plugin-import": "^2.19.1",

src/App.vue

@@ -139,7 +139,7 @@ export default {
         // for the right column to stay sticky when scrolling
         margin-bottom: 32px;
     }
-    footer.footer.chooser-footer {
+    footer.main-footer {
         margin-top: 2rem;
     }
     @media only screen and (min-width: 769px) {
@@ -151,7 +151,7 @@ export default {
             grid-gap: 1.5rem;
             grid-template-areas: "heading localechooser";
         }
-        footer {
+        footer.main-footer {
             margin-top: 5rem;
         }
     }

src/components/HeaderSection.vue

@@ -34,7 +34,7 @@ export default {
 
 <style lang="scss">
 nav.navbar {
-    padding-top: 0.5rem;
+    padding: 0.5rem 0 0;
 }
 .navbar-item-feedback {
     padding-right: 30%;

src/components/HelpSection.vue

@@ -125,6 +125,7 @@
                         </div>
                     </div>
                 </section>
+                <footer class="modal-card-foot" />
             </b-modal>
         </Portal>
         <Portal selector="#portal-target">
@@ -150,6 +151,7 @@
                 <section class="modal-card-body">
                     <article v-html="this.$t('help.how-formally-license.text')" />
                 </section>
+                <footer class="modal-card-foot" />
             </b-modal>
             <b-modal :active.sync="modals[6].status">
                 <header class="modal-card-head">
@@ -200,6 +202,7 @@
                         </tbody>
                     </table>
                 </section>
+                <footer class="modal-card-foot" />
             </b-modal>
         </Portal>
         <Portal selector="#portal-target">
@@ -225,6 +228,7 @@
                 <section class="modal-card-body">
                     <p v-html="this.$t('help.look-earlier-license-ver.text')" />
                 </section>
+                <footer class="modal-card-foot" />
             </b-modal>
         </Portal>
     </div>
@@ -310,40 +314,6 @@ export default {
         list-style-image: url("../assets/arrow-right.png");
     }
 
-    table svg {
-        width: 28px !important;
-        height: 28px !important;
-        vertical-align: middle;
-        margin-right: 3px;
-    }
-
-    .help-section__table {
-        margin-top: 1.5rem;
-    }
-
-    .top-bottom-paddingless {
-        padding-bottom: 0 !important;
-        padding-top: 0 !important;
-    }
-
-    @media only screen and (max-width: 1025px) {
-        .tablet-hide { display: none; }
-        .tablet-show { display: block; }
-    }
-
-    @media only screen and (max-width: 670px) {
-        h2 { font-size: 30px !important; }
-        button p { font-size: 18px; }
-
-        .modal-title { font-size: 18px; }
-        .modal-content {
-            margin-left: 10%;
-            margin-right: 10%;
-        }
-
-        .mobile-hide { display: none; }
-        .mobile-show { display: block; }
-    }
 </style>
 <style lang="scss">
     .help__instructions {
@@ -364,17 +334,15 @@ export default {
     }
     .edu-icons-title-section {
         display: grid;
+        grid-gap: 0.5rem;
         grid-template-columns: 1fr 7fr;
     }
-
     .edu-icons-section img {
         width: 45px;
     }
-
     .edu-icons-section p {
         margin-bottom: 6%;
     }
-
     .edu-icons-section .title {
         vertical-align: middle !important;
         margin-bottom: 0 !important;
@@ -385,13 +353,41 @@ export default {
         font-size: 23px;
         line-height: 27px;
     }
-
     .edu-icons-section b {
         padding-top: 0;
     }
-
     .edu-icons-section-icon_title p {
         margin: 0;
     }
+    .modal.is-active .modal-content {
+        overflow: hidden;
+    }
+    button.modal-close {
+        position: fixed;
+    }
+    p.modal-card-title {
+        flex-shrink: 1;
+        line-height: inherit;
+    }
+    .help-section__table {
+        margin-top: 1.5rem;
+    }
+    .top-bottom-paddingless {
+        padding-bottom: 0 !important;
+        padding-top: 0 !important;
+    }
 
+    @media only screen and (max-width: 670px) {
+        .modal-card-title.modal-title { font-size: 18px; }
+        .modal-content {
+            margin-left: 10%;
+            margin-right: 10%;
+        }
+        .modal-card-body {
+            max-height: 55vh;
+        }
+        .modal.is-active .modal-content {
+            max-height: calc(100vh - 20px);
+        }
+    }
 </style>

tests/e2e/specs/LicenseCode.js

@@ -22,13 +22,16 @@ module.exports = {
             .setValue('input[placeholder="www.author.com/work.jpg"]', 'www.author.com/work.jpg')
             .assert.elementPresent('p[class="license-text"] a')
             .getAttribute('p > span > a:nth-child(1)', 'href', function(result) {
-                this.assert.equal(result.value, 'http://localhost:8080/www.author.com/work.jpg')
+                const urlString = result.value.split('/').slice(3).join('/')
+                this.assert.equal(urlString, 'www.author.com/work.jpg')
             })
             .getAttribute('p > span > a:nth-child(2)', 'href', function(result) {
-                this.assert.equal(result.value, 'http://localhost:8080/www.author.com')
+                const urlString = result.value.split('/').slice(3).join('/')
+                this.assert.equal(urlString, 'www.author.com')
             })
             .getAttribute('p > span > a:nth-child(4)', 'href', function(result) {
-                this.assert.equal(result.value, 'https://creativecommons.org/licenses/by-sa/4.0/?ref=ccchooser')
+                const urlString = result.value.split('/').slice(3).join('/')
+                this.assert.equal(urlString, 'licenses/by-sa/4.0/?ref=ccchooser')
             })
     },
     'Check if the text is displayed under the print attribution': function(browser) {

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

@@ -52,7 +52,7 @@ describe('DropdownStep', () => {
 
         options.at(1).setSelected()
 
-        expect(wrapper.emitted().input[0]).toStrictEqual(['DD', 5, true])
+        expect(wrapper.emitted().change[0]).toStrictEqual(['DD', 5, true])
     })
 })
 

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

@@ -22,7 +22,7 @@ describe('HelpSection.vue', () => {
         config.mocks.i18n = i18n
 
         config.mocks.i18n.$t = (key) => {
-            return i18n.messages[key]
+            return key
         }
         wrapper = mount(HelpSection, {
             localVue,
@@ -86,59 +86,69 @@ describe('HelpSection.vue', () => {
         expect(wrapper.findAll('.help-link').length).toBe(9)
     })
     it('Check if "What Are Creative Commons Licenses?" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(1) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(1) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 1
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if "How do the Licenses Work?" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(2) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(2) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 2
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if "What do the Icons Mean?" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(3) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(3) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 3
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if "Considerations Before Licensing" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(4) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(4) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 4
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if "How do I Formally License my Work?" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(5) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(5) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 5
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if "The Six Creative Commons Licenses" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(6) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(6) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 6
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if "How are Licenses Communicated?" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(7) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(7) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 7
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if " What is a Free Culture License?" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(8) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(8) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 8
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
     it('Check if "Looking for Earlier License Versions, including Ports?" modal is rendered to DOM', () => {
-        expect(wrapper.contains('ul > li:nth-child(9) > a')).toBe(true)
-        wrapper.find('ul > li:nth-child(9) > a').trigger('click')
-        expect(wrapper.contains('.modal-content')).toBe(true)
+        const modalId = 9
+        const modalButton = `ul > li:nth-child(${modalId}) > a`
+        expect(wrapper.contains(modalButton)).toBe(true)
+        wrapper.find(modalButton).trigger('click')
+        expect(wrapper.vm.modals[modalId].status).toBe(true)
     })
 
-    // Tests for methods
-    it('Check if the data has the sixLicensesImg', () => {
-        expect(wrapper.vm.sixLicensesImg).toBe('<img src="../assets/license-openness-scale.png">')
-    })
-    it('Check if the is clickHandler working correctly', () => {
-        wrapper.vm.clickHandler(1)
-        expect(wrapper.vm.modals[1].status).toBe(true)
-    })
     // Snapshot tests
     it('Check if the HelpSection.vue component has the expected UI', () => {
         expect(wrapper).toMatchSnapshot()

tests/unit/components/Stepper.spec.js → tests/unit/specs/components/Stepper.spec.js

@@ -153,7 +153,6 @@ describe('Stepper.vue', () => {
             advanceStep(wrapper, [{ stepName: 'DD', isSelected: true, license: 'CC BY-NC-ND 4.0' }])
             wrapper.find('.pagination-previous').trigger('click')
             expect(wrapper.find('.current').classes()).toContain('DD')
-            console.log(wrapper.emitted())
         })
     })
     describe('FirstStep interactions', () => {

tests/unit/specs/components/__snapshots__/HelpSection.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`HelpSection.vue Check if the HelpSection.vue component has the expected UI 1`] = `
 <div class="help-section">
-  <h3 class="vocab ha h3a">
+  <h3 class="vocab">
     help.heading
   </h3>
   <ul class="help-links">
@@ -40,8 +40,5 @@ exports[`HelpSection.vue Check if the HelpSection.vue component has the expected
   <!---->
   <!---->
   <!---->
-  <!---->
-  <!---->
-  <!---->
 </div>
 `;

tests/unit/specs/components/__snapshots__/LicenseDetailsCard.spec.js.snap

@@ -2,10 +2,10 @@
 
 exports[`LicenseDetailsCard.vue Check if the LicenseDetailsCard.vue component has the expected UI 1`] = `
 <div class="selected-license-card">
-  <h3 class="vocab ha h3a">
+  <h3 class="vocab">
     license-details-card.heading
   </h3>
-  <h4 class="vocab h4b hb"><a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=ccchooser" class="license-name">
+  <h4 class="vocab b-header"><a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=ccchooser" class="license-name">
       Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)
       <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=ccchooser" target="_blank" rel="noopener noreferrer" class="photo-license-icons"><img alt="CC icon" title="CC icon" src="../assets/license-icons/cc_icon.svg" class="photo-license-icon"> <img alt="by icon" title="by icon" src="[object Object]" class="photo-license-icon"><img alt="sa icon" title="sa icon" src="[object Object]" class="photo-license-icon"></a></a></h4>
   <p class="chooser-selected-description"><b>CC-BY-SA</b>