refactor(#204): copyToClipBoard.test, moved test of utility to it's own test

Author: bpedersen

src/components/CopyToClipBoard/CopyToClipBoard.test.tsx

@@ -1,38 +1,27 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 
+import { copyToClipBoardUtility } from '../../utils/cli-utils';
+
 import CopyToClipBoard from './CopyToClipBoard';
 import { CopyIcon } from './styles';
 
+jest.mock('../../utils/cli-utils');
+
 describe('<CopyToClipBoard /> component', () => {
   let wrapper: ReactWrapper;
+  const copyText = 'copy text';
 
   beforeEach(() => {
-    wrapper = mount(<CopyToClipBoard text={'copy text'} />);
+    wrapper = mount(<CopyToClipBoard text={copyText} />);
   });
 
   test('render the component', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  test('should call the DOM APIs for copy to clipboard utility', () => {
-    const event = {
-      preventDefault: jest.fn(),
-    };
-
-    // @ts-ignore: Property 'getSelection' does not exist on type 'Global'.
-    global.getSelection = jest.fn(() => ({
-      removeAllRanges: () => {},
-      addRange: () => {},
-    }));
-
-    // @ts-ignore: Property 'document/getSelection' does not exist on type 'Global'.
-    const { document, getSelection } = global;
-
-    wrapper.find(CopyIcon).simulate('click', event);
-    expect(event.preventDefault).toHaveBeenCalled();
-    expect(document.createRange).toHaveBeenCalled();
-    expect(getSelection).toHaveBeenCalled();
-    expect(document.execCommand).toHaveBeenCalledWith('copy');
+  test('should call the copyToClipBoardUtility for copy to clipboard utility', () => {
+    wrapper.find(CopyIcon).simulate('click');
+    expect(copyToClipBoardUtility).toHaveBeenCalledWith(copyText);
   });
 });

src/utils/cli-utils.test.ts

@@ -0,0 +1,49 @@
+import { SyntheticEvent } from 'react';
+
+import { copyToClipBoardUtility } from './cli-utils';
+
+describe('copyToClipBoardUtility', () => {
+  let originalGetSelection;
+
+  const mockGetSelectionResult = {
+    removeAllRanges: jest.fn(),
+    addRange: jest.fn(),
+  };
+  beforeEach(() => {
+    originalGetSelection = window.getSelection;
+
+    window.getSelection = jest.fn().mockReturnValue(mockGetSelectionResult);
+  });
+  afterEach(() => {
+    window.getSelection = originalGetSelection;
+    jest.restoreAllMocks();
+  });
+
+  test('should call the DOM APIs', () => {
+    // Given
+    const testEvent: { preventDefault: Function } = {
+      preventDefault: jest.fn(),
+    };
+    const testCopy = 'copy text';
+    const spys = {
+      createElement: jest.spyOn(document, 'createElement'),
+      execCommand: jest.spyOn(document, 'execCommand'),
+      appendChild: jest.spyOn(document.body, 'appendChild'),
+      removeChild: jest.spyOn(document.body, 'removeChild'),
+    };
+    const expectedDiv = document.createElement('div');
+    expectedDiv.innerText = testCopy;
+
+    // When
+    const copyFunc = copyToClipBoardUtility(testCopy);
+    copyFunc(testEvent as SyntheticEvent<HTMLElement>);
+
+    // Then
+    expect(mockGetSelectionResult.removeAllRanges).toHaveBeenCalledWith();
+    expect(mockGetSelectionResult.addRange).toHaveBeenCalled();
+    expect(spys.createElement).toHaveBeenCalledWith('div');
+    expect(spys.appendChild).toHaveBeenCalledWith(expectedDiv);
+    expect(spys.execCommand).toHaveBeenCalledWith('copy');
+    expect(spys.removeChild).toHaveBeenCalledWith(expectedDiv);
+  });
+});