Skip to content

Commit

Permalink
test(Jest integration test): Improve quality of jest integration test (
Browse files Browse the repository at this point in the history
…#1260)

Improve quality of jest integration test. Before now, we only had 1 test without assertions running as integration. It is better than nothing, but far from ideal.

I now grabbed some tests from reactstrap. I think this will help build confidence when improving the jest runner.
  • Loading branch information
nicojs authored Nov 29, 2018
1 parent be4c990 commit ed72e2d
Show file tree
Hide file tree
Showing 25 changed files with 1,236 additions and 111 deletions.
20 changes: 20 additions & 0 deletions integrationTest/test/jest-react/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"presets": [
["es2015", {"modules": false}],
"react"
],
"plugins": [
"transform-object-rest-spread"
],
"env": {
"lib-dir": {
"plugins": ["transform-es2015-modules-commonjs"]
},
"webpack": {
"plugins": ["transform-es2015-modules-commonjs"]
},
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
26 changes: 7 additions & 19 deletions integrationTest/test/jest-react/.gitignore
Original file line number Diff line number Diff line change
@@ -1,21 +1,9 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules

# testing
/coverage

# production
node_modules
/dist
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
/lib
.idea
.history
npm-debug.log
package-lock.json
3 changes: 3 additions & 0 deletions integrationTest/test/jest-react/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Reactstrap sample

Grabbed from: https://reactstrap.github.io
17 changes: 17 additions & 0 deletions integrationTest/test/jest-react/__mocks__/react-popper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';

export function Manager({ tag: Tag = 'div', ...props }) {
return <Tag {...props} />;
}

export function Popper({ component: Tag = 'div', ...props }) {
return <Tag {...props} />;
}

export function Arrow({ component: Tag = 'div', ...props }) {
return <Tag {...props} />;
}

export function Target({ component: Tag = 'div', ...props }) {
return <Tag {...props} />;
}
87 changes: 79 additions & 8 deletions integrationTest/test/jest-react/package.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,88 @@
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"name": "reactstrap-sample",
"version": "6.5.0",
"description": "React Bootstrap 4 components",
"main": "dist/reactstrap.cjs.js",
"jsnext:main": "dist/reactstrap.es.js",
"module": "dist/reactstrap.es.js",
"jsdelivr": "dist/reactstrap.min.js",
"unpkg": "dist/reactstrap.min.js",
"cdn": "dist/reactstrap.min.js",
"esnext": "src",
"sideEffects": false,
"scripts": {
"postinstall": "install-local",
"report-coverage": "coveralls < ./coverage/lcov.info",
"test-original": "cross-env BABEL_ENV=test react-scripts test --env=jsdom",
"test": "stryker run",
"posttest": "mocha --require ts-node/register verify/*.ts"
"posttest": "mocha --require ts-node/register verify/*.ts",
"cover": "npm test -- --coverage",
"start": "cross-env BABEL_ENV=webpack webpack-dev-server --config ./webpack.dev.config.js --watch",
"build-docs": "cross-env BABEL_ENV=webpack WEBPACK_BUILD=production webpack --config ./webpack.dev.config.js --progress --colors",
"build": "rollup -c",
"prebuild": "cross-env BABEL_ENV=lib-dir babel src --out-dir lib --ignore src/__tests__/",
"postinstall": "install-local",
"postbuild": "node ./scripts/postbuild.js",
"create-release": "npm run cover && sh ./scripts/release",
"publish-release": "npm run cover && sh ./scripts/publish",
"lint": "eslint src"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/reactstrap/reactstrap.git"
},
"files": [
"LICENSE",
"README.md",
"CHANGELOG.md",
"lib",
"dist",
"src"
],
"keywords": [
"reactstrap",
"bootstrap",
"react",
"component",
"components",
"react-component",
"ui"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/reactstrap/reactstrap/issues"
},
"homepage": "https://github.com/reactstrap/reactstrap#readme",
"dependencies": {
"classnames": "^2.2.3",
"lodash.isfunction": "^3.0.9",
"lodash.isobject": "^3.0.2",
"lodash.tonumber": "^4.0.3",
"prop-types": "^15.5.8",
"react-lifecycles-compat": "^3.0.4",
"react-popper": "^0.10.4",
"react-transition-group": "^2.3.1"
},
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-preset-react": "^6.11.1",
"babel-preset-react-app": "^0.2.1",
"cross-env": "^2.0.0",
"jest": "^23.3.0",
"ejs": "^2.5.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-helmet": "^5.0.3",
"react-prism": "^4.3.2",
"react-router": "^3.2.1",
"react-scripts": "^1.1.4",
"jest": "^23.3.0"
"react-test-renderer": "^16.3.2"
},
"localDependencies": {
"stryker": "../../../packages/stryker",
Expand Down
86 changes: 86 additions & 0 deletions integrationTest/test/jest-react/src/Alert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules } from './utils';
import Fade from './Fade';

const propTypes = {
children: PropTypes.node,
className: PropTypes.string,
closeClassName: PropTypes.string,
closeAriaLabel: PropTypes.string,
cssModule: PropTypes.object,
color: PropTypes.string,
fade: PropTypes.bool,
isOpen: PropTypes.bool,
toggle: PropTypes.func,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
transition: PropTypes.shape(Fade.propTypes),
innerRef: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string,
PropTypes.func,
]),
};

const defaultProps = {
color: 'success',
isOpen: true,
tag: 'div',
closeAriaLabel: 'Close',
fade: true,
transition: {
...Fade.defaultProps,
unmountOnExit: true,
},
};

function Alert(props) {
const {
className,
closeClassName,
closeAriaLabel,
cssModule,
tag: Tag,
color,
isOpen,
toggle,
children,
transition,
fade,
innerRef,
...attributes
} = props;

const classes = mapToCssModules(classNames(
className,
'alert',
`alert-${color}`,
{ 'alert-dismissible': toggle }
), cssModule);

const closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule);

const alertTransition = {
...Fade.defaultProps,
...transition,
baseClass: fade ? transition.baseClass : '',
timeout: fade ? transition.timeout : 0,
};

return (
<Fade {...attributes} {...alertTransition} tag={Tag} className={classes} in={isOpen} role="alert" innerRef={innerRef}>
{toggle ?
<button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
<span aria-hidden="true">&times;</span>
</button>
: null}
{children}
</Fade>
);
}

Alert.propTypes = propTypes;
Alert.defaultProps = defaultProps;

export default Alert;
28 changes: 0 additions & 28 deletions integrationTest/test/jest-react/src/App.css

This file was deleted.

19 changes: 0 additions & 19 deletions integrationTest/test/jest-react/src/App.js

This file was deleted.

8 changes: 0 additions & 8 deletions integrationTest/test/jest-react/src/App.test.js

This file was deleted.

52 changes: 52 additions & 0 deletions integrationTest/test/jest-react/src/Badge.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules } from './utils';

const propTypes = {
color: PropTypes.string,
pill: PropTypes.bool,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
children: PropTypes.node,
className: PropTypes.string,
cssModule: PropTypes.object,
};

const defaultProps = {
color: 'secondary',
pill: false,
tag: 'span'
};

const Badge = (props) => {
let {
className,
cssModule,
color,
innerRef,
pill,
tag: Tag,
...attributes
} = props;

const classes = mapToCssModules(classNames(
className,
'badge',
'badge-' + color,
pill ? 'badge-pill' : false
), cssModule);

if (attributes.href && Tag === 'span') {
Tag = 'a';
}

return (
<Tag {...attributes} className={classes} ref={innerRef} />
);
};

Badge.propTypes = propTypes;
Badge.defaultProps = defaultProps;

export default Badge;
Loading

0 comments on commit ed72e2d

Please sign in to comment.