mirror of
https://github.com/zenorocha/clipboard.js.git
synced 2023-08-10 21:12:48 +03:00
Merge branch 'master' into small-enhancements
* master: update code style update prettier config update dependencies update code style Add prettier husky and lint-staged Add prettier config file add prettier config files
This commit is contained in:
@ -2,242 +2,243 @@ import ClipboardAction from '../src/clipboard-action';
|
||||
import Emitter from 'tiny-emitter';
|
||||
|
||||
describe('ClipboardAction', () => {
|
||||
before(() => {
|
||||
global.input = document.createElement('input');
|
||||
global.input.setAttribute('id', 'input');
|
||||
global.input.setAttribute('value', 'abc');
|
||||
document.body.appendChild(global.input);
|
||||
before(() => {
|
||||
global.input = document.createElement('input');
|
||||
global.input.setAttribute('id', 'input');
|
||||
global.input.setAttribute('value', 'abc');
|
||||
document.body.appendChild(global.input);
|
||||
|
||||
global.paragraph = document.createElement('p');
|
||||
global.paragraph.setAttribute('id', 'paragraph');
|
||||
global.paragraph.textContent = 'abc';
|
||||
document.body.appendChild(global.paragraph);
|
||||
global.paragraph = document.createElement('p');
|
||||
global.paragraph.setAttribute('id', 'paragraph');
|
||||
global.paragraph.textContent = 'abc';
|
||||
document.body.appendChild(global.paragraph);
|
||||
});
|
||||
|
||||
after(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
describe('#resolveOptions', () => {
|
||||
it('should set base properties', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'foo',
|
||||
});
|
||||
|
||||
assert.property(clip, 'action');
|
||||
assert.property(clip, 'container');
|
||||
assert.property(clip, 'emitter');
|
||||
assert.property(clip, 'target');
|
||||
assert.property(clip, 'text');
|
||||
assert.property(clip, 'trigger');
|
||||
assert.property(clip, 'selectedText');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initSelection', () => {
|
||||
it('should set the position right style property', (done) => {
|
||||
// Set document direction
|
||||
document.documentElement.setAttribute('dir', 'rtl');
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'foo',
|
||||
});
|
||||
|
||||
assert.equal(clip.fakeElem.style.right, '-9999px');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe('#set action', () => {
|
||||
it('should throw an error since "action" is invalid', (done) => {
|
||||
try {
|
||||
new ClipboardAction({
|
||||
text: 'foo',
|
||||
action: 'paste',
|
||||
});
|
||||
} catch (e) {
|
||||
assert.equal(
|
||||
e.message,
|
||||
'Invalid "action" value, use either "copy" or "cut"'
|
||||
);
|
||||
done();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('#set target', () => {
|
||||
it('should throw an error since "target" do not match any element', (done) => {
|
||||
try {
|
||||
new ClipboardAction({
|
||||
target: document.querySelector('#foo'),
|
||||
});
|
||||
} catch (e) {
|
||||
assert.equal(e.message, 'Invalid "target" value, use a valid Element');
|
||||
done();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('#selectText', () => {
|
||||
it('should create a fake element and select its value', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah',
|
||||
});
|
||||
|
||||
assert.equal(clip.selectedText, clip.fakeElem.value);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#removeFake', () => {
|
||||
it('should remove a temporary fake element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah',
|
||||
});
|
||||
|
||||
clip.removeFake();
|
||||
|
||||
assert.equal(clip.fakeElem, null);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#selectTarget', () => {
|
||||
it('should select text from editable element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
|
||||
assert.equal(clip.selectedText, clip.target.value);
|
||||
});
|
||||
|
||||
it('should select text from non-editable element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#paragraph'),
|
||||
});
|
||||
|
||||
assert.equal(clip.selectedText, clip.target.textContent);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#copyText', () => {
|
||||
before(() => {
|
||||
global.stub = sinon.stub(document, 'execCommand');
|
||||
});
|
||||
|
||||
after(() => {
|
||||
document.body.innerHTML = '';
|
||||
global.stub.restore();
|
||||
});
|
||||
|
||||
describe('#resolveOptions', () => {
|
||||
it('should set base properties', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'foo'
|
||||
});
|
||||
it('should fire a success event on browsers that support copy command', (done) => {
|
||||
global.stub.returns(true);
|
||||
|
||||
assert.property(clip, 'action');
|
||||
assert.property(clip, 'container');
|
||||
assert.property(clip, 'emitter');
|
||||
assert.property(clip, 'target');
|
||||
assert.property(clip, 'text');
|
||||
assert.property(clip, 'trigger');
|
||||
assert.property(clip, 'selectedText');
|
||||
});
|
||||
let emitter = new Emitter();
|
||||
|
||||
emitter.on('success', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
emitter,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initSelection', () => {
|
||||
it('should set the position right style property', done => {
|
||||
// Set document direction
|
||||
document.documentElement.setAttribute('dir', 'rtl');
|
||||
it('should fire an error event on browsers that support copy command', (done) => {
|
||||
global.stub.returns(false);
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'foo'
|
||||
});
|
||||
let emitter = new Emitter();
|
||||
|
||||
assert.equal(clip.fakeElem.style.right, '-9999px');
|
||||
done();
|
||||
});
|
||||
emitter.on('error', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
emitter,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#handleResult', () => {
|
||||
it('should fire a success event with certain properties', (done) => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
|
||||
clip.emitter.on('success', (e) => {
|
||||
assert.property(e, 'action');
|
||||
assert.property(e, 'text');
|
||||
assert.property(e, 'trigger');
|
||||
assert.property(e, 'clearSelection');
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
clip.handleResult(true);
|
||||
});
|
||||
|
||||
describe('#set action', () => {
|
||||
it('should throw an error since "action" is invalid', done => {
|
||||
try {
|
||||
new ClipboardAction({
|
||||
text: 'foo',
|
||||
action: 'paste'
|
||||
});
|
||||
}
|
||||
catch(e) {
|
||||
assert.equal(e.message, 'Invalid "action" value, use either "copy" or "cut"');
|
||||
done();
|
||||
}
|
||||
});
|
||||
it('should fire a error event with certain properties', (done) => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
|
||||
clip.emitter.on('error', (e) => {
|
||||
assert.property(e, 'action');
|
||||
assert.property(e, 'trigger');
|
||||
assert.property(e, 'clearSelection');
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
clip.handleResult(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#set target', () => {
|
||||
it('should throw an error since "target" do not match any element', done => {
|
||||
try {
|
||||
new ClipboardAction({
|
||||
target: document.querySelector('#foo')
|
||||
});
|
||||
}
|
||||
catch(e) {
|
||||
assert.equal(e.message, 'Invalid "target" value, use a valid Element');
|
||||
done();
|
||||
}
|
||||
});
|
||||
describe('#clearSelection', () => {
|
||||
it('should remove focus from target and text selection', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input'),
|
||||
});
|
||||
|
||||
clip.clearSelection();
|
||||
|
||||
let selectedElem = document.activeElement;
|
||||
let selectedText = window.getSelection().toString();
|
||||
|
||||
assert.equal(selectedElem, document.body);
|
||||
assert.equal(selectedText, '');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#selectText', () => {
|
||||
it('should create a fake element and select its value', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah'
|
||||
});
|
||||
describe('#destroy', () => {
|
||||
it('should destroy an existing fake element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah',
|
||||
});
|
||||
|
||||
assert.equal(clip.selectedText, clip.fakeElem.value);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#removeFake', () => {
|
||||
it('should remove a temporary fake element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah'
|
||||
});
|
||||
|
||||
clip.removeFake();
|
||||
|
||||
assert.equal(clip.fakeElem, null);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#selectTarget', () => {
|
||||
it('should select text from editable element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input')
|
||||
});
|
||||
|
||||
assert.equal(clip.selectedText, clip.target.value);
|
||||
});
|
||||
|
||||
it('should select text from non-editable element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#paragraph')
|
||||
});
|
||||
|
||||
assert.equal(clip.selectedText, clip.target.textContent);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#copyText', () => {
|
||||
before(() => {
|
||||
global.stub = sinon.stub(document, 'execCommand');
|
||||
});
|
||||
|
||||
after(() => {
|
||||
global.stub.restore();
|
||||
});
|
||||
|
||||
it('should fire a success event on browsers that support copy command', done => {
|
||||
global.stub.returns(true);
|
||||
|
||||
let emitter = new Emitter();
|
||||
|
||||
emitter.on('success', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
emitter,
|
||||
target: document.querySelector('#input')
|
||||
});
|
||||
});
|
||||
|
||||
it('should fire an error event on browsers that support copy command', done => {
|
||||
global.stub.returns(false);
|
||||
|
||||
let emitter = new Emitter();
|
||||
|
||||
emitter.on('error', () => {
|
||||
done();
|
||||
});
|
||||
|
||||
let clip = new ClipboardAction({
|
||||
emitter,
|
||||
target: document.querySelector('#input')
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#handleResult', () => {
|
||||
it('should fire a success event with certain properties', done => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input')
|
||||
});
|
||||
|
||||
clip.emitter.on('success', (e) => {
|
||||
assert.property(e, 'action');
|
||||
assert.property(e, 'text');
|
||||
assert.property(e, 'trigger');
|
||||
assert.property(e, 'clearSelection');
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
clip.handleResult(true);
|
||||
});
|
||||
|
||||
it('should fire a error event with certain properties', done => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input')
|
||||
});
|
||||
|
||||
clip.emitter.on('error', (e) => {
|
||||
assert.property(e, 'action');
|
||||
assert.property(e, 'trigger');
|
||||
assert.property(e, 'clearSelection');
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
clip.handleResult(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#clearSelection', () => {
|
||||
it('should remove focus from target and text selection', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
target: document.querySelector('#input')
|
||||
});
|
||||
|
||||
clip.clearSelection();
|
||||
|
||||
let selectedElem = document.activeElement;
|
||||
let selectedText = window.getSelection().toString();
|
||||
|
||||
assert.equal(selectedElem, document.body);
|
||||
assert.equal(selectedText, '');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#destroy', () => {
|
||||
it('should destroy an existing fake element', () => {
|
||||
let clip = new ClipboardAction({
|
||||
emitter: new Emitter(),
|
||||
container: document.body,
|
||||
text: 'blah'
|
||||
});
|
||||
|
||||
clip.selectFake();
|
||||
clip.destroy();
|
||||
|
||||
assert.equal(clip.fakeElem, null);
|
||||
});
|
||||
clip.selectFake();
|
||||
clip.destroy();
|
||||
|
||||
assert.equal(clip.fakeElem, null);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -1,136 +1,133 @@
|
||||
import Clipboard from "../src/clipboard";
|
||||
import ClipboardAction from "../src/clipboard-action";
|
||||
import Clipboard from '../src/clipboard';
|
||||
import ClipboardAction from '../src/clipboard-action';
|
||||
|
||||
describe("Clipboard", () => {
|
||||
describe('Clipboard', () => {
|
||||
before(() => {
|
||||
global.button = document.createElement('button');
|
||||
global.button.setAttribute('class', 'btn');
|
||||
global.button.setAttribute('data-clipboard-text', 'foo');
|
||||
document.body.appendChild(global.button);
|
||||
|
||||
global.span = document.createElement('span');
|
||||
global.span.innerHTML = 'bar';
|
||||
|
||||
global.button.appendChild(span);
|
||||
|
||||
global.event = {
|
||||
target: global.button,
|
||||
currentTarget: global.button,
|
||||
};
|
||||
});
|
||||
|
||||
after(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
describe('#resolveOptions', () => {
|
||||
before(() => {
|
||||
global.button = document.createElement("button");
|
||||
global.button.setAttribute("class", "btn");
|
||||
global.button.setAttribute("data-clipboard-text", "foo");
|
||||
document.body.appendChild(global.button);
|
||||
|
||||
global.span = document.createElement("span");
|
||||
global.span.innerHTML = "bar";
|
||||
|
||||
global.button.appendChild(span);
|
||||
|
||||
global.event = {
|
||||
target: global.button,
|
||||
currentTarget: global.button,
|
||||
};
|
||||
global.fn = () => {};
|
||||
});
|
||||
|
||||
after(() => {
|
||||
document.body.innerHTML = "";
|
||||
it('should set action as a function', () => {
|
||||
let clipboard = new Clipboard('.btn', {
|
||||
action: global.fn,
|
||||
});
|
||||
|
||||
assert.equal(global.fn, clipboard.action);
|
||||
});
|
||||
|
||||
describe("#resolveOptions", () => {
|
||||
before(() => {
|
||||
global.fn = () => {};
|
||||
});
|
||||
it('should set target as a function', () => {
|
||||
let clipboard = new Clipboard('.btn', {
|
||||
target: global.fn,
|
||||
});
|
||||
|
||||
it("should set action as a function", () => {
|
||||
let clipboard = new Clipboard(".btn", {
|
||||
action: global.fn,
|
||||
});
|
||||
|
||||
assert.equal(global.fn, clipboard.action);
|
||||
});
|
||||
|
||||
it("should set target as a function", () => {
|
||||
let clipboard = new Clipboard(".btn", {
|
||||
target: global.fn,
|
||||
});
|
||||
|
||||
assert.equal(global.fn, clipboard.target);
|
||||
});
|
||||
|
||||
it("should set text as a function", () => {
|
||||
let clipboard = new Clipboard(".btn", {
|
||||
text: global.fn,
|
||||
});
|
||||
|
||||
assert.equal(global.fn, clipboard.text);
|
||||
});
|
||||
|
||||
it("should set container as an object", () => {
|
||||
let clipboard = new Clipboard(".btn", {
|
||||
container: document.body,
|
||||
});
|
||||
|
||||
assert.equal(document.body, clipboard.container);
|
||||
});
|
||||
|
||||
it("should set container as body by default", () => {
|
||||
let clipboard = new Clipboard(".btn");
|
||||
|
||||
assert.equal(document.body, clipboard.container);
|
||||
});
|
||||
assert.equal(global.fn, clipboard.target);
|
||||
});
|
||||
|
||||
describe("#listenClick", () => {
|
||||
it("should add a click event listener to the passed selector", () => {
|
||||
let clipboard = new Clipboard(".btn");
|
||||
assert.isObject(clipboard.listener);
|
||||
});
|
||||
it('should set text as a function', () => {
|
||||
let clipboard = new Clipboard('.btn', {
|
||||
text: global.fn,
|
||||
});
|
||||
|
||||
assert.equal(global.fn, clipboard.text);
|
||||
});
|
||||
|
||||
describe("#onClick", () => {
|
||||
it("should create a new instance of ClipboardAction", () => {
|
||||
let clipboard = new Clipboard(".btn");
|
||||
it('should set container as an object', () => {
|
||||
let clipboard = new Clipboard('.btn', {
|
||||
container: document.body,
|
||||
});
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
});
|
||||
|
||||
it("should use an event's currentTarget when not equal to target", () => {
|
||||
let clipboard = new Clipboard(".btn");
|
||||
let bubbledEvent = {
|
||||
target: global.span,
|
||||
currentTarget: global.button,
|
||||
};
|
||||
|
||||
clipboard.onClick(bubbledEvent);
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
});
|
||||
|
||||
it("should throw an exception when target is invalid", (done) => {
|
||||
try {
|
||||
const clipboard = new Clipboard(".btn", {
|
||||
target() {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
} catch (e) {
|
||||
assert.equal(
|
||||
e.message,
|
||||
'Invalid "target" value, use a valid Element'
|
||||
);
|
||||
done();
|
||||
}
|
||||
});
|
||||
assert.equal(document.body, clipboard.container);
|
||||
});
|
||||
|
||||
describe("#static isSupported", () => {
|
||||
it("should return the support of the given action", () => {
|
||||
assert.equal(Clipboard.isSupported("copy"), true);
|
||||
assert.equal(Clipboard.isSupported("cut"), true);
|
||||
});
|
||||
it('should set container as body by default', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
|
||||
it("should return the support of the cut and copy actions", () => {
|
||||
assert.equal(Clipboard.isSupported(), true);
|
||||
});
|
||||
assert.equal(document.body, clipboard.container);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#listenClick', () => {
|
||||
it('should add a click event listener to the passed selector', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
assert.isObject(clipboard.listener);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#onClick', () => {
|
||||
it('should create a new instance of ClipboardAction', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
});
|
||||
|
||||
describe("#destroy", () => {
|
||||
it("should destroy an existing instance of ClipboardAction", () => {
|
||||
let clipboard = new Clipboard(".btn");
|
||||
it("should use an event's currentTarget when not equal to target", () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
let bubbledEvent = {
|
||||
target: global.span,
|
||||
currentTarget: global.button,
|
||||
};
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
clipboard.destroy();
|
||||
|
||||
assert.equal(clipboard.clipboardAction, null);
|
||||
});
|
||||
clipboard.onClick(bubbledEvent);
|
||||
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
|
||||
});
|
||||
|
||||
it('should throw an exception when target is invalid', (done) => {
|
||||
try {
|
||||
const clipboard = new Clipboard('.btn', {
|
||||
target() {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
} catch (e) {
|
||||
assert.equal(e.message, 'Invalid "target" value, use a valid Element');
|
||||
done();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('#static isSupported', () => {
|
||||
it('should return the support of the given action', () => {
|
||||
assert.equal(Clipboard.isSupported('copy'), true);
|
||||
assert.equal(Clipboard.isSupported('cut'), true);
|
||||
});
|
||||
|
||||
it('should return the support of the cut and copy actions', () => {
|
||||
assert.equal(Clipboard.isSupported(), true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#destroy', () => {
|
||||
it('should destroy an existing instance of ClipboardAction', () => {
|
||||
let clipboard = new Clipboard('.btn');
|
||||
|
||||
clipboard.onClick(global.event);
|
||||
clipboard.destroy();
|
||||
|
||||
assert.equal(clipboard.clipboardAction, null);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user