reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-25 19:13:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add tests for redux-devtools-trace-monitor

Browse Source
This commit is contained in:
Zalmoxisus 2018-12-12 22:53:36 +02:00
parent 5e3e308e98
commit 1806f372f1
4 changed files with 1359 additions and 657 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/redux-devtools-trace-monitor/package.json
View File

@ -24,7 +24,6 @@
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
@ -38,16 +37,18 @@
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.11.6",
"babel-runtime": "^6.23.0",
"enzyme": "^2.6.0",
"enzyme-to-json": "^1.3.0",
"enzyme": "^3.0.0",
"enzyme-adapter-react-15": "1.2.0",
"enzyme-to-json": "^3.3.0",
"eslint": "^5.0.0",
"eslint-plugin-flowtype": "3.2.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "7.11.1",
"jest": "^17.0.3",
"jest": "^23.6.0",
"react-addons-test-utils": "^15.4.0",
"react-dom": "^15.4.0",
"react-test-renderer": "^15.3.2",
"rimraf": "^2.5.2"
},
"dependencies": {

49
packages/redux-devtools-trace-monitor/test/StackTraceTab.spec.js Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
import { configure, mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import StackTraceTab from '../src/StackTraceTab';
import Adapter from 'enzyme-adapter-react-15';
configure({ adapter: new Adapter() });
function genAsyncSnapshot(component, done) {
setTimeout(() => {
component.update();
expect(toJson(component)).toMatchSnapshot();
done();
});
}
const actions = {
0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },
1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT_COUNTER' } },
2: {
type: 'PERFORM_ACTION', action: { type: 'INCREMENT_COUNTER' },
stack: 'Error\n at fn1 (app.js:72:24)\n at fn2 (app.js:84:31)'
}
};
describe('StackTraceTab component', () => {
it('should render with no props', (done) => {
const component = mount(<StackTraceTab />);
genAsyncSnapshot(component, done);
});
it('should render with props, but without stack', (done) => {
const component = mount(
<StackTraceTab
actions={actions} action={actions[0].action}
/>
);
genAsyncSnapshot(component, done);
});
it('should render with trace stack', (done) => {
const component = mount(
<StackTraceTab
actions={actions} action={actions[2].action}
/>
);
genAsyncSnapshot(component, done);
});
});

364
packages/redux-devtools-trace-monitor/test/__snapshots__/StackTraceTab.spec.js.snap Normal file
View File

@ -0,0 +1,364 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StackTraceTab component should render with no props 1`] = `
<StackTraceTab>
<div
style={
Object {
"backgroundColor": "white",
"color": "black",
}
}
>
<h2>
Dispatched Action Stack Trace
</h2>
<div
style={
Object {
"display": "flex",
"flexDirection": "column",
}
}
>
<StackTrace
contextSize={3}
editorHandler={[Function]}
errorName="N/A"
stackFrames={Array []}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "1em",
"minHeight": "0px",
"overflow": "auto",
}
}
/>
</StackTrace>
</div>
</div>
</StackTraceTab>
`;
exports[`StackTraceTab component should render with props, but without stack 1`] = `
<StackTraceTab
action={
Object {
"type": "@@INIT",
}
}
actions={
Object {
"0": Object {
"action": Object {
"type": "@@INIT",
},
"type": "PERFORM_ACTION",
},
"1": Object {
"action": Object {
"type": "INCREMENT_COUNTER",
},
"type": "PERFORM_ACTION",
},
"2": Object {
"action": Object {
"type": "INCREMENT_COUNTER",
},
"stack": "Error
at fn1 (app.js:72:24)
at fn2 (app.js:84:31)",
"type": "PERFORM_ACTION",
},
}
}
>
<div
style={
Object {
"backgroundColor": "white",
"color": "black",
}
}
>
<h2>
Dispatched Action Stack Trace
</h2>
<div
style={
Object {
"display": "flex",
"flexDirection": "column",
}
}
>
<StackTrace
contextSize={3}
editorHandler={[Function]}
errorName="N/A"
stackFrames={Array []}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "1em",
"minHeight": "0px",
"overflow": "auto",
}
}
/>
</StackTrace>
</div>
</div>
</StackTraceTab>
`;
exports[`StackTraceTab component should render with trace stack 1`] = `
<StackTraceTab
action={
Object {
"type": "INCREMENT_COUNTER",
}
}
actions={
Object {
"0": Object {
"action": Object {
"type": "@@INIT",
},
"type": "PERFORM_ACTION",
},
"1": Object {
"action": Object {
"type": "INCREMENT_COUNTER",
},
"type": "PERFORM_ACTION",
},
"2": Object {
"action": Object {
"type": "INCREMENT_COUNTER",
},
"stack": "Error
at fn1 (app.js:72:24)
at fn2 (app.js:84:31)",
"type": "PERFORM_ACTION",
},
}
}
>
<div
style={
Object {
"backgroundColor": "white",
"color": "black",
}
}
>
<h2>
Dispatched Action Stack Trace
</h2>
<div
style={
Object {
"display": "flex",
"flexDirection": "column",
}
}
>
<StackTrace
contextSize={3}
editorHandler={[Function]}
errorName="N/A"
stackFrames={
Array [
StackFrame {
"_originalColumnNumber": null,
"_originalFileName": null,
"_originalFunctionName": null,
"_originalLineNumber": null,
"_originalScriptCode": null,
"_scriptCode": null,
"columnNumber": 24,
"fileName": "app.js",
"functionName": "fn1",
"lineNumber": 72,
},
StackFrame {
"_originalColumnNumber": null,
"_originalFileName": null,
"_originalFunctionName": null,
"_originalLineNumber": null,
"_originalScriptCode": null,
"_scriptCode": null,
"columnNumber": 31,
"fileName": "app.js",
"functionName": "fn2",
"lineNumber": 84,
},
]
}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "1em",
"minHeight": "0px",
"overflow": "auto",
}
}
>
<Collapsible
key="bundle-1"
>
<div>
<button
onClick={[Function]}
style={
Object {
"background": "#fff",
"border": "none",
"color": "#293238",
"cursor": "pointer",
"display": "block",
"fontFamily": "Consolas, Menlo, monospace",
"fontSize": "1em",
"lineHeight": "1.5",
"marginBottom": "1.5em",
"padding": "0px",
"textAlign": "left",
"width": "100%",
}
}
>
▶ 2 stack frames were collapsed.
</button>
<div
style={
Object {
"display": "none",
}
}
>
<StackFrame
contextSize={3}
critical={true}
editorHandler={[Function]}
frame={
StackFrame {
"_originalColumnNumber": null,
"_originalFileName": null,
"_originalFunctionName": null,
"_originalLineNumber": null,
"_originalScriptCode": null,
"_scriptCode": null,
"columnNumber": 24,
"fileName": "app.js",
"functionName": "fn1",
"lineNumber": 72,
}
}
key="frame-0"
showCode={false}
>
<div>
<div>
fn1
</div>
<div
style={
Object {
"fontSize": "0.9em",
"marginBottom": "0.9em",
}
}
>
<span
onClick={null}
onKeyDown={null}
style={null}
tabIndex={null}
>
app.js:72:24
</span>
</div>
</div>
</StackFrame>
<StackFrame
contextSize={3}
critical={false}
editorHandler={[Function]}
frame={
StackFrame {
"_originalColumnNumber": null,
"_originalFileName": null,
"_originalFunctionName": null,
"_originalLineNumber": null,
"_originalScriptCode": null,
"_scriptCode": null,
"columnNumber": 31,
"fileName": "app.js",
"functionName": "fn2",
"lineNumber": 84,
}
}
key="frame-1"
showCode={false}
>
<div>
<div>
fn2
</div>
<div
style={
Object {
"fontSize": "0.9em",
"marginBottom": "0.9em",
}
}
>
<span
onClick={null}
onKeyDown={null}
style={null}
tabIndex={null}
>
app.js:84:31
</span>
</div>
</div>
</StackFrame>
<button
onClick={[Function]}
style={
Object {
"background": "#fff",
"border": "none",
"color": "#293238",
"cursor": "pointer",
"display": "block",
"fontFamily": "Consolas, Menlo, monospace",
"fontSize": "1em",
"lineHeight": "1.5",
"marginBottom": "0.6em",
"padding": "0px",
"textAlign": "left",
"width": "100%",
}
}
>
▲ 2 stack frames were expanded.
</button>
</div>
</div>
</Collapsible>
</div>
</StackTrace>
</div>
</div>
</StackTraceTab>
`;

1594
yarn.lock
View File

File diff suppressed because it is too large Load Diff