feat: copy json from result editor

refs cypress-io/cypress#2752 (comment)

closes #7

cypress/integration/acceptance.spec.ts

@@ -39,6 +39,22 @@ describe('json utility tool', () => {
     cy.get('[data-testid="result"]').should('have.value', desiredJson);
   });
 
+  it('should copy text from clipboard in the editor on click button', () => {
+    cy.visit(url);
+
+    const inputJson = '{"name":"json from clipboard"}';
+    const desiredJson = '{\n  "name": "json from clipboard"\n}';
+
+    cy.get('[data-testid="json"]').type(inputJson, { parseSpecialCharSequences: false });
+    cy.get('[data-testid="copy-json"]').click();
+
+     cy.window().then((win) => {
+      win.navigator.clipboard.readText().then((text) => {
+        assert.equal(text, desiredJson);
+      });
+    });
+  });
+
   it('should clean both editors source and result', () => {
     cy.visit(url);
     const inputJson = '{"name":"json from clipboard"}';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-tool",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "homepage": "./",
   "private": true,
   "main": "electron.js",

src/App.test.tsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen, act } from '@testing-library/react';
 import App from './App';
 import userEvent from '@testing-library/user-event';
 import { Blob } from 'buffer';
+import Formatter from './core/formatter';
 
 describe('json utility', () => {
 
@@ -124,6 +125,34 @@ describe('json utility', () => {
     expect(screen.getByTestId('result')).toHaveValue('{}');
   });
 
+  test('should copy json string from result editor to transfer area on clicking the button', async () => {
+    render(<App />);
+
+    Object.assign(global.navigator, {
+      clipboard :{
+        async writeText(text: string) {
+          return text;
+        }
+      }
+    });
+
+    jest.spyOn(global.navigator.clipboard, 'writeText');
+
+    const editor = screen.getByTestId('json');
+
+    await act(async () => {
+      userEvent.paste(editor, '{"a":"a"}');
+    });
+
+    await act(async () => {
+      userEvent.click(screen.getByTestId('copy-json'));
+    });
+
+    const formatter = new Formatter('{"a":"a"}');
+
+    expect(global.navigator.clipboard.writeText).toHaveBeenCalledWith(await formatter.format());
+  });
+
   test('should clean editors once clean is clicked', async () => {
     render(<App />);
 

src/App.tsx

@@ -41,22 +41,36 @@ function App() {
     await onJsonChange('');
   };
 
+  const writeToClipboard = async () => {
+    await navigator.clipboard.writeText(result);
+  };
+
   return (
     <div className="h-screen bg-gray-500 p-5">
       <div className="flex w-full justify-start items-center">
-        <Button
-          onClick={pasteFromClipboard}
-          data-testid="paste-from-clipboard"
-          className="m-5 ml-0"
-        >
-          paste from clipboard
-        </Button>
-        <Button
-          onClick={cleanup}
-          data-testid="clean"
-        >
-          clean
-        </Button>
+        <div className="w-3/6">
+          <Button
+            onClick={pasteFromClipboard}
+            data-testid="paste-from-clipboard"
+            className="m-5 ml-0"
+          >
+            paste from clipboard
+          </Button>
+          <Button
+            onClick={cleanup}
+            data-testid="clean"
+          >
+            clean
+          </Button>
+        </div>
+        <div className="w-3/6">
+          <Button
+            data-testid="copy-json"
+            onClick={writeToClipboard}
+          >
+            copy json
+          </Button>
+        </div>
       </div>
       <div className="flex h-5/6">
         <div className="w-3/6 flex flex-col h-full m-1">