reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 08:30:02 +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' '@emotion/utils': '^0.11.3'
'redux-persist@^6.0.0': 'redux-persist@^6.0.0':
dependencies: dependencies:
'@types/react': '^16.14.15' '@types/react': '*'
'react': '^16.14.0' 'react': '*'
'apollo-server-core@^2.25.2': 'apollo-server-core@^2.25.2':
dependencies: dependencies:
'@types/node': '^14.17.15' '@types/node': '^14.17.15'
@ -51,7 +51,7 @@ packageExtensions:
'@chakra-ui/accordion@^1.3.6': '@chakra-ui/accordion@^1.3.6':
peerDependencies: peerDependencies:
'framer-motion': '3.x || 4.x' 'framer-motion': '3.x || 4.x'
'@mswjs/data@^0.6.0': '@mswjs/data@^0.7.0':
dependencies: dependencies:
'debug': '^4.3.2' 'debug': '^4.3.2'
'msw@^0.35.0': 'msw@^0.35.0':

22
extension/package.json
View File

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

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

@ -1,24 +1,30 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { render, screen, within } from '@testing-library/react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import configureStore from '../../../src/app/stores/windowStore'; import configureStore from '../../../src/app/stores/windowStore';
import App from '../../../src/app/containers/App'; import App from '../../../src/app/containers/App';
const { store } = configureStore(store); const { store } = configureStore(store);
const component = mount(
describe('App container', () => {
it("should render inspector monitor's component", () => {
render(
<Provider store={store}> <Provider store={store}>
<App position="devtools-left" /> <App position="devtools-left" />
</Provider> </Provider>
); );
expect(screen.getByTestId('inspector')).toBeDefined();
describe('App container', () => {
it("should render inspector monitor's component", () => {
expect(component.find('DevtoolsInspector').html()).toBeDefined();
}); });
it('should contain an empty action list', () => { it('should contain an empty action list', () => {
expect(component.find('ActionList').html()).toMatch( render(
/<div class="actionListRows-[0-9-]+"><\/div>/ <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 { resolve } from 'path';
import webdriver from 'selenium-webdriver'; import webdriver from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome';
import chromedriver from 'chromedriver'; import chromedriver from 'chromedriver';
import { switchMonitorTests, delay } from '../utils/e2e'; import { switchMonitorTests, delay } from '../utils/e2e';
@ -17,11 +18,9 @@ describe('Chrome extension', function () {
await delay(2000); await delay(2000);
driver = new webdriver.Builder() driver = new webdriver.Builder()
.usingServer(`http://localhost:${port}`) .usingServer(`http://localhost:${port}`)
.withCapabilities({ .setChromeOptions(
chromeOptions: { new chrome.Options().addArguments(`load-extension=${path}`)
args: [`load-extension=${path}`], )
},
})
.forBrowser('chrome') .forBrowser('chrome')
.build(); .build();
}); });
@ -72,7 +71,6 @@ describe('Chrome extension', function () {
await driver.switchTo().window(tabs[1]); await driver.switchTo().window(tabs[1]);
expect(await driver.getCurrentUrl()).toMatch(url); expect(await driver.getCurrentUrl()).toMatch(url);
await driver.manage().timeouts().pageLoadTimeout(5000);
await driver.switchTo().window(tabs[0]); await driver.switchTo().window(tabs[0]);

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

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

5
extension/test/setup.js
View File

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

4
package.json
View File

@ -1,8 +1,8 @@
{ {
"private": true, "private": true,
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "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/core": "^7.15.8",
"@babel/preset-env": "^7.15.8", "@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1", "@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"fork-ts-checker-webpack-plugin": "^6.4.0", "fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0", "html-webpack-plugin": "^5.4.0",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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/core": "^7.15.8",
"@babel/preset-env": "^7.15.8", "@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/ramda": "^0.27.45", "@types/ramda": "^0.27.45",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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, fill: style.text.colors.default,
cursor: 'pointer', cursor: 'pointer',
}) })
.on('mouseover', function mouseover(this: any) { .on('mouseover', function mouseover(this: EventTarget) {
d3.select(this).style({ d3.select(this).style({
fill: style.text.colors.hover, fill: style.text.colors.hover,
}); });
}) })
.on('mouseout', function mouseout(this: any) { .on('mouseout', function mouseout(this: EventTarget) {
d3.select(this).style({ d3.select(this).style({
fill: style.text.colors.default, fill: style.text.colors.default,
}); });
@ -401,7 +401,7 @@ export default function (
if (!tooltipOptions.disabled) { if (!tooltipOptions.disabled) {
nodeEnter.call( nodeEnter.call(
d3tooltip(d3, 'tooltip', { ...tooltipOptions, root }) d3tooltip<NodeWithId>(d3, 'tooltip', { ...tooltipOptions, root })
.text((d, i) => getTooltipString(d, i, tooltipOptions)) .text((d, i) => getTooltipString(d, i, tooltipOptions))
.style(tooltipOptions.style) .style(tooltipOptions.style)
); );

8
packages/d3tooltip/package.json
View File

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

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

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

8
packages/map2tree/package.json
View File

@ -49,10 +49,10 @@
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/lodash": "^4.14.176", "@types/lodash": "^4.14.176",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
@ -61,7 +61,7 @@
"jest": "^27.3.1", "jest": "^27.3.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.0.7", "ts-jest": "^27.0.7",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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/color": "^3.0.2",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/lodash.curry": "^4.1.6", "@types/lodash.curry": "^4.1.6",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "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>, style: defaultStyling as CSS.Properties<string | number>,
}); });
case 'function': case 'function':
return (styling: Styling, ...args: any[]) => return (styling: Styling, ...args: unknown[]) =>
merger({ merger({
className: customStyling as string, className: customStyling as string,
})((defaultStyling as StylingValueFunction)(styling, ...args)); })((defaultStyling as StylingValueFunction)(styling, ...args));
@ -82,7 +82,7 @@ const mergeStyling = (
...(customStyling as CSS.Properties<string | number>), ...(customStyling as CSS.Properties<string | number>),
}; };
case 'function': case 'function':
return (styling: Styling, ...args: any[]) => return (styling: Styling, ...args: unknown[]) =>
merger({ merger({
style: customStyling as CSS.Properties<string | number>, style: customStyling as CSS.Properties<string | number>,
})((defaultStyling as StylingValueFunction)(styling, ...args)); })((defaultStyling as StylingValueFunction)(styling, ...args));
@ -143,7 +143,7 @@ const mergeStylings = (
const getStylingByKeys = ( const getStylingByKeys = (
mergedStyling: StylingConfig, mergedStyling: StylingConfig,
keys: (string | false | undefined) | (string | false | undefined)[], keys: (string | false | undefined) | (string | false | undefined)[],
...args: any[] ...args: unknown[]
): Styling => { ): Styling => {
if (keys === null) { if (keys === null) {
return mergedStyling as unknown as Styling; 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 = ( export type StylingValueFunction = (
styling: Styling, styling: Styling,
...rest: any[] ...rest: unknown[]
) => Partial<Styling>; ) => Partial<Styling>;
export type StylingValue = export type StylingValue =
@ -28,5 +28,5 @@ export type Theme = string | Base16Theme | StylingConfig;
export type StylingFunction = ( export type StylingFunction = (
keys: (string | false | undefined) | (string | false | undefined)[], keys: (string | false | undefined) | (string | false | undefined)[],
...rest: any[] ...rest: unknown[]
) => Styling; ) => Styling;

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

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

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

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

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

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

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

@ -20,9 +20,9 @@
}, },
"dependencies": { "dependencies": {
"immutable": "^4.0.0", "immutable": "^4.0.0",
"react": "^16.14.0", "react": "^17.0.2",
"react-base16-styling": "^0.8.0", "react-base16-styling": "^0.8.0",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-json-tree": "^0.15.0" "react-json-tree": "^0.15.0"
}, },
"devDependencies": { "devDependencies": {
@ -30,20 +30,20 @@
"@babel/preset-env": "^7.15.8", "@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^17.0.10",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1", "@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0", "fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0", "html-webpack-plugin": "^5.4.0",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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: {
...style, ...style,
color: color:
!Number.isNaN(keyPath[0]) && !(parseInt(keyPath, 10) % 2) !Number.isNaN((keyPath as unknown[])[0]) &&
!(parseInt(keyPath as string, 10) % 2)
? '#33F' ? '#33F'
: style!.color, : style!.color,
}, },

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

@ -54,23 +54,23 @@
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/react-test-renderer": "^16.9.5", "@types/react-test-renderer": "^17.0.1",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1", "jest": "^27.3.1",
"react": "^16.14.0", "react": "^17.0.2",
"react-test-renderer": "^16.14.0", "react-test-renderer": "^17.0.2",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.0.7", "ts-jest": "^27.0.7",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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, backgroundColor: colors.BACKGROUND_COLOR,
}, },
value: ({ style }, nodeType, keyPath: (string | number)[]) => ({ value: ({ style }, nodeType, keyPath) => ({
style: { style: {
...style, ...style,
paddingTop: '0.25em', paddingTop: '0.25em',
@ -64,7 +64,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
WebkitUserSelect: 'text', WebkitUserSelect: 'text',
MozUserSelect: 'text', MozUserSelect: 'text',
wordWrap: 'break-word', wordWrap: 'break-word',
paddingLeft: keyPath.length > 1 ? '2.125em' : '1.25em', paddingLeft: (keyPath as unknown[]).length > 1 ? '2.125em' : '1.25em',
textIndent: '-0.5em', textIndent: '-0.5em',
wordBreak: 'break-all', wordBreak: 'break-all',
}, },
@ -136,18 +136,12 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
left: '-0.4em', left: '-0.4em',
}, },
nestedNode: ( nestedNode: ({ style }, keyPath, nodeType, expanded, expandable) => ({
{ style },
keyPath: (string | number)[],
nodeType,
expanded,
expandable
) => ({
style: { style: {
...style, ...style,
position: 'relative', position: 'relative',
paddingTop: '0.25em', paddingTop: '0.25em',
marginLeft: keyPath.length > 1 ? '0.875em' : 0, marginLeft: (keyPath as unknown[]).length > 1 ? '0.875em' : 0,
paddingLeft: !expandable ? '1.125em' : 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) { function getLength(type: string, collection: any) {
if (type === 'Object') { 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') { } else if (type === 'Array') {
return (collection as unknown[]).length; return (collection as unknown[]).length;
} }

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

@ -54,7 +54,7 @@
"lodash": "^4.17.21", "lodash": "^4.17.21",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-is": "^16.13.1", "react-is": "^17.0.2",
"react-redux": "^7.2.5", "react-redux": "^7.2.5",
"redux": "^4.1.1", "redux": "^4.1.1",
"redux-persist": "^6.0.0", "redux-persist": "^6.0.0",
@ -67,45 +67,43 @@
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@rjsf/core": "^3.2.0", "@rjsf/core": "^3.2.0",
"@types/enzyme": "^3.10.10", "@testing-library/jest-dom": "^5.14.1",
"@types/enzyme-adapter-react-16": "^1.0.6", "@testing-library/react": "^12.1.2",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@types/json-schema": "^7.0.9", "@types/json-schema": "^7.0.9",
"@types/lodash": "^4.14.176", "@types/lodash": "^4.14.176",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20", "@types/react-redux": "^7.1.20",
"@types/socketcluster-client": "^13.0.5", "@types/socketcluster-client": "^13.0.5",
"@types/styled-components": "^5.1.15", "@types/styled-components": "^5.1.15",
"@types/testing-library__jest-dom": "^5.14.1",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1", "@types/webpack-dev-server": "^4.3.1",
"@types/webpack-env": "^1.16.3", "@types/webpack-env": "^1.16.3",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"css-loader": "^6.4.0", "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": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.4.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", "html-webpack-plugin": "^5.4.0",
"jest": "^27.3.1", "jest": "^27.3.1",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"style-loader": "^3.3.0", "style-loader": "^3.3.1",
"styled-components": "^5.3.3", "styled-components": "^5.3.3",
"ts-jest": "^27.0.7", "ts-jest": "^27.0.7",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack": "^5.59.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 React, { Component } from 'react';
import { Delta, formatters } from 'jsondiffpatch'; import { Delta, formatters } from 'jsondiffpatch';
import styled from 'styled-components'; import styled, { ThemedStyledProps } from 'styled-components';
import { effects } from '@redux-devtools/ui'; import { effects } from '@redux-devtools/ui';
import { Theme } from '@redux-devtools/ui/lib/themes/default';
export const StyledContainer = styled.div` export const StyledContainer = styled.div`
.jsondiffpatch-delta { .jsondiffpatch-delta {
@ -18,7 +19,8 @@ export const StyledContainer = styled.div`
padding: 2px 3px; padding: 2px 3px;
border-radius: 3px; border-radius: 3px;
position: relative; 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; display: inline-block;
} }
@ -42,20 +44,25 @@ export const StyledContainer = styled.div`
.jsondiffpatch-modified .jsondiffpatch-right-value:before { .jsondiffpatch-modified .jsondiffpatch-right-value:before {
vertical-align: top; vertical-align: top;
padding: 2px; padding: 2px;
color: ${(props) => props.theme.base0E}; ${/* eslint-disable-next-line @typescript-eslint/ban-types */ ''}
color: ${(props: ThemedStyledProps<{}, Theme>) => props.theme.base0E};
content: ' => '; content: ' => ';
} }
.jsondiffpatch-added .jsondiffpatch-value pre, .jsondiffpatch-added .jsondiffpatch-value pre,
.jsondiffpatch-modified .jsondiffpatch-right-value pre, .jsondiffpatch-modified .jsondiffpatch-right-value pre,
.jsondiffpatch-textdiff-added { .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-deleted pre,
.jsondiffpatch-modified .jsondiffpatch-left-value pre, .jsondiffpatch-modified .jsondiffpatch-left-value pre,
.jsondiffpatch-textdiff-deleted { .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; text-decoration: line-through;
} }
@ -122,12 +129,14 @@ export const StyledContainer = styled.div`
padding: 2px 0; padding: 2px 0;
padding-right: 5px; padding-right: 5px;
vertical-align: top; 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 { .jsondiffpatch-property-name:after {
content: ': '; 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 { .jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
@ -163,7 +172,8 @@ export const StyledContainer = styled.div`
} }
.jsondiffpatch-value pre:after { .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: ','; content: ',';
} }
@ -186,7 +196,8 @@ export const StyledContainer = styled.div`
.jsondiffpatch-moved .jsondiffpatch-moved-destination { .jsondiffpatch-moved .jsondiffpatch-moved-destination {
display: inline-block; 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 { .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 = recompute(
newState, newState,
request.batched ? payload : (payload as unknown as State[])[i], request.batched ? payload : (payload as unknown as State[])[i],
action[i], action[i] as PerformAction<Action<unknown>>,
newState.nextActionId + 1, newState.nextActionId + 1,
maxAge, maxAge,
isExcess isExcess

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

@ -40,7 +40,7 @@ export default function configureStore(
module.hot.accept('../reducers', () => { module.hot.accept('../reducers', () => {
// eslint-disable-next-line @typescript-eslint/no-var-requires // eslint-disable-next-line @typescript-eslint/no-var-requires
const nextReducer = require('../reducers'); // eslint-disable-line global-require 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 { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux'; import { createStore, applyMiddleware } from 'redux';
import { mount, ReactWrapper } from 'enzyme'; import { render, screen, within } from '@testing-library/react';
// import { mountToJson } from 'enzyme-to-json';
import App from '../src/containers/App'; import App from '../src/containers/App';
import api from '../src/middlewares/api'; import api from '../src/middlewares/api';
import exportState from '../src/middlewares/exportState'; import exportState from '../src/middlewares/exportState';
@ -10,39 +9,28 @@ import rootReducer from '../src/reducers';
import { DATA_TYPE_KEY } from '../src/constants/dataTypes'; import { DATA_TYPE_KEY } from '../src/constants/dataTypes';
import stringifyJSON from '../src/utils/stringifyJSON'; import stringifyJSON from '../src/utils/stringifyJSON';
let wrapper: ReactWrapper<unknown, unknown, Component>;
const store = createStore(rootReducer, applyMiddleware(exportState, api)); const store = createStore(rootReducer, applyMiddleware(exportState, api));
describe('App container', () => { describe('App container', () => {
beforeAll(() => { it("should render inspector monitor's wrapper", () => {
wrapper = mount( render(
<Provider store={store}> <Provider store={store}>
<App /> <App />
</Provider> </Provider>
); );
}); expect(screen.getByTestId('inspector')).toBeDefined();
/*
it('should render the App', () => {
expect(mountToJson(wrapper)).toMatchSnapshot();
});
*/
it("should render inspector monitor's wrapper", () => {
expect(wrapper.find('DevtoolsInspector').html()).toBeDefined();
}); });
it('should contain an empty action list', () => { it('should contain an empty action list', () => {
render(
<Provider store={store}>
<App />
</Provider>
);
const actionList = screen.getByTestId('actionList');
expect( expect(
wrapper within(actionList).getByTestId('actionListRows')
.find('ActionList') ).toBeEmptyDOMElement();
.findWhere((n) => {
const { className } = n.props();
return className && className.startsWith('actionListRows-');
})
.html()
).toMatch(/<div class="actionListRows-\d-\d-\d+"><\/div>/);
}); });
}); });

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

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

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

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

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

@ -41,7 +41,7 @@
}, },
"dependencies": { "dependencies": {
"@redux-devtools/app": "^1.0.0-8", "@redux-devtools/app": "^1.0.0-8",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"apollo-server": "^2.25.2", "apollo-server": "^2.25.2",
"apollo-server-express": "^2.25.2", "apollo-server-express": "^2.25.2",
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
@ -56,10 +56,10 @@
"lodash": "^4.17.21", "lodash": "^4.17.21",
"minimist": "^1.2.5", "minimist": "^1.2.5",
"morgan": "^1.10.0", "morgan": "^1.10.0",
"open": "^8.3.0", "open": "^8.4.0",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-is": "^16.13.1", "react-is": "^17.0.2",
"semver": "^7.3.5", "semver": "^7.3.5",
"socketcluster": "^14.4.2", "socketcluster": "^14.4.2",
"sqlite3": "^5.0.2", "sqlite3": "^5.0.2",
@ -82,8 +82,8 @@
"@types/styled-components": "^5.1.15", "@types/styled-components": "^5.1.15",
"@types/supertest": "^2.0.11", "@types/supertest": "^2.0.11",
"@types/uuid": "^8.3.1", "@types/uuid": "^8.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "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( return JSON.parse(
fs.readFileSync(path.join(modulePath, 'package.json'), 'utf-8') fs.readFileSync(path.join(modulePath, 'package.json'), 'utf-8')
).version; ).version;
@ -41,14 +41,14 @@ function getServerFlag(moduleName: string, version: string): string {
export const dir = 'local-cli/server'; export const dir = 'local-cli/server';
export const file = 'server.js'; export const file = 'server.js';
export const fullPath = path.join(exports.dir, exports.file); export const fullPath = path.join(dir, file);
export function inject( export function inject(
modulePath: string, modulePath: string,
options: Options, options: Options,
moduleName: string moduleName: string
) { ) {
const filePath = path.join(modulePath, exports.fullPath); const filePath = path.join(modulePath, fullPath);
if (!fs.existsSync(filePath)) return false; if (!fs.existsSync(filePath)) return false;
const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath)); const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));
@ -85,7 +85,7 @@ export function revert(
options: Options, options: Options,
moduleName: string moduleName: string
) { ) {
const filePath = path.join(modulePath, exports.fullPath); const filePath = path.join(modulePath, fullPath);
if (!fs.existsSync(filePath)) return false; if (!fs.existsSync(filePath)) return false;
const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath)); 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 { try {
const port = options.port ? `--port=${options.port}` : ''; const port = options.port ? `--port=${options.port}` : '';
// eslint-disable-next-line @typescript-eslint/no-var-requires // eslint-disable-next-line @typescript-eslint/no-var-requires
spawn.sync(require('electron'), [ spawn.sync(require('electron') as string, [
path.join(__dirname, '..', '..', 'app'), path.join(__dirname, '..', '..', 'app'),
port, 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') { if (argv.protocol === 'https') {
argv.key = argv.key ? readFile(argv.key) : null; argv.key = argv.key ? readFile(argv.key as string) : null;
argv.cert = argv.cert ? readFile(argv.cert) : null; argv.cert = argv.cert ? readFile(argv.cert as string) : null;
} }
function log(pass: boolean, msg: string) { function log(pass: boolean, msg: string) {
@ -76,13 +76,13 @@ function injectRN(type: string, msg: string) {
if (argv.revert) { if (argv.revert) {
injectRN( injectRN(
argv.revert, argv.revert as string,
'Revert injection of ReduxDevTools server from React Native local server' 'Revert injection of ReduxDevTools server from React Native local server'
); );
} }
if (argv.injectserver) { if (argv.injectserver) {
injectRN( injectRN(
argv.injectserver, argv.injectserver as string,
'Inject ReduxDevTools server into React Native local server' 'Inject ReduxDevTools server into React Native local server'
); );
} }
@ -91,7 +91,7 @@ if (argv.injectserver) {
server(argv).then(function (r) { server(argv).then(function (r) {
if (argv.open && argv.open !== 'false') { if (argv.open && argv.open !== 'false') {
r.on('ready', async function () { 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 path from 'path';
import knexModule from 'knex'; import knexModule, { Config } from 'knex';
import { SCServer } from 'socketcluster-server'; import { SCServer } from 'socketcluster-server';
export default function connector(options: SCServer.SCServerOptions) { export default function connector(options: SCServer.SCServerOptions) {
const dbOptions = options.dbOptions; const dbOptions = options.dbOptions as Config;
dbOptions.useNullAsDefault = true; dbOptions.useNullAsDefault = true;
if (!dbOptions.migrate) { if (!(dbOptions as any).migrate) {
return knexModule(dbOptions); 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 { export default function getOptions(argv: { [arg: string]: any }): Options {
let dbOptions = argv.dbOptions; let dbOptions = argv.dbOptions;
if (typeof dbOptions === 'string') { 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') { } else if (typeof dbOptions === 'undefined') {
dbOptions = require('../defaultDbOptions.json'); dbOptions = require('../defaultDbOptions.json');
} }

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

@ -1,11 +1,12 @@
import path from 'path'; import path from 'path';
import express from 'express'; import express from 'express';
import morgan from 'morgan'; import morgan from 'morgan';
import * as http from 'http';
import bodyParser from 'body-parser'; import bodyParser from 'body-parser';
import cors from 'cors'; import cors from 'cors';
import { SCServer } from 'socketcluster-server'; import { SCServer } from 'socketcluster-server';
import graphqlMiddleware from './middleware/graphql'; import graphqlMiddleware from './middleware/graphql';
import { ReportBaseFields, Store } from './store'; import { AddData, ReportBaseFields, Store } from './store';
const app = express.Router(); const app = express.Router();
@ -27,7 +28,15 @@ function routes(
if (logHTTPRequests) { if (logHTTPRequests) {
if (typeof logHTTPRequests === 'object') 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')); else app.use(morgan('combined'));
} }
@ -55,7 +64,7 @@ function routes(
switch (req.body.op) { switch (req.body.op) {
case 'get': case 'get':
store store
.get(req.body.id) .get(req.body.id as string)
.then(function (r) { .then(function (r) {
res.send(r || {}); res.send(r || {});
}) })
@ -66,7 +75,7 @@ function routes(
break; break;
case 'list': case 'list':
store store
.list(req.body.query, req.body.fields) .list(req.body.query, req.body.fields as string[])
.then(function (r) { .then(function (r) {
res.send(r); res.send(r);
}) })
@ -77,7 +86,7 @@ function routes(
break; break;
default: default:
store store
.add(req.body) .add(req.body as AddData)
.then(function (r) { .then(function (r) {
res.send({ res.send({
id: (r as ReportBaseFields).id, 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(); return knex(reports).where('id', id).first();
} }
interface AddData { export interface AddData {
type: ReportType | null; type: ReportType | null;
title: string | null; title: string | null;
description: 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); respond(null, channelToWatch);
}); });
socket.on('getReport', function (id, respond) { socket.on('getReport', function (id: string, respond) {
store store
.get(id) .get(id)
.then(function (data) { .then(function (data) {

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

@ -51,13 +51,13 @@
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0", "@redux-devtools/core": "^3.9.0",
"@types/parse-key": "^0.2.0", "@types/parse-key": "^0.2.0",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"react": "^16.14.0", "react": "^17.0.2",
"redux": "^4.1.1", "redux": "^4.1.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.4.4" "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", "history": "^4.10.1",
"immutable": "^4.0.0", "immutable": "^4.0.0",
"lodash.shuffle": "^4.2.0", "lodash.shuffle": "^4.2.0",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-redux": "^7.2.5", "react-redux": "^7.2.5",
"react-router": "^5.2.1", "react-router": "^5.2.1",
"redux": "^4.1.1", "redux": "^4.1.1",
@ -33,16 +33,16 @@
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/history": "^4.7.9", "@types/history": "^4.7.9",
"@types/lodash.shuffle": "^4.2.6", "@types/lodash.shuffle": "^4.2.6",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20", "@types/react-redux": "^7.1.20",
"@types/react-router": "^5.1.17", "@types/react-router": "^5.1.17",
"@types/redux-logger": "^3.0.9", "@types/redux-logger": "^3.0.9",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1", "@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"css-loader": "^6.4.0", "css-loader": "^6.4.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
@ -50,8 +50,8 @@
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0", "fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0", "html-webpack-plugin": "^5.4.0",
"style-loader": "^3.3.0", "style-loader": "^3.3.1",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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 = { module.exports = {
preset: 'ts-jest', preset: 'ts-jest',
setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
testEnvironment: 'jsdom', testEnvironment: 'jsdom',
moduleNameMapper: { moduleNameMapper: {
'\\.css$': '<rootDir>/test/__mocks__/styleMock.ts', '\\.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", "@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0", "@redux-devtools/core": "^3.9.0",
"@redux-devtools/inspector-monitor": "^1.0.0", "@redux-devtools/inspector-monitor": "^1.0.0",
"@types/enzyme": "^3.10.10", "@testing-library/react": "^12.1.2",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/es6template": "^1.0.0", "@types/es6template": "^1.0.0",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@types/object-path": "^0.11.1", "@types/object-path": "^0.11.1",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/simple-diff": "^1.6.1", "@types/simple-diff": "^1.6.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1", "jest": "^27.3.1",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"redux": "^4.1.1", "redux": "^4.1.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.0.7", "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 React from 'react';
import { render } from 'enzyme'; import { render } from '@testing-library/react';
import { renderToJson } from 'enzyme-to-json';
import { PerformAction } from '@redux-devtools/core'; import { PerformAction } from '@redux-devtools/core';
import { Action } from 'redux'; import { Action } from 'redux';
import TestGenerator from '../src/TestGenerator'; import TestGenerator from '../src/TestGenerator';
@ -30,12 +29,12 @@ const TestGeneratorAsAny = TestGenerator as any;
describe('TestGenerator component', () => { describe('TestGenerator component', () => {
it('should show warning message when no params provided', () => { it('should show warning message when no params provided', () => {
const component = render(<TestGeneratorAsAny useCodemirror={false} />); const { container } = render(<TestGeneratorAsAny useCodemirror={false} />);
expect(renderToJson(component)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should be empty when no actions provided', () => { it('should be empty when no actions provided', () => {
const component = render( const { container } = render(
<TestGeneratorAsAny <TestGeneratorAsAny
assertion={fnTemplate.assertion} assertion={fnTemplate.assertion}
dispatcher={fnTemplate.dispatcher} dispatcher={fnTemplate.dispatcher}
@ -43,11 +42,11 @@ describe('TestGenerator component', () => {
useCodemirror={false} useCodemirror={false}
/> />
); );
expect(renderToJson(component)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it("should match function template's test for first action", () => { it("should match function template's test for first action", () => {
const component = render( const { container } = render(
<TestGeneratorAsAny <TestGeneratorAsAny
assertion={fnTemplate.assertion} assertion={fnTemplate.assertion}
dispatcher={fnTemplate.dispatcher} dispatcher={fnTemplate.dispatcher}
@ -58,11 +57,11 @@ describe('TestGenerator component', () => {
useCodemirror={false} useCodemirror={false}
/> />
); );
expect(renderToJson(component)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it("should match string template's test for first action", () => { it("should match string template's test for first action", () => {
const component = render( const { container } = render(
<TestGeneratorAsAny <TestGeneratorAsAny
assertion={strTemplate.assertion} assertion={strTemplate.assertion}
dispatcher={strTemplate.dispatcher} dispatcher={strTemplate.dispatcher}
@ -73,11 +72,11 @@ describe('TestGenerator component', () => {
selectedActionId={1} selectedActionId={1}
/> />
); );
expect(renderToJson(component)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should generate test for the last action when selectedActionId not specified', () => { it('should generate test for the last action when selectedActionId not specified', () => {
const component = render( const { container } = render(
<TestGeneratorAsAny <TestGeneratorAsAny
assertion={fnTemplate.assertion} assertion={fnTemplate.assertion}
dispatcher={fnTemplate.dispatcher} dispatcher={fnTemplate.dispatcher}
@ -87,11 +86,11 @@ describe('TestGenerator component', () => {
useCodemirror={false} useCodemirror={false}
/> />
); );
expect(renderToJson(component)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should generate test for vanilla js class', () => { it('should generate test for vanilla js class', () => {
const component = render( const { container } = render(
<TestGeneratorAsAny <TestGeneratorAsAny
assertion={fnVanillaTemplate.assertion} assertion={fnVanillaTemplate.assertion}
dispatcher={fnVanillaTemplate.dispatcher} dispatcher={fnVanillaTemplate.dispatcher}
@ -104,11 +103,11 @@ describe('TestGenerator component', () => {
useCodemirror={false} useCodemirror={false}
/> />
); );
expect(renderToJson(component)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should generate test for vanilla js class with string template', () => { it('should generate test for vanilla js class with string template', () => {
const component = render( const { container } = render(
<TestGeneratorAsAny <TestGeneratorAsAny
assertion={strVanillaTemplate.assertion} assertion={strVanillaTemplate.assertion}
dispatcher={strVanillaTemplate.dispatcher} dispatcher={strVanillaTemplate.dispatcher}
@ -121,6 +120,6 @@ describe('TestGenerator component', () => {
useCodemirror={false} 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`] = ` exports[`TestGenerator component should be empty when no actions provided 1`] = `
<textarea <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`] = ` exports[`TestGenerator component should generate test for the last action when selectedActionId not specified 1`] = `
<textarea <textarea
style="padding:10px;width:100%;height:100%" style="padding: 10px; width: 100%; height: 100%;"
> >
import expect from 'expect'; import expect from 'expect';
import reducers from '../../reducers'; import reducers from '../../reducers';
@ -26,7 +26,7 @@ expect(state).toEqual({counter:1});
exports[`TestGenerator component should generate test for vanilla js class 1`] = ` exports[`TestGenerator component should generate test for vanilla js class 1`] = `
<textarea <textarea
style="padding:10px;width:100%;height:100%" style="padding: 10px; width: 100%; height: 100%;"
> >
import expect from 'expect'; import expect from 'expect';
import SomeStore from '../../stores/SomeStore'; 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`] = ` exports[`TestGenerator component should generate test for vanilla js class with string template 1`] = `
<textarea <textarea
style="padding:10px;width:100%;height:100%" style="padding: 10px; width: 100%; height: 100%;"
> >
import expect from 'expect'; import expect from 'expect';
import SomeStore from '../../stores/SomeStore'; 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`] = ` exports[`TestGenerator component should match function template's test for first action 1`] = `
<textarea <textarea
style="padding:10px;width:100%;height:100%" style="padding: 10px; width: 100%; height: 100%;"
> >
import expect from 'expect'; import expect from 'expect';
import reducers from '../../reducers'; 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`] = ` exports[`TestGenerator component should match string template's test for first action 1`] = `
<textarea <textarea
style="padding:10px;width:100%;height:100%" style="padding: 10px; width: 100%; height: 100%;"
> >
import expect from 'expect'; import expect from 'expect';
import reducers from '../../reducers'; import reducers from '../../reducers';
@ -98,6 +98,6 @@ describe('reducers', () =&gt; {
exports[`TestGenerator component should show warning message when no params provided 1`] = ` exports[`TestGenerator component should show warning message when no params provided 1`] = `
<textarea <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": { "dependencies": {
"@babel/code-frame": "^7.15.8", "@babel/code-frame": "^7.15.8",
"@babel/runtime": "^7.15.4", "@babel/runtime": "^7.15.4",
"@types/chrome": "^0.0.159", "@types/chrome": "^0.0.161",
"anser": "^2.1.0", "anser": "^2.1.0",
"html-entities": "^2.3.2", "html-entities": "^2.3.2",
"path-browserify": "^1.0.1",
"redux-devtools-themes": "^1.0.0", "redux-devtools-themes": "^1.0.0",
"source-map": "^0.5.7" "source-map": "^0.5.7"
}, },
@ -43,27 +44,23 @@
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0", "@redux-devtools/core": "^3.9.0",
"@redux-devtools/inspector-monitor": "^1.0.0", "@redux-devtools/inspector-monitor": "^1.0.0",
"@testing-library/react": "^12.1.2",
"@types/babel__code-frame": "^7.0.3", "@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/html-entities": "^1.3.4",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/redux-devtools-themes": "^1.0.0", "@types/redux-devtools-themes": "^1.0.0",
"@types/source-map": "0.5.2", "@types/source-map": "0.5.2",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1", "jest": "^27.3.1",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-test-renderer": "^16.14.0", "react-test-renderer": "^17.0.2",
"redux": "^4.1.1", "redux": "^4.1.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"ts-jest": "^27.0.7", "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) getStackFrames(deserializedError)
.then((stackFrames) => { .then((stackFrames) => {
/* eslint-disable no-console */
if (process.env.NODE_ENV === 'development')
console.log('Stack frames: ', stackFrames);
/* eslint-enable no-console */
this.setState({ this.setState({
stackFrames: stackFrames!, stackFrames: stackFrames!,
currentError: deserializedError, 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 // sublime, emacs, macvim, textmate + custom like https://github.com/eclemens/atom-url-handler
url = `${editor}://open/?url=file://${projectPath}${filePath}&line=${line}&column=${column}`; 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.devtools && !isFF) {
if (chrome.tabs) openAndCloseTab(url); if (chrome.tabs) openAndCloseTab(url);
else window.open(url); else window.open(url);
@ -102,9 +101,6 @@ export default function openFile(
lineNumber: number, lineNumber: number,
stackFrame: StackFrame 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 if (!chrome || !chrome.storage) return; // TODO: Pass editor settings for using outside of browser extension
const storage = isFF const storage = isFF
? chrome.storage.local ? chrome.storage.local
@ -118,7 +114,7 @@ export default function openFile(
typeof editor === 'string' && typeof editor === 'string' &&
/^\w{1,30}$/.test(editor) /^\w{1,30}$/.test(editor)
) { ) {
openInEditor(editor.toLowerCase(), projectPath, stackFrame); openInEditor(editor.toLowerCase(), projectPath as string, stackFrame);
} else { } else {
if ( if (
chrome.devtools && 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() { 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>. * 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; __source_map: SourceMapConsumer;
constructor(sourceMap: SourceMapConsumer) { constructor(sourceMap: SourceMapConsumer) {
@ -74,7 +74,7 @@ class SourceMap {
} }
} }
function extractSourceMapUrl( export function extractSourceMapUrl(
fileUri: string, fileUri: string,
fileContents: string fileContents: string
): Promise<string> { ): Promise<string> {
@ -98,7 +98,7 @@ function extractSourceMapUrl(
* @param {string} fileUri The URI of the source file. * @param {string} fileUri The URI of the source file.
* @param {string} fileContents The contents of the source file. * @param {string} fileContents The contents of the source file.
*/ */
async function getSourceMap( export async function getSourceMap(
//function getSourceMap( //function getSourceMap(
fileUri: string, fileUri: string,
fileContents: string fileContents: string
@ -120,7 +120,7 @@ async function getSourceMap(
const index = fileUri.lastIndexOf('/'); const index = fileUri.lastIndexOf('/');
const url = fileUri.substring(0, index + 1) + sm; const url = fileUri.substring(0, index + 1) + sm;
const obj = await fetch(url).then((res) => res.json()); 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; 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 StackFrame from './stack-frame';
import { getSourceMap } from './getSourceMap'; import { getSourceMap, SourceMap } from './getSourceMap';
import { getLinesAround } from './getLinesAround'; import { getLinesAround } from './getLinesAround';
/** /**
@ -18,7 +18,12 @@ async function map(
frames: StackFrame[], frames: StackFrame[],
contextLines = 3 contextLines = 3
): Promise<StackFrame[]> { ): Promise<StackFrame[]> {
const cache: any = {}; const cache: {
[fileName: string]: {
readonly fileSource: string;
readonly map: SourceMap;
};
} = {};
const files: string[] = []; const files: string[] = [];
frames.forEach((frame) => { frames.forEach((frame) => {
const { fileName } = frame; const { fileName } = frame;
@ -45,7 +50,7 @@ async function map(
} }
const { source, line, column } = map.getOriginalPosition( const { source, line, column } = map.getOriginalPosition(
lineNumber, lineNumber,
columnNumber columnNumber!
); );
const originalSource = source == null ? [] : map.getSource(source) || []; const originalSource = source == null ? [] : map.getSource(source) || [];
return new StackFrame( return new StackFrame(
@ -58,7 +63,7 @@ async function map(
source, source,
line, line,
column, 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 StackFrame from './stack-frame';
import { getSourceMap } from './getSourceMap'; import { getSourceMap } from './getSourceMap';
import { getLinesAround } from './getLinesAround'; import { getLinesAround } from './getLinesAround';
import path from 'path'; import path from 'path-browserify';
function count(search: string, string: string): number { function count(search: string, string: string): number {
// Count starts at -1 becuse a do-while loop always runs at least once // 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 React from 'react';
import { configure, mount, ReactWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import toJson from 'enzyme-to-json';
import StackTraceTab from '../src/StackTraceTab'; 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 = { const actions = {
0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } }, 0: { type: 'PERFORM_ACTION', action: { type: '@@INIT' } },
1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT_COUNTER' } }, 1: { type: 'PERFORM_ACTION', action: { type: 'INCREMENT_COUNTER' } },
@ -32,37 +17,32 @@ const actions = {
const StackTraceTabAsAny = StackTraceTab as any; const StackTraceTabAsAny = StackTraceTab as any;
describe('StackTraceTab component', () => { describe('StackTraceTab component', () => {
it('should render with no props', () => { it('should render with no props', async () => {
return new Promise<void>((done) => { const { container } = render(<StackTraceTabAsAny />);
const component = mount(<StackTraceTabAsAny />); await screen.findByTestId('stack-trace');
genAsyncSnapshot(component, done); expect(container.firstChild).toMatchSnapshot();
});
}); });
it('should render with props, but without stack', () => { it('should render with props, but without stack', async () => {
return new Promise<void>((done) => { const { container } = render(
const component = mount(
<StackTraceTabAsAny actions={actions} action={actions[0].action} /> <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', () => { it('should render the link to docs', () => {
return new Promise<void>((done) => { const { container } = render(
const component = mount(
<StackTraceTabAsAny actions={actions} action={actions[1].action} /> <StackTraceTabAsAny actions={actions} action={actions[1].action} />
); );
genAsyncSnapshot(component, done); expect(container.firstChild).toMatchSnapshot();
});
}); });
it('should render with trace stack', () => { it('should render with trace stack', async () => {
return new Promise<void>((done) => { const { container } = render(
const component = mount(
<StackTraceTabAsAny actions={actions} action={actions[2].action} /> <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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StackTraceTab component should render the link to docs 1`] = ` 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 <div
style={ style="padding: 5px 10px;"
Object {
"padding": "5px 10px",
}
}
> >
To enable tracing action calls, you should set \`trace\` option to \`true\` for Redux DevTools enhancer. Refer to To enable tracing action calls, you should set \`trace\` option to \`true\` for Redux DevTools enhancer. Refer to
<a <a
href="#" href="#"
onClick={[Function]}
> >
this page this page
</a> </a>
for more details. for more details.
</div> </div>
</StackTraceTab>
`; `;
exports[`StackTraceTab component should render with no props 1`] = ` exports[`StackTraceTab component should render with no props 1`] = `
<StackTraceTab <div
openFile={[Function]} style="padding: 5px 10px;"
> >
<div <div
style={ data-testid="stack-trace"
Object { style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
"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",
}
}
/> />
</StackTrace>
</div> </div>
</StackTraceTab>
`; `;
exports[`StackTraceTab component should render with props, but without stack 1`] = ` exports[`StackTraceTab component should render with props, but without stack 1`] = `
<StackTraceTab <div
action={ style="padding: 5px 10px;"
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 <div
style={ data-testid="stack-trace"
Object { style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
"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",
}
}
/> />
</StackTrace>
</div> </div>
</StackTraceTab>
`; `;
exports[`StackTraceTab component should render with trace stack 1`] = ` exports[`StackTraceTab component should render with trace stack 1`] = `
<StackTraceTab <div
action={ style="padding: 5px 10px;"
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 <div
style={ data-testid="stack-trace"
Object { style="font-size: 1em; flex: 0 1 auto; min-height: 0px; overflow: auto;"
"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"
> >
<div> <div>
<button <button
onClick={[Function]} 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;"
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%",
}
}
> >
▼ 2 stack frames were expanded. ▼ 2 stack frames were expanded.
</button> </button>
<div <div
style={ style="display: block;"
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}
> >
<div> <div>
<div> <div>
fn1 fn1
</div> </div>
<div <div
style={ style="font-size: 0.9em; margin-bottom: 0.9em;"
Object {
"fontSize": "0.9em",
"marginBottom": "0.9em",
}
}
> >
<span> <span>
app.js:72:24 app.js:72:24
</span> </span>
</div> </div>
</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>
<div> <div>
fn2 fn2
</div> </div>
<div <div
style={ style="font-size: 0.9em; margin-bottom: 0.9em;"
Object {
"fontSize": "0.9em",
"marginBottom": "0.9em",
}
}
> >
<span> <span>
app.js:84:31 app.js:84:31
</span> </span>
</div> </div>
</div> </div>
</StackFrame>
<button <button
onClick={[Function]} 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;"
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%",
}
}
> >
▲ 2 stack frames were expanded. ▲ 2 stack frames were expanded.
</button> </button>
</div> </div>
</div> </div>
</Collapsible>
</div> </div>
</StackTrace>
</div> </div>
</StackTraceTab>
`; `;

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

@ -18,9 +18,9 @@
"history": "^4.10.1", "history": "^4.10.1",
"immutable": "^4.0.0", "immutable": "^4.0.0",
"lodash.shuffle": "^4.2.0", "lodash.shuffle": "^4.2.0",
"react": "^16.14.0", "react": "^17.0.2",
"react-bootstrap": "^1.6.4", "react-bootstrap": "^2.0.0",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-redux": "^7.2.5", "react-redux": "^7.2.5",
"react-router": "^5.2.1", "react-router": "^5.2.1",
"redux": "^4.1.1", "redux": "^4.1.1",
@ -34,23 +34,23 @@
"@types/base16": "^1.0.2", "@types/base16": "^1.0.2",
"@types/history": "^4.7.9", "@types/history": "^4.7.9",
"@types/lodash.shuffle": "^4.2.6", "@types/lodash.shuffle": "^4.2.6",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20", "@types/react-redux": "^7.1.20",
"@types/react-router": "^5.1.17", "@types/react-router": "^5.1.17",
"@types/redux-logger": "^3.0.9", "@types/redux-logger": "^3.0.9",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1", "@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0", "fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0", "html-webpack-plugin": "^5.4.0",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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> </FormControl>
<InputGroup.Append>
<a onClick={this.toggleTheme} style={styles.link}> <a onClick={this.toggleTheme} style={styles.link}>
{options.dark ? 'Light theme' : 'Dark theme'} {options.dark ? 'Light theme' : 'Dark theme'}
</a> </a>
</InputGroup.Append>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>

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

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

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

@ -140,6 +140,7 @@ export default class ActionList<
return ( return (
<div <div
key="actionList" key="actionList"
data-testid="actionList"
{...styling( {...styling(
['actionList', isWideLayout && 'actionListWide'], ['actionList', isWideLayout && 'actionListWide'],
isWideLayout isWideLayout
@ -154,7 +155,11 @@ export default class ActionList<
hasSkippedActions={skippedActionIds.length > 0} hasSkippedActions={skippedActionIds.length > 0}
hasStagedActions={actionIds.length > 1} hasStagedActions={actionIds.length > 1}
/> />
<div {...styling('actionListRows')} ref={this.getRef}> <div
data-testid="actionListRows"
{...styling('actionListRows')}
ref={this.getRef}
>
{filteredActionIds.map((actionId) => ( {filteredActionIds.map((actionId) => (
<ActionListRow <ActionListRow
key={actionId} 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 ( return (
<div <div
key="inspector" key="inspector"
data-testid="inspector"
ref={this.inspectorCreateRef} ref={this.inspectorCreateRef}
{...styling( {...styling(
['inspector', isWideLayout && 'inspectorWide'], ['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) { } else if (val === undefined) {
return 'undef'; return 'undef';
} else if (typeof val === 'object') { } 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') { } else if (typeof val === 'function') {
return 'fn'; return 'fn';
} else if (typeof val === 'string') { } else if (typeof val === 'string') {
@ -42,7 +43,8 @@ function getText(
isDiff: boolean | undefined isDiff: boolean | undefined
) { ) {
if (type === 'Object') { 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 ? '{…}' : '{}'; if (!isWideLayout) return keys.length ? '{…}' : '{}';
const str = keys const str = keys

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

@ -47,9 +47,9 @@
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/lodash": "^4.14.176", "@types/lodash": "^4.14.176",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "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-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0", "@redux-devtools/core": "^3.9.0",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"react": "^16.14.0", "react": "^17.0.2",
"redux": "^4.1.1", "redux": "^4.1.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.4.4" "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: {
...style, ...style,
backgroundColor: dataIsEqual(data, previousData, keyPath) backgroundColor: dataIsEqual(
data,
previousData,
keyPath as (string | number)[]
)
? 'transparent' ? 'transparent'
: this.props.theme.base01, : this.props.theme.base01,
}, },
@ -93,7 +97,7 @@ export default class LogMonitorEntry<
const getNestedNodeStyle: StylingValue = ({ style }, keyPath) => ({ const getNestedNodeStyle: StylingValue = ({ style }, keyPath) => ({
style: { style: {
...style, ...style,
...(keyPath.length > 1 ? {} : styles.root), ...((keyPath as unknown[]).length > 1 ? {} : styles.root),
}, },
}); });
theme = { theme = {

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

@ -14,15 +14,15 @@
"@chakra-ui/react": "^1.6.10", "@chakra-ui/react": "^1.6.10",
"@emotion/react": "^11.5.0", "@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0", "@emotion/styled": "^11.3.0",
"@mswjs/data": "^0.6.0", "@mswjs/data": "^0.7.0",
"@redux-devtools/core": "^3.9.0", "@redux-devtools/core": "^3.9.0",
"@redux-devtools/dock-monitor": "^1.4.0", "@redux-devtools/dock-monitor": "^1.4.0",
"@redux-devtools/rtk-query-monitor": "^1.0.0", "@redux-devtools/rtk-query-monitor": "^1.0.0",
"@reduxjs/toolkit": "^1.6.2", "@reduxjs/toolkit": "^1.6.2",
"framer-motion": "^4.1.17", "framer-motion": "^4.1.17",
"msw": "^0.35.0", "msw": "^0.35.0",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"react-redux": "^7.2.5", "react-redux": "^7.2.5",
"react-router-dom": "^5.3.0" "react-router-dom": "^5.3.0"
@ -34,15 +34,15 @@
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/copy-webpack-plugin": "^8.0.1", "@types/copy-webpack-plugin": "^8.0.1",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20", "@types/react-redux": "^7.1.20",
"@types/react-router-dom": "^5.3.1", "@types/react-router-dom": "^5.3.1",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1", "@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"copy-webpack-plugin": "^9.0.1", "copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.4.0", "css-loader": "^6.4.0",
@ -51,8 +51,8 @@
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0", "fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0", "html-webpack-plugin": "^5.4.0",
"style-loader": "^3.3.0", "style-loader": "^3.3.1",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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 = () => { export const PostDetail = () => {
const { id } = useParams<{ id: any }>(); const { id } = useParams<{ id: string }>();
const history = useHistory(); const history = useHistory();
const toast = useToast(); 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 }], 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) { query(id) {
return { return {
url: `posts/${id}`, url: `posts/${id}`,

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

@ -63,13 +63,13 @@
"@reduxjs/toolkit": "^1.6.2", "@reduxjs/toolkit": "^1.6.2",
"@types/hex-rgba": "^1.0.1", "@types/hex-rgba": "^1.0.1",
"@types/lodash.debounce": "^4.0.6", "@types/lodash.debounce": "^4.0.6",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"react": "^16.14.0", "react": "^17.0.2",
"redux": "^4.1.1", "redux": "^4.1.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.4.4" "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 isDiff: boolean | undefined
) { ) {
if (type === 'Object') { 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 ? '{…}' : '{}'; if (!previewContent) return keys.length ? '{…}' : '{}';
const str = keys const str = keys

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

@ -39,8 +39,8 @@
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/jsan": "^3.1.2", "@types/jsan": "^3.1.2",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "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>( export function refer<K extends string>(
data: { [key in K]: () => unknown }, data: { [key in K]: () => unknown },
type: string, 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 refs?: (new (data: any) => unknown)[] | null
): SerializedData { ): SerializedData {
const r = mark(data, type, transformMethod); const r = mark(data as { [key in K]: () => unknown }, type, transformMethod);
if (!refs) return r; if (!refs) return r;
for (let i = 0; i < refs.length; i++) { for (let i = 0; i < refs.length; i++) {
const ref = refs[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) { const TestClass = function (data: unknown) {
return data; return data;
}; };
const testInstance = new (TestClass as any)({ testData: 'test' }); const testInstance = new (TestClass as any)({
testData: 'test',
}) as unknown;
expect( expect(
refer(testInstance, 'testType', false, [TestClass as any]) refer(testInstance, 'testType', false, [TestClass as any])
).toMatchSnapshot(); ).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", "@redux-devtools/slider-monitor": "^2.0.0-8",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-redux": "^7.2.5", "react-redux": "^7.2.5",
"redux": "^4.1.1", "redux": "^4.1.1",
"todomvc-app-css": "^2.4.1" "todomvc-app-css": "^2.4.1"
@ -33,15 +33,15 @@
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@types/classnames": "^2.3.1", "@types/classnames": "^2.3.1",
"@types/node": "^14.17.27", "@types/node": "^14.17.29",
"@types/prop-types": "^15.7.4", "@types/prop-types": "^15.7.4",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/react-dom": "^16.9.14", "@types/react-dom": "^17.0.10",
"@types/react-redux": "^7.1.20", "@types/react-redux": "^7.1.20",
"@types/webpack": "^5.28.0", "@types/webpack": "^5.28.0",
"@types/webpack-dev-server": "^4.3.1", "@types/webpack-dev-server": "^4.3.1",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"css-loader": "^6.4.0", "css-loader": "^6.4.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
@ -49,8 +49,8 @@
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"fork-ts-checker-webpack-plugin": "^6.4.0", "fork-ts-checker-webpack-plugin": "^6.4.0",
"html-webpack-plugin": "^5.4.0", "html-webpack-plugin": "^5.4.0",
"style-loader": "^3.3.0", "style-loader": "^3.3.1",
"ts-node": "^10.3.0", "ts-node": "^10.4.0",
"typescript": "~4.4.4", "typescript": "~4.4.4",
"webpack": "^5.59.1", "webpack": "^5.59.1",
"webpack-cli": "^4.9.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-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0", "@babel/preset-typescript": "^7.15.0",
"@redux-devtools/core": "^3.9.0", "@redux-devtools/core": "^3.9.0",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"react": "^16.14.0", "react": "^17.0.2",
"redux": "^4.1.1", "redux": "^4.1.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "~4.4.4" "typescript": "~4.4.4"

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

@ -1,6 +1,5 @@
module.exports = { module.exports = {
preset: 'ts-jest', preset: 'ts-jest',
setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
testEnvironment: 'jsdom', testEnvironment: 'jsdom',
moduleNameMapper: { moduleNameMapper: {
'\\.css$': '<rootDir>/tests/__mocks__/styleMock.ts', '\\.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", "@babel/preset-typescript": "^7.15.0",
"@storybook/addon-essentials": "^6.3.12", "@storybook/addon-essentials": "^6.3.12",
"@storybook/react": "^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/color": "^3.0.2",
"@types/enzyme": "^3.10.10",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "^27.0.2", "@types/jest": "^27.0.2",
"@types/react": "^16.14.18", "@types/react": "^17.0.32",
"@types/styled-components": "^5.1.15", "@types/styled-components": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^4.33.0", "@typescript-eslint/parser": "^5.1.0",
"babel-loader": "^8.2.3",
"csstype": "^3.0.9", "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": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest": "^25.2.2", "eslint-plugin-jest": "^25.2.2",
"eslint-plugin-react": "^7.26.1", "eslint-plugin-react": "^7.26.1",
"jest": "^27.3.1", "jest": "^27.3.1",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^16.14.0", "react-dom": "^17.0.2",
"react-is": "^16.13.1", "react-is": "^17.0.2",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"styled-components": "^5.3.3", "styled-components": "^5.3.3",
"stylelint": "^13.13.1", "stylelint": "^14.0.0",
"stylelint-config-prettier": "^9.0.3", "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-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0", "stylelint-processor-styled-components": "^1.10.0",
"ts-jest": "^27.0.7", "ts-jest": "^27.0.7",
"typescript": "~4.4.4" "typescript": "~4.4.4",
"webpack": "^5.59.1"
}, },
"peerDependencies": { "peerDependencies": {
"@types/react": "^16.3.0 || ^17.0.0", "@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 color from '../../utils/color';
import { Theme } from '../../themes/default';
export const MainContainerWrapper = styled.div` export const MainContainerWrapper = styled.div`
display: flex; display: flex;
@ -7,7 +8,9 @@ export const MainContainerWrapper = styled.div`
width: 100%; width: 100%;
flex-flow: column nowrap; flex-flow: column nowrap;
overflow: auto; 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}; color: ${(props) => props.theme.base07};
font-size: 12px; 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> { export default class ContextMenu extends Component<ContextMenuProps> {
constructor(props: ContextMenuProps) {
super(props);
this.updateItems(props.items);
}
menu?: HTMLDivElement | null; 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() { componentDidMount() {
this.amendPosition(); this.amendPosition();
@ -84,8 +69,8 @@ export default class ContextMenu extends Component<ContextMenuProps> {
this.menu!.style.left = `${left}px`; this.menu!.style.left = `${left}px`;
} }
updateItems(items: Item[]) { renderItems() {
this.items = items.map((item) => { return this.props.items.map((item) => {
if (isReactButtonElement(item)) return item; if (isReactButtonElement(item)) return item;
const value = item.value || item.name; const value = item.value || item.name;
return ( return (
@ -113,7 +98,7 @@ export default class ContextMenu extends Component<ContextMenuProps> {
top={this.props.y} top={this.props.y}
visible={this.props.visible} visible={this.props.visible}
> >
{this.items} {this.renderItems()}
</ContextMenuWrapper> </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> { ): StyledComponent<C, Theme | Base16Theme, O> {
return (styled as ThemedStyledInterface<Theme>)((component || 'div') as C)` return (styled as ThemedStyledInterface<Theme>)((component || 'div') as C)`
${(props: ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>) => ${(props: ThemedStyledProps<StyledComponentPropsWithRef<C> & O, Theme>) =>
isThemeFromProvider(props.theme) isThemeFromProvider(props.theme as Theme | Base16Theme)
? getStyle(styles, props.theme.type) ? getStyle(styles, props.theme.type as string)
: // used outside of container (theme provider) : // used outside of container (theme provider)
getStyle( getStyle(
styles, styles,
'default' 'default'
)({ )({
...props, ...props,
theme: getDefaultTheme(props.theme), theme: getDefaultTheme(props.theme as Base16Theme),
})} })}
` as StyledComponent<C, Theme | Base16Theme, O>; ` 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 React from 'react';
import { render, mount } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { renderToJson } from 'enzyme-to-json'; import userEvent from '@testing-library/user-event';
import { Button } from '../src'; import { Button } from '../src';
describe('Button', function () { describe('Button', function () {
it('renders correctly', () => { it('renders correctly', () => {
const wrapper = render(<Button>Text</Button>); const { container } = render(<Button>Text</Button>);
expect(renderToJson(wrapper)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle the click event', () => { it('should handle the click event', () => {
const onClick = jest.fn(); const onClick = jest.fn();
const wrapper = mount(<Button onClick={onClick}>ClickMe</Button>); render(<Button onClick={onClick}>ClickMe</Button>);
wrapper.find('button').simulate('click'); userEvent.click(screen.getByRole('button'));
expect(onClick).toBeCalled(); expect(onClick).toHaveBeenCalled();
}); });
}); });

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

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

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

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

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

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme'; import { render } from '@testing-library/react';
import { mountToJson } from 'enzyme-to-json';
import { Editor } from '../src'; import { Editor } from '../src';
import 'codemirror/mode/javascript/javascript'; import 'codemirror/mode/javascript/javascript';
@ -25,17 +24,17 @@ describe('Editor', function () {
return range; return range;
}; };
const wrapper = mount(<Editor value="var a = 1;" />); const { container } = render(<Editor value="var a = 1;" />);
it('renders correctly', () => { it('renders correctly', () => {
expect(mountToJson(wrapper)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('calls getBoundingClientRect', () => { it('calls getBoundingClientRect', () => {
expect(getBoundingClientRect).toBeCalled(); expect(getBoundingClientRect).toHaveBeenCalled();
}); });
it('calls getClientRects', () => { 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 React from 'react';
import { shallow, mount } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { shallowToJson } from 'enzyme-to-json'; import userEvent from '@testing-library/user-event';
import { Form } from '../src'; import { Form } from '../src';
import { schema, uiSchema, formData } from '../src/Form/schema'; import { schema, uiSchema, formData } from '../src/Form/schema';
describe('Form', function () { 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', () => { it('renders correctly', () => {
const wrapper = shallow( const { container } = render(
<Form formData={formData} schema={schema} uiSchema={uiSchema} /> <Form formData={formData} schema={schema} uiSchema={uiSchema} />
); );
expect(shallowToJson(wrapper)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('renders with primary button', () => { it('renders with primary button', () => {
const wrapper = shallow( const { container } = render(
<Form <Form
primaryButton primaryButton
submitText="Custom button" submitText="Custom button"
@ -22,19 +34,19 @@ describe('Form', function () {
uiSchema={uiSchema} uiSchema={uiSchema}
/> />
); );
expect(shallowToJson(wrapper)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('renders with no button', () => { it('renders with no button', () => {
const wrapper = shallow( const { container } = render(
<Form formData={formData} schema={schema} uiSchema={uiSchema} noSubmit /> <Form formData={formData} schema={schema} uiSchema={uiSchema} noSubmit />
); );
expect(shallowToJson(wrapper)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('should handle the submit event', () => { it('should handle the submit event', () => {
const onSubmit = jest.fn(); const onSubmit = jest.fn();
const wrapper = mount( render(
<Form <Form
formData={formData} formData={formData}
schema={schema} schema={schema}
@ -43,7 +55,7 @@ describe('Form', function () {
/> />
); );
wrapper.find('form').simulate('submit'); userEvent.click(screen.getByRole('button', { name: 'Submit' }));
expect(onSubmit).toBeCalled(); expect(onSubmit).toHaveBeenCalled();
}); });
}); });

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

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

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

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

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

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

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

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

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

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

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

@ -1,11 +1,10 @@
import React from 'react'; import React from 'react';
import { render } from 'enzyme'; import { render } from '@testing-library/react';
import { renderToJson } from 'enzyme-to-json';
import { Toolbar, Divider, Spacer, Button } from '../src'; import { Toolbar, Divider, Spacer, Button } from '../src';
describe('Toolbar', function () { describe('Toolbar', function () {
it('renders correctly', () => { it('renders correctly', () => {
const wrapper = render( const { container } = render(
<Toolbar> <Toolbar>
<Button>1</Button> <Button>1</Button>
<Divider /> <Divider />
@ -13,11 +12,11 @@ describe('Toolbar', function () {
<Button>2</Button> <Button>2</Button>
</Toolbar> </Toolbar>
); );
expect(renderToJson(wrapper)).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
}); });
it('renders with props', () => { it('renders with props', () => {
const wrapper = render(<Toolbar borderPosition="top" />); const { container } = render(<Toolbar borderPosition="top" />);
expect(renderToJson(wrapper)).toMatchSnapshot(); 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`] = ` exports[`Container renders correctly 1`] = `
<div <div
class="sc-bdvvtL htahit" class="sc-bdvvtL gyKeHC"
> >
Text Text
</div> </div>

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

@ -3,6 +3,7 @@
exports[`ContextMenu renders correctly 1`] = ` exports[`ContextMenu renders correctly 1`] = `
<div <div
class="sc-jRQBWg deJyZB" class="sc-jRQBWg deJyZB"
style="top: 100px; left: 100px;"
> >
<button <button
value="Menu Item 1" 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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Editor renders correctly 1`] = ` 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 <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> </div>
</Editor> <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> <label>
Hi Hi
</label> </label>
<input <input
disabled="" disabled=""

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