clipboard-action.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. import Emitter from 'tiny-emitter';
  2. import ClipboardAction from '../src/clipboard-action';
  3. describe('ClipboardAction', () => {
  4. before(() => {
  5. global.input = document.createElement('input');
  6. global.input.setAttribute('id', 'input');
  7. global.input.setAttribute('value', 'abc');
  8. document.body.appendChild(global.input);
  9. global.paragraph = document.createElement('p');
  10. global.paragraph.setAttribute('id', 'paragraph');
  11. global.paragraph.textContent = 'abc';
  12. document.body.appendChild(global.paragraph);
  13. });
  14. after(() => {
  15. document.body.innerHTML = '';
  16. });
  17. describe('#resolveOptions', () => {
  18. it('should set base properties', () => {
  19. let clip = new ClipboardAction({
  20. emitter: new Emitter(),
  21. container: document.body,
  22. text: 'foo',
  23. });
  24. assert.property(clip, 'action');
  25. assert.property(clip, 'container');
  26. assert.property(clip, 'emitter');
  27. assert.property(clip, 'target');
  28. assert.property(clip, 'text');
  29. assert.property(clip, 'trigger');
  30. assert.property(clip, 'selectedText');
  31. });
  32. });
  33. describe('#initSelection', () => {
  34. it('should set the position right style property', (done) => {
  35. // Set document direction
  36. document.documentElement.setAttribute('dir', 'rtl');
  37. let clip = new ClipboardAction({
  38. emitter: new Emitter(),
  39. container: document.body,
  40. text: 'foo',
  41. });
  42. const el = clip.createFakeElement();
  43. assert.equal(el.style.right, '-9999px');
  44. done();
  45. });
  46. });
  47. describe('#set action', () => {
  48. it('should throw an error since "action" is invalid', (done) => {
  49. try {
  50. let clip = new ClipboardAction({
  51. text: 'foo',
  52. action: 'paste',
  53. });
  54. } catch (e) {
  55. assert.equal(
  56. e.message,
  57. 'Invalid "action" value, use either "copy" or "cut"'
  58. );
  59. done();
  60. }
  61. });
  62. });
  63. describe('#set target', () => {
  64. it('should throw an error since "target" do not match any element', (done) => {
  65. try {
  66. let clip = new ClipboardAction({
  67. target: document.querySelector('#foo'),
  68. });
  69. } catch (e) {
  70. assert.equal(e.message, 'Invalid "target" value, use a valid Element');
  71. done();
  72. }
  73. });
  74. });
  75. describe('#selectText', () => {
  76. it('should create a fake element and select its value', () => {
  77. let clip = new ClipboardAction({
  78. emitter: new Emitter(),
  79. container: document.body,
  80. text: 'blah',
  81. });
  82. const el = clip.createFakeElement();
  83. assert.equal(clip.selectedText, el.value);
  84. });
  85. });
  86. describe('#removeFake', () => {
  87. it('should remove a temporary fake element', () => {
  88. let clip = new ClipboardAction({
  89. emitter: new Emitter(),
  90. container: document.body,
  91. text: 'blah',
  92. });
  93. clip.removeFake();
  94. assert.equal(clip.fakeElem, null);
  95. });
  96. });
  97. describe('#selectTarget', () => {
  98. it('should select text from editable element', () => {
  99. let clip = new ClipboardAction({
  100. emitter: new Emitter(),
  101. container: document.body,
  102. target: document.querySelector('#input'),
  103. });
  104. assert.equal(clip.selectedText, clip.target.value);
  105. });
  106. it('should select text from non-editable element', () => {
  107. let clip = new ClipboardAction({
  108. emitter: new Emitter(),
  109. container: document.body,
  110. target: document.querySelector('#paragraph'),
  111. });
  112. assert.equal(clip.selectedText, clip.target.textContent);
  113. });
  114. });
  115. describe('#copyText', () => {
  116. before(() => {
  117. global.stub = sinon.stub(document, 'execCommand');
  118. });
  119. after(() => {
  120. global.stub.restore();
  121. });
  122. it('should fire a success event on browsers that support copy command', (done) => {
  123. global.stub.returns(true);
  124. let emitter = new Emitter();
  125. emitter.on('success', () => {
  126. done();
  127. });
  128. let clip = new ClipboardAction({
  129. emitter,
  130. target: document.querySelector('#input'),
  131. });
  132. });
  133. it('should fire an error event on browsers that support copy command', (done) => {
  134. global.stub.returns(false);
  135. let emitter = new Emitter();
  136. emitter.on('error', () => {
  137. done();
  138. });
  139. let clip = new ClipboardAction({
  140. emitter,
  141. target: document.querySelector('#input'),
  142. });
  143. });
  144. });
  145. describe('#handleResult', () => {
  146. it('should fire a success event with certain properties', (done) => {
  147. let clip = new ClipboardAction({
  148. emitter: new Emitter(),
  149. container: document.body,
  150. target: document.querySelector('#input'),
  151. });
  152. clip.emitter.on('success', (e) => {
  153. assert.property(e, 'action');
  154. assert.property(e, 'text');
  155. assert.property(e, 'trigger');
  156. assert.property(e, 'clearSelection');
  157. done();
  158. });
  159. clip.handleResult(true);
  160. });
  161. it('should fire a error event with certain properties', (done) => {
  162. let clip = new ClipboardAction({
  163. emitter: new Emitter(),
  164. container: document.body,
  165. target: document.querySelector('#input'),
  166. });
  167. clip.emitter.on('error', (e) => {
  168. assert.property(e, 'action');
  169. assert.property(e, 'trigger');
  170. assert.property(e, 'clearSelection');
  171. done();
  172. });
  173. clip.handleResult(false);
  174. });
  175. });
  176. describe('#clearSelection', () => {
  177. it('should remove focus from target and text selection', () => {
  178. let clip = new ClipboardAction({
  179. emitter: new Emitter(),
  180. container: document.body,
  181. target: document.querySelector('#input'),
  182. });
  183. clip.clearSelection();
  184. let selectedElem = document.activeElement;
  185. let selectedText = window.getSelection().toString();
  186. assert.equal(selectedElem, document.body);
  187. assert.equal(selectedText, '');
  188. });
  189. });
  190. describe('#destroy', () => {
  191. it('should destroy an existing fake element', () => {
  192. let clip = new ClipboardAction({
  193. emitter: new Emitter(),
  194. container: document.body,
  195. text: 'blah',
  196. });
  197. clip.selectFake();
  198. clip.destroy();
  199. assert.equal(clip.fakeElem, null);
  200. });
  201. });
  202. });