diff --git a/packages/redux-devtools-rtk-query-monitor/.eslintrc.js b/packages/redux-devtools-rtk-query-monitor/.eslintrc.js index 87abc2e1..89be4008 100644 --- a/packages/redux-devtools-rtk-query-monitor/.eslintrc.js +++ b/packages/redux-devtools-rtk-query-monitor/.eslintrc.js @@ -9,5 +9,13 @@ module.exports = { project: ['./tsconfig.json'], }, }, + { + files: ['test/**/*.ts'], + extends: '../../eslintrc.ts.jest.base.json', + parserOptions: { + tsconfigRootDir: __dirname, + project: ['./tsconfig.test.json'], + }, + }, ], }; diff --git a/packages/redux-devtools-rtk-query-monitor/jest.config.js b/packages/redux-devtools-rtk-query-monitor/jest.config.js new file mode 100644 index 00000000..35521fbf --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/jest.config.js @@ -0,0 +1,10 @@ +module.exports = { + preset: 'ts-jest', + setupFilesAfterEnv: ['/test/setup.ts'], + testEnvironment: 'jsdom', + globals: { + 'ts-jest': { + tsconfig: 'tsconfig.test.json', + }, + }, +}; diff --git a/packages/redux-devtools-rtk-query-monitor/package.json b/packages/redux-devtools-rtk-query-monitor/package.json index 77910b5a..bf4f9c7e 100644 --- a/packages/redux-devtools-rtk-query-monitor/package.json +++ b/packages/redux-devtools-rtk-query-monitor/package.json @@ -38,6 +38,7 @@ "build:types": "tsc --emitDeclarationOnly", "clean": "rimraf lib", "lint": "eslint . --ext .ts,.tsx", + "test": "jest", "type-check": "tsc --noEmit", "prepack": "yarn run clean && yarn run build", "prepublish": "yarn run type-check && yarn run lint" @@ -67,18 +68,26 @@ "@babel/preset-typescript": "^7.16.7", "@redux-devtools/core": "^3.11.0", "@reduxjs/toolkit": "^1.8.1", + "@testing-library/jest-dom": "^5.16.4", + "@testing-library/react": "^13.0.0", "@types/hex-rgba": "^1.0.1", + "@types/jest": "^27.4.1", "@types/lodash.debounce": "^4.0.6", + "@types/node": "^17.0.23", "@types/react": "^17.0.43", + "@types/testing-library__jest-dom": "^5.14.3", "@typescript-eslint/eslint-plugin": "^5.17.0", "@typescript-eslint/parser": "^5.17.0", "eslint": "^8.12.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-react": "~7.28.0", "eslint-plugin-react-hooks": "^4.4.0", - "react": "^17.0.2", + "jest": "^27.5.1", + "react": "^18.0.0", + "react-dom": "^18.0.0", "redux": "^4.1.2", "rimraf": "^3.0.2", + "ts-jest": "^27.1.4", "typescript": "~4.5.5" }, "peerDependencies": { diff --git a/packages/redux-devtools-rtk-query-monitor/test/QueryPreviewData.test.tsx b/packages/redux-devtools-rtk-query-monitor/test/QueryPreviewData.test.tsx new file mode 100644 index 00000000..66a564a9 --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/test/QueryPreviewData.test.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import QueryPreviewData from '../src/components/QueryPreviewData'; +import { QueryStatus } from '@reduxjs/toolkit/dist/query'; +import { RtkResourceInfo } from '../src/types'; + +test('Data tab shows data when request succeeded', () => { + render( + + ); + + expect(screen.queryByText('status')).toBeInTheDocument(); + expect(screen.queryByText('data')).toBeInTheDocument(); + expect(screen.queryByText('error')).not.toBeInTheDocument(); +}); + +test('Data tab shows error when request failed', () => { + render( + + ); + + expect(screen.queryByText('status')).toBeInTheDocument(); + expect(screen.queryByText('error')).toBeInTheDocument(); + expect(screen.queryByText('data')).not.toBeInTheDocument(); +}); + +test('Data tab shows status when request is not done yet', () => { + render( + + ); + + expect(screen.queryByText('status')).toBeInTheDocument(); + expect(screen.queryByText('error')).not.toBeInTheDocument(); + expect(screen.queryByText('data')).not.toBeInTheDocument(); +}); diff --git a/packages/redux-devtools-rtk-query-monitor/test/setup.ts b/packages/redux-devtools-rtk-query-monitor/test/setup.ts new file mode 100644 index 00000000..7b0828bf --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/test/setup.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; diff --git a/packages/redux-devtools-rtk-query-monitor/tsconfig.test.json b/packages/redux-devtools-rtk-query-monitor/tsconfig.test.json new file mode 100644 index 00000000..2ab0dfff --- /dev/null +++ b/packages/redux-devtools-rtk-query-monitor/tsconfig.test.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.react.base.json", + "compilerOptions": { + "types": ["jest", "node", "@types/testing-library__jest-dom"] + }, + "include": ["src", "test"] +} diff --git a/yarn.lock b/yarn.lock index f0acaadc..6bde3590 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5403,11 +5403,16 @@ __metadata: "@redux-devtools/core": ^3.11.0 "@redux-devtools/ui": ^1.2.1 "@reduxjs/toolkit": ^1.8.1 + "@testing-library/jest-dom": ^5.16.4 + "@testing-library/react": ^13.0.0 "@types/hex-rgba": ^1.0.1 + "@types/jest": ^27.4.1 "@types/lodash.debounce": ^4.0.6 + "@types/node": ^17.0.23 "@types/prop-types": ^15.7.4 "@types/react": ^17.0.43 "@types/redux-devtools-themes": ^1.0.0 + "@types/testing-library__jest-dom": ^5.14.3 "@typescript-eslint/eslint-plugin": ^5.17.0 "@typescript-eslint/parser": ^5.17.0 eslint: ^8.12.0 @@ -5416,16 +5421,19 @@ __metadata: eslint-plugin-react-hooks: ^4.4.0 hex-rgba: ^1.0.2 immutable: ^4.0.0 + jest: ^27.5.1 jss: ^10.9.0 jss-preset-default: ^10.9.0 lodash.debounce: ^4.0.8 prop-types: ^15.8.1 - react: ^17.0.2 + react: ^18.0.0 react-base16-styling: ^0.9.1 + react-dom: ^18.0.0 react-json-tree: ^0.16.1 redux: ^4.1.2 redux-devtools-themes: ^1.0.0 rimraf: ^3.0.2 + ts-jest: ^27.1.4 typescript: ~4.5.5 peerDependencies: "@redux-devtools/core": ^3.7.0 @@ -6950,6 +6958,22 @@ __metadata: languageName: node linkType: hard +"@testing-library/dom@npm:^8.5.0": + version: 8.13.0 + resolution: "@testing-library/dom@npm:8.13.0" + dependencies: + "@babel/code-frame": ^7.10.4 + "@babel/runtime": ^7.12.5 + "@types/aria-query": ^4.2.0 + aria-query: ^5.0.0 + chalk: ^4.1.0 + dom-accessibility-api: ^0.5.9 + lz-string: ^1.4.4 + pretty-format: ^27.0.2 + checksum: 880f1872b9949800d4444e3bdbd03df86d6f41ec7c27136dff1da29e87d2df2d7ee904afcdf895ffce351c25bd12119117eae023354d50e707ad56d43b2ed3ed + languageName: node + linkType: hard + "@testing-library/jest-dom@npm:^5.16.3": version: 5.16.3 resolution: "@testing-library/jest-dom@npm:5.16.3" @@ -6967,6 +6991,23 @@ __metadata: languageName: node linkType: hard +"@testing-library/jest-dom@npm:^5.16.4": + version: 5.16.4 + resolution: "@testing-library/jest-dom@npm:5.16.4" + dependencies: + "@babel/runtime": ^7.9.2 + "@types/testing-library__jest-dom": ^5.9.1 + aria-query: ^5.0.0 + chalk: ^3.0.0 + css: ^3.0.0 + css.escape: ^1.5.1 + dom-accessibility-api: ^0.5.6 + lodash: ^4.17.15 + redent: ^3.0.0 + checksum: 4240501223b72b97a44d4e3c669f39b208c49fb645d11d08d5f178d607265c5dfad07efbe027f41a0e2458178ff1fd5bf437fc05661b9109dcd013b95a37079e + languageName: node + linkType: hard + "@testing-library/react@npm:^12.1.4": version: 12.1.4 resolution: "@testing-library/react@npm:12.1.4" @@ -6981,6 +7022,20 @@ __metadata: languageName: node linkType: hard +"@testing-library/react@npm:^13.0.0": + version: 13.0.0 + resolution: "@testing-library/react@npm:13.0.0" + dependencies: + "@babel/runtime": ^7.12.5 + "@testing-library/dom": ^8.5.0 + "@types/react-dom": "*" + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + checksum: 75c2348cff6ac00f22c997c72f1444a802ebe6e671c8db70f203070d0e5d4c5a7e31d62cd86e2eedde68558834b256f99a972fe45b15fd2356e3c65b5515e197 + languageName: node + linkType: hard + "@testing-library/user-event@npm:^13.5.0": version: 13.5.0 resolution: "@testing-library/user-event@npm:13.5.0" @@ -7699,7 +7754,7 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:*": +"@types/node@npm:*, @types/node@npm:^17.0.23": version: 17.0.23 resolution: "@types/node@npm:17.0.23" checksum: a3517554737cbb042e76c30d0e5482192ac4d9bea0eeb086e2622d9cabf460a0eb52a696b99fcd18e7fcc93c96db6cc7ae507f6608f256ef0b5c1d8c87a5a470 @@ -14921,8 +14976,8 @@ __metadata: linkType: hard "framer-motion@npm:^6.2.8": - version: 6.2.8 - resolution: "framer-motion@npm:6.2.8" + version: 6.2.9 + resolution: "framer-motion@npm:6.2.9" dependencies: "@emotion/is-prop-valid": ^0.8.2 framesync: 6.0.1 @@ -14936,7 +14991,7 @@ __metadata: dependenciesMeta: "@emotion/is-prop-valid": optional: true - checksum: d84b716ab5e9480804856088551dbb493092e63625fe2d29c05ce734025d3e5cfded223443c604e807e8fca09064282aed9fb05f3ff590c9fb6ff4502f1ca1a6 + checksum: 3ba830affd0d7985601ed0c787a2becd846f81a5516ca11dc19c4e782eacfa2931097407574ca4684ac798ea314f49aab0da01148155c5f9244816a3cca41ae6 languageName: node linkType: hard @@ -22984,6 +23039,18 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:^18.0.0": + version: 18.0.0 + resolution: "react-dom@npm:18.0.0" + dependencies: + loose-envify: ^1.1.0 + scheduler: ^0.21.0 + peerDependencies: + react: ^18.0.0 + checksum: dd0ba9f2f31dd728076c892a95b2f5a8dfe79136431b0289afb46eec39d0ca6b6f0f40a60fd8aa6ef702c98ce7c26100d3d4dbc35c7c9e87429cd04f84cb58bd + languageName: node + linkType: hard + "react-draggable@npm:^4.4.3": version: 4.4.4 resolution: "react-draggable@npm:4.4.4" @@ -23485,6 +23552,15 @@ __metadata: languageName: node linkType: hard +"react@npm:^18.0.0": + version: 18.0.0 + resolution: "react@npm:18.0.0" + dependencies: + loose-envify: ^1.1.0 + checksum: 293020b96536b3c7113ee57ca5c990a3f25649d1751b1c7a3aabd16dff0691fe9f1eed1206616d0906d05933536052037340a0c8d0941ff870b0eb469a2f975b + languageName: node + linkType: hard + "read-cmd-shim@npm:^2.0.0": version: 2.0.0 resolution: "read-cmd-shim@npm:2.0.0" @@ -24685,6 +24761,15 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.21.0": + version: 0.21.0 + resolution: "scheduler@npm:0.21.0" + dependencies: + loose-envify: ^1.1.0 + checksum: 4f8285076041ed2c81acdd1faa987f1655fdbd30554bc667c1ea64743fc74fb3a04ca7d27454b3d678735df5a230137a3b84756061b43dc5796e80701b66d124 + languageName: node + linkType: hard + "schema-utils@npm:2.7.0": version: 2.7.0 resolution: "schema-utils@npm:2.7.0" @@ -28262,7 +28347,44 @@ __metadata: languageName: node linkType: hard -"webpack@npm:^5.1.0, webpack@npm:^5.71.0": +"webpack@npm:^5.1.0": + version: 5.72.0 + resolution: "webpack@npm:5.72.0" + dependencies: + "@types/eslint-scope": ^3.7.3 + "@types/estree": ^0.0.51 + "@webassemblyjs/ast": 1.11.1 + "@webassemblyjs/wasm-edit": 1.11.1 + "@webassemblyjs/wasm-parser": 1.11.1 + acorn: ^8.4.1 + acorn-import-assertions: ^1.7.6 + browserslist: ^4.14.5 + chrome-trace-event: ^1.0.2 + enhanced-resolve: ^5.9.2 + es-module-lexer: ^0.9.0 + eslint-scope: 5.1.1 + events: ^3.2.0 + glob-to-regexp: ^0.4.1 + graceful-fs: ^4.2.9 + json-parse-better-errors: ^1.0.2 + loader-runner: ^4.2.0 + mime-types: ^2.1.27 + neo-async: ^2.6.2 + schema-utils: ^3.1.0 + tapable: ^2.1.1 + terser-webpack-plugin: ^5.1.3 + watchpack: ^2.3.1 + webpack-sources: ^3.2.3 + peerDependenciesMeta: + webpack-cli: + optional: true + bin: + webpack: bin/webpack.js + checksum: 8365f1466d0f7adbf80ebc9b780f263a28eeeabcd5fb515249bfd9a56ab7fe8d29ea53df3d9364d0732ab39ae774445eb28abce694ed375b13882a6b2fe93ffc + languageName: node + linkType: hard + +"webpack@npm:^5.71.0": version: 5.71.0 resolution: "webpack@npm:5.71.0" dependencies: