🚧 [gndx#1] Add: Create the project components

package.json

@@ -46,6 +46,8 @@
     "eslint-plugin-react": "7.30.1",
     "husky": "8.0.1",
     "jest": "28.1.2",
+    "jsdom": "20.0.0",
+    "jsdom-global": "3.0.2",
     "json-server": "^0.17.0",
     "mini-css-extract-plugin": "2.6.1",
     "prettier": "2.7.1",

src/__test__/components/About.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import About from '../../components/About';
 
 describe('<About />', () => {
-  const about = mount(<About />);
+  const about = shallow(<About />);
 
   test('About render', () => {
     expect(about.length).toEqual(1);
@@ -16,5 +16,4 @@ describe('<About />', () => {
   test('About haves 3 items', () => {
     expect(about.find('.About-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Academic.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Academic from '../../components/Academic';
 
 describe('<Academic />', () => {
-  const academic = mount(<Academic />);
+  const academic = shallow(<Academic />);
 
   test('Academic render', () => {
     expect(academic.length).toEqual(1);
@@ -16,5 +16,4 @@ describe('<Academic />', () => {
   test('Academic has 3 items', () => {
     expect(academic.find('.Academic-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Experience.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Experience from '../../components/Experience';
 
 describe('<Experience />', () => {
-  const experience = mount(<Experience />);
+  const experience = shallow(<Experience />);
 
   test('Experience render', () => {
     expect(experience.length).toEqual(1);
@@ -16,5 +16,4 @@ describe('<Experience />', () => {
   test('Experience haves 3 items', () => {
     expect(experience.find('.Experience-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Header.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Header from '../../components/Header';
 
 describe('<Header />', () => {
-  const header = mount(<Header />);
+  const header = shallow(<Header />);
 
   test('Header render', () => {
     expect(header.length).toEqual(1);
@@ -12,5 +12,4 @@ describe('<Header />', () => {
   test('Header title', () => {
     expect(header.find('.Header-title').length).toEqual(1);
   });
-
 });

src/__test__/components/Interest.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Interest from '../../components/Interest';
 
 describe('<Interest />', () => {
-  const interest = mount(<Interest />);
+  const interest = shallow(<Interest />);
 
   test('Interest render', () => {
     expect(interest.length).toEqual(1);
@@ -16,5 +16,4 @@ describe('<Interest />', () => {
   test('Interest has 3 items', () => {
     expect(interest.find('.Interest-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Languages.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Languages from '../../components/Languages';
 
 describe('<Languages />', () => {
-  const languages = mount(<Languages />);
+  const languages = shallow(<Languages />);
 
   test('Languages render', () => {
     expect(languages.length).toEqual(1);
@@ -16,5 +16,4 @@ describe('<Languages />', () => {
   test('Languages has 3 items', () => {
     expect(languages.find('.Languages-item').length).toBeGreaterThan(2);
   });
-
 });

src/__test__/components/Profile.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Profile from '../../components/Profile';
 
 describe('<Profile />', () => {
-  const profile = mount(<Profile />);
+  const profile = shallow(<Profile />);
 
   test('Profile render', () => {
     expect(profile.length).toEqual(1);
@@ -16,5 +16,4 @@ describe('<Profile />', () => {
   test('Profile have a description', () => {
     expect(profile.find('.Profile-desc').length).toEqual(1);
   });
-
 });

src/__test__/components/Skills.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import Skills from '../../components/Skills';
 
 describe('<Skills />', () => {
-  const skills = mount(<Skills />);
+  const skills = shallow(<Skills />);
 
   test('Skills render', () => {
     expect(skills.length).toEqual(1);
@@ -16,5 +16,4 @@ describe('<Skills />', () => {
   test('Skills has 3 items', () => {
     expect(skills.find('.Skills-item').length).toBeGreaterThan(2);
   });
-
 });

src/components/About/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function index() {
+  return (
+    <section>
+      <p className="About-title"></p>
+      <div>
+        <ol>
+          <li className="About-item">phone</li>
+          <li className="About-item">phone</li>
+          <li className="About-item">phone</li>
+        </ol>
+      </div>
+    </section>
+  );
+}

src/components/Academic/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function index() {
+  return (
+    <section>
+      <h2 className="Academic-title">Academic</h2>
+      <div>
+        <ol>
+          <ul className="Academic-item">escuela 1 </ul>
+          <ul className="Academic-item">escuela 1 </ul>
+          <ul className="Academic-item">escuela 1 </ul>
+        </ol>
+      </div>
+    </section>
+  );
+}

src/components/Experience/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function index() {
+  return (
+    <section>
+      <h2 className="Experience-title">Experience</h2>
+      <div>
+        <ol>
+          <li className="Experience-item">experience 1</li>
+          <li className="Experience-item">experience 2</li>
+          <li className="Experience-item">experience 3w</li>
+        </ol>
+      </div>
+    </section>
+  );
+}

src/components/Header/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function Header({ children }) {
+  return (
+    <header className="Header">
+      <h1 className="Header-title">title</h1>
+      <h2 className="Header-job-title">job</h2>
+      {children}
+      <address></address>
+    </header>
+  );
+}

src/components/Interest/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function index() {
+  return (
+    <section>
+      <h2 className="Interest-title">Interest</h2>
+      <div>
+        <ol>
+          <li className="Interest-item">interest 1</li>
+          <li className="Interest-item">interest 2</li>
+          <li className="Interest-item">interest 1</li>
+        </ol>
+      </div>
+    </section>
+  );
+}

src/components/Languages/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function index() {
+  return (
+    <section>
+      <h2 className="Languages-title">titulo lenguaje</h2>
+      <div>
+        <ol>
+          <ul className="Languages-item">lenguaje 1</ul>
+          <ul className="Languages-item">lenguaje 2</ul>
+          <ul className="Languages-item">lenguaje 3</ul>
+        </ol>
+      </div>
+    </section>
+  );
+}

src/components/Profile/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function index() {
+  return (
+    <section className="Profile">
+      <h2 className="Profile-title">Profile</h2>
+      <p className="Profile-desc"> descripcion</p>
+    </section>
+  );
+}

src/components/Skills/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function index() {
+  return (
+    <section className="Skills">
+      <h2 className="Skills-title">Skills</h2>
+      <div>
+        <ol>
+          <ul className="Skills-item">Skills</ul>
+          <ul className="Skills-item">Skills</ul>
+          <ul className="Skills-item">Skills</ul>
+        </ol>
+      </div>
+    </section>
+  );
+}

src/utils/getData.js

@@ -0,0 +1,3 @@
+export default getData = (url) => {
+  return fetch(url).then((res) => res.json());
+};