Issue 35 - Write Unit Tests and e2e for HelpSection component (#43)

Issue 35 - Write Unit Tests and e2e for HelpSection component

Author: Ari Madian

src/components/HelpSection.vue

@@ -6,39 +6,39 @@
         <p align="center" class="desktop-hide mobile-show">You can tap the buttons below to get answers to the questions on them!</p>
         <div class="columns" id="modal-buttons">
             <div class="column top-bottom-paddingless">
-                <button class="button is-light is-large is-fullwidth"
+                <button id="cc_license_btn" class="button is-light is-large is-fullwidth"
                     @click="isModal1Active = true">
                     <p>
                         What Are Creative Commons Licenses?
                     </p>
                 </button>
-                <button class="button is-light is-large is-fullwidth"
+                <button id="license_work_btn" class="button is-light is-large is-fullwidth"
                     @click="isModal2Active = true">
                     <p>
                         How do the Licenses Work?
                     </p>
                 </button>
-                <button class="button is-light is-large is-fullwidth"
+                <button id="public_domain_btn" class="button is-light is-large is-fullwidth"
                     @click="isModal3Active = true">
                     <p>
                         Want Public Domain Instead?
                     </p>
                 </button>
             </div>
             <div class="column top-bottom-paddingless">
-                <button class="button is-light is-large is-fullwidth"
+                <button id="consideration_btn" class="button is-light is-large is-fullwidth"
                     @click="isModal4Active = true">
                     <p>
                         Considerations Before Licensing
                     </p>
                 </button>
-                <button class="button is-light is-large is-fullwidth"
+                <button id="formal_license_btn" class="button is-light is-large is-fullwidth"
                     @click="isModal5Active = true">
                     <p>
                         How do I Formally License my Work?
                     </p>
                 </button>
-                <button class="button is-light is-large is-fullwidth"
+                <button id="license_description_btn" class="button is-light is-large is-fullwidth"
                     @click="isModal6Active = true">
                     <p>
                         The Six CC Licenses
@@ -170,7 +170,7 @@
                 <footer class="modal-card-foot">
                     <p>
                         For more information, please see 
-                        <a href="https://creativecommons.org/licenses/">About the Licenses</a>
+                        <a id="license_link" href="https://creativecommons.org/licenses/">About the Licenses</a>
                     </p>
                 </footer>
             </section>
@@ -211,15 +211,15 @@
                             software, we provide a "Machine Readable" version of the license. <br><br>
 
                             We developed a standardized way to describe licenses that software can
-                            understand called <a href="https://wiki.creativecommons.org/Ccrel">CC Rights Expression language</a> 
+                            understand called <a id="cc_rights_link" href="https://wiki.creativecommons.org/Ccrel">CC Rights Expression language</a> 
                             (CC REL) to accomplish this.
                         </p>
                     </li> <br>
                 </ul>
                 <footer class="modal-card-foot">
                     <p>
                         For more information, please see 
-                        <a href="https://creativecommons.org/licenses/">About the Licenses</a>
+                        <a id="license_link_2" href="https://creativecommons.org/licenses/">About the Licenses</a>
                     </p>
                 </footer>
             </section>
@@ -238,7 +238,7 @@
                 <footer class="modal-card-foot">
                     <p>
                         For more information on CC's public domain tools, please see 
-                        <a href="https://creativecommons.org/publicdomain/">Our Public Domain Tools</a>
+                        <a id="domain_link" href="https://creativecommons.org/publicdomain/">Our Public Domain Tools</a>
                     </p>
                 </footer>
             </section>
@@ -253,17 +253,17 @@
                     a Creative Commons license to your work, or before using Creative 
                     Commons-licened material. <br><br>
 
-                    <a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors">
+                    <a id="licensors_link" href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors">
                         Considerations for Licensors
                     </a> - If you are licensing your own work <br>
-                    <a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensees">
+                    <a id="licensees_link" href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensees">
                         Considerations for Licensees
                     </a> - If you are using someone else's licensed work
                 </p> <br>
                 <footer class="modal-card-foot">
                     <p>
                         For more information, please see 
-                        <a href="https://wiki.creativecommons.org/wiki/Before_Licensing">
+                        <a id="wiki_link" href="https://wiki.creativecommons.org/wiki/Before_Licensing">
                             the CC wiki's page on Considerations for Licensors and Licensees.
                         </a>
                     </p>
@@ -339,7 +339,7 @@
                 <footer class="modal-card-foot">
                     <p>
                         For more information, please see 
-                        <a href="https://creativecommons.org/share-your-work/licensing-types-examples/">
+                        <a id="licensing_examples_link" href="https://creativecommons.org/share-your-work/licensing-types-examples/">
                             this page on Creative Commons licenses.
                         </a>
                     </p>

test/TEST.md

@@ -0,0 +1,45 @@
+# Testing
+
+This file will be used to document some useful commands and tips for tests. Also, some common errors found that may prevent you from running them.
+
+## Unit Testing 
+
+### Useful Commands and Tips
+If you want to run only unit tests, use:
+
+``` bash
+$ npm run unit
+```
+
+If you want to run only e2e tests, use:
+``` bash
+$ npm run e2e
+```
+
+### About Snapshots Test
+When updating some components, snapshots test may fail if the UI's changed. To prevent that from happening, press u while in watch mode to update your snapshots.
+
+### Common Errors
+When running your unit tests for the first time, you may encounter this error:
+
+``` bash
+$ ENOSPC: System limit for number of file watchers reached
+```
+
+This means that your system's preventing you from running the command, since the numbers of files it can watch has been exceeded. To fix it you'll have to manually expand it's file limits. On Ubuntu distributions, it looks like this:
+
+``` bash
+$ sudo vim /etc/sysctl.conf
+```
+
+Then add the following line:
+
+``` bash
+$ fs.inotify.max_user_watches=524288
+```
+
+After running it you should be good to go!
+
+
+ 
+

test/e2e/specs/components/HelpSection.js

@@ -0,0 +1,82 @@
+module.exports = {
+
+    beforeEach: function(browser) {
+        const devServer = browser.globals.devServerURL
+
+        browser
+            .url(devServer)
+            .waitForElementVisible('#app', 1000)
+    },
+
+    'Common license pop up redirects to https://creativecommons.org/licenses/': function (browser) {
+        browser
+            .assert.elementPresent('#cc_license_btn')
+            .click('#cc_license_btn')
+            .assert.elementPresent('#license_link')
+            .click('#license_link')
+            .assert.urlEquals('https://creativecommons.org/licenses/')
+    },
+
+    'How do licenses work pop up redirects to https://creativecommons.org/licenses/': function (browser) {
+        browser
+            .assert.elementPresent('#license_work_btn')
+            .click('#license_work_btn')
+            .assert.elementPresent('#license_link_2')
+            .click('#license_link_2')
+            .assert.urlEquals('https://creativecommons.org/licenses/')
+    },
+
+    'How do licenses work pop up redirects to https://wiki.creativecommons.org/wiki/CC_REL': function (browser) {
+        browser
+            .assert.elementPresent('#license_work_btn')
+            .click('#license_work_btn')
+            .assert.elementPresent('#cc_rights_link')
+            .click('#cc_rights_link')
+            .assert.urlEquals('https://wiki.creativecommons.org/wiki/CC_REL')
+    },
+
+    'Public domain pop up redirects to https://creativecommons.org/publicdomain/': function (browser) {
+        browser
+            .assert.elementPresent('#public_domain_btn')
+            .click('#public_domain_btn')
+            .assert.elementPresent('#domain_link')
+            .click('#domain_link')
+            .assert.urlEquals('https://creativecommons.org/publicdomain/')
+    },
+
+    'License consideration pop up redirects to https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors': function (browser) {
+        browser
+            .assert.elementPresent('#consideration_btn')
+            .click('#consideration_btn')
+            .assert.elementPresent('#licensors_link')
+            .click('#licensors_link')
+            .assert.urlEquals('https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors')
+    },
+
+    'License consideration pop up redirects to https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensees': function (browser) {
+        browser
+            .assert.elementPresent('#consideration_btn')
+            .click('#consideration_btn')
+            .assert.elementPresent('#licensees_link')
+            .click('#licensees_link')
+            .assert.urlEquals('https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensees')
+    },
+
+    'License consideration pop up redirects to https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees': function (browser) {
+        browser
+            .assert.elementPresent('#consideration_btn')
+            .click('#consideration_btn')
+            .assert.elementPresent('#wiki_link')
+            .click('#wiki_link')
+            .assert.urlEquals('https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees')
+    },
+
+    'License types pop up redirects to https://creativecommons.org/share-your-work/licensing-types-examples/': function (browser) {
+        browser
+            .assert.elementPresent('#license_description_btn')
+            .click('#license_description_btn')
+            .assert.elementPresent('#licensing_examples_link')
+            .click('#licensing_examples_link')
+            .assert.urlEquals('https://creativecommons.org/share-your-work/licensing-types-examples/')
+    },
+}

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

@@ -0,0 +1,84 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import HelpSection from '@/components/HelpSection';
+import Buefy from 'buefy';
+
+describe('HelpSection.vue', () => {
+    let wrapper;
+    
+    // Always creates a shallow instance of component
+    beforeEach(() => {
+        const localVue = createLocalVue();
+        localVue.use(Buefy);
+
+        wrapper = shallowMount(HelpSection, { 
+            localVue 
+        });
+    });
+
+    // Snapshot tests
+    it("has the expected UI", () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    // Variables tests
+    it("equals isModal1Active to false", () => {
+        expect(wrapper.vm.isModal1Active).toEqual(false);
+    });
+
+    it("expects isModal1Active to be true after clicking it", () => {
+        const button = wrapper.find('#cc_license_btn');
+        button.trigger('click');
+        expect(wrapper.vm.isModal1Active).toEqual(true);
+    });
+
+    it("equals isModal2Active to false", () => {
+        expect(wrapper.vm.isModal2Active).toEqual(false);
+    });
+
+    it("expects isModal2Active to be true after clicking it", () => {
+        const button = wrapper.find('#license_work_btn');
+        button.trigger('click');
+        expect(wrapper.vm.isModal2Active).toEqual(true);
+    });
+
+    it("equals isModal3Active to false", () => {
+        expect(wrapper.vm.isModal3Active).toEqual(false);
+    });
+
+    it("expects isModal3Active to be true after clicking it", () => {
+        const button = wrapper.find('#public_domain_btn');
+        button.trigger('click');
+        expect(wrapper.vm.isModal3Active).toEqual(true);
+    });
+
+    it("equals isModal4Active to false", () => {
+        expect(wrapper.vm.isModal4Active).toEqual(false);
+    });
+
+    it("expects isModal4Active to be true after clicking it", () => {
+        const button = wrapper.find('#consideration_btn');
+        button.trigger('click');
+        expect(wrapper.vm.isModal4Active).toEqual(true);
+    });
+
+    it("equals isModal5Active to false", () => {
+        expect(wrapper.vm.isModal5Active).toEqual(false);
+    });
+
+    it("expects isModal5Active to be true after clicking it", () => {
+        const button = wrapper.find('#formal_license_btn');
+        button.trigger('click');
+        expect(wrapper.vm.isModal5Active).toEqual(true);
+    });
+
+    it("equals isModal6Active to false", () => {
+        expect(wrapper.vm.isModal6Active).toEqual(false);
+    });
+
+    it("expects isModal6Active to be true after clicking it", () => {
+        const button = wrapper.find('#license_description_btn');
+        button.trigger('click');
+        expect(wrapper.vm.isModal6Active).toEqual(true);
+    });
+
+})