From 17e997de75c65715965b71a27fdbe7af7e9d70cc Mon Sep 17 00:00:00 2001 From: Eric Barbour Date: Aug 11 2016 18:22:23 +0000 Subject: Add tests for React front end * Use jest test suite (recommended by React team) --- diff --git a/README.rst b/README.rst index a7d2910..c0946ab 100644 --- a/README.rst +++ b/README.rst @@ -108,6 +108,9 @@ See the options available with:: $ ./runtest.sh --help +You can run the JavaScript tests from ``hubs/static/client`` with:: + $ npm test + Some credentials... ------------------- diff --git a/hubs/static/client/.babelrc b/hubs/static/client/.babelrc index 9926dbe..aef231b 100644 --- a/hubs/static/client/.babelrc +++ b/hubs/static/client/.babelrc @@ -1,5 +1,5 @@ { - "presets" : ["es2015", "react"], + "presets" : ["es2015", "react", "stage-1"], "plugins": ["transform-class-properties"] } diff --git a/hubs/static/client/.eslintrc.json b/hubs/static/client/.eslintrc.json index 079ce96..62ca52c 100644 --- a/hubs/static/client/.eslintrc.json +++ b/hubs/static/client/.eslintrc.json @@ -1,8 +1,9 @@ { "extends": "airbnb", "rules": { - "react/prop-types": "off", "arrow-body-style": "off", "func-names": "off" + "react/prefer-stateless-function": "off", + "react/prop-types": "off", } } diff --git a/hubs/static/client/app/__tests__/Feed.test.js b/hubs/static/client/app/__tests__/Feed.test.js new file mode 100644 index 0000000..ae93f29 --- /dev/null +++ b/hubs/static/client/app/__tests__/Feed.test.js @@ -0,0 +1,34 @@ +/* eslint-env jasmine, jest */ + +jest.unmock('../components/Feed.jsx'); + +import React from 'react'; +import TestUtils from 'react-addons-test-utils'; + +import Feed from '../components/Feed.jsx'; + +describe('Feed', () => { + const matches = [{ + markup: 'Link', + date_time: new Date(), + link: 'https://pagure.io/fedora-hubs', + secondary_icon: 'https://placekitten.com/g/200/300', + }]; + + const options = { + messageLimit: 100 + }; + + it('should set the correct state', () => { + const component = TestUtils.renderIntoDocument( + + ); + + const state = { + matches, + messageLimit: 100, + sse: true, + }; + expect(component.state).toEqual(state); + }); +}); diff --git a/hubs/static/client/app/__tests__/Icon.test.js b/hubs/static/client/app/__tests__/Icon.test.js new file mode 100644 index 0000000..920c853 --- /dev/null +++ b/hubs/static/client/app/__tests__/Icon.test.js @@ -0,0 +1,36 @@ +/* eslint-env jasmine, jest */ + +jest.unmock('../components/Icon.jsx'); + +import React from 'react'; +import ReactDOM from 'react-dom'; +import TestUtils from 'react-addons-test-utils'; + +import Icon from '../components/Icon.jsx'; + +describe('Icon', () => { + const match = { + link: 'https://pagure.io/fedora-hubs', + secondary_icon: 'https://placekitten.com/g/200/300', + }; + + it('has the correct link', () => { + const component = TestUtils.renderIntoDocument( + + ); + expect(component).toBeTruthy(); + const node = ReactDOM.findDOMNode(component); + const link = node.querySelector('a'); + expect(link.getAttribute('href')).toEqual(match.link); + }); + it('has the correct image source', () => { + const component = TestUtils.renderIntoDocument( + + ); + expect(component).toBeTruthy(); + + const node = ReactDOM.findDOMNode(component); + const image = node.querySelector('img'); + expect(image.getAttribute('src')).toEqual(match.secondary_icon); + }); +}); diff --git a/hubs/static/client/app/__tests__/Markup.test.js b/hubs/static/client/app/__tests__/Markup.test.js new file mode 100644 index 0000000..d2aea84 --- /dev/null +++ b/hubs/static/client/app/__tests__/Markup.test.js @@ -0,0 +1,30 @@ +/* eslint-env jasmine, jest */ + +jest.unmock('../components/Markup.jsx'); + +import React from 'react'; +import ReactDOM from 'react-dom'; +import TestUtils from 'react-addons-test-utils'; + +import Markup from '../components/Markup.jsx'; + +describe('Markup', () => { + const match = { + markup: 'Link', + date_time: new Date(), + }; + + it('should set the inner html of the markup', () => { + const component = TestUtils.renderIntoDocument( + + ); + expect(component).toBeTruthy(); + + const node = ReactDOM.findDOMNode(component); + const header = node.querySelector('h4'); + + expect(header.innerHTML).toEqual(match.markup); + }); + + // we don't test TimeAgo, the library should have its own tests +}); diff --git a/hubs/static/client/app/__tests__/Panel.test.js b/hubs/static/client/app/__tests__/Panel.test.js new file mode 100644 index 0000000..c8632c5 --- /dev/null +++ b/hubs/static/client/app/__tests__/Panel.test.js @@ -0,0 +1,30 @@ +/* eslint-env jasmine, jest */ + +jest.unmock('../components/Panel.jsx'); + +import React from 'react'; +import ReactDOM from 'react-dom'; +import TestUtils from 'react-addons-test-utils'; + +import Panel from '../components/Panel.jsx'; + +describe('Panel', () => { + const match = { + markup: 'Link', + date_time: new Date(), + link: 'https://pagure.io/fedora-hubs', + secondary_icon: 'https://placekitten.com/g/200/300', + }; + + it('should render the card block', () => { + const component = TestUtils.renderIntoDocument( + + ); + expect(component).toBeTruthy(); + + const node = ReactDOM.findDOMNode(component); + const block = node.querySelector('.card-block'); + + expect(block).toBeTruthy(); + }); +}); diff --git a/hubs/static/client/app/components/Feed.jsx b/hubs/static/client/app/components/Feed.jsx index eae102a..b196bdb 100644 --- a/hubs/static/client/app/components/Feed.jsx +++ b/hubs/static/client/app/components/Feed.jsx @@ -15,7 +15,10 @@ export default class Feed extends React.Component { if (!this.props.url || !this.state.sse) { return; } - this.source = (!!window.EventSource) ? new EventSource(this.props.url) : {}; + this.source = (!!window.EventSource) ? new EventSource(this.props.url) : null; + if (!this.source) { + return; + } this.source.addEventListener('error', () => { this.state.sse = false; }, false); diff --git a/hubs/static/client/app/components/Icon.jsx b/hubs/static/client/app/components/Icon.jsx index 9adf0e4..0eec3cc 100644 --- a/hubs/static/client/app/components/Icon.jsx +++ b/hubs/static/client/app/components/Icon.jsx @@ -1,17 +1,21 @@ import React from 'react'; -const Icon = function (props) { - return ( -
- - User avatar - -
- ); -}; +class Icon extends React.Component { + render() { + return ( +
+
+ + User avatar + +
+
+ ); + } +} export default Icon; diff --git a/hubs/static/client/app/components/Panel.jsx b/hubs/static/client/app/components/Panel.jsx index c443155..848a5b7 100644 --- a/hubs/static/client/app/components/Panel.jsx +++ b/hubs/static/client/app/components/Panel.jsx @@ -3,15 +3,17 @@ import React from 'react'; import Icon from './Icon.jsx'; import Markup from './Markup.jsx'; -const Panel = function (props) { - return ( -
-
- - +class Panel extends React.Component { + render() { + return ( +
+
+ + +
-
- ); -}; + ); + } +} export default Panel; diff --git a/hubs/static/client/package.json b/hubs/static/client/package.json index 235be28..8cc9aa4 100644 --- a/hubs/static/client/package.json +++ b/hubs/static/client/package.json @@ -17,13 +17,28 @@ "webpack": "~1.13.1" }, "devDependencies": { + "babel-jest": "^14.1.0", + "babel-preset-es2015": "^6.9.0", + "babel-preset-jest": "^14.1.0", + "babel-preset-react": "^6.5.0", + "babel-preset-stage-1": "^6.5.0", "eslint": "^2.13.1", - "depcheck": "~0.6.3" + "jest": "^14.1.0", + "react-addons-test-utils": "^15.3.0", + "react-test-renderer": "^15.3.0" }, "scripts": { "dev": "webpack --watch", "build": "webpack -p", - "test": "eslint app/* && depcheck ." + "lint": "eslint app/*", + "test": "jest" + }, + "jest": { + "unmockedModulePathPatterns": [ + "/node_modules/react/", + "/node_modules/react-dom/", + "/node_modules/react-addons-test-utils/" + ] }, "author": "Eric Barbour ", "license": "AGPL-3.0"