Migrate clipboard-action-default to functional approach. Update tests. Add tests

This commit is contained in:
Beto Muniz
2021-04-15 00:59:47 -03:00
parent 455b7fdb0c
commit e7e38a18e0
9 changed files with 198 additions and 436 deletions

View File

@ -17,7 +17,7 @@ describe('ClipboardActionCopy', () => {
document.body.innerHTML = '';
});
describe.only('#selectText', () => {
describe('#selectText', () => {
it('should select its value based on input target', () => {
const selectedText = ClipboardActionCopy(
document.querySelector('#input'),

View File

@ -17,7 +17,7 @@ describe('ClipboardActionCut', () => {
document.body.innerHTML = '';
});
describe.only('#selectText', () => {
describe('#selectText', () => {
it('should select its value', () => {
const selectedText = ClipboardActionCut(
document.querySelector('#input'),

View File

@ -1,4 +1,3 @@
import Emitter from 'tiny-emitter';
import ClipboardActionDefault from '../src/clipboard-action-default';
describe('ClipboardActionDefault', () => {
@ -20,26 +19,19 @@ describe('ClipboardActionDefault', () => {
describe('#resolveOptions', () => {
it('should set base properties', () => {
let clip = new ClipboardActionDefault({
emitter: new Emitter(),
const selectedText = ClipboardActionDefault({
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');
assert.equal(selectedText, 'foo');
});
});
describe('#set action', () => {
it('should throw an error since "action" is invalid', (done) => {
try {
let clip = new ClipboardActionDefault({
let clip = ClipboardActionDefault({
text: 'foo',
action: 'paste',
});
@ -56,7 +48,7 @@ describe('ClipboardActionDefault', () => {
describe('#set target', () => {
it('should throw an error since "target" do not match any element', (done) => {
try {
let clip = new ClipboardActionDefault({
let clip = ClipboardActionDefault({
target: document.querySelector('#foo'),
});
} catch (e) {
@ -66,122 +58,23 @@ describe('ClipboardActionDefault', () => {
});
});
describe('#selectTarget', () => {
describe('#selectedText', () => {
it('should select text from editable element', () => {
let clip = new ClipboardActionDefault({
emitter: new Emitter(),
const selectedText = ClipboardActionDefault({
container: document.body,
target: document.querySelector('#input'),
});
assert.equal(clip.selectedText, clip.target.value);
assert.equal(selectedText, 'abc');
});
it('should select text from non-editable element', () => {
let clip = new ClipboardActionDefault({
emitter: new Emitter(),
const selectedText = ClipboardActionDefault({
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 ClipboardActionDefault({
emitter,
target: document.querySelector('#input'),
});
});
it('should fire an error event on browsers that support cut command', (done) => {
let emitter = new Emitter();
emitter.on('error', () => {
done();
});
let clip = new ClipboardActionDefault({
emitter,
target: document.querySelector('#input'),
});
clip.handleResult(false);
});
});
describe('#handleResult', () => {
it('should fire a success event with certain properties', (done) => {
let clip = new ClipboardActionDefault({
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 ClipboardActionDefault({
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 ClipboardActionDefault({
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, '');
assert.equal(selectedText, 'abc');
});
});
});

View File

@ -1,5 +1,4 @@
import Clipboard from '../src/clipboard';
import ClipboardActionDefault from '../src/clipboard-action-default';
describe('Clipboard', () => {
before(() => {
@ -75,28 +74,28 @@ describe('Clipboard', () => {
});
describe('#onClick', () => {
it('should create a new instance of ClipboardActionDefault', () => {
it('should create a new instance of ClipboardActionDefault', (done) => {
let clipboard = new Clipboard('.btn');
clipboard.on('success', () => {
done();
});
clipboard.onClick(global.event);
assert.instanceOf(
clipboard.clipboardActionDefault,
ClipboardActionDefault
);
});
it("should use an event's currentTarget when not equal to target", () => {
it("should use an event's currentTarget when not equal to target", (done) => {
let clipboard = new Clipboard('.btn');
let bubbledEvent = {
target: global.span,
currentTarget: global.button,
};
clipboard.on('success', () => {
done();
});
clipboard.onClick(bubbledEvent);
assert.instanceOf(
clipboard.clipboardActionDefault,
ClipboardActionDefault
);
});
it('should throw an exception when target is invalid', (done) => {
@ -152,4 +151,41 @@ describe('Clipboard', () => {
assert.equal(clipboard.clipboardAction, null);
});
});
describe('#events', () => {
it('should fire a success event with certain properties', (done) => {
let clipboard = new Clipboard('.btn');
clipboard.on('success', (e) => {
assert.property(e, 'action');
assert.property(e, 'text');
assert.property(e, 'trigger');
assert.property(e, 'clearSelection');
done();
});
clipboard.onClick(global.event);
});
});
describe('#clearSelection', () => {
it('should remove focus from target and text selection', (done) => {
let clipboard = new Clipboard('.btn');
clipboard.on('success', (e) => {
let selectedElem = document.activeElement;
let selectedText = window.getSelection().toString();
e.clearSelection();
assert.equal(selectedElem, document.body);
assert.equal(selectedText, '');
done();
});
clipboard.onClick(global.event);
});
});
});

View File

@ -1,8 +1,9 @@
import select from 'select';
import command from '../../src/common/command';
describe('command', () => {
describe('#command', () => {
before(() => {
global.stub = sinon.stub(document, 'execCommand');
global.input = document.createElement('input');
global.input.setAttribute('id', 'input');
global.input.setAttribute('value', 'abc');
@ -10,26 +11,39 @@ describe('command', () => {
});
after(() => {
global.stub.restore();
document.body.innerHTML = '';
});
it('should execute cut command', (done) => {
// Set document direction
document.documentElement.setAttribute('dir', 'rtl');
it('should execute cut', (done) => {
global.stub.returns(true);
select(document.querySelector('#input'));
assert.isTrue(command('cut'));
done();
});
it('should execute copy command', (done) => {
// Set document direction
document.documentElement.setAttribute('dir', 'rtl');
it('should execute copy', (done) => {
global.stub.returns(true);
select(document.querySelector('#input'));
assert.isTrue(command('copy'));
done();
});
it('should not execute copy', (done) => {
global.stub.returns(false);
select(document.querySelector('#input'));
assert.isFalse(command('copy'));
done();
});
it('should not execute cut', (done) => {
global.stub.returns(false);
select(document.querySelector('#input'));
assert.isFalse(command('cut'));
done();
});
});