reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 00:19:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into renovate/graphql-15.x

Browse Source
This commit is contained in:
Nathan Bierema 2021-10-25 10:18:42 -04:00 committed by GitHub
commit 37e6fbd3d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
111 changed files with 2815 additions and 6846 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.yarnrc.yml
View File

@ -17,8 +17,8 @@ packageExtensions:
'@emotion/utils': '^0.11.3'
'redux-persist@^6.0.0':
dependencies:
'@types/react': '^16.14.15'
'react': '^16.14.0'
'@types/react': '*'
'react': '*'
'apollo-server-core@^2.25.2':
dependencies:
'@types/node': '^14.17.15'
@ -51,7 +51,7 @@ packageExtensions:
'@chakra-ui/accordion@^1.3.6':
peerDependencies:
'framer-motion': '3.x || 4.x'
'@mswjs/data@^0.6.0':
'@mswjs/data@^0.7.0':
dependencies:
'debug': '^4.3.2'
'msw@^0.35.0':

22
extension/package.json
View File

@ -45,10 +45,10 @@
"jsan": "^3.1.13",
"localforage": "^1.10.0",
"lodash": "^4.17.21",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-is": "^16.13.1",
"react-is": "^17.0.2",
"react-json-tree": "^0.15.0",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
@ -61,21 +61,21 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@babel/register": "^7.15.3",
"@types/chrome": "^0.0.159",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.2",
"@types/chrome": "^0.0.161",
"@types/lodash": "^4.14.176",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20",
"@types/styled-components": "^5.1.15",
"babel-loader": "^8.2.3",
"bestzip": "^2.2.0",
"chromedriver": "^93.0.1",
"chromedriver": "^94.0.0",
"copy-webpack-plugin": "^9.0.1",
"cross-env": "^7.0.3",
"css-loader": "^6.4.0",
"electron": "^15.3.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.25.2",
@ -93,9 +93,9 @@
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"rimraf": "^3.0.2",
"selenium-webdriver": "^3.6.0",
"selenium-webdriver": "^4.0.0",
"sinon-chrome": "^3.0.1",
"style-loader": "^3.3.0",
"style-loader": "^3.3.1",
"ts-jest": "^27.0.7",
"typescript": "~4.4.4",
"webpack": "^5.59.1",

22
extension/test/app/containers/App.spec.js
View File

@ -1,24 +1,30 @@
import React from 'react';
import { mount } from 'enzyme';
import { render, screen, within } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureStore from '../../../src/app/stores/windowStore';
import App from '../../../src/app/containers/App';
const { store } = configureStore(store);
const component = mount(
describe('App container', () => {
it("should render inspector monitor's component", () => {
render(
<Provider store={store}>
<App position="devtools-left" />
</Provider>
);
describe('App container', () => {
it("should render inspector monitor's component", () => {
expect(component.find('DevtoolsInspector').html()).toBeDefined();
expect(screen.getByTestId('inspector')).toBeDefined();
});
it('should contain an empty action list', () => {
expect(component.find('ActionList').html()).toMatch(
/<div class="actionListRows-[0-9-]+"><\/div>/
render(
<Provider store={store}>
<App position="devtools-left" />
</Provider>
);
const actionList = screen.getByTestId('actionList');
expect(
within(actionList).getByTestId('actionListRows')
).toBeEmptyDOMElement();
});
});

10
extension/test/chrome/extension.spec.js
View File

@ -1,5 +1,6 @@
import { resolve } from 'path';
import webdriver from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome';
import chromedriver from 'chromedriver';
import { switchMonitorTests, delay } from '../utils/e2e';
@ -17,11 +18,9 @@ describe('Chrome extension', function () {
await delay(2000);
driver = new webdriver.Builder()
.usingServer(`http://localhost:${port}`)
.withCapabilities({
chromeOptions: {
args: [`load-extension=${path}`],
},
})
.setChromeOptions(
new chrome.Options().addArguments(`load-extension=${path}`)
)
.forBrowser('chrome')
.build();
});
@ -72,7 +71,6 @@ describe('Chrome extension', function () {
await driver.switchTo().window(tabs[1]);
expect(await driver.getCurrentUrl()).toMatch(url);
await driver.manage().timeouts().pageLoadTimeout(5000);
await driver.switchTo().window(tabs[0]);

17
extension/test/electron/devpanel.spec.js
View File

@ -1,5 +1,6 @@
import { join } from 'path';
import webdriver from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome';
import electronPath from 'electron';
import chromedriver from 'chromedriver';
import { switchMonitorTests, delay } from '../utils/e2e';
@ -16,15 +17,13 @@ describe('DevTools panel for Electron', function () {
await delay(1000);
driver = new webdriver.Builder()
.usingServer(`http://localhost:${port}`)
.withCapabilities({
chromeOptions: {
binary: electronPath,
args: [`app=${join(__dirname, 'fixture')}`],
},
})
.forBrowser('electron')
.setChromeOptions(
new chrome.Options()
.setChromeBinaryPath(electronPath)
.addArguments(`app=${join(__dirname, 'fixture')}`)
)
.forBrowser('chrome')
.build();
await driver.manage().timeouts().setScriptTimeout(10000);
});
afterAll(async () => {
@ -48,8 +47,6 @@ describe('DevTools panel for Electron', function () {
/devtools:\/\/devtools\/bundled\/devtools_app.html/
);
await driver.manage().timeouts().pageLoadTimeout(5000);
const id = await driver.executeAsyncScript(function (callback) {
let attempts = 5;
function showReduxPanel() {

5
extension/test/setup.js
View File

@ -1,8 +1,5 @@
require('@babel/polyfill');
global.chrome = require('sinon-chrome');
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
require('@testing-library/jest-dom');
jest.setTimeout(50000);

4
package.json
View File

@ -1,8 +1,8 @@
{
"private": true,
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",

8
packages/d3-state-visualizer/examples/tree/package.json
View File

@ -32,17 +32,17 @@
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0",
"@types/node": "^14.17.27",
"@types/node": "^14.17.29",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",

8
packages/d3-state-visualizer/package.json
View File

@ -51,16 +51,16 @@
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0",
"@types/node": "^14.17.27",
"@types/node": "^14.17.29",
"@types/ramda": "^0.27.45",
"@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"rimraf": "^3.0.2",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1"

6
packages/d3-state-visualizer/src/charts/tree/tree.ts
View File

@ -388,12 +388,12 @@ export default function (
fill: style.text.colors.default,
cursor: 'pointer',
})
.on('mouseover', function mouseover(this: any) {
.on('mouseover', function mouseover(this: EventTarget) {
d3.select(this).style({
fill: style.text.colors.hover,
});
})
.on('mouseout', function mouseout(this: any) {
.on('mouseout', function mouseout(this: EventTarget) {
d3.select(this).style({
fill: style.text.colors.default,
});
@ -401,7 +401,7 @@ export default function (
if (!tooltipOptions.disabled) {
nodeEnter.call(
d3tooltip(d3, 'tooltip', { ...tooltipOptions, root })
d3tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
.text((d, i) => getTooltipString(d, i, tooltipOptions))
.style(tooltipOptions.style)
);

8
packages/d3tooltip/package.json
View File

@ -44,17 +44,17 @@
"@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0",
"@types/d3": "^3.5.46",
"@types/node": "^14.17.27",
"@types/node": "^14.17.29",
"@types/ramda": "^0.27.45",
"@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"d3": "^3.5.17",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"rimraf": "^3.0.2",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1"

35
packages/d3tooltip/src/index.ts
View File

@ -20,11 +20,40 @@ const defaultOptions: Options<unknown> = {
root: undefined,
};
interface Tip<Datum> {
(selection: Selection<Datum>): void;
attr: (
this: this,
d:
| string
| {
[key: string]:
| Primitive
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
}
) => this;
style: (
this: this,
d:
| string
| {
[key: string]:
| Primitive
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
}
| undefined
) => this;
text: (
this: this,
d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
) => this;
}
export default function tooltip<Datum>(
d3: typeof d3Package,
className = 'tooltip',
options: Partial<Options<Datum>> = {}
) {
): Tip<Datum> {
const { left, top, offset, root } = {
...defaultOptions,
...options,
@ -74,6 +103,7 @@ export default function tooltip<Datum>(
}
tip.attr = function setAttr(
this: typeof tip,
d:
| string
| {
@ -96,6 +126,7 @@ export default function tooltip<Datum>(
};
tip.style = function setStyle(
this: typeof tip,
d:
| string
| {
@ -103,6 +134,7 @@ export default function tooltip<Datum>(
| Primitive
| ((datum: Datum, index: number, outerIndex: number) => Primitive);
}
| undefined
) {
if (is(Object, d)) {
styles = {
@ -118,6 +150,7 @@ export default function tooltip<Datum>(
};
tip.text = function setText(
this: typeof tip,
d: string | ((datum: Datum, index?: number, outerIndex?: number) => string)
) {
text = functor(d);

8
packages/map2tree/package.json
View File

@ -49,10 +49,10 @@
"@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2",
"@types/lodash": "^4.14.176",
"@types/node": "^14.17.27",
"@types/node": "^14.17.29",
"@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
@ -61,7 +61,7 @@
"jest": "^27.3.1",
"rimraf": "^3.0.2",
"ts-jest": "^27.0.7",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1"

4
packages/react-base16-styling/package.json
View File

@ -51,8 +51,8 @@
"@types/color": "^3.0.2",
"@types/jest": "^27.0.2",
"@types/lodash.curry": "^4.1.6",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",

6
packages/react-base16-styling/src/index.ts
View File

@ -63,7 +63,7 @@ const mergeStyling = (
style: defaultStyling as CSS.Properties<string | number>,
});
case 'function':
return (styling: Styling, ...args: any[]) =>
return (styling: Styling, ...args: unknown[]) =>
merger({
className: customStyling as string,
})((defaultStyling as StylingValueFunction)(styling, ...args));
@ -82,7 +82,7 @@ const mergeStyling = (
...(customStyling as CSS.Properties<string | number>),
};
case 'function':
return (styling: Styling, ...args: any[]) =>
return (styling: Styling, ...args: unknown[]) =>
merger({
style: customStyling as CSS.Properties<string | number>,
})((defaultStyling as StylingValueFunction)(styling, ...args));
@ -143,7 +143,7 @@ const mergeStylings = (
const getStylingByKeys = (
mergedStyling: StylingConfig,
keys: (string | false | undefined) | (string | false | undefined)[],
...args: any[]
...args: unknown[]
): Styling => {
if (keys === null) {
return mergedStyling as unknown as Styling;

4
packages/react-base16-styling/src/types.ts
View File

@ -8,7 +8,7 @@ export interface Styling {
export type StylingValueFunction = (
styling: Styling,
...rest: any[]
...rest: unknown[]
) => Partial<Styling>;
export type StylingValue =
@ -28,5 +28,5 @@ export type Theme = string | Base16Theme | StylingConfig;
export type StylingFunction = (
keys: (string | false | undefined) | (string | false | undefined)[],
...rest: any[]
...rest: unknown[]
) => Styling;

16
packages/react-base16-styling/test/index.test.ts
View File

@ -70,8 +70,8 @@ const getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({
testStyle: {
color: base16.base00,
},
testFunc: ({ style }, arg: string) => ({
className: `testClass--${arg}`,
testFunc: ({ style }, arg) => ({
className: `testClass--${arg as string}`,
style: {
...style,
width: 0,
@ -84,8 +84,8 @@ const getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({
additionalStyle: {
border: 0,
},
testFuncNoStyle: (_, arg: string) => ({
className: `testClass--${arg}`,
testFuncNoStyle: (_, arg) => ({
className: `testClass--${arg as string}`,
}),
});
@ -126,15 +126,15 @@ test('createStyling (custom)', () => {
let customStyling = styling({
testClass: 'customClass',
testStyle: { height: 0 },
testFunc: (styling: Styling, arg: string) => ({
className: `${styling.className!} customClass--${arg}`,
testFunc: (styling: Styling, arg) => ({
className: `${styling.className!} customClass--${arg as string}`,
style: {
...styling.style,
border: 0,
},
}),
testFuncNoStyle: (styling: Styling, arg: string) => ({
className: `${styling.className!} customClass--${arg}`,
testFuncNoStyle: (styling: Styling, arg) => ({
className: `${styling.className!} customClass--${arg as string}`,
style: {
...styling.style,
border: 0,

20
packages/react-dock/demo/package.json
View File

@ -10,12 +10,12 @@
"type-check": "tsc --noEmit"
},
"dependencies": {
"react": "^16.14.0",
"react-bootstrap": "^1.6.4",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0",
"react-dock": "^0.4.0",
"react-dom": "^16.14.0",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-is": "^16.13.1",
"react-is": "^17.0.2",
"styled-components": "^5.3.3"
},
"devDependencies": {
@ -23,21 +23,21 @@
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@types/node": "^14.17.27",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/node": "^14.17.29",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/styled-components": "^5.1.15",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",

12
packages/react-dock/package.json
View File

@ -49,17 +49,17 @@
"@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2",
"@types/lodash.debounce": "^4.0.6",
"@types/react": "^16.14.18",
"@types/react-test-renderer": "^16.9.5",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@types/react": "^17.0.32",
"@types/react-test-renderer": "^17.0.1",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1",
"react": "^16.14.0",
"react-test-renderer": "^16.14.0",
"react": "^17.0.2",
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2",
"ts-jest": "^27.0.7",
"typescript": "~4.4.4"

16
packages/react-json-tree/examples/package.json
View File

@ -20,9 +20,9 @@
},
"dependencies": {
"immutable": "^4.0.0",
"react": "^16.14.0",
"react": "^17.0.2",
"react-base16-styling": "^0.8.0",
"react-dom": "^16.14.0",
"react-dom": "^17.0.2",
"react-json-tree": "^0.15.0"
},
"devDependencies": {
@ -30,20 +30,20 @@
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@types/node": "^14.17.27",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/node": "^14.17.29",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",

3
packages/react-json-tree/examples/src/App.tsx
View File

@ -28,7 +28,8 @@ const getValueLabelStyle: StylingValue = ({ style }, nodeType, keyPath) => ({
style: {
...style,
color:
!Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2)
!Number.isNaN((keyPath as unknown[])[0]) &&
!(parseInt(keyPath as string, 10) % 2)
? '#33F'
: style!.color,
},

16
packages/react-json-tree/package.json
View File

@ -54,23 +54,23 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2",
"@types/node": "^14.17.27",
"@types/react": "^16.14.18",
"@types/react-test-renderer": "^16.9.5",
"@types/node": "^14.17.29",
"@types/react": "^17.0.32",
"@types/react-test-renderer": "^17.0.1",
"@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1",
"react": "^16.14.0",
"react-test-renderer": "^16.14.0",
"react": "^17.0.2",
"react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2",
"ts-jest": "^27.0.7",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1"

14
packages/react-json-tree/src/createStylingFromTheme.ts
View File

@ -55,7 +55,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
backgroundColor: colors.BACKGROUND_COLOR,
},
value: ({ style }, nodeType, keyPath: (string | number)[]) => ({
value: ({ style }, nodeType, keyPath) => ({
style: {
...style,
paddingTop: '0.25em',
@ -64,7 +64,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
WebkitUserSelect: 'text',
MozUserSelect: 'text',
wordWrap: 'break-word',
paddingLeft: keyPath.length > 1 ? '2.125em' : '1.25em',
paddingLeft: (keyPath as unknown[]).length > 1 ? '2.125em' : '1.25em',
textIndent: '-0.5em',
wordBreak: 'break-all',
},
@ -136,18 +136,12 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
left: '-0.4em',
},
nestedNode: (
{ style },
keyPath: (string | number)[],
nodeType,
expanded,
expandable
) => ({
nestedNode: ({ style }, keyPath, nodeType, expanded, expandable) => ({
style: {
...style,
position: 'relative',
paddingTop: '0.25em',
marginLeft: keyPath.length > 1 ? '0.875em' : 0,
marginLeft: (keyPath as unknown[]).length > 1 ? '0.875em' : 0,
paddingLeft: !expandable ? '1.125em' : 0,
},
}),

3
packages/react-json-tree/src/getCollectionEntries.ts
View File

@ -1,6 +1,7 @@
function getLength(type: string, collection: any) {
if (type === 'Object') {
return Object.keys(collection).length;
// eslint-disable-next-line @typescript-eslint/ban-types
return Object.keys(collection as {}).length;
} else if (type === 'Array') {
return (collection as unknown[]).length;
}

30
packages/redux-devtools-app/package.json
View File

@ -54,7 +54,7 @@
"lodash": "^4.17.21",
"prop-types": "^15.7.2",
"react-icons": "^4.3.1",
"react-is": "^16.13.1",
"react-is": "^17.0.2",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-persist": "^6.0.0",
@ -67,45 +67,43 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@rjsf/core": "^3.2.0",
"@types/enzyme": "^3.10.10",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.2",
"@types/jest": "^27.0.2",
"@types/jsan": "^3.1.2",
"@types/json-schema": "^7.0.9",
"@types/lodash": "^4.14.176",
"@types/node": "^14.17.27",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/node": "^14.17.29",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20",
"@types/socketcluster-client": "^13.0.5",
"@types/styled-components": "^5.1.15",
"@types/testing-library__jest-dom": "^5.14.1",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@types/webpack-env": "^1.16.3",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"css-loader": "^6.4.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-loader": "^2.1.2",
"html-loader": "^3.0.0",
"html-webpack-plugin": "^5.4.0",
"jest": "^27.3.1",
"path-browserify": "^1.0.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
"style-loader": "^3.3.0",
"style-loader": "^3.3.1",
"styled-components": "^5.3.3",
"ts-jest": "^27.0.7",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"url-loader": "^4.1.1",
"webpack": "^5.59.1",

29
packages/redux-devtools-app/src/containers/monitors/InspectorWrapper/VisualDiffTab.tsx
View File

@ -1,7 +1,8 @@
import React, { Component } from 'react';
import { Delta, formatters } from 'jsondiffpatch';
import styled from 'styled-components';
import styled, { ThemedStyledProps } from 'styled-components';
import { effects } from '@redux-devtools/ui';
import { Theme } from '@redux-devtools/ui/lib/themes/default';
export const StyledContainer = styled.div`
.jsondiffpatch-delta {
@ -18,7 +19,8 @@ export const StyledContainer = styled.div`
padding: 2px 3px;
border-radius: 3px;
position: relative;
color: ${(props) => props.theme.base07};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
display: inline-block;
}
@ -42,20 +44,25 @@ export const StyledContainer = styled.div`
.jsondiffpatch-modified .jsondiffpatch-right-value:before {
vertical-align: top;
padding: 2px;
color: ${(props) => props.theme.base0E};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0E};
content: ' => ';
}
.jsondiffpatch-added .jsondiffpatch-value pre,
.jsondiffpatch-modified .jsondiffpatch-right-value pre,
.jsondiffpatch-textdiff-added {
background: ${(props) => effects.color(props.theme.base0B, 'alpha', 0.2)};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
background: ${(props: ThemedStyledProps<{}, Theme>) =>
effects.color(props.theme.base0B, 'alpha', 0.2)};
}
.jsondiffpatch-deleted pre,
.jsondiffpatch-modified .jsondiffpatch-left-value pre,
.jsondiffpatch-textdiff-deleted {
background: ${(props) => effects.color(props.theme.base08, 'alpha', 0.2)};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
background: ${(props: ThemedStyledProps<{}, Theme>) =>
effects.color(props.theme.base08, 'alpha', 0.2)};
text-decoration: line-through;
}
@ -122,12 +129,14 @@ export const StyledContainer = styled.div`
padding: 2px 0;
padding-right: 5px;
vertical-align: top;
color: ${(props) => props.theme.base0D};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0D};
}
.jsondiffpatch-property-name:after {
content: ': ';
color: ${(props) => props.theme.base07};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
}
.jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
@ -163,7 +172,8 @@ export const StyledContainer = styled.div`
}
.jsondiffpatch-value pre:after {
color: ${(props) => props.theme.base07};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base07};
content: ',';
}
@ -186,7 +196,8 @@ export const StyledContainer = styled.div`
.jsondiffpatch-moved .jsondiffpatch-moved-destination {
display: inline-block;
background: ${(props) => props.theme.base0A};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
background: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0A};
}
.jsondiffpatch-moved .jsondiffpatch-moved-destination:before {

2
packages/redux-devtools-app/src/reducers/instances.ts
View File

@ -129,7 +129,7 @@ function updateState(
newState = recompute(
newState,
request.batched ? payload : (payload as unknown as State[])[i],
action[i],
action[i] as PerformAction<Action<unknown>>,
newState.nextActionId + 1,
maxAge,
isExcess

2
packages/redux-devtools-app/src/store/configureStore.ts
View File

@ -40,7 +40,7 @@ export default function configureStore(
module.hot.accept('../reducers', () => {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const nextReducer = require('../reducers'); // eslint-disable-line global-require
store.replaceReducer(nextReducer);
store.replaceReducer(nextReducer as Reducer<StoreState, StoreAction>);
});
}
}

38
packages/redux-devtools-app/test/app.spec.tsx
View File

@ -1,8 +1,7 @@
import React, { Component } from 'react';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { mount, ReactWrapper } from 'enzyme';
// import { mountToJson } from 'enzyme-to-json';
import { render, screen, within } from '@testing-library/react';
import App from '../src/containers/App';
import api from '../src/middlewares/api';
import exportState from '../src/middlewares/exportState';
@ -10,39 +9,28 @@ import rootReducer from '../src/reducers';
import { DATA_TYPE_KEY } from '../src/constants/dataTypes';
import stringifyJSON from '../src/utils/stringifyJSON';
let wrapper: ReactWrapper<unknown, unknown, Component>;
const store = createStore(rootReducer, applyMiddleware(exportState, api));
describe('App container', () => {
beforeAll(() => {
wrapper = mount(
it("should render inspector monitor's wrapper", () => {
render(
<Provider store={store}>
<App />
</Provider>
);
});
/*
it('should render the App', () => {
expect(mountToJson(wrapper)).toMatchSnapshot();
});
*/
it("should render inspector monitor's wrapper", () => {
expect(wrapper.find('DevtoolsInspector').html()).toBeDefined();
expect(screen.getByTestId('inspector')).toBeDefined();
});
it('should contain an empty action list', () => {
render(
<Provider store={store}>
<App />
</Provider>
);
const actionList = screen.getByTestId('actionList');
expect(
wrapper
.find('ActionList')
.findWhere((n) => {
const { className } = n.props();
return className && className.startsWith('actionListRows-');
})
.html()
).toMatch(/<div class="actionListRows-\d-\d-\d+"><\/div>/);
within(actionList).getByTestId('actionListRows')
).toBeEmptyDOMElement();
});
});

5
packages/redux-devtools-app/test/setup.ts
View File

@ -1,4 +1 @@
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
import '@testing-library/jest-dom';

8
packages/redux-devtools-chart-monitor/package.json
View File

@ -50,13 +50,13 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0",
"@types/react": "^16.14.18",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"react": "^16.14.0",
"react": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"typescript": "~4.4.4"

14
packages/redux-devtools-cli/package.json
View File

@ -41,7 +41,7 @@
},
"dependencies": {
"@redux-devtools/app": "^1.0.0-8",
"@types/react": "^16.14.18",
"@types/react": "^17.0.32",
"apollo-server": "^2.25.2",
"apollo-server-express": "^2.25.2",
"body-parser": "^1.19.0",
@ -56,10 +56,10 @@
"lodash": "^4.17.21",
"minimist": "^1.2.5",
"morgan": "^1.10.0",
"open": "^8.3.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-is": "^16.13.1",
"open": "^8.4.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"semver": "^7.3.5",
"socketcluster": "^14.4.2",
"sqlite3": "^5.0.2",
@ -82,8 +82,8 @@
"@types/styled-components": "^5.1.15",
"@types/supertest": "^2.0.11",
"@types/uuid": "^8.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",

8
packages/redux-devtools-cli/src/bin/injectServer.ts
View File

@ -21,7 +21,7 @@ const serverFlags: { [moduleName: string]: { [version: string]: string } } = {
},
};
function getModuleVersion(modulePath: string) {
function getModuleVersion(modulePath: string): string {
return JSON.parse(
fs.readFileSync(path.join(modulePath, 'package.json'), 'utf-8')
).version;
@ -41,14 +41,14 @@ function getServerFlag(moduleName: string, version: string): string {
export const dir = 'local-cli/server';
export const file = 'server.js';
export const fullPath = path.join(exports.dir, exports.file);
export const fullPath = path.join(dir, file);
export function inject(
modulePath: string,
options: Options,
moduleName: string
) {
const filePath = path.join(modulePath, exports.fullPath);
const filePath = path.join(modulePath, fullPath);
if (!fs.existsSync(filePath)) return false;
const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));
@ -85,7 +85,7 @@ export function revert(
options: Options,
moduleName: string
) {
const filePath = path.join(modulePath, exports.fullPath);
const filePath = path.join(modulePath, fullPath);
if (!fs.existsSync(filePath)) return false;
const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));

2
packages/redux-devtools-cli/src/bin/openApp.ts
View File

@ -8,7 +8,7 @@ export default async function openApp(app: true | string, options: Options) {
try {
const port = options.port ? `--port=${options.port}` : '';
// eslint-disable-next-line @typescript-eslint/no-var-requires
spawn.sync(require('electron'), [
spawn.sync(require('electron') as string, [
path.join(__dirname, '..', '..', 'app'),
port,
]);

10
packages/redux-devtools-cli/src/bin/redux-devtools.ts
View File

@ -17,8 +17,8 @@ function readFile(filePath: string) {
}
if (argv.protocol === 'https') {
argv.key = argv.key ? readFile(argv.key) : null;
argv.cert = argv.cert ? readFile(argv.cert) : null;
argv.key = argv.key ? readFile(argv.key as string) : null;
argv.cert = argv.cert ? readFile(argv.cert as string) : null;
}
function log(pass: boolean, msg: string) {
@ -76,13 +76,13 @@ function injectRN(type: string, msg: string) {
if (argv.revert) {
injectRN(
argv.revert,
argv.revert as string,
'Revert injection of ReduxDevTools server from React Native local server'
);
}
if (argv.injectserver) {
injectRN(
argv.injectserver,
argv.injectserver as string,
'Inject ReduxDevTools server into React Native local server'
);
}
@ -91,7 +91,7 @@ if (argv.injectserver) {
server(argv).then(function (r) {
if (argv.open && argv.open !== 'false') {
r.on('ready', async function () {
await openApp(argv.open, options);
await openApp(argv.open as string, options);
});
}
});

6
packages/redux-devtools-cli/src/db/connector.ts
View File

@ -1,11 +1,11 @@
import path from 'path';
import knexModule from 'knex';
import knexModule, { Config } from 'knex';
import { SCServer } from 'socketcluster-server';
export default function connector(options: SCServer.SCServerOptions) {
const dbOptions = options.dbOptions;
const dbOptions = options.dbOptions as Config;
dbOptions.useNullAsDefault = true;
if (!dbOptions.migrate) {
if (!(dbOptions as any).migrate) {
return knexModule(dbOptions);
}

2
packages/redux-devtools-cli/src/options.ts
View File

@ -31,7 +31,7 @@ export interface Options {
export default function getOptions(argv: { [arg: string]: any }): Options {
let dbOptions = argv.dbOptions;
if (typeof dbOptions === 'string') {
dbOptions = require(path.resolve(process.cwd(), argv.dbOptions));
dbOptions = require(path.resolve(process.cwd(), argv.dbOptions as string));
} else if (typeof dbOptions === 'undefined') {
dbOptions = require('../defaultDbOptions.json');
}

19
packages/redux-devtools-cli/src/routes.ts
View File

@ -1,11 +1,12 @@
import path from 'path';
import express from 'express';
import morgan from 'morgan';
import * as http from 'http';
import bodyParser from 'body-parser';
import cors from 'cors';
import { SCServer } from 'socketcluster-server';
import graphqlMiddleware from './middleware/graphql';
import { ReportBaseFields, Store } from './store';
import { AddData, ReportBaseFields, Store } from './store';
const app = express.Router();
@ -27,7 +28,15 @@ function routes(
if (logHTTPRequests) {
if (typeof logHTTPRequests === 'object')
app.use(morgan('combined', logHTTPRequests));
app.use(
morgan(
'combined',
logHTTPRequests as morgan.Options<
http.IncomingMessage,
http.ServerResponse
>
)
);
else app.use(morgan('combined'));
}
@ -55,7 +64,7 @@ function routes(
switch (req.body.op) {
case 'get':
store
.get(req.body.id)
.get(req.body.id as string)
.then(function (r) {
res.send(r || {});
})
@ -66,7 +75,7 @@ function routes(
break;
case 'list':
store
.list(req.body.query, req.body.fields)
.list(req.body.query, req.body.fields as string[])
.then(function (r) {
res.send(r);
})
@ -77,7 +86,7 @@ function routes(
break;
default:
store
.add(req.body)
.add(req.body as AddData)
.then(function (r) {
res.send({
id: (r as ReportBaseFields).id,

2
packages/redux-devtools-cli/src/store.ts
View File

@ -62,7 +62,7 @@ function get(id: string): Promise<Report | { error: string }> {
return knex(reports).where('id', id).first();
}
interface AddData {
export interface AddData {
type: ReportType | null;
title: string | null;
description: string | null;

2
packages/redux-devtools-cli/src/worker.ts
View File

@ -60,7 +60,7 @@ class Worker extends SCWorker {
});
respond(null, channelToWatch);
});
socket.on('getReport', function (id, respond) {
socket.on('getReport', function (id: string, respond) {
store
.get(id)
.then(function (data) {

8
packages/redux-devtools-dock-monitor/package.json
View File

@ -51,13 +51,13 @@
"@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0",
"@types/parse-key": "^0.2.0",
"@types/react": "^16.14.18",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"react": "^16.14.0",
"react": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"typescript": "~4.4.4"

18
packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
View File

@ -19,8 +19,8 @@
"history": "^4.10.1",
"immutable": "^4.0.0",
"lodash.shuffle": "^4.2.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"react-router": "^5.2.1",
"redux": "^4.1.1",
@ -33,16 +33,16 @@
"@babel/preset-typescript": "^7.15.0",
"@types/history": "^4.7.9",
"@types/lodash.shuffle": "^4.2.6",
"@types/node": "^14.17.27",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/node": "^14.17.29",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20",
"@types/react-router": "^5.1.17",
"@types/redux-logger": "^3.0.9",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"css-loader": "^6.4.0",
"eslint": "^7.32.0",
@ -50,8 +50,8 @@
"eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0",
"style-loader": "^3.3.0",
"ts-node": "^10.3.0",
"style-loader": "^3.3.1",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",

1
packages/redux-devtools-inspector-monitor-test-tab/jest.config.js
View File

@ -1,6 +1,5 @@
module.exports = {
preset: 'ts-jest',
setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
testEnvironment: 'jsdom',
moduleNameMapper: {
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',

16
packages/redux-devtools-inspector-monitor-test-tab/package.json
View File

@ -60,26 +60,22 @@
"@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0",
"@redux-devtools/inspector-monitor": "^1.0.0",
"@types/enzyme": "^3.10.10",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@testing-library/react": "^12.1.2",
"@types/es6template": "^1.0.0",
"@types/jest": "^27.0.2",
"@types/jsan": "^3.1.2",
"@types/object-path": "^0.11.1",
"@types/react": "^16.14.18",
"@types/react": "^17.0.32",
"@types/simple-diff": "^1.6.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"ts-jest": "^27.0.7",

31
packages/redux-devtools-inspector-monitor-test-tab/test/TestGenerator.spec.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { render } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render } from '@testing-library/react';
import { PerformAction } from '@redux-devtools/core';
import { Action } from 'redux';
import TestGenerator from '../src/TestGenerator';
@ -30,12 +29,12 @@ const TestGeneratorAsAny = TestGenerator as any;
describe('TestGenerator component', () => {
it('should show warning message when no params provided', () => {
const component = render(<TestGeneratorAsAny useCodemirror={false} />);
expect(renderToJson(component)).toMatchSnapshot();
const { container } = render(<TestGeneratorAsAny useCodemirror={false} />);
expect(container.firstChild).toMatchSnapshot();
});
it('should be empty when no actions provided', () => {
const component = render(
const { container } = render(
<TestGeneratorAsAny
assertion={fnTemplate.assertion}
dispatcher={fnTemplate.dispatcher}
@ -43,11 +42,11 @@ describe('TestGenerator component', () => {
useCodemirror={false}
/>
);
expect(renderToJson(component)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it("should match function template's test for first action", () => {
const component = render(
const { container } = render(
<TestGeneratorAsAny
assertion={fnTemplate.assertion}
dispatcher={fnTemplate.dispatcher}
@ -58,11 +57,11 @@ describe('TestGenerator component', () => {
useCodemirror={false}
/>
);
expect(renderToJson(component)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it("should match string template's test for first action", () => {
const component = render(
const { container } = render(
<TestGeneratorAsAny
assertion={strTemplate.assertion}
dispatcher={strTemplate.dispatcher}
@ -73,11 +72,11 @@ describe('TestGenerator component', () => {
selectedActionId={1}
/>
);
expect(renderToJson(component)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should generate test for the last action when selectedActionId not specified', () => {
const component = render(
const { container } = render(
<TestGeneratorAsAny
assertion={fnTemplate.assertion}
dispatcher={fnTemplate.dispatcher}
@ -87,11 +86,11 @@ describe('TestGenerator component', () => {
useCodemirror={false}
/>
);
expect(renderToJson(component)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should generate test for vanilla js class', () => {
const component = render(
const { container } = render(
<TestGeneratorAsAny
assertion={fnVanillaTemplate.assertion}
dispatcher={fnVanillaTemplate.dispatcher}
@ -104,11 +103,11 @@ describe('TestGenerator component', () => {
useCodemirror={false}
/>
);
expect(renderToJson(component)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should generate test for vanilla js class with string template', () => {
const component = render(
const { container } = render(
<TestGeneratorAsAny
assertion={strVanillaTemplate.assertion}
dispatcher={strVanillaTemplate.dispatcher}
@ -121,6 +120,6 @@ describe('TestGenerator component', () => {
useCodemirror={false}
/>
);
expect(renderToJson(component)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

14
packages/redux-devtools-inspector-monitor-test-tab/test/__snapshots__/TestGenerator.spec.tsx.snap
View File

@ -2,13 +2,13 @@
exports[`TestGenerator component should be empty when no actions provided 1`] = `
<textarea
style="padding:10px;width:100%;height:100%"
style="padding: 10px; width: 100%; height: 100%;"
/>
`;
exports[`TestGenerator component should generate test for the last action when selectedActionId not specified 1`] = `
<textarea
style="padding:10px;width:100%;height:100%"
style="padding: 10px; width: 100%; height: 100%;"
>
import expect from 'expect';
import reducers from '../../reducers';
@ -26,7 +26,7 @@ expect(state).toEqual({counter:1});
exports[`TestGenerator component should generate test for vanilla js class 1`] = `
<textarea
style="padding:10px;width:100%;height:100%"
style="padding: 10px; width: 100%; height: 100%;"
>
import expect from 'expect';
import SomeStore from '../../stores/SomeStore';
@ -44,7 +44,7 @@ expect(store.counter).toEqual(1);
exports[`TestGenerator component should generate test for vanilla js class with string template 1`] = `
<textarea
style="padding:10px;width:100%;height:100%"
style="padding: 10px; width: 100%; height: 100%;"
>
import expect from 'expect';
import SomeStore from '../../stores/SomeStore';
@ -62,7 +62,7 @@ describe('SomeStore', () =&gt; {
exports[`TestGenerator component should match function template's test for first action 1`] = `
<textarea
style="padding:10px;width:100%;height:100%"
style="padding: 10px; width: 100%; height: 100%;"
>
import expect from 'expect';
import reducers from '../../reducers';
@ -80,7 +80,7 @@ expect(state).toEqual({counter:1});
exports[`TestGenerator component should match string template's test for first action 1`] = `
<textarea
style="padding:10px;width:100%;height:100%"
style="padding: 10px; width: 100%; height: 100%;"
>
import expect from 'expect';
import reducers from '../../reducers';
@ -98,6 +98,6 @@ describe('reducers', () =&gt; {
exports[`TestGenerator component should show warning message when no params provided 1`] = `
<textarea
style="padding:10px;width:100%;height:100%"
style="padding: 10px; width: 100%; height: 100%;"
/>
`;

4
packages/redux-devtools-inspector-monitor-test-tab/test/setup.ts
View File

@ -1,4 +0,0 @@
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

21
packages/redux-devtools-inspector-monitor-trace-tab/package.json
View File

@ -28,9 +28,10 @@
"dependencies": {
"@babel/code-frame": "^7.15.8",
"@babel/runtime": "^7.15.4",
"@types/chrome": "^0.0.159",
"@types/chrome": "^0.0.161",
"anser": "^2.1.0",
"html-entities": "^2.3.2",
"path-browserify": "^1.0.1",
"redux-devtools-themes": "^1.0.0",
"source-map": "^0.5.7"
},
@ -43,27 +44,23 @@
"@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0",
"@redux-devtools/inspector-monitor": "^1.0.0",
"@testing-library/react": "^12.1.2",
"@types/babel__code-frame": "^7.0.3",
"@types/enzyme": "^3.10.10",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/html-entities": "^1.3.4",
"@types/jest": "^27.0.2",
"@types/react": "^16.14.18",
"@types/react": "^17.0.32",
"@types/redux-devtools-themes": "^1.0.0",
"@types/source-map": "0.5.2",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-test-renderer": "^16.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-test-renderer": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"ts-jest": "^27.0.7",

4
packages/redux-devtools-inspector-monitor-trace-tab/src/StackTraceTab.tsx
View File

@ -68,10 +68,6 @@ export default class StackTraceTab<
getStackFrames(deserializedError)
.then((stackFrames) => {
/* eslint-disable no-console */
if (process.env.NODE_ENV === 'development')
console.log('Stack frames: ', stackFrames);
/* eslint-enable no-console */
this.setState({
stackFrames: stackFrames!,
currentError: deserializedError,

6
packages/redux-devtools-inspector-monitor-trace-tab/src/openFile.ts
View File

@ -88,7 +88,6 @@ function openInEditor(editor: string, path: string, stackFrame: StackFrame) {
// sublime, emacs, macvim, textmate + custom like https://github.com/eclemens/atom-url-handler
url = `${editor}://open/?url=file://${projectPath}${filePath}&line=${line}&column=${column}`;
}
if (process.env.NODE_ENV === 'development') console.log(url); // eslint-disable-line no-console
if (chrome.devtools && !isFF) {
if (chrome.tabs) openAndCloseTab(url);
else window.open(url);
@ -102,9 +101,6 @@ export default function openFile(
lineNumber: number,
stackFrame: StackFrame
) {
if (process.env.NODE_ENV === 'development')
// eslint-disable-next-line no-console
console.log(fileName, lineNumber, stackFrame);
if (!chrome || !chrome.storage) return; // TODO: Pass editor settings for using outside of browser extension
const storage = isFF
? chrome.storage.local
@ -118,7 +114,7 @@ export default function openFile(
typeof editor === 'string' &&
/^\w{1,30}$/.test(editor)
) {
openInEditor(editor.toLowerCase(), projectPath, stackFrame);
openInEditor(editor.toLowerCase(), projectPath as string, stackFrame);
} else {
if (
chrome.devtools &&

150
packages/redux-devtools-inspector-monitor-trace-tab/src/path-browserify.ts Normal file
View File

@ -0,0 +1,150 @@
declare module 'path-browserify' {
/**
* A parsed path object generated by path.parse() or consumed by path.format().
*/
interface ParsedPath {
/**
* The root of the path such as '/' or 'c:\'
*/
root: string;
/**
* The full directory path such as '/home/user/dir' or 'c:\path\dir'
*/
dir: string;
/**
* The file name including extension (if any) such as 'index.html'
*/
base: string;
/**
* The file extension (if any) such as '.html'
*/
ext: string;
/**
* The file name without extension (if any) such as 'index'
*/
name: string;
}
interface FormatInputPathObject {
/**
* The root of the path such as '/' or 'c:\'
*/
root?: string | undefined;
/**
* The full directory path such as '/home/user/dir' or 'c:\path\dir'
*/
dir?: string | undefined;
/**
* The file name including extension (if any) such as 'index.html'
*/
base?: string | undefined;
/**
* The file extension (if any) such as '.html'
*/
ext?: string | undefined;
/**
* The file name without extension (if any) such as 'index'
*/
name?: string | undefined;
}
interface PlatformPath {
/**
* Normalize a string path, reducing '..' and '.' parts.
* When multiple slashes are found, they're replaced by a single one; when the path contains a trailing slash, it is preserved. On Windows backslashes are used.
*
* @param p string path to normalize.
*/
normalize(p: string): string;
/**
* Join all arguments together and normalize the resulting path.
* Arguments must be strings. In v0.8, non-string arguments were silently ignored. In v0.10 and up, an exception is thrown.
*
* @param paths paths to join.
*/
join(...paths: string[]): string;
/**
* The right-most parameter is considered {to}. Other parameters are considered an array of {from}.
*
* Starting from leftmost {from} parameter, resolves {to} to an absolute path.
*
* If {to} isn't already absolute, {from} arguments are prepended in right to left order,
* until an absolute path is found. If after using all {from} paths still no absolute path is found,
* the current working directory is used as well. The resulting path is normalized,
* and trailing slashes are removed unless the path gets resolved to the root directory.
*
* @param pathSegments string paths to join. Non-string arguments are ignored.
*/
resolve(...pathSegments: string[]): string;
/**
* Determines whether {path} is an absolute path. An absolute path will always resolve to the same location, regardless of the working directory.
*
* @param path path to test.
*/
isAbsolute(p: string): boolean;
/**
* Solve the relative path from {from} to {to}.
* At times we have two absolute paths, and we need to derive the relative path from one to the other. This is actually the reverse transform of path.resolve.
*/
relative(from: string, to: string): string;
/**
* Return the directory name of a path. Similar to the Unix dirname command.
*
* @param p the path to evaluate.
*/
dirname(p: string): string;
/**
* Return the last portion of a path. Similar to the Unix basename command.
* Often used to extract the file name from a fully qualified path.
*
* @param p the path to evaluate.
* @param ext optionally, an extension to remove from the result.
*/
basename(p: string, ext?: string): string;
/**
* Return the extension of the path, from the last '.' to end of string in the last portion of the path.
* If there is no '.' in the last portion of the path or the first character of it is '.', then it returns an empty string
*
* @param p the path to evaluate.
*/
extname(p: string): string;
/**
* The platform-specific file separator. '\\' or '/'.
*/
readonly sep: string;
/**
* The platform-specific file delimiter. ';' or ':'.
*/
readonly delimiter: string;
/**
* Returns an object from a path string - the opposite of format().
*
* @param pathString path to evaluate.
*/
parse(p: string): ParsedPath;
/**
* Returns a path string from an object - the opposite of parse().
*
* @param pathString path to evaluate.
*/
format(pP: FormatInputPathObject): string;
/**
* On Windows systems only, returns an equivalent namespace-prefixed path for the given path.
* If path is not a string, path will be returned without modifications.
* This method is meaningful only on Windows system.
* On POSIX systems, the method is non-operational and always returns path without modifications.
*/
toNamespacedPath(path: string): string;
/**
* Posix specific pathing.
* Same as parent object on posix.
*/
readonly posix: PlatformPath;
/**
* Windows specific pathing.
* Same as parent object on windows
*/
readonly win32: PlatformPath;
}
const path: PlatformPath;
export = path;
}

6
packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackTrace.tsx
View File

@ -94,7 +94,11 @@ class StackTrace extends Component<Props> {
}
render() {
return <div style={traceStyle}>{this.renderFrames()}</div>;
return (
<div data-testid="stack-trace" style={traceStyle}>
{this.renderFrames()}
</div>
);
}
}

9
packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/getSourceMap.ts
View File

@ -12,7 +12,7 @@ import { RawSourceMap, SourceMapConsumer } from 'source-map';
*
* This exposes methods which will be indifferent to changes made in <code>{@link https://github.com/mozilla/source-map source-map}</code>.
*/
class SourceMap {
export class SourceMap {
__source_map: SourceMapConsumer;
constructor(sourceMap: SourceMapConsumer) {
@ -74,7 +74,7 @@ class SourceMap {
}
}
function extractSourceMapUrl(
export function extractSourceMapUrl(
fileUri: string,
fileContents: string
): Promise<string> {
@ -98,7 +98,7 @@ function extractSourceMapUrl(
* @param {string} fileUri The URI of the source file.
* @param {string} fileContents The contents of the source file.
*/
async function getSourceMap(
export async function getSourceMap(
//function getSourceMap(
fileUri: string,
fileContents: string
@ -120,7 +120,7 @@ async function getSourceMap(
const index = fileUri.lastIndexOf('/');
const url = fileUri.substring(0, index + 1) + sm;
const obj = await fetch(url).then((res) => res.json());
return new SourceMap(new SourceMapConsumer(obj));
return new SourceMap(new SourceMapConsumer(obj as RawSourceMap));
}
/*
@ -153,5 +153,4 @@ async function getSourceMap(
*/
}
export { extractSourceMapUrl, getSourceMap };
export default getSourceMap;

13
packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/mapper.ts
View File

@ -6,7 +6,7 @@
*/
import StackFrame from './stack-frame';
import { getSourceMap } from './getSourceMap';
import { getSourceMap, SourceMap } from './getSourceMap';
import { getLinesAround } from './getLinesAround';
/**
@ -18,7 +18,12 @@ async function map(
frames: StackFrame[],
contextLines = 3
): Promise<StackFrame[]> {
const cache: any = {};
const cache: {
[fileName: string]: {
readonly fileSource: string;
readonly map: SourceMap;
};
} = {};
const files: string[] = [];
frames.forEach((frame) => {
const { fileName } = frame;
@ -45,7 +50,7 @@ async function map(
}
const { source, line, column } = map.getOriginalPosition(
lineNumber,
columnNumber
columnNumber!
);
const originalSource = source == null ? [] : map.getSource(source) || [];
return new StackFrame(
@ -58,7 +63,7 @@ async function map(
source,
line,
column,
getLinesAround(line, contextLines, originalSource)
getLinesAround(line!, contextLines, originalSource)
);
});
}

19
packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/pollyfills.ts
View File

@ -1,19 +0,0 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
if (typeof Promise === 'undefined') {
// Rejection tracking prevents a common issue where React gets into an
// inconsistent state due to an error, but it gets swallowed by a Promise,
// and the user has no idea what causes React's erratic future behavior.
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('promise/lib/rejection-tracking').enable();
window.Promise = require('promise/lib/es6-extensions.js');
}
// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');

2
packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/utils/unmapper.ts
View File

@ -8,7 +8,7 @@
import StackFrame from './stack-frame';
import { getSourceMap } from './getSourceMap';
import { getLinesAround } from './getLinesAround';
import path from 'path';
import path from 'path-browserify';
function count(search: string, string: string): number {
// Count starts at -1 becuse a do-while loop always runs at least once

52
packages/redux-devtools-inspector-monitor-trace-tab/test/StackTraceTab.spec.tsx
View File

@ -1,22 +1,7 @@
import React, { ReactComponentElement } from 'react';
import { configure, mount, ReactWrapper } from 'enzyme';
import toJson from 'enzyme-to-json';
import React from 'react';
import { render, screen } from '@testing-library/react';
import StackTraceTab from '../src/StackTraceTab';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
function genAsyncSnapshot(
component: ReactWrapper<any, any, any>,
done: () => void
) {
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' } },
@ -32,37 +17,32 @@ const actions = {
const StackTraceTabAsAny = StackTraceTab as any;
describe('StackTraceTab component', () => {
it('should render with no props', () => {
return new Promise<void>((done) => {
const component = mount(<StackTraceTabAsAny />);
genAsyncSnapshot(component, done);
});
it('should render with no props', async () => {
const { container } = render(<StackTraceTabAsAny />);
await screen.findByTestId('stack-trace');
expect(container.firstChild).toMatchSnapshot();
});
it('should render with props, but without stack', () => {
return new Promise<void>((done) => {
const component = mount(
it('should render with props, but without stack', async () => {
const { container } = render(
<StackTraceTabAsAny actions={actions} action={actions[0].action} />
);
genAsyncSnapshot(component, done);
});
await screen.findByTestId('stack-trace');
expect(container.firstChild).toMatchSnapshot();
});
it('should render the link to docs', () => {
return new Promise<void>((done) => {
const component = mount(
const { container } = render(
<StackTraceTabAsAny actions={actions} action={actions[1].action} />
);
genAsyncSnapshot(component, done);
});
expect(container.firstChild).toMatchSnapshot();
});
it('should render with trace stack', () => {
return new Promise<void>((done) => {
const component = mount(
it('should render with trace stack', async () => {
const { container } = render(
<StackTraceTabAsAny actions={actions} action={actions[2].action} />
);
genAsyncSnapshot(component, done);
});
await screen.findByTestId('stack-trace');
expect(container.firstChild).toMatchSnapshot();
});
});

321
packages/redux-devtools-inspector-monitor-trace-tab/test/__snapshots__/StackTraceTab.spec.tsx.snap
View File

@ -1,376 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StackTraceTab component should render the link to docs 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)
at fn3 (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/page.bundle.js:1269:80)",
"type": "PERFORM_ACTION",
},
}
}
openFile={[Function]}
>
<div
style={
Object {
"padding": "5px 10px",
}
}
style="padding: 5px 10px;"
>
To enable tracing action calls, you should set \`trace\` option to \`true\` for Redux DevTools enhancer. Refer to
<a
href="#"
onClick={[Function]}
>
this page
</a>
for more details.
</div>
</StackTraceTab>
`;
exports[`StackTraceTab component should render with no props 1`] = `
<StackTraceTab
openFile={[Function]}
<div
style="padding: 5px 10px;"
>
<div
style={
Object {
"padding": "5px 10px",
}
}
>
<StackTrace
contextSize={3}
editorHandler={[Function]}
errorName="N/A"
stackFrames={Array []}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "1em",
"minHeight": "0px",
"overflow": "auto",
}
}
data-testid="stack-trace"
style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
/>
</StackTrace>
</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)
at fn3 (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/page.bundle.js:1269:80)",
"type": "PERFORM_ACTION",
},
}
}
openFile={[Function]}
<div
style="padding: 5px 10px;"
>
<div
style={
Object {
"padding": "5px 10px",
}
}
>
<StackTrace
contextSize={3}
editorHandler={[Function]}
errorName="N/A"
stackFrames={Array []}
>
<div
style={
Object {
"flex": "0 1 auto",
"fontSize": "1em",
"minHeight": "0px",
"overflow": "auto",
}
}
data-testid="stack-trace"
style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
/>
</StackTrace>
</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)
at fn3 (chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/page.bundle.js:1269:80)",
"type": "PERFORM_ACTION",
},
}
}
openFile={[Function]}
<div
style="padding: 5px 10px;"
>
<div
style={
Object {
"padding": "5px 10px",
}
}
>
<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
collapsedByDefault={false}
key="bundle-1"
data-testid="stack-trace"
style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
>
<div>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#3C444F",
"border": "none",
"color": "#FFFFFF",
"cursor": "pointer",
"display": "block",
"fontSize": "1em",
"lineHeight": "1.5",
"marginBottom": "0.6em",
"padding": "0px 5px",
"textAlign": "left",
"width": "100%",
}
}
style="color: rgb(255, 255, 255); background-color: rgb(60, 68, 79); cursor: pointer; display: block; width: 100%; text-align: left; font-size: 1em; padding: 0px 5px; line-height: 1.5; margin-bottom: 0.6em;"
>
▼ 2 stack frames were expanded.
</button>
<div
style={
Object {
"display": "block",
}
}
>
<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}
style="display: block;"
>
<div>
<div>
fn1
</div>
<div
style={
Object {
"fontSize": "0.9em",
"marginBottom": "0.9em",
}
}
style="font-size: 0.9em; margin-bottom: 0.9em;"
>
<span>
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",
}
}
style="font-size: 0.9em; margin-bottom: 0.9em;"
>
<span>
app.js:84:31
</span>
</div>
</div>
</StackFrame>
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "#3C444F",
"border": "none",
"color": "#FFFFFF",
"cursor": "pointer",
"display": "block",
"fontSize": "1em",
"lineHeight": "1.5",
"marginBottom": "0.6em",
"padding": "0px 5px",
"textAlign": "left",
"width": "100%",
}
}
style="color: rgb(255, 255, 255); background-color: rgb(60, 68, 79); cursor: pointer; display: block; width: 100%; text-align: left; font-size: 1em; padding: 0px 5px; line-height: 1.5; margin-bottom: 0.6em;"
>
▲ 2 stack frames were expanded.
</button>
</div>
</div>
</Collapsible>
</div>
</StackTrace>
</div>
</StackTraceTab>
`;

18
packages/redux-devtools-inspector-monitor/demo/package.json
View File

@ -18,9 +18,9 @@
"history": "^4.10.1",
"immutable": "^4.0.0",
"lodash.shuffle": "^4.2.0",
"react": "^16.14.0",
"react-bootstrap": "^1.6.4",
"react-dom": "^16.14.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"react-router": "^5.2.1",
"redux": "^4.1.1",
@ -34,23 +34,23 @@
"@types/base16": "^1.0.2",
"@types/history": "^4.7.9",
"@types/lodash.shuffle": "^4.2.6",
"@types/node": "^14.17.27",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/node": "^14.17.29",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20",
"@types/react-router": "^5.1.17",
"@types/redux-logger": "^3.0.9",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0",
"ts-node": "^10.3.0",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",

2
packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx
View File

@ -183,11 +183,9 @@ class DemoApp extends React.Component<Props> {
/>
))}
</FormControl>
<InputGroup.Append>
<a onClick={this.toggleTheme} style={styles.link}>
{options.dark ? 'Light theme' : 'Dark theme'}
</a>
</InputGroup.Append>
</InputGroup>
</Col>
</FormGroup>

8
packages/redux-devtools-inspector-monitor/package.json
View File

@ -62,15 +62,15 @@
"@types/hex-rgba": "^1.0.1",
"@types/history": "^4.7.9",
"@types/lodash.debounce": "^4.0.6",
"@types/react": "^16.14.18",
"@types/react": "^17.0.32",
"@types/react-dragula": "^1.1.0",
"@types/redux-devtools-themes": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"react": "^16.14.0",
"react": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"typescript": "~4.4.4"

7
packages/redux-devtools-inspector-monitor/src/ActionList.tsx
View File

@ -140,6 +140,7 @@ export default class ActionList<
return (
<div
key="actionList"
data-testid="actionList"
{...styling(
['actionList', isWideLayout && 'actionListWide'],
isWideLayout
@ -154,7 +155,11 @@ export default class ActionList<
hasSkippedActions={skippedActionIds.length > 0}
hasStagedActions={actionIds.length > 1}
/>
<div {...styling('actionListRows')} ref={this.getRef}>
<div
data-testid="actionListRows"
{...styling('actionListRows')}
ref={this.getRef}
>
{filteredActionIds.map((actionId) => (
<ActionListRow
key={actionId}

1
packages/redux-devtools-inspector-monitor/src/DevtoolsInspector.tsx
View File

@ -312,6 +312,7 @@ class DevtoolsInspector<S, A extends Action<unknown>> extends PureComponent<
return (
<div
key="inspector"
data-testid="inspector"
ref={this.inspectorCreateRef}
{...styling(
['inspector', isWideLayout && 'inspectorWide'],

6
packages/redux-devtools-inspector-monitor/src/tabs/getItemString.tsx
View File

@ -23,7 +23,8 @@ function getShortTypeString(val: any, diff: boolean | undefined) {
} else if (val === undefined) {
return 'undef';
} else if (typeof val === 'object') {
return Object.keys(val).length > 0 ? '{…}' : '{}';
// eslint-disable-next-line @typescript-eslint/ban-types
return Object.keys(val as {}).length > 0 ? '{…}' : '{}';
} else if (typeof val === 'function') {
return 'fn';
} else if (typeof val === 'string') {
@ -42,7 +43,8 @@ function getText(
isDiff: boolean | undefined
) {
if (type === 'Object') {
const keys = Object.keys(data);
// eslint-disable-next-line @typescript-eslint/ban-types
const keys = Object.keys(data as {});
if (!isWideLayout) return keys.length ? '{…}' : '{}';
const str = keys

6
packages/redux-devtools-instrument/package.json
View File

@ -47,9 +47,9 @@
"@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2",
"@types/lodash": "^4.14.176",
"@types/node": "^14.17.27",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@types/node": "^14.17.29",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",

8
packages/redux-devtools-log-monitor/package.json
View File

@ -53,13 +53,13 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0",
"@types/react": "^16.14.18",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"react": "^16.14.0",
"react": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"typescript": "~4.4.4"

8
packages/redux-devtools-log-monitor/src/LogMonitorEntry.tsx
View File

@ -85,7 +85,11 @@ export default class LogMonitorEntry<
) => ({
style: {
...style,
backgroundColor: dataIsEqual(data, previousData, keyPath)
backgroundColor: dataIsEqual(
data,
previousData,
keyPath as (string | number)[]
)
? 'transparent'
: this.props.theme.base01,
},
@ -93,7 +97,7 @@ export default class LogMonitorEntry<
const getNestedNodeStyle: StylingValue = ({ style }, keyPath) => ({
style: {
...style,
...(keyPath.length > 1 ? {} : styles.root),
...((keyPath as unknown[]).length > 1 ? {} : styles.root),
},
});
theme = {

20
packages/redux-devtools-rtk-query-monitor/demo/package.json
View File

@ -14,15 +14,15 @@
"@chakra-ui/react": "^1.6.10",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mswjs/data": "^0.6.0",
"@mswjs/data": "^0.7.0",
"@redux-devtools/core": "^3.9.0",
"@redux-devtools/dock-monitor": "^1.4.0",
"@redux-devtools/rtk-query-monitor": "^1.0.0",
"@reduxjs/toolkit": "^1.6.2",
"framer-motion": "^4.1.17",
"msw": "^0.35.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-redux": "^7.2.5",
"react-router-dom": "^5.3.0"
@ -34,15 +34,15 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@types/copy-webpack-plugin": "^8.0.1",
"@types/node": "^14.17.27",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/node": "^14.17.29",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20",
"@types/react-router-dom": "^5.3.1",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.4.0",
@ -51,8 +51,8 @@
"eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0",
"style-loader": "^3.3.0",
"ts-node": "^10.3.0",
"style-loader": "^3.3.1",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",

2
packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx
View File

@ -72,7 +72,7 @@ const PostJsonDetail = ({ id }: { id: string }) => {
};
export const PostDetail = () => {
const { id } = useParams<{ id: any }>();
const { id } = useParams<{ id: string }>();
const history = useHistory();
const toast = useToast();

2
packages/redux-devtools-rtk-query-monitor/demo/src/services/posts.ts
View File

@ -42,7 +42,7 @@ export const postsApi = createApi({
}),
invalidatesTags: (result, error, { id }) => [{ type: 'Post', id }],
}),
deletePost: build.mutation<{ success: boolean; id: number }, number>({
deletePost: build.mutation<{ success: boolean; id: number }, string>({
query(id) {
return {
url: `posts/${id}`,

8
packages/redux-devtools-rtk-query-monitor/package.json
View File

@ -63,13 +63,13 @@
"@reduxjs/toolkit": "^1.6.2",
"@types/hex-rgba": "^1.0.1",
"@types/lodash.debounce": "^4.0.6",
"@types/react": "^16.14.18",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"react": "^16.14.0",
"react": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"typescript": "~4.4.4"

3
packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
View File

@ -44,7 +44,8 @@ function getText(
isDiff: boolean | undefined
) {
if (type === 'Object') {
const keys = Object.keys(data);
// eslint-disable-next-line @typescript-eslint/ban-types
const keys = Object.keys(data as {});
if (!previewContent) return keys.length ? '{…}' : '{}';
const str = keys

4
packages/redux-devtools-serialize/package.json
View File

@ -39,8 +39,8 @@
"@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2",
"@types/jsan": "^3.1.2",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",

17
packages/redux-devtools-serialize/src/helpers/index.ts
View File

@ -35,13 +35,26 @@ export function extract(data: unknown, type: string): SerializedData {
};
}
export function refer(data: unknown, type: string): SerializedData;
export function refer<K extends string>(
data: { [key in K]: () => unknown },
type: string,
transformMethod: K | false,
transformMethod?: K | false,
refs?: (new (data: any) => unknown)[] | null
): SerializedData;
export function refer<K extends string>(
data: any,
type: string,
transformMethod?: 'toString' | false,
refs?: (new (data: any) => unknown)[] | null
): SerializedData;
export function refer<K extends string>(
data: { [key in K]: () => unknown } | unknown,
type: string,
transformMethod?: K | false,
refs?: (new (data: any) => unknown)[] | null
): SerializedData {
const r = mark(data, type, transformMethod);
const r = mark(data as { [key in K]: () => unknown }, type, transformMethod);
if (!refs) return r;
for (let i = 0; i < refs.length; i++) {
const ref = refs[i];

4
packages/redux-devtools-serialize/test/helpers.spec.ts
View File

@ -16,7 +16,9 @@ describe('Helpers', function () {
const TestClass = function (data: unknown) {
return data;
};
const testInstance = new (TestClass as any)({ testData: 'test' });
const testInstance = new (TestClass as any)({
testData: 'test',
}) as unknown;
expect(
refer(testInstance, 'testType', false, [TestClass as any])
).toMatchSnapshot();

18
packages/redux-devtools-slider-monitor/examples/todomvc/package.json
View File

@ -21,8 +21,8 @@
"@redux-devtools/slider-monitor": "^2.0.0-8",
"classnames": "^2.3.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"todomvc-app-css": "^2.4.1"
@ -33,15 +33,15 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@types/classnames": "^2.3.1",
"@types/node": "^14.17.27",
"@types/node": "^14.17.29",
"@types/prop-types": "^15.7.4",
"@types/react": "^16.14.18",
"@types/react-dom": "^16.9.14",
"@types/react": "^17.0.32",
"@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20",
"@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"css-loader": "^6.4.0",
"eslint": "^7.32.0",
@ -49,8 +49,8 @@
"eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0",
"style-loader": "^3.3.0",
"ts-node": "^10.3.0",
"style-loader": "^3.3.1",
"ts-node": "^10.4.0",
"typescript": "~4.4.4",
"webpack": "^5.59.1",
"webpack-cli": "^4.9.1",

8
packages/redux-devtools-slider-monitor/package.json
View File

@ -42,13 +42,13 @@
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0",
"@types/react": "^16.14.18",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"react": "^16.14.0",
"react": "^17.0.2",
"redux": "^4.1.1",
"rimraf": "^3.0.2",
"typescript": "~4.4.4"

1
packages/redux-devtools-ui/jest.config.js
View File

@ -1,6 +1,5 @@
module.exports = {
preset: 'ts-jest',
setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
testEnvironment: 'jsdom',
moduleNameMapper: {
'\\.css$': '<rootDir>/tests/__mocks__/styleMock.ts',

28
packages/redux-devtools-ui/package.json
View File

@ -58,35 +58,35 @@
"@babel/preset-typescript": "^7.15.0",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/react": "^6.3.12",
"@testing-library/dom": "^8.10.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/color": "^3.0.2",
"@types/enzyme": "^3.10.10",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "^27.0.2",
"@types/react": "^16.14.18",
"@types/react": "^17.0.32",
"@types/styled-components": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"csstype": "^3.0.9",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-is": "^16.13.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"rimraf": "^3.0.2",
"styled-components": "^5.3.3",
"stylelint": "^13.13.1",
"stylelint": "^14.0.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^22.0.0",
"stylelint-config-standard": "^23.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"ts-jest": "^27.0.7",
"typescript": "~4.4.4"
"typescript": "~4.4.4",
"webpack": "^5.59.1"
},
"peerDependencies": {
"@types/react": "^16.3.0 || ^17.0.0",

7
packages/redux-devtools-ui/src/Container/styles/index.ts
View File

@ -1,5 +1,6 @@
import styled from 'styled-components';
import styled, { ThemedStyledProps } from 'styled-components';
import color from '../../utils/color';
import { Theme } from '../../themes/default';
export const MainContainerWrapper = styled.div`
display: flex;
@ -7,7 +8,9 @@ export const MainContainerWrapper = styled.div`
width: 100%;
flex-flow: column nowrap;
overflow: auto;
background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)};
${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
background-color: ${(props: ThemedStyledProps<{}, Theme>) =>
color(props.theme.base00, 'lighten', 0.03)};
color: ${(props) => props.theme.base07};
font-size: 12px;

21
packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx
View File

@ -24,22 +24,7 @@ export interface ContextMenuProps {
}
export default class ContextMenu extends Component<ContextMenuProps> {
constructor(props: ContextMenuProps) {
super(props);
this.updateItems(props.items);
}
menu?: HTMLDivElement | null;
items?: React.ReactNode[];
UNSAFE_componentWillReceiveProps(nextProps: ContextMenuProps) {
if (
nextProps.items !== this.props.items ||
nextProps.visible !== this.props.visible
) {
this.updateItems(nextProps.items);
}
}
componentDidMount() {
this.amendPosition();
@ -84,8 +69,8 @@ export default class ContextMenu extends Component<ContextMenuProps> {
this.menu!.style.left = `${left}px`;
}
updateItems(items: Item[]) {
this.items = items.map((item) => {
renderItems() {
return this.props.items.map((item) => {
if (isReactButtonElement(item)) return item;
const value = item.value || item.name;
return (
@ -113,7 +98,7 @@ export default class ContextMenu extends Component<ContextMenuProps> {
top={this.props.y}
visible={this.props.visible}
>
{this.items}
{this.renderItems()}
</ContextMenuWrapper>
);
}

6
packages/redux-devtools-ui/src/utils/createStyledComponent.ts
View File

@ -65,15 +65,15 @@ export default function createStyledComponent<
): StyledComponent<C, Theme | Base16Theme, O> {
return (styled as ThemedStyledInterface<Theme>)((component || 'div') as C)`
${(props: ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>) =>
isThemeFromProvider(props.theme)
? getStyle(styles, props.theme.type)
isThemeFromProvider(props.theme as Theme | Base16Theme)
? getStyle(styles, props.theme.type as string)
: // used outside of container (theme provider)
getStyle(
styles,
'default'
)({
...props,
theme: getDefaultTheme(props.theme),
theme: getDefaultTheme(props.theme as Base16Theme),
})}
` as StyledComponent<C, Theme | Base16Theme, O>;
}

14
packages/redux-devtools-ui/tests/Button.test.tsx
View File

@ -1,19 +1,19 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '../src';
describe('Button', function () {
it('renders correctly', () => {
const wrapper = render(<Button>Text</Button>);
expect(renderToJson(wrapper)).toMatchSnapshot();
const { container } = render(<Button>Text</Button>);
expect(container.firstChild).toMatchSnapshot();
});
it('should handle the click event', () => {
const onClick = jest.fn();
const wrapper = mount(<Button onClick={onClick}>ClickMe</Button>);
render(<Button onClick={onClick}>ClickMe</Button>);
wrapper.find('button').simulate('click');
expect(onClick).toBeCalled();
userEvent.click(screen.getByRole('button'));
expect(onClick).toHaveBeenCalled();
});
});

7
packages/redux-devtools-ui/tests/Container.test.tsx
View File

@ -1,17 +1,16 @@
import React from 'react';
import { render } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render } from '@testing-library/react';
import { Container } from '../src';
describe('Container', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<Container
themeData={{ theme: 'default', scheme: 'default', light: false }}
>
Text
</Container>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
});

16
packages/redux-devtools-ui/tests/ContextMenu.test.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ContextMenu } from '../src';
import { items } from '../src/ContextMenu/data';
describe('ContextMenu', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<ContextMenu
items={items}
onClick={() => {
@ -16,15 +16,15 @@ describe('ContextMenu', function () {
y={100}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should handle the click event', () => {
const onClick = jest.fn();
const wrapper = mount(
<ContextMenu items={items} onClick={onClick} x={100} y={100} />
render(
<ContextMenu items={items} onClick={onClick} x={100} y={100} visible />
);
wrapper.find('button').first().simulate('click');
expect(onClick).toBeCalled();
userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' }));
expect(onClick).toHaveBeenCalled();
});
});

28
packages/redux-devtools-ui/tests/Dialog.test.tsx
View File

@ -1,11 +1,11 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Dialog } from '../src';
describe('Dialog', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<Dialog
onDismiss={() => {
// noop
@ -15,11 +15,11 @@ describe('Dialog', function () {
}}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders with props', () => {
const wrapper = render(
const { container } = render(
<Dialog
title="Dialog Title"
open
@ -34,11 +34,11 @@ describe('Dialog', function () {
Hello Dialog!
</Dialog>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders modal', () => {
const wrapper = render(
const { container } = render(
<Dialog
modal
onDismiss={() => {
@ -49,12 +49,12 @@ describe('Dialog', function () {
}}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should handle dismiss event', () => {
const onDismiss = jest.fn();
const wrapper = mount(
render(
<Dialog
open
onDismiss={onDismiss}
@ -64,13 +64,13 @@ describe('Dialog', function () {
/>
);
wrapper.find('button').first().simulate('click');
expect(onDismiss).toBeCalled();
userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
expect(onDismiss).toHaveBeenCalled();
});
it('should handle submit event', () => {
const onSubmit = jest.fn();
const wrapper = mount(
render(
<Dialog
open
onDismiss={() => {
@ -80,7 +80,7 @@ describe('Dialog', function () {
/>
);
wrapper.find('button').last().simulate('click');
expect(onSubmit).toBeCalled();
userEvent.click(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toHaveBeenCalled();
});
});

11
packages/redux-devtools-ui/tests/Editor.test.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { mountToJson } from 'enzyme-to-json';
import { render } from '@testing-library/react';
import { Editor } from '../src';
import 'codemirror/mode/javascript/javascript';
@ -25,17 +24,17 @@ describe('Editor', function () {
return range;
};
const wrapper = mount(<Editor value="var a = 1;" />);
const { container } = render(<Editor value="var a = 1;" />);
it('renders correctly', () => {
expect(mountToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('calls getBoundingClientRect', () => {
expect(getBoundingClientRect).toBeCalled();
expect(getBoundingClientRect).toHaveBeenCalled();
});
it('calls getClientRects', () => {
expect(getClientRects).toBeCalled();
expect(getClientRects).toHaveBeenCalled();
});
});

34
packages/redux-devtools-ui/tests/Form.test.tsx
View File

@ -1,19 +1,31 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Form } from '../src';
import { schema, uiSchema, formData } from '../src/Form/schema';
describe('Form', function () {
let random: () => number;
beforeAll(() => {
random = Math.random;
Math.random = jest.fn(() => 0.25546350798039463);
});
afterAll(() => {
Math.random = random;
console.log(Math.random());
});
it('renders correctly', () => {
const wrapper = shallow(
const { container } = render(
<Form formData={formData} schema={schema} uiSchema={uiSchema} />
);
expect(shallowToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders with primary button', () => {
const wrapper = shallow(
const { container } = render(
<Form
primaryButton
submitText="Custom button"
@ -22,19 +34,19 @@ describe('Form', function () {
uiSchema={uiSchema}
/>
);
expect(shallowToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders with no button', () => {
const wrapper = shallow(
const { container } = render(
<Form formData={formData} schema={schema} uiSchema={uiSchema} noSubmit />
);
expect(shallowToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should handle the submit event', () => {
const onSubmit = jest.fn();
const wrapper = mount(
render(
<Form
formData={formData}
schema={schema}
@ -43,7 +55,7 @@ describe('Form', function () {
/>
);
wrapper.find('form').simulate('submit');
expect(onSubmit).toBeCalled();
userEvent.click(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toHaveBeenCalled();
});
});

20
packages/redux-devtools-ui/tests/Notification.test.tsx
View File

@ -1,16 +1,16 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Notification } from '../src';
describe('Notification', function () {
it('renders correctly', () => {
const wrapper = render(<Notification>Message</Notification>);
expect(renderToJson(wrapper)).toMatchSnapshot();
const { container } = render(<Notification>Message</Notification>);
expect(container.firstChild).toMatchSnapshot();
});
it('renders with props', () => {
const wrapper = render(
const { container } = render(
<Notification
type="error"
onClose={() => {
@ -20,16 +20,14 @@ describe('Notification', function () {
Message
</Notification>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should handle the click event', () => {
const onClose = jest.fn();
const wrapper = mount(
<Notification onClose={onClose}>Message</Notification>
);
render(<Notification onClose={onClose}>Message</Notification>);
wrapper.find('button').simulate('click');
expect(onClose).toBeCalled();
userEvent.click(screen.getByRole('button'));
expect(onClose).toHaveBeenCalled();
});
});

14
packages/redux-devtools-ui/tests/SegmentedControl.test.tsx
View File

@ -1,11 +1,11 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SegmentedControl } from '../src';
describe('SegmentedControl', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<SegmentedControl
values={['Button1', 'Button2', 'Button3']}
selected="Button1"
@ -15,11 +15,11 @@ describe('SegmentedControl', function () {
}}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should handle the click event', () => {
const onClick = jest.fn();
const wrapper = mount(
render(
<SegmentedControl
values={['Button1', 'Button2', 'Button3']}
selected="Button1"
@ -28,7 +28,7 @@ describe('SegmentedControl', function () {
/>
);
wrapper.find('button').first().simulate('click');
expect(onClick).toBeCalled();
userEvent.click(screen.getByRole('button', { name: 'Button1' }));
expect(onClick).toHaveBeenCalled();
});
});

40
packages/redux-devtools-ui/tests/Select.test.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { render, mount, CommonWrapper, ReactWrapper } from 'enzyme';
import { renderToJson, mountToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Select } from '../src';
import { options } from '../src/Select/options';
describe('Select', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<Select
options={options}
onChange={() => {
@ -14,11 +14,11 @@ describe('Select', function () {
}}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders with props', () => {
const wrapper = render(
const { container } = render(
<Select
options={options}
onChange={() => {
@ -34,32 +34,30 @@ describe('Select', function () {
menuPlacement="top"
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should select another option', () => {
const onChange = jest.fn();
const wrapper = mount(
<Select options={options} onInputChange={onChange} />
const { container } = render(
<Select options={options} onChange={onChange} />
);
const input = wrapper.find('input');
(input.at(0).instance() as unknown as HTMLInputElement).value = 'two';
input.first().simulate('change');
expect(mountToJson(wrapper)).toMatchSnapshot();
input.first().simulate('keyDown', { keyCode: 13 });
expect(onChange).toBeCalled();
userEvent.type(screen.getByRole('combobox'), 'two');
expect(container.firstChild).toMatchSnapshot();
userEvent.type(screen.getByRole('combobox'), '{enter}');
expect(onChange).toHaveBeenCalled();
});
it("shouldn't find any results", () => {
const onChange = jest.fn();
const wrapper = mount(<Select options={options} onChange={onChange} />);
const { container } = render(
<Select options={options} onChange={onChange} />
);
const input = wrapper.find('input');
(input.at(0).instance() as unknown as HTMLInputElement).value = 'text';
input.first().simulate('change');
expect(mountToJson(wrapper)).toMatchSnapshot(); // 'No results found'
input.first().simulate('keyDown', { keyCode: 13 });
expect(onChange).not.toBeCalled();
userEvent.type(screen.getByRole('combobox'), 'text');
expect(container.firstChild).toMatchSnapshot();
userEvent.type(screen.getByRole('combobox'), '{enter}');
expect(onChange).not.toHaveBeenCalled();
});
});

19
packages/redux-devtools-ui/tests/Slider.test.tsx
View File

@ -1,22 +1,21 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { fireEvent, render, screen } from '@testing-library/react';
import { Slider } from '../src';
describe('Slider', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<Slider
onChange={() => {
// noop
}}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders with props', () => {
const wrapper = render(
const { container } = render(
<Slider
label="Hi"
min={1}
@ -28,15 +27,15 @@ describe('Slider', function () {
}}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should handle the change event', () => {
const onChange = jest.fn();
const wrapper = mount(<Slider value={1} onChange={onChange} />);
render(<Slider value={1} onChange={onChange} />);
wrapper.find('input').simulate('change');
expect(onChange).toBeCalled();
expect(onChange).toBeCalledWith(1);
fireEvent.change(screen.getByRole('slider'), { target: { value: '2' } });
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalledWith(2);
});
});

22
packages/redux-devtools-ui/tests/Tabs.test.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Tabs } from '../src';
import { tabs, simple10Tabs } from '../src/Tabs/data';
describe('Tabs', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<Tabs
tabs={tabs}
onClick={() => {
@ -14,11 +14,11 @@ describe('Tabs', function () {
}}
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders with props', () => {
const wrapper = render(
const { container } = render(
<Tabs
tabs={tabs}
onClick={() => {
@ -27,11 +27,11 @@ describe('Tabs', function () {
selected="Tab2"
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders tabs without inner components', () => {
const wrapper = render(
const { container } = render(
<Tabs
tabs={simple10Tabs}
onClick={() => {
@ -40,14 +40,14 @@ describe('Tabs', function () {
selected="5"
/>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('should select tab', () => {
const onClick = jest.fn();
const wrapper = mount(<Tabs tabs={tabs} onClick={onClick} />);
render(<Tabs tabs={tabs} onClick={onClick} />);
wrapper.find('button').first().simulate('click');
expect(onClick).toBeCalled();
userEvent.click(screen.getByRole('button', { name: 'Tab1' }));
expect(onClick).toHaveBeenCalled();
});
});

11
packages/redux-devtools-ui/tests/Toolbar.test.tsx
View File

@ -1,11 +1,10 @@
import React from 'react';
import { render } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import { render } from '@testing-library/react';
import { Toolbar, Divider, Spacer, Button } from '../src';
describe('Toolbar', function () {
it('renders correctly', () => {
const wrapper = render(
const { container } = render(
<Toolbar>
<Button>1</Button>
<Divider />
@ -13,11 +12,11 @@ describe('Toolbar', function () {
<Button>2</Button>
</Toolbar>
);
expect(renderToJson(wrapper)).toMatchSnapshot();
expect(container.firstChild).toMatchSnapshot();
});
it('renders with props', () => {
const wrapper = render(<Toolbar borderPosition="top" />);
expect(renderToJson(wrapper)).toMatchSnapshot();
const { container } = render(<Toolbar borderPosition="top" />);
expect(container.firstChild).toMatchSnapshot();
});
});

2
packages/redux-devtools-ui/tests/__snapshots__/Container.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`Container renders correctly 1`] = `
<div
class="sc-bdvvtL htahit"
class="sc-bdvvtL gyKeHC"
>
Text
</div>

1
packages/redux-devtools-ui/tests/__snapshots__/ContextMenu.test.tsx.snap
View File

@ -3,6 +3,7 @@
exports[`ContextMenu renders correctly 1`] = `
<div
class="sc-jRQBWg deJyZB"
style="top: 100px; left: 100px;"
>
<button
value="Menu Item 1"

146
packages/redux-devtools-ui/tests/__snapshots__/Editor.test.tsx.snap
View File

@ -1,19 +1,139 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Editor renders correctly 1`] = `
<Editor
autofocus={false}
foldGutter={true}
lineNumbers={true}
lineWrapping={false}
mode="javascript"
readOnly={false}
value="var a = 1;"
>
<styled.div>
<div
className="sc-jrQzAO bvXojw"
class="sc-jrQzAO bvXojw"
>
<div
class="CodeMirror cm-s-default"
translate="no"
>
<div
style="overflow: hidden; position: relative; width: 3px; height: 0px;"
>
<textarea
autocapitalize="off"
autocorrect="off"
spellcheck="false"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"
tabindex="0"
/>
</styled.div>
</Editor>
</div>
<div
class="CodeMirror-vscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="min-width: 1px;"
/>
</div>
<div
class="CodeMirror-hscrollbar"
cm-not-content="true"
tabindex="-1"
>
<div
style="height: 100%; min-height: 1px;"
/>
</div>
<div
class="CodeMirror-scrollbar-filler"
cm-not-content="true"
/>
<div
class="CodeMirror-gutter-filler"
cm-not-content="true"
/>
<div
class="CodeMirror-scroll"
tabindex="-1"
>
<div
class="CodeMirror-sizer"
style="margin-left: 0px; min-width: 3px;"
>
<div
style="position: relative;"
>
<div
class="CodeMirror-lines"
role="presentation"
>
<div
role="presentation"
style="position: relative; outline: none;"
>
<div
class="CodeMirror-measure"
/>
<div
class="CodeMirror-measure"
>
<pre
class="CodeMirror-line"
role="presentation"
>
<span
role="presentation"
style="padding-right: .1px;"
>
<span
class="cm-keyword"
>
var
</span>
<span
class="cm-def"
>
a
</span>
<span
class="cm-operator"
>
=
</span>
<span
class="cm-number"
>
1
</span>
;
</span>
</pre>
</div>
<div
style="position: relative; z-index: 1;"
/>
<div
class="CodeMirror-cursors"
/>
<div
class="CodeMirror-code"
role="presentation"
/>
</div>
</div>
</div>
</div>
<div
style="position: absolute; height: 50px; width: 1px;"
/>
<div
class="CodeMirror-gutters"
>
<div
class="CodeMirror-gutter CodeMirror-linenumbers"
style="width: 1px;"
/>
<div
class="CodeMirror-gutter CodeMirror-foldgutter"
/>
</div>
</div>
</div>
</div>
`;

1379
packages/redux-devtools-ui/tests/__snapshots__/Form.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

4297
packages/redux-devtools-ui/tests/__snapshots__/Select.test.tsx.snap
View File

File diff suppressed because one or more lines are too long

1
packages/redux-devtools-ui/tests/__snapshots__/Slider.test.tsx.snap
View File

@ -20,6 +20,7 @@ exports[`Slider renders with props 1`] = `
>
<label>
Hi
</label>
<input
disabled=""

Some files were not shown because too many files have changed in this diff Show More