Fix update 10

Giuxpro · Apr 9, 2021 · de6bce9 · de6bce9
1 parent 1bd4ab6
commit de6bce9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 32 deletions.
diff --git a/10-React-Forms/homework/package.json b/10-React-Forms/homework/package.json
@@ -1,16 +1,17 @@
 {
-  "name": "10-react-forms",
-  "version": "1.0.0",
+  "name": "homework",
+  "version": "0.1.0",
+  "private": true,
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/user-event": "^13.1.1",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
+    "node-fetch": "^2.6.1",
+    "prompt-sync": "^4.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "node-fetch": "^2.6.1",
-    "prompt-sync": "^4.2.0"
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -36,7 +37,6 @@
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.6",
-    "enzyme": "^3.11.0",
-    "react-addons-test-utils": "^15.6.2"
+    "enzyme": "^3.11.0"
   }
 }
diff --git a/10-React-Forms/homework/src/App.test.js b/10-React-Forms/homework/src/App.test.js
@@ -1,33 +1,23 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent, screen, getByTestId} from '@testing-library/react';
 import { shallow, mount } from 'enzyme';
 import Form, {validate}  from './Form.jsx';
 
-describe('<Form />', () => {
+describe('App', () => {
   let wrapper;
-  const setState = jest.fn();
-  const useStateSpy = jest.spyOn(React, 'useState')
-  useStateSpy.mockImplementation((init) => [init, setState]);
-
   beforeEach(() => {
-    wrapper = shallow(<Form />);
+    wrapper = mount(<Form />);
   });
-
-  afterEach(() => {
-    jest.clearAllMocks();
+  it('El form deberia cambiar de estado cuando escriban en el input de username', () => {
+    wrapper.find('input[name="username"]').simulate('change', {target: {name: 'username', value: 'NewUsr'}});
+    const ele = wrapper.find('input[name="username"]');
+    expect(ele.prop('value')).toEqual('NewUsr');
   });
-
-  describe('Estados: ', () => {
-    it('El form deberia cambiar de estado cuando escriban en el input de username', () => {
-      wrapper.find('input[name="username"]').simulate('change', {target: {name: 'username', value: 'My new value'}});
-      expect(setState).toHaveBeenCalledWith({"username": "My new value", "password": ""});
-    });
-    it('El form deberia cambiar de estado cuando escriban en el input de password', () => {
-      wrapper.find('input[name="username"]').simulate('change', {target: {name: 'password', value: 'My new value'}});
-      expect(setState).toHaveBeenCalledWith({"username": "", "password": "My new value"});
-    });
+  it('El form deberia cambiar de estado cuando escriban en el input de password', () => {
+    wrapper.find('input[name="password"]').simulate('change', {target: {name: 'password', value: 'NewPsw'}});
+    const ele = wrapper.find('input[name="password"]');
+    expect(ele.prop('value')).toEqual("NewPsw");
   });
-
   describe('Validacion: ', () => {
     it('validate debe devolver un objeto con un error si el usarname no es un email valido:', () => {
       expect(validate({
@@ -56,4 +46,56 @@ describe('<Form />', () => {
   });
 });
 
-
+// describe('<Form />', () => {
+//   let wrapper;
+//   const setState = jest.fn();
+//   const useStateSpy = jest.spyOn(React, 'useState')
+//   useStateSpy.mockImplementation((init) => [init, setState]);
+//
+//   beforeEach(() => {
+//     wrapper = shallow(<Form />);
+//   });
+//
+//   afterEach(() => {
+//     jest.clearAllMocks();
+//   });
+//
+//   describe('Estados: ', () => {
+//     it('El form deberia cambiar de estado cuando escriban en el input de username', () => {
+//       wrapper.find('input[name="username"]').simulate('change', {target: {name: 'username', value: 'My new value'}});
+//       console.log(wrapper.find('input[name="username"]'));
+//       expect(setState).toHaveBeenCalledWith({"username": "My new value", "password": ""});
+//     });
+//     it('El form deberia cambiar de estado cuando escriban en el input de password', () => {
+//       wrapper.find('input[name="username"]').simulate('change', {target: {name: 'password', value: 'My new value'}});
+//       expect(setState).toHaveBeenCalledWith({"username": "", "password": "My new value"});
+//     });
+//   });
+//
+//   describe('Validacion: ', () => {
+//     it('validate debe devolver un objeto con un error si el usarname no es un email valido:', () => {
+//       expect(validate({
+//         username: 'dassadas',
+//         password: 'hola1'
+//       })).toEqual({username: 'Username is invalid'});
+//     });
+//     it('validate debe devolver un objeto con un error si el usarname esta vacio:', () => {
+//       expect(validate({
+//         username: '',
+//         password: 'hola1',
+//       })).toEqual({username: 'Username is required'});
+//     });
+//     it('validate debe devolver un objeto con un error si el password no tiene un numero:', () => {
+//       expect(validate({
+//         username: '[email protected]',
+//         password: 'dassadas'
+//       })).toEqual({password: 'Password is invalid'});
+//     });
+//     it('validate debe devolver un objeto con un error si el password esta vacio:', () => {
+//       expect(validate({
+//         username: '[email protected]',
+//         password: ''
+//       })).toEqual({password: 'Password is required'});
+//     });
+//   });
+// });
diff --git a/10-React-Forms/homework/src/setupTests.js b/10-React-Forms/homework/src/setupTests.js
@@ -4,5 +4,5 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
 import * as enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-enzyme.configure({ adapter: new Adapter() });
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+enzyme.configure({ adapter: new Adapter() });