Mini challenge 2

package.json

@@ -16,7 +16,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test:coverage": "npm run test -- --coverage --watchAll=false",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
@@ -33,7 +34,11 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "@testing-library/react-hooks": "^3.4.1",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-fetch-mock": "^3.0.3",
+    "react-test-renderer": "^16.13.1"
   },
   "browserslist": {
     "production": [
@@ -58,5 +63,11 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/index.js"
+    ]
   }
 }

src/components/App/App.component.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen, queryByAttribute } from '@testing-library/react';
+import App from '.';
+
+describe('App Component tests', () => {
+    it('App Contains change theme defined', () => {
+        render(<App />);
+        expect(screen.getByText('Change Theme')).toBeDefined();
+    });
+    it('App Contains home section defined', () => {
+        const getById = queryByAttribute.bind(null, 'id');
+        const dom = render(<App />);
+        expect(getById(dom.container, 'home-section')).toBeDefined();
+    });
+});

src/components/Emoji/Emoji.test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Emoji from '.';
+
+describe('Emoji Component tests', () => {
+    it('Emoji span Contains the right emoji', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍')).toBeDefined();
+    });
+    it('Emoji span shoul be span', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍').tagName).toBe('SPAN');
+    });
+});

src/pages/Card/Card.page.test.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Card from '.';
+
+describe('Card Component tests', () => {
+    it('Card Description defined', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription')).toBeDefined();
+    });
+
+    it('Card Title defined', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle')).toBeDefined();
+    });
+
+    it('Card Title type', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle').tagName).toBe('H2');
+    });
+
+    it('Card Description type', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription').tagName).toBe('P');
+    });
+
+    it('Card Description class', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription').classList).toHaveLength(0);
+    });
+
+    it('Card Title class', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle').classList).toHaveLength(0);
+    });
+});

src/pages/Header/Header.page.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HeaderSection from '.';
+
+describe('HeaderSection Component tests', () => {
+    it('Header Section Contains search button defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByText('🔍')).toBeDefined();
+    });
+
+    it('Header Section Contains search button defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByText('☰')).toBeDefined();
+    });
+
+    it('Header Section Contains search input defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
+    });
+});

src/pages/Home/Home.page.test.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HomePage from '.';
+
+describe('Home Component tests', () => {
+    it('Header Section Contains search button defined', () => {
+        render(<HomePage />);
+        expect(screen.getByText('🔍')).toBeDefined();
+    });
+
+    it('Header Section Contains search button defined', () => {
+        render(<HomePage />);
+        expect(screen.getByText('☰')).toBeDefined();
+    });
+
+    it('Header Section Contains search input defined', () => {
+        render(<HomePage />);
+        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
+    });
+
+    it('Card Section Contain title', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+        ).toBe('H2');
+    });
+    it('Card Section Contain Description', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByText(
+                'Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...'
+            ).tagName
+        ).toBe('P');
+    });
+    it('Card Section Contain image', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+        ).toBe('IMG');
+    });
+    it('Card Section image size width', () => {
+        render(<HomePage />);
+
+        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+
+        expect(image.width).toEqual(120);
+    });
+    it('Card Section image size height', () => {
+        render(<HomePage />);
+        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+        expect(image.height).toEqual(90);
+    });
+});