Skip to content

Commit

Permalink
v0.5.1
Browse files Browse the repository at this point in the history
  • Loading branch information
Methuselah96 committed May 7, 2020
1 parent 191f5cd commit 1ecc56b
Show file tree
Hide file tree
Showing 37 changed files with 7,276 additions and 348 deletions.
3 changes: 1 addition & 2 deletions packages/redux-devtools-test-generator/.babelrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
"presets": ["es2015-loose", "stage-0", "react"]
}
3 changes: 3 additions & 0 deletions packages/redux-devtools-test-generator/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
lib
demo
**/node_modules
18 changes: 18 additions & 0 deletions packages/redux-devtools-test-generator/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"extends": "eslint-config-airbnb",
"env": {
"browser": true,
"jest": true,
"node": true
},
"rules": {
"prefer-template": 0,
"no-shadow": 0,
"comma-dangle": 0,
"react/sort-comp": 0
},
"parser": "babel-eslint",
"plugins": [
"react"
]
}
6 changes: 6 additions & 0 deletions packages/redux-devtools-test-generator/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules
*.log
.DS_Store
lib
coverage
.idea
7 changes: 7 additions & 0 deletions packages/redux-devtools-test-generator/.travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
language: node_js
node_js:
- "5"

script:
- npm run lint
- npm test
4 changes: 4 additions & 0 deletions packages/redux-devtools-test-generator/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Change log

This project adheres to [Semantic Versioning](http://semver.org/).
See all notable changes on [Releases](https://github.com/zalmoxisus/redux-devtools-test-generator/releases) page.
14 changes: 14 additions & 0 deletions packages/redux-devtools-test-generator/CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Contributor Code of Conduct

As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.

We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.

Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.

This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)

25 changes: 16 additions & 9 deletions packages/redux-devtools-test-generator/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
# Redux DevTools Test Generator
Redux DevTools Test Generator
==============================

[Watch my presentation at React Europe](https://youtu.be/cbXLohVbzNI?t=392) to see how it works.

### Installation

Expand All @@ -8,9 +11,9 @@ npm install --save-dev redux-devtools-test-generator

### Usage

If you use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev), it's already there, and no additional actions required.
If you use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev), it's already there, and no additional actions required.

With [`redux-devtools`](https://github.com/reduxjs/redux-devtools) and [`redux-devtools-inspector`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector):
With [`redux-devtools`](https://github.com/gaearon/redux-devtools) and [`redux-devtools-inspector`](https://github.com/alexkuz/redux-devtools-inspector):

##### `containers/DevTools.js`

Expand Down Expand Up @@ -41,13 +44,17 @@ If `useCodemirror` specified, include `codemirror/lib/codemirror.css` style and

### Props

| Name | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `assertion` | String template or function with an object argument containing `action`, `prevState`, `curState` keys, which returns a string representing the assertion (see the [function](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/index.js#L1-L3) or [template](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/template.js#L1)). |
| [`wrap`] | Optional string template or function which gets `assertions` argument and returns a string (see the example [function](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/index.js#L5-L14) or [template](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/template.js#L3-L12)). |
| [`useCodemirror`] | Boolean. If specified will use codemirror styles. |
| [`theme`] | String. Name of [the codemirror theme](https://codemirror.net/demo/theme.html). |
Name | Description
------------- | -------------
`assertion` | String template or function with an object argument containing `action`, `prevState`, `curState` keys, which returns a string representing the assertion (see the [function](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/index.js#L1-L3) or [template](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/template.js#L1)).
[`wrap`] | Optional string template or function which gets `assertions` argument and returns a string (see the example [function](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/index.js#L5-L14) or [template](https://github.com/zalmoxisus/redux-devtools-test-generator/blob/master/src/redux/mocha/template.js#L3-L12)).
[`useCodemirror`] | Boolean. If specified will use codemirror styles.
[`theme`] | String. Name of [the codemirror theme](https://codemirror.net/demo/theme.html).

### License

MIT

## Created By

If you like this, follow [@mdiordiev](https://twitter.com/mdiordiev) on twitter.
12 changes: 12 additions & 0 deletions packages/redux-devtools-test-generator/demo/src/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.package.name %></title>
<meta name="description" content="<%= htmlWebpackPlugin.options.package.description %>">
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
</body>
</html>
162 changes: 162 additions & 0 deletions packages/redux-devtools-test-generator/demo/src/js/DemoApp.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
import React from 'react';
import { connect } from 'react-redux';
import pkg from '../../../package.json';
import { Button, Toolbar, Spacer } from 'devui';
import getOptions from './getOptions';
import { push as pushRoute } from 'react-router-redux';

const styles = {
wrapper: {
height: '100vh',
width: '450px',
margin: 'auto',
textAlign: 'center'
},
muted: {
color: '#CCCCCC'
},
link: {
margin: '0 0.5rem',
cursor: 'pointer',
display: 'block'
}
};

const ROOT = '/'; // process.env.NODE_ENV === 'production' ? '/' : '/';

function buildUrl(options) {
return `${ROOT}?` + [
options.useExtension ? 'ext' : '',
options.theme ? 'theme=' + options.theme : '',
options.dark ? 'dark' : ''
].filter(s => s).join('&');
}

class DemoApp extends React.Component {
render() {
const options = getOptions();

return (
<div style={styles.wrapper}>
<h3>
{pkg.name || <span style={styles.muted}>Package Name</span>}
</h3>
<h5>{pkg.description || <span style={styles.muted}>Package Description</span>}</h5>
<Toolbar>
<Spacer />
<Button onClick={this.props.increment}>
Increment
</Button>
<Button onClick={this.props.push}>
Push
</Button>
<Button onClick={this.props.pop}>
Pop
</Button>
<Button onClick={this.props.replace}>
Replace
</Button>
<Button onClick={this.props.changeNested}>
Change Nested
</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.props.pushHugeArray}>
Push Huge Array
</Button>
<Button onClick={this.props.addHugeObect}>
Add Huge Object
</Button>
<Button onClick={this.props.hugePayload}>
Huge Payload
</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.props.addIterator}>
Add Iterator
</Button>
<Button onClick={this.props.addImmutableMap}>
Add Immutable Map
</Button>
<Button onClick={this.props.changeImmutableNested}>
Change Immutable Nested
</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.props.addRecursive}>
Add Recursive
</Button>
<Button onClick={this.props.addFunction}>
Add Function
</Button>
<Button onClick={this.props.addSymbol}>
Add Symbol
</Button>
<Spacer />
</Toolbar>
<Toolbar>
<Spacer />
<Button onClick={this.toggleTimeoutUpdate}>
Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
</Button>
<Button onClick={this.props.shuffleArray}>
Shuffle Array
</Button>
<Spacer />
</Toolbar>
<div>
{options.useExtension ?
<a href={`${ROOT}`} style={styles.link}>Disable browser extension</a> :
<a href={`${ROOT}?ext`} style={styles.link}>Use browser extension</a>
}
</div>
</div>
);
}

toggleTimeoutUpdate = () => {
const enabled = !this.props.timeoutUpdateEnabled;
this.props.toggleTimeoutUpdate(enabled);

if (enabled) {
this.timeout = setInterval(this.props.timeoutUpdate, 1000);
} else {
clearTimeout(this.timeout);
}
}
}

export default connect(
state => state,
{
toggleTimeoutUpdate: timeoutUpdateEnabled => ({
type: 'TOGGLE_TIMEOUT_UPDATE', timeoutUpdateEnabled
}),
timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }),
increment: () => ({ type: 'INCREMENT' }),
push: () => ({ type: 'PUSH' }),
pop: () => ({ type: 'POP' }),
replace: () => ({ type: 'REPLACE' }),
changeNested: () => ({ type: 'CHANGE_NESTED' }),
pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }),
addIterator: () => ({ type: 'ADD_ITERATOR' }),
addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }),
addRecursive: () => ({ type: 'ADD_RECURSIVE' }),
addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }),
changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }),
hugePayload: () => ({
type: 'HUGE_PAYLOAD',
payload: Array.from({ length: 10000 }).map((_, i) => i)
}),
addFunction: () => ({ type: 'ADD_FUNCTION' }),
addSymbol: () => ({ type: 'ADD_SYMBOL' }),
shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }),
pushRoute
}
)(DemoApp);
11 changes: 11 additions & 0 deletions packages/redux-devtools-test-generator/demo/src/js/getOptions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function getOptions() {
return {
useExtension: window.location.search.indexOf('ext') !== -1,
supportImmutable: window.location.search.indexOf('immutable') !== -1,
theme: do {
const match = window.location.search.match(/theme=([^&]+)/);
match ? match[1] : 'inspector'
},
dark: window.location.search.indexOf('dark') !== -1
};
}
91 changes: 91 additions & 0 deletions packages/redux-devtools-test-generator/demo/src/js/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import 'babel-polyfill';
import 'devui/lib/presets';
import React from 'react';
import { render } from 'react-dom';
import { Container } from 'devui';
import DemoApp from './DemoApp';
import { Provider } from 'react-redux';
import reducers from './reducers';
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import createLogger from 'redux-logger';
import { Router, Route, browserHistory } from 'react-router';
import { syncHistoryWithStore, routerReducer, routerMiddleware } from 'react-router-redux';
import { createDevTools, persistState } from 'redux-devtools';
import DevtoolsInspector from 'remotedev-inspector-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
import getOptions from './getOptions';
import TestGenerator from '../../../src';

function getDebugSessionKey() {
const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
return (matches && matches.length > 0)? matches[1] : null;
}

const getDevTools = options =>
createDevTools(
<DockMonitor defaultIsVisible
toggleVisibilityKey='ctrl-h'
changePositionKey='ctrl-q'
changeMonitorKey='ctrl-m'>
<DevtoolsInspector theme={options.theme}
shouldPersistState
invertTheme={!options.dark}
supportImmutable={options.supportImmutable}
tabs={defaultTabs => [{
name: 'Test',
component: TestGenerator
}, ...defaultTabs]} />
</DockMonitor>
);

const ROOT = process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';

let DevTools = getDevTools(getOptions());

const reduxRouterMiddleware = routerMiddleware(browserHistory);

const enhancer = compose(
applyMiddleware(createLogger(), reduxRouterMiddleware),
(...args) => {
const useDevtoolsExtension = !!window.__REDUX_DEVTOOLS_EXTENSION__ && getOptions().useExtension;
const instrument = useDevtoolsExtension ?
window.__REDUX_DEVTOOLS_EXTENSION__() : DevTools.instrument();
return instrument(...args);
},
persistState(getDebugSessionKey())
);

const store = createStore(combineReducers({
...reducers,
routing: routerReducer
}), {}, enhancer);

const history = syncHistoryWithStore(browserHistory, store);

const handleRouterUpdate = () => {
renderApp(getOptions());
};

const router = (
<Router history={history} onUpdate={handleRouterUpdate}>
<Route path={ROOT}
component={DemoApp} />
</Router>
);

const renderApp = options => {
DevTools = getDevTools(options);
const useDevtoolsExtension = !!window.__REDUX_DEVTOOLS_EXTENSION__ && options.useExtension;

return render(
<Provider store={store}>
<Container themeData={{ theme: 'default', scheme: 'default', light: true }}>
{router}
{!useDevtoolsExtension && <DevTools />}
</Container>
</Provider>,
document.getElementById('root')
);
};

renderApp(getOptions());
Loading

0 comments on commit 1ecc56b

Please sign in to comment.