pasando las pruebas correspondientes a servicios. con axios, mocks y siguiendo el laboratorio...

Author: Softx0

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": [["@babel/preset-env", { "targets": {"node": "current"} }]]
+}

package-lock.json

@@ -7,6 +7,8 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "apisauce": "^2.1.5",
+    "axios": "^0.25.0",
+    "axios-mock-adapter": "^1.20.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
@@ -39,6 +41,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.16.11",
     "autoprefixer": "^10.4.2",
     "dotenv-cli": "^5.0.0",
     "jest": "^27.5.1",

package.json

@@ -1,12 +1,13 @@
 import { BaseApi } from './BaseApi';
+import axios from 'axios';
 
-const defineWordByNameUrl = (word) => `${process.env.REACT_APP_URL}/entries/es/${word}`;
+const defineWordByNameUrl = `${process.env.REACT_APP_URL}/entries/es`;
 
-const defineWordByName = (request, headers) =>
-  BaseApi.get(defineWordByNameUrl(request), null, headers).then(
-    (response) => response.data
-  );
+// const defineWordByName = (request, headers) =>
+//   BaseApi.get(defineWordByNameUrl(request), null, headers).then(
+//     (response) => response.data
+//   );
 
-export default {
-    defineWordByName
-};
+export const defineWordByName = (word) => {
+  return axios.get(`${defineWordByNameUrl}/${word}`);
+};

src/api/DictionaryService.js

@@ -5,11 +5,11 @@ const ResponseCode = {
     },
     CLIENT_ERROR : {
         code: 800,
-        message: "Please check the name of the pokemon"
+        message: "Please check your inputs"
     },
     UNDEFINED: {
         code: 404, 
-        message: "Por favor trata con otro Pokemon"
+        message: "Por favor trata denuevo"
     },
 };
 

src/api/utils/ResponseCode.js

@@ -1,17 +1,56 @@
+import { useState } from 'react'
+import { defineWordByName } from "../../api/DictionaryService";
 
 const App = () => {
+
+
+  const [definition, setDefinition] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const handleSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      setIsLoading(true);
+      setDefinition('');
+      setErrorMsg('');
+
+      const { word } = event.target.elements
+      // console.log(word);
+      const response = await defineWordByName(word.value);
+
+      setDefinition(response.data[0].meanings[0].definitions[0].definition);
+    } catch (event) {
+      console.log("Sorry hay un problema!");
+    } finally {
+      setIsLoading(false);
+    }
+
+  };
+
   return (
     <>
 
-      <div>
+      <div className="App">
         <h1>This is react-testing-library</h1>
-        <form >
-          <label htmlFor="word" >Word: </label>
-          <input id="word" name="word" type="text" />
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="word" >word: </label>
+          <input id="word" type="text" />
 
-          <button id="btnConsultar" type="submit" >Definicion</button>
+          <button disabled={isLoading} type="submit" >definicion</button>
         </form>
-
+        {
+          isLoading && <p>Loading...</p>
+        }
+        {
+          !isLoading && definition && <p>{definition}</p>
+        }
+        {
+          !isLoading && !definition && !errorMsg && <p>{`Type a word`}</p>
+        }
+        {
+          !isLoading && errorMsg && <p>{errorMsg}</p>
+        }
       </div>
 
     </>

src/pages/Home/App.js

@@ -1,11 +1,12 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import App from './App';
+import axios from 'axios';
+jest.mock('axios');
 
 describe('App Test Suite', () => {
 
-  beforeEach(() => {
-    render(<App />)
-  });
+
+  beforeEach(() => render(<App />));
 
   test('renders Free Disctionary title', () => {
     // screen.debug(); // para debugear y ver el componente a renderizar
@@ -28,7 +29,7 @@ describe('App Test Suite', () => {
 
 
   // Nota: dejar las pruebas los planas posibles, y single responsability
-  test(`should render element's form`, () => {
+  it(`should render element's form`, () => {
 
     // buscando por el label correspondiente a un input
     const inputEl = screen.getByLabelText(/Word/i);
@@ -38,8 +39,27 @@ describe('App Test Suite', () => {
     expect(btnEl).toBeInTheDocument();
   });
 
+  it('should search a word', async () => {
+
+    axios.get.mockReturnValueOnce({
+      data: [{
+        meanings: [{
+          definitions: [{
+            definition: 'Construcción cubierta destinada a ser habitada'
+          }]
+        }]
+      }]
+    });
 
+    const inputEl = screen.getByLabelText(/word/i);
+    const btnEl = screen.getByRole('button', { name: /definicion/i });
+
+    fireEvent.change(inputEl, { target: { value: 'casa' } });
+    fireEvent.click(btnEl);
+    
+    const wordMeaning = await screen.findAllByText(/Construcción cubierta destinada a ser habitada/i);
+    expect(wordMeaning[0]).toBeInTheDocument();
 
-  
+  });
 
 });