fix: reset tooltip message when unformatted code is change

bastiensun · Oct 27, 2023 · b293713 · b293713
1 parent 01b53e8
commit b293713
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-unassigned-import
 import "@testing-library/jest-dom/vitest";
 import { App } from "./App";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { afterEach, expect, test, vi } from "vitest";
 
@@ -52,9 +52,9 @@ test("happy path", async () => {
   );
 
   // Assert
-  waitFor(() =>
-    expect(screen.getByText(/copied to clipboard/iu)).toBeVisible(),
-  );
+  expect(
+    screen.getByRole("tooltip", { name: /copied to clipboard/iu }),
+  ).toBeVisible();
 });
 
 test("on paste", async () => {
@@ -80,11 +80,9 @@ test("on paste", async () => {
   await user.hover(screen.getByRole("button", { name: formattedCode }));
 
   // Assert
-  waitFor(() =>
-    expect(
-      screen.getByRole("tooltip", { name: /copied to clipboard/iu }),
-    ).toBeVisible(),
-  );
+  expect(
+    screen.getByRole("tooltip", { name: /copied to clipboard/iu }),
+  ).toBeVisible();
 });
 
 test("on hover", async () => {
@@ -119,9 +117,7 @@ test("on hover", async () => {
   await user.hover(formattedCode);
 
   // Assert
-  waitFor(() =>
-    expect(
-      screen.getByRole("tooltip", { name: /copy to clipboard/iu }),
-    ).toBeVisible(),
-  );
+  expect(
+    screen.getByRole("tooltip", { name: /copy to clipboard/iu }),
+  ).toBeVisible();
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -42,6 +42,7 @@ export const App = (): JSX.Element => {
           <div>
             <UnformattedCode
               copiedMessage={COPIED_MESSAGE}
+              resetTooltipMessage={resetTooltipMessage}
               setFormattedCode={setFormattedCode}
               setTooltipToCopied={setTooltipToCopied}
               setUnformattedCode={setUnformattedCode}
@@ -51,7 +52,6 @@ export const App = (): JSX.Element => {
           <div>
             <FormattedCode
               formattedCode={formattedCode}
-              resetTooltipMessage={resetTooltipMessage}
               setTooltipToCopied={setTooltipToCopied}
               tooltipMessage={tooltipMessage}
             />

diff --git a/src/formatted-code.tsx b/src/formatted-code.tsx
@@ -8,7 +8,6 @@ import { type JSX, useState } from "react";
 
 type FormattedCodeProps = {
   readonly formattedCode: string;
-  readonly resetTooltipMessage: () => void;
   readonly setTooltipToCopied: () => void;
   readonly tooltipMessage: string;
 };

diff --git a/src/unformatted-code.tsx b/src/unformatted-code.tsx
@@ -5,6 +5,7 @@ import { type ChangeEvent, type ClipboardEvent, type JSX } from "react";
 
 type UnformattedCodeProps = {
   readonly copiedMessage: string;
+  readonly resetTooltipMessage: () => void;
   readonly setFormattedCode: (code: string) => void;
   readonly setTooltipToCopied: () => void;
   readonly setUnformattedCode: (code: string) => void;
@@ -13,6 +14,7 @@ type UnformattedCodeProps = {
 
 export const UnformattedCode = ({
   copiedMessage,
+  resetTooltipMessage,
   setFormattedCode,
   setTooltipToCopied,
   setUnformattedCode,
@@ -36,6 +38,7 @@ export const UnformattedCode = ({
     }
 
     setFormattedCode(formattedCode);
+    resetTooltipMessage();
   };
 
   const handlePaste = async (