QueryPreviewData tests added

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'],
+      },
+    },
   ],
 };

packages/redux-devtools-rtk-query-monitor/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
+  testEnvironment: 'jsdom',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.test.json',
+    },
+  },
+};

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": {

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(
+    <QueryPreviewData
+      resInfo={
+        {
+          state: {
+            status: QueryStatus.fulfilled,
+            data: {
+              id: 1,
+              name: 'behzad',
+            },
+          },
+        } as RtkResourceInfo
+      }
+      isWideLayout={false}
+    />
+  );
+
+  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(
+    <QueryPreviewData
+      resInfo={
+        {
+          state: {
+            status: QueryStatus.rejected,
+            error: {
+              message: 'oh no :(',
+            },
+          },
+        } as RtkResourceInfo
+      }
+      isWideLayout={false}
+    />
+  );
+
+  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(
+    <QueryPreviewData
+      resInfo={
+        {
+          state: {
+            status: QueryStatus.pending,
+            data: undefined,
+            error: undefined,
+          },
+        } as RtkResourceInfo
+      }
+      isWideLayout={false}
+    />
+  );
+
+  expect(screen.queryByText('status')).toBeInTheDocument();
+  expect(screen.queryByText('error')).not.toBeInTheDocument();
+  expect(screen.queryByText('data')).not.toBeInTheDocument();
+});

packages/redux-devtools-rtk-query-monitor/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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"]
+}

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
+  version: 6.2.9
-  resolution: "framer-motion@npm:6.2.8"
+  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: