fedora-hubs

Clone

#239 Add tests for React front end
Merged 7 years ago by atelic. Opened 7 years ago by atelic.
atelic/fedora-hubs js-tests  into  develop

file modified
+3 
@@ -108,6 +108,9 @@ 
 

  

      $ ./runtest.sh --help
 

  

+ You can run the JavaScript tests from ``hubs/static/client`` with::
 

+     $ npm test
 

+ 

  Some credentials...
 

  -------------------

file modified
+1 -1 
@@ -1,5 +1,5 @@ 
 

  {
 

-   "presets" : ["es2015", "react"],
 

+   "presets" : ["es2015", "react", "stage-1"],
 

    "plugins": ["transform-class-properties"]
 

  }

file modified
+2 -1 
@@ -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",
 

    }
 

  }

file added
+34 
@@ -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: '<a href="https://pagure.io/fedora-hubs">Link</a>',
 

+     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(
 

+       <Feed matches={matches} options={options} />
 

+     );
 

+ 

+     const state = {
 

+       matches,
 

+       messageLimit: 100,
 

+       sse: true,
 

+     };
 

+     expect(component.state).toEqual(state);
 

+   });
 

+ });

file added
+36 
@@ -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(
 

+       <Icon match={match} />
 

+     );
 

+     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(
 

+       <Icon match={match} />
 

+     );
 

+     expect(component).toBeTruthy();
 

+ 

+     const node = ReactDOM.findDOMNode(component);
 

+     const image = node.querySelector('img');
 

+     expect(image.getAttribute('src')).toEqual(match.secondary_icon);
 

+   });
 

+ });

file added
+30 
@@ -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: '<a href="https://pagure.io/fedora-hubs">Link</a>',
 

+     date_time: new Date(),
 

+   };
 

+ 

+   it('should set the inner html of the markup', () => {
 

+     const component = TestUtils.renderIntoDocument(
 

+       <Markup match={match} />
 

+     );
 

+     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
 

+ });

file added
+30 
@@ -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: '<a href="https://pagure.io/fedora-hubs">Link</a>',
 

+     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(
 

+       <Panel match={match} />
 

+     );
 

+     expect(component).toBeTruthy();
 

+ 

+     const node = ReactDOM.findDOMNode(component);
 

+     const block = node.querySelector('.card-block');
 

+ 

+     expect(block).toBeTruthy();
 

+   });
 

+ });

file modified
+4 -1 
@@ -15,7 +15,10 @@ 
 

      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);

file modified
+17 -13 
@@ -1,17 +1,21 @@ 
 

  import React from 'react';
 

  

- const Icon = function (props) {
 

-   return (
 

-     <div className="media-left">
 

-       <a href={props.match.link ? props.match.link : '#'} target="_blank">
 

-         <img
 

-           alt="User avatar"
 

-           className="media-object square-32"
 

-           src={props.match.secondary_icon}
 

-         />
 

-       </a>
 

-     </div>
 

-   );
 

- };
 

+ class Icon extends React.Component {
 

+   render() {
 

+     return (
 

+       <div>
 

+         <div className="media-left">
 

+           <a href={this.props.match.link ? this.props.match.link : '#'} target="_blank">
 

+             <img
 

+               alt="User avatar"
 

+               className="media-object square-32 img-circle"
 

+               src={this.props.match.secondary_icon}
 

+             />
 

+           </a>
 

+         </div>
 

+       </div>
 

+     );
 

+   }
 

+ }
 

  

  export default Icon;

file modified
+11 -9 
@@ -3,15 +3,17 @@ 
 

  import Icon from './Icon.jsx';
 

  import Markup from './Markup.jsx';
 

  

- const Panel = function (props) {
 

-   return (
 

-     <div className="card">
 

-       <div className="card-block" id={props.match.dom_id}>
 

-         <Icon match={props.match} />
 

-         <Markup options={props.options} match={props.match} />
 

+ class Panel extends React.Component {
 

+   render() {
 

+     return (
 

+       <div className="card">
 

+         <div className="card-block" id={this.props.match.id}>
 

+           <Icon match={this.props.match} />
 

+           <Markup options={this.props.options} match={this.props.match} />
 

+         </div>
 

        </div>
 

-     </div>
 

-   );
 

- };
 

+     );
 

+   }
 

+ }
 

  

  export default Panel;

file modified
+17 -2 
@@ -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": [
 

+       "<rootDir>/node_modules/react/",
 

+       "<rootDir>/node_modules/react-dom/",
 

+       "<rootDir>/node_modules/react-addons-test-utils/"
 

+     ]
 

    },
 

    "author": "Eric Barbour <ebarbour@redhat.com>",
 

    "license": "AGPL-3.0"

file added
+1 
@@ -0,0 +1,1 @@ 
 

+ pushd hubs/static/client ; npm install ; npm test ; popd

  • Use jest test suite (recommended by React team)
  • Explain how to run JS tests in README

Need to run npm install before running the tests

Not a hardcore js dev but its looks good :thumbsup: 

5 tests passed (5 total in 4 test suites, run time 8.43s)

1 new commit added

  • Add script for running tests from root hubs dir
7 years ago

new script works for me as well

rebased
7 years ago

Is the location of the tests under the static folder something that is standard or so?
Seems odd for me to ship them there as I'm afraid we'll forget to remove them in installing later :/

Is the location of the tests under the static folder something that is standard or so?
Seems odd for me to ship them there as I'm afraid we'll forget to remove them in installing later :/

I don't know if it is standard but the only other experience I have with javascript testing does it the same way: https://github.com/CenterForOpenScience/osf.io/tree/develop/website/static/js

Not to say that way is correct though.

rebased
7 years ago

rebased
7 years ago

@sayanchowdhury what are your thoughts on this?

Sayan confirmed the tests here but wants to run them to be sure.

:thumbsup: for me

rebased
7 years ago

Pull-Request has been merged by atelic
7 years ago
Metadata
None
No Tags
Changes Summary 12
+3 -0
file changed
README.rst
+1 -1
file changed
hubs/static/client/.babelrc
+2 -1
file changed
hubs/static/client/.eslintrc.json
+34
file added
hubs/static/client/app/__tests__/Feed.test.js
+36
file added
hubs/static/client/app/__tests__/Icon.test.js
+30
file added
hubs/static/client/app/__tests__/Markup.test.js
+30
file added
hubs/static/client/app/__tests__/Panel.test.js
+4 -1
file changed
hubs/static/client/app/components/Feed.jsx
+17 -13
file changed
hubs/static/client/app/components/Icon.jsx
+11 -9
file changed
hubs/static/client/app/components/Panel.jsx
+17 -2
file changed
hubs/static/client/package.json
+1
file added
runjstests.sh
Powered by Pagure 5.13.3
Documentation • File an Issue • About • SSH Hostkey/Fingerprint
© Red Hat, Inc. and others.