Issue #34 - Unit and e2e tests for CopyButton component (#46)

Issue #34 - Unit and e2e tests for CopyButton component

Author: Ari Madian

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",

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/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();
+  })
+})