Merge branch 'master' of github.com:creativecommons/cc-chooser into 38-write-tests-for-license-description-component

Author: pollett21

package.json

@@ -45,6 +45,7 @@
     "babel-register": "^6.22.0",
     "chalk": "^2.0.1",
     "chromedriver": "^2.27.2",
+    "clipboardy": "^2.1.0",
     "copy-webpack-plugin": "^4.0.1",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",

src/App.vue

@@ -9,13 +9,13 @@
             <HTMLGenerator :shortLicenseName="selected.shortName"/>
         </div>
         <Footer>
-            <p>
-                <a href="https://github.com/creativecommons/cc-chooser">Icons</a> by The Noun Project and FontAwesome.
-            </p>
-            <p>
-                View this page's source code <a href="https://github.com/creativecommons/cc-chooser">on Github</a>.
-            </p>
-            <Locale/>
+            <div class="panel">
+               <div>
+                   <span><a href="https://github.com/creativecommons/cc-chooser">Icons</a> by The Noun Project and FontAwesome.</span>
+                   <span>View this page's source code <a href="https://github.com/creativecommons/cc-chooser">on Github</a>.</span>
+                </div>
+                <Locale/>
+            </div>
         </Footer>
     </div>
 </template>
@@ -96,10 +96,39 @@ hr {
         margin-right: 3%;
     }
 }
+.vocab-container .vocab-grid .panel {
+ height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    }
+    .vocab.select-field.normal-sized {
+        font-size: 1rem;
+    }
+    .vocab.select-field>.field.has-addons {
+        padding-left: calc(1em + var(--select-field-addons-space));
+        margin-bottom: 0;
+        min-width: 10em;
+    }
+    .vocab.select-field>.field>option[disabled] {
+        opacity: 0.6;
+    }
 </style>
-<style scoped>
-    p {
-        margin-bottom: .5em;
+<style  scoped>
+    p { margin-bottom: .5em; }
+    #custom .panel > div:first-child {
+        margin-bottom: 10vh;
+    }
+    .vocab.footer {
+        font-family: Source Sans Pro,Noto Sans,Arial,Helvetica Neue,Helvetica,sans-serif;
+        line-height: 1.2;
     }
 </style>
 

test/e2e/specs/components/CopyButton.js

@@ -0,0 +1,33 @@
+const clipboardy = require('clipboardy');
+
+module.exports = {
+    'Copybutton.vue - testing the #copy-richtext-btn flow': function (browser) {
+        browser
+            .url(browser.globals.devServerURL)
+            .waitForElementVisible('#app', 5000)
+            .assert.elementPresent('#copy-richtext-btn')
+            .assert.elementPresent('#attribution-richtext')
+            .click('#copy-richtext-btn')
+            .assert.containsText('#copy-richtext-btn', "Copied!")
+            .getText('#attribution-richtext', function (result) {
+                this.assert.equal(result.value, clipboardy.readSync().trim());
+            })
+            .expect.element('#copy-richtext-btn').text.to.equal('Copy Rich Text').after(3000);
+    },
+
+    'Copybutton.vue - testing the #copy-html-btn flow': function (browser) {
+        browser
+            .url(browser.globals.devServerURL)
+            .waitForElementVisible('#app', 5000)
+            .assert.elementPresent('#copy-html-btn')
+            .assert.elementPresent('#attribution-html')
+            .click('#copy-html-btn')
+            .assert.containsText('#copy-html-btn', "Copied!")
+            .getValue('#attribution-html', function (result) {
+                this.assert.equal(result.value, clipboardy.readSync().trim());
+            })
+            .expect.element('#copy-html-btn').text.to.equal('Copy HTML').after(3000);
+    }
+}
+
+

test/unit/jest.conf.js

@@ -13,7 +13,7 @@ module.exports = {
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
-    '^.+\\.svg$': '<rootDir>/test/svgTransform.js'
+    '^.+\\.svg$': '<rootDir>/test/unit/svgTransform.js'
   },
   testPathIgnorePatterns: [
     '<rootDir>/test/e2e'

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

@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import CopyButton from '@/components/CopyButton.vue'
+import { doesNotThrow } from 'assert';
+
+const DOM_SOURCE_ID = 'el-test';
+const DOM_SOURCE_VALUE = 'test clipboard value';
+
+const slots = { default: 'Copy button' };
+const propsData = { id: 'copy-button', el: `#${DOM_SOURCE_ID}` }
+const defaults = {
+  slots,
+  propsData,
+  attachToDocument: true,
+}
+
+let wrapper
+
+// mock dom source
+function _mockDOMSource(value) {
+  // creates the span and append to JSDOM
+  const span = document.createElement('span')
+  span.setAttribute('id', DOM_SOURCE_ID);
+  span.textContent = value;
+  document.body.appendChild(span)
+}
+
+// mock dom methods
+function _mockDomMethodsForClipboardJS(value) {
+  window.getSelection = () => ({
+    addRange: () => {},
+    removeAllRanges: () => {},
+    toString: () => value,
+  });
+
+  document.execCommand = () => value;
+  document.createRange = () => ({ selectNodeContents: () => { } });
+}
+
+beforeEach(() => {
+  _mockDOMSource(DOM_SOURCE_VALUE)
+  _mockDomMethodsForClipboardJS(DOM_SOURCE_VALUE)
+  wrapper = mount(CopyButton, defaults)
+})
+
+afterEach(() => {
+  wrapper.destroy()
+})
+
+describe('CopyButton.vue', () => {
+  it('should render the right content text', () => {
+    expect(wrapper.text()).toBe(slots.default);
+  })
+
+  it('should change the text when clicked to \'Copied!\' and 2 secs later swich back to the original text', done => {
+    wrapper.trigger('click');
+    expect(wrapper.text()).toBe('Copied!');
+    setTimeout(() => {
+      expect(wrapper.text()).toBe(slots.default);
+      done();
+    }, 2000);
+  })
+
+  it('should emit only the \'copied\' event with a valid value', () => {
+    wrapper.trigger('click');
+
+    const emittedEvents = wrapper.emitted()
+    expect(emittedEvents).toHaveProperty('copied');
+    expect(emittedEvents.copied).toBeTruthy();
+    expect(emittedEvents.copied.length).toBe(1);
+    expect(emittedEvents.copied[0].length).toBe(1);
+    expect(emittedEvents.copied[0][0].content).toBe(DOM_SOURCE_VALUE);
+    expect(emittedEvents.copyFailed).toBeFalsy();
+  })
+
+  it('should emit only the \'copyFailed\' event', () => {
+    document.execCommand = () => false // force error on clipboard.js
+    wrapper.trigger('click');
+
+    const emittedEvents = wrapper.emitted()
+    expect(emittedEvents).toHaveProperty('copyFailed');
+    expect(emittedEvents.copied).toBeFalsy();
+  })
+})