ecency · feruzm · Dec 29, 2023 · Dec 29, 2023
diff --git a/package.json b/package.json
@@ -101,6 +101,7 @@
   },
   "devDependencies": {
     "@loadable/webpack-plugin": "^5.15.2",
+    "@testing-library/jest-dom": "^6.1.6",
     "@thoughtbot/tailwindcss-aria-attributes": "^0.2.0",
     "@types/bs58": "^4.0.1",
     "@types/bytebuffer": "^5.0.41",
@@ -175,6 +176,9 @@
     ]
   },
   "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/test-setup.ts"
+    ],
     "transform": {
       "\\.(ts|tsx)$": "ts-jest",
       "\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",

diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-34bcd95e-b3ac-461d-846d-51464da99999"
+      id="editor-tool-emoji-picker-5a2edefa-f709-4218-87ec-ec5e7fd26fdf"
       role="none"
       title="Emoji"
     >
@@ -552,7 +552,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-c0db08ed-8c14-4a10-b027-5464b52778d8"
+      id="editor-tool-emoji-picker-288e02d2-c29e-4790-9c45-9abee2db2a3d"
       role="none"
       title="Emoji"
     >

diff --git a/src/common/components/community-card/__snapshots__/index.spec.tsx.snap b/src/common/components/community-card/__snapshots__/index.spec.tsx.snap
@@ -306,7 +306,7 @@ exports[`(2) Should show edit buttons with nsfw label 1`] = `
       onClick={[Function]}
     >
       <button
-        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
+        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
         size="sm"
         style={
           Object {
@@ -328,7 +328,7 @@ exports[`(2) Should show edit buttons with nsfw label 1`] = `
         onClick={[Function]}
       >
         <button
-          className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
+          className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
           size="sm"
           style={
             Object {
@@ -347,12 +347,21 @@ exports[`(2) Should show edit buttons with nsfw label 1`] = `
   <p
     className="community-rewards"
   >
-    <a
-      href="#"
+    <button
+      className="cursor-pointer rounded-full duration-300 no-wrap border-[1.25px] border-solid border-blue-dark-sky hover:border-blue-dark-sky-hover focus:border-blue-dark-sky-active text-blue-dark-sky hover:text-blue-dark-sky-hover focus:text-blue-dark-sky-active h-[2rem] text-sm font-[500] px-2 "
       onClick={[Function]}
+      size="sm"
+      style={
+        Object {
+          "outline": "none",
+        }
+      }
+      type="button"
     >
-      Community Rewards
-    </a>
+      <div>
+        Community Rewards
+      </div>
+    </button>
   </p>
 </div>
 `;
@@ -515,7 +524,7 @@ exports[`(3) usePrivate = false 1`] = `
       onClick={[Function]}
     >
       <button
-        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
+        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
         size="sm"
         style={
           Object {
@@ -537,7 +546,7 @@ exports[`(3) usePrivate = false 1`] = `
         onClick={[Function]}
       >
         <button
-          className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
+          className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
           size="sm"
           style={
             Object {

diff --git a/src/common/components/community-card/index.spec.tsx b/src/common/components/community-card/index.spec.tsx
@@ -1,13 +1,12 @@
 import React from "react";
-
-import renderer from "react-test-renderer";
 import { createBrowserHistory } from "history";
 import { StaticRouter } from "react-router-dom";
 
 import { CommunityCard } from "./index";
 
-import { communityInstance1, globalInstance, activeUserMaker } from "../../helper/test-helper";
+import { activeUserMaker, communityInstance1, globalInstance } from "../../helper/test-helper";
 import { withStore } from "../../tests/with-store";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 it("(1) Default render", () => {
   const props = {
@@ -25,7 +24,11 @@ it("(1) Default render", () => {
     addCommunity: () => {}
   };
 
-  const component = withStore(<CommunityCard {...props} />);
+  const component = withStore(
+    <QueryClientProvider client={new QueryClient()}>
+      <CommunityCard {...props} />
+    </QueryClientProvider>
+  );
   expect(component.toJSON()).toMatchSnapshot();
 });
 
@@ -46,9 +49,11 @@ it("(2) Should show edit buttons with nsfw label", () => {
   };
 
   const component = withStore(
-    <StaticRouter location="/hive-148441" context={{}}>
-      <CommunityCard {...props} />
-    </StaticRouter>
+    <QueryClientProvider client={new QueryClient()}>
+      <StaticRouter location="/hive-148441" context={{}}>
+        <CommunityCard {...props} />
+      </StaticRouter>
+    </QueryClientProvider>
   );
   expect(component.toJSON()).toMatchSnapshot();
 });
@@ -73,9 +78,11 @@ it("(3) usePrivate = false", () => {
   };
 
   const component = withStore(
-    <StaticRouter location="/hive-148441" context={{}}>
-      <CommunityCard {...props} />
-    </StaticRouter>
+    <QueryClientProvider client={new QueryClient()}>
+      <StaticRouter location="/hive-148441" context={{}}>
+        <CommunityCard {...props} />
+      </StaticRouter>
+    </QueryClientProvider>
   );
   expect(component.toJSON()).toMatchSnapshot();
 });
diff --git a/src/common/components/profile-card/__snapshots__/index.spec.tsx.snap b/src/common/components/profile-card/__snapshots__/index.spec.tsx.snap
@@ -411,7 +411,7 @@ exports[`(3) Should show profile edits 1`] = `
       onClick={[Function]}
     >
       <button
-        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
+        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
         size="sm"
         style={
           Object {
@@ -430,7 +430,7 @@ exports[`(3) Should show profile edits 1`] = `
       onClick={[Function]}
     >
       <button
-        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
+        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
         size="sm"
         style={
           Object {
@@ -449,7 +449,7 @@ exports[`(3) Should show profile edits 1`] = `
       onClick={[Function]}
     >
       <button
-        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
+        className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2rem] text-sm font-[500] px-2 "
         size="sm"
         style={
           Object {

diff --git a/src/common/components/profile-card/index.spec.tsx b/src/common/components/profile-card/index.spec.tsx
@@ -9,12 +9,13 @@ import { Account } from "../../store/accounts/types";
 import ProfileCard from "./index";
 
 import {
-  globalInstance,
   activeUserMaker,
+  allOver,
   fullAccountInstance,
-  allOver
+  globalInstance
 } from "../../helper/test-helper";
 import { withStore } from "../../tests/with-store";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 jest.mock("../../constants/defaults.json", () => ({
   imageServer: "https://images.ecency.com",
@@ -58,9 +59,11 @@ const defProps = {
 
 it("(1) Render with not loaded data", async () => {
   const component = withStore(
-    <StaticRouter location="/" context={{}}>
-      <ProfileCard {...defProps} />
-    </StaticRouter>
+    <QueryClientProvider client={new QueryClient()}>
+      <StaticRouter location="/" context={{}}>
+        <ProfileCard {...defProps} />
+      </StaticRouter>
+    </QueryClientProvider>
   );
   await allOver();
   expect(component.toJSON()).toMatchSnapshot();
@@ -73,9 +76,11 @@ it("(2) Render with loaded data", async () => {
   };
 
   const component = withStore(
-    <StaticRouter location="/" context={{}}>
-      <ProfileCard {...props} />
-    </StaticRouter>
+    <QueryClientProvider client={new QueryClient()}>
+      <StaticRouter location="/" context={{}}>
+        <ProfileCard {...props} />
+      </StaticRouter>
+    </QueryClientProvider>
   );
   await allOver();
   expect(component.toJSON()).toMatchSnapshot();
@@ -96,9 +101,11 @@ it("(3) Should show profile edits", async () => {
   };
 
   const component = withStore(
-    <StaticRouter location="/" context={{}}>
-      <ProfileCard {...props} />
-    </StaticRouter>
+    <QueryClientProvider client={new QueryClient()}>
+      <StaticRouter location="/" context={{}}>
+        <ProfileCard {...props} />
+      </StaticRouter>
+    </QueryClientProvider>
   );
   await allOver();
   expect(component.toJSON()).toMatchSnapshot();

diff --git a/src/test-setup.ts b/src/test-setup.ts
@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+import { TextDecoder, TextEncoder } from "util";
+
+global.TextEncoder = TextEncoder;
+// @ts-ignore
+global.TextDecoder = TextDecoder;
diff --git a/yarn.lock b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@adobe/css-tools@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11"
+  integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
+
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -2043,6 +2048,20 @@
     "@tanstack/query-core" "4.29.7"
     use-sync-external-store "^1.2.0"
 
+"@testing-library/jest-dom@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.6.tgz#d9a3ce61cd74ea792622d3da78a830f6786e8d93"
+  integrity sha512-YwuiOdYEcxhfC2u5iNKlvg2Q5MgbutovP6drq7J1HrCbvR+G58BbtoCoq+L/kNlrNFsu2Kt3jaFAviLVxYHJZg==
+  dependencies:
+    "@adobe/css-tools" "^4.3.2"
+    "@babel/runtime" "^7.9.2"
+    aria-query "^5.0.0"
+    chalk "^3.0.0"
+    css.escape "^1.5.1"
+    dom-accessibility-api "^0.5.6"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
 "@thoughtbot/tailwindcss-aria-attributes@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@thoughtbot/tailwindcss-aria-attributes/-/tailwindcss-aria-attributes-0.2.0.tgz#2ac56bf3a0506d398df373b53abced7bbef52539"
@@ -2972,6 +2991,13 @@ argparse@^1.0.10, argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-query@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
 arity-n@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
@@ -3849,7 +3875,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@3.0.0:
+chalk@3.0.0, chalk@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
   integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
@@ -4698,6 +4724,11 @@ css-what@^6.0.1, css-what@^6.1.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
 css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -5011,6 +5042,11 @@ dependency-graph@^0.11.0:
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -5116,6 +5152,11 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
+dom-accessibility-api@^0.5.6:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+  integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -8521,6 +8562,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
 mini-create-react-context@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
@@ -10893,6 +10939,14 @@ recursive-readdir@2.2.2, recursive-readdir@^2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 redis@*, redis@4.6.7:
   version "4.6.7"
   resolved "https://registry.yarnpkg.com/redis/-/redis-4.6.7.tgz#c73123ad0b572776223f172ec78185adb72a6b57"
@@ -12248,6 +12302,13 @@ strip-final-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
   integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 style-loader@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c"