refactor: extracted menus for each editor

cypress/integration/UserInterface.feature

@@ -1,14 +1,8 @@
 Feature: User interface
   Scenario: I want see the visual elements to interact with the page
-    When I open json tool
-    Then I see label to inform where to place the json
-
     When I open json tool
     Then I see buy me a coffee link
 
-    When I open json tool
-    Then I see a label to inform the result of formatting
-
   Scenario: I want see the default values that json tool uses
     When I open json tool
-    Then I see 2 as the default space size
+    Then I see 2 as the default space size

cypress/support/step_definitions/UserInterfaceSteps.js

@@ -6,19 +6,11 @@ When(/^I open json tool$/, function () {
     cy.visit(url);
 });
 
-Then(/^I see label to inform where to place the json$/, function () {
-    cy.get('[data-testid="label-json"]').should('have.text', 'place your json here');
-});
-
 Then(/^I see buy me a coffee link$/, function () {
     cy.get('[data-testid="buy-me-a-coffee"]').should('be.visible');
     cy.get('[data-testid="buy-me-a-coffee"]').should('have.attr', 'href', 'https://www.buymeacoffee.com/marabesi');
 });
 
-Then(/^I see a label to inform the result of formatting$/, function () {
-    cy.get('[data-testid="label-result"]').should('have.text', 'result');
-});
-
 Then(/^I see (\d+) as the default space size$/, function () {
     cy.get('[data-testid="space-size"]').should('have.value', '2');
-});
+});

src/App.test.tsx

@@ -63,18 +63,6 @@ describe('json utility', () => {
   };
 
   describe('ui elements', () => {
-    test('renders place your json here label', () => {
-      render(<App />);
-      const placeJsonLabel = screen.getByTestId('label-json');
-      expect(placeJsonLabel).toBeInTheDocument();
-    });
-
-    test('renders result label', () => {
-      render(<App />);
-      const resultLabel = screen.getByTestId('label-result');
-      expect(resultLabel).toBeInTheDocument();
-    });
-
     test('error message is hidden by default', () => {
       render(<App />);
       const errorLabel = screen.queryByTestId(/error/);
@@ -100,12 +88,6 @@ describe('json utility', () => {
     });
   });
 
-  test('renders resulting formatted json label', () => {
-    render(<App />);
-    const resultLabel = screen.getByText(/result/i);
-    expect(resultLabel).toBeInTheDocument();
-  });
-
   test.each([
     ['{}', '{}'],
     ['{"a": "b"}', '{"a": "b"}'],

src/App.tsx

@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
-import Button from './components/Button';
-import InputText from './components/InputText';
 import JsonEditor from './components/JsonEditor';
-import Label from './components/Label';
 import CleanUp from './core/cleanUp';
 import Formatter from './core/formatter';
+import ResultMenu from "./components/ResultMenu";
+import JsonMenu from "./components/JsonMenu";
 
 const cleanUp = new CleanUp();
 
@@ -90,65 +89,29 @@ function App() {
           <a data-testid="buy-me-a-coffee" href="https://www.buymeacoffee.com/marabesi" target="_blank" rel="noreferrer">Buy me a coffee</a>
         </div>
         <div className="h-screen p-1">
-          <div className="flex w-full justify-start items-center">
-            <div className="w-3/6">
-              <Button
-                  onClick={pasteFromClipboard}
-                  data-testid="paste-from-clipboard"
-                  className="ml-0"
-              >
-                paste from clipboard
-              </Button>
-              <Button
-                  onClick={cleanup}
-                  data-testid="clean"
-              >
-                clean
-              </Button>
-              <Button
-                  onClick={cleanWhiteSpaces}
-                  data-testid="clean-spaces"
-              >
-                clean spaces
-              </Button>
-              <Button
-                  onClick={cleanNewLines}
-                  data-testid="clean-new-lines"
-              >
-                clean new lines
-              </Button>
-              <Button
-                  onClick={cleanNewLinesAndSpaces}
-                  data-testid="clean-new-lines-and-spaces"
-              >
-                clean new lines and spaces
-              </Button>
-            </div>
-            <div className="w-3/6 flex justify-between">
-              <InputText
-                  data-testid="space-size"
-                  value={spacing}
-                  onChange={eventValue => updateSpacing(eventValue)}
-              />
-              <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">
-              <Label data-testid="label-json">place your json here</Label>
+              <JsonMenu
+                  pasteFromClipboard={pasteFromClipboard}
+                  cleanup={cleanup}
+              />
+
               <JsonEditor
                   input={originalJson}
                   onChange={eventValue => onJsonChange(eventValue.value)}
                   data-testid="json"
               />
             </div>
             <div className="w-3/6 flex flex-col h-full m-1">
-              <Label data-testid="label-result">result</Label>
+              <ResultMenu
+                spacing={spacing}
+                updateSpacing={updateSpacing}
+                writeToClipboard={writeToClipboard}
+                cleanWhiteSpaces={cleanWhiteSpaces}
+                cleanNewLines={cleanNewLines}
+                cleanNewLinesAndSpaces={cleanNewLinesAndSpaces}
+              />
+
               <JsonEditor
                   input={result}
                   className="result"

src/components/JsonMenu.tsx

@@ -0,0 +1,23 @@
+import Button from "./Button";
+
+export default function JsonMenu({pasteFromClipboard, cleanup}: any) {
+    return (
+        <div className="flex w-full justify-start items-center">
+            <div className="w-3/6">
+                <Button
+                    onClick={pasteFromClipboard}
+                    data-testid="paste-from-clipboard"
+                    className="ml-0"
+                >
+                    paste from clipboard
+                </Button>
+                <Button
+                    onClick={cleanup}
+                    data-testid="clean"
+                >
+                    clean
+                </Button>
+            </div>
+        </div>
+    );
+}

src/components/ResultMenu.tsx

@@ -0,0 +1,41 @@
+import InputText from "./InputText";
+import Button from "./Button";
+
+export default function ResultMenu(
+    { spacing, updateSpacing, writeToClipboard, cleanWhiteSpaces, cleanNewLines, cleanNewLinesAndSpaces } : any
+) {
+    return (
+        <div className="flex justify-between">
+            <InputText
+                data-testid="space-size"
+                value={spacing}
+                onChange={eventValue => updateSpacing(eventValue)}
+            />
+            <Button
+                onClick={cleanWhiteSpaces}
+                data-testid="clean-spaces"
+            >
+                clean spaces
+            </Button>
+            <Button
+                onClick={cleanNewLines}
+                data-testid="clean-new-lines"
+            >
+                clean new lines
+            </Button>
+            <Button
+                onClick={cleanNewLinesAndSpaces}
+                data-testid="clean-new-lines-and-spaces"
+            >
+                clean new lines and spaces
+            </Button>
+
+            <Button
+                data-testid="copy-json"
+                onClick={writeToClipboard}
+            >
+                copy json
+            </Button>
+        </div>
+    );
+}