From ffaae0eb756ab61816d473d9b5fcf0fdde4c1832 Mon Sep 17 00:00:00 2001 From: Jorge Polanco Date: Sat, 20 Feb 2021 08:29:32 -0600 Subject: [PATCH 1/2] - add testing files --- src/components/App/App.component.test.jsx | 15 ++++ src/components/Emoji/Emoji.test.jsx | 14 ++++ src/pages/Card/Card.page.test.jsx | 83 +++++++++++++++++++++++ src/pages/Header/Header.page.test.jsx | 20 ++++++ src/pages/Home/Home.page.test.jsx | 53 +++++++++++++++ 5 files changed, 185 insertions(+) create mode 100644 src/components/App/App.component.test.jsx create mode 100644 src/components/Emoji/Emoji.test.jsx create mode 100644 src/pages/Card/Card.page.test.jsx create mode 100644 src/pages/Header/Header.page.test.jsx create mode 100644 src/pages/Home/Home.page.test.jsx diff --git a/src/components/App/App.component.test.jsx b/src/components/App/App.component.test.jsx new file mode 100644 index 000000000..c4fc3d59e --- /dev/null +++ b/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(); + expect(screen.getByText('Change Theme')).toBeDefined(); + }); + it('App Contains home section defined', () => { + const getById = queryByAttribute.bind(null, 'id'); + const dom = render(); + expect(getById(dom.container, 'home-section')).toBeDefined(); + }); +}); diff --git a/src/components/Emoji/Emoji.test.jsx b/src/components/Emoji/Emoji.test.jsx new file mode 100644 index 000000000..02fee2554 --- /dev/null +++ b/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(); + expect(screen.getByText('👍')).toBeDefined(); + }); + it('Emoji span shoul be span', () => { + render(); + expect(screen.getByText('👍').tagName).toBe('SPAN'); + }); +}); diff --git a/src/pages/Card/Card.page.test.jsx b/src/pages/Card/Card.page.test.jsx new file mode 100644 index 000000000..bb83ec966 --- /dev/null +++ b/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( + + ); + expect(screen.getByText('testDescription')).toBeDefined(); + }); + + it('Card Title defined', () => { + render( + + ); + expect(screen.getByText('testTitle')).toBeDefined(); + }); + + it('Card Title type', () => { + render( + + ); + expect(screen.getByText('testTitle').tagName).toBe('H2'); + }); + + it('Card Description type', () => { + render( + + ); + expect(screen.getByText('testDescription').tagName).toBe('P'); + }); + + it('Card Description class', () => { + render( + + ); + expect(screen.getByText('testDescription').classList).toHaveLength(0); + }); + + it('Card Title class', () => { + render( + + ); + expect(screen.getByText('testTitle').classList).toHaveLength(0); + }); +}); diff --git a/src/pages/Header/Header.page.test.jsx b/src/pages/Header/Header.page.test.jsx new file mode 100644 index 000000000..b318301ec --- /dev/null +++ b/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(); + expect(screen.getByText('🔍')).toBeDefined(); + }); + + it('Header Section Contains search button defined', () => { + render(); + expect(screen.getByText('☰')).toBeDefined(); + }); + + it('Header Section Contains search input defined', () => { + render(); + expect(screen.getByPlaceholderText('Search the site...')).toBeDefined(); + }); +}); diff --git a/src/pages/Home/Home.page.test.jsx b/src/pages/Home/Home.page.test.jsx new file mode 100644 index 000000000..149a4ea9d --- /dev/null +++ b/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(); + expect(screen.getByText('🔍')).toBeDefined(); + }); + + it('Header Section Contains search button defined', () => { + render(); + expect(screen.getByText('☰')).toBeDefined(); + }); + + it('Header Section Contains search input defined', () => { + render(); + expect(screen.getByPlaceholderText('Search the site...')).toBeDefined(); + }); + + it('Card Section Contain title', () => { + render(); + expect( + screen.getByText('Video Tour | Welcome to Wizeline Guadalajara').tagName + ).toBe('H2'); + }); + it('Card Section Contain Description', () => { + render(); + 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(); + expect( + screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara').tagName + ).toBe('IMG'); + }); + it('Card Section image size width', () => { + render(); + + const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara'); + + expect(image.width).toEqual(120); + }); + it('Card Section image size height', () => { + render(); + const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara'); + expect(image.height).toEqual(90); + }); +}); From b6f7f89d67a0f8e7bd3f98c6c0758d850dbfbf7b Mon Sep 17 00:00:00 2001 From: Jorge Polanco Date: Sat, 20 Feb 2021 09:20:45 -0600 Subject: [PATCH 2/2] update package json to add test:coveraje script --- package.json | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2d91b3558..4addda755 100644 --- a/package.json +++ b/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" + ] } }