redux-devtools/packages/redux-devtools-inspector-monitor-test-tab
Nathan Bierema 158ba2ce12
[inspector-monitor] Replace jss with Emotion (#1560)
* Setup Emotion

* Fix setup

* Start conversion

* actionList

* actionListHeader

* actionListRows

* actionListHeaderSelector

* actionListItem

* actionListItemTime

* actionListItemSelector

* actionListItemName

* actionListHeaderSearch

* actionListHeaderWrapper

* actionPreview

* Remaining css

* Format

* Propagate Emotion dependencies

* Fix tests

* Remove styling prop

* Remove jss

* Remove themeState

* Use color map as Emotion theme

* Rework theme resolution

* Inline CSS

* Remove usage of className

* Fix warning

* Create large-spoons-yell.md
2023-12-12 04:02:35 +00:00
..
demo [inspector-monitor] Replace jss with Emotion (#1560) 2023-12-12 04:02:35 +00:00
src Remove prop-types (#1557) 2023-12-10 00:50:15 -05:00
test Replace Action<unknown> with Action<string> (#1525) 2023-11-04 21:04:23 +00:00
.eslintignore Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
.eslintrc.js chore(deps): update typescript-eslint monorepo to v6 (major) (#1436) 2023-09-03 22:56:58 -04:00
babel.config.esm.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
babel.config.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
CHANGELOG.md Version Packages (#1552) 2023-12-09 05:05:25 +00:00
jest.config.js fix(deps): update dependency dateformat to v5 (#884) 2023-01-02 19:58:10 -05:00
LICENSE.md chore(test): rename test-generator to test-tab (#649) 2020-10-04 00:01:46 -04:00
package.json [inspector-monitor] Replace jss with Emotion (#1560) 2023-12-12 04:02:35 +00:00
README.md Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
tsconfig.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
tsconfig.test.json Use types in tscnofig to explicitly define global types (#1045) 2022-01-22 21:51:27 +00:00

Redux DevTools Test Generator

Installation

yarn add @redux-devtools/inspector-monitor-test-tab

Usage

If you use Redux DevTools Extension, Remote Redux DevTools or RemoteDev, it's already there, and no additional actions required.

With redux-devtools and redux-devtools-inspector-monitor:

containers/DevTools.js
import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import { InspectorMonitor } from '@redux-devtools/inspector-monitor';
import { TestTab, reduxMochaTemplate } from '@redux-devtools/inspector-monitor-test-tab'; // If using default tests.

const testComponent = (props) => (
  <TestTab
    expect={reduxMochaTemplate.expect} wrap={reduxMochaTemplate.wrap} useCodemirror
    {...props}
  />
);

export default createDevTools(
  <InspectorMonitor
    tabs: defaultTabs => [...defaultTabs, { name: 'Test', component: testComponent }]
  />
);

Instead of mochaTemplate.expect and mochaTemplate.wrap you can use your function templates.

If useCodemirror specified, include codemirror/lib/codemirror.css style and optionally themes from codemirror/theme/.

Props

Name Description
assertion String template or function with an object argument containing action, prevState, curState keys, which returns a string representing the assertion (see the function or template).
[wrap] Optional string template or function which gets assertions argument and returns a string (see the example function or template).
[useCodemirror] Boolean. If specified will use codemirror styles.
[theme] String. Name of the codemirror theme.

License

MIT