clipboard-action.js 7.2 KB

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