mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-09-21 03:19:12 +03:00
Add tests for redux-devtools-trace-monitor
This commit is contained in:
Zalmoxisus
parent
5e3e308e98
commit
1806f372f1
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
@ -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>
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user