From 77f52a06761e8b4f9073d8575541d73e80493e31 Mon Sep 17 00:00:00 2001
From: Max Chopart <max.chopart@gmail.com>
Date: Thu, 24 Mar 2022 14:15:27 +0100
Subject: [PATCH] [New #113] Add useEvent to trigger comment tooltip

---
 package-lock.json                              | 18 ++++++++++++++++++
 package.json                                   |  4 +++-
 src/components/comment/QuestionCommentIcon.jsx |  2 +-
 src/stories/QuestionCommentIcon.stories.tsx    | 14 ++++++++++++--
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 603d737a..e8ab1786 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
         "babel-jest": "^26.0.1",
         "babel-loader": "^8.1.0",
+        "chromatic": "^6.5.3",
         "clean-css-cli": "^4.3.0",
         "css-loader": "^3.5.3",
         "enzyme": "^3.11.0",
@@ -8370,6 +8371,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/chromatic": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.3.tgz",
+      "integrity": "sha512-6Wy2lsNaojY5wTvobE3WV5VrQ5oP7B8kal6zWGrxu9g7Qbenb2cTcQ5SYgQY7tzT0Ed0zeHVyQm4TMmKz+XfXA==",
+      "dev": true,
+      "bin": {
+        "chroma": "bin/main.cjs",
+        "chromatic": "bin/main.cjs",
+        "chromatic-cli": "bin/main.cjs"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -32181,6 +32193,12 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
+    "chromatic": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-6.5.3.tgz",
+      "integrity": "sha512-6Wy2lsNaojY5wTvobE3WV5VrQ5oP7B8kal6zWGrxu9g7Qbenb2cTcQ5SYgQY7tzT0Ed0zeHVyQm4TMmKz+XfXA==",
+      "dev": true
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
diff --git a/package.json b/package.json
index bbd391c7..678b3478 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
+    "chromatic": "^6.5.3",
     "clean-css-cli": "^4.3.0",
     "css-loader": "^3.5.3",
     "enzyme": "^3.11.0",
@@ -110,7 +111,8 @@
     "lib": "babel ./src -d ./lib",
     "build:lib": "npm run build && npm run build:css && npm pack",
     "build:css": "cleancss --skip-rebase -d -o ./css/s-forms.min.css ./src/styles/s-forms.css",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic --project-token=4596425d0cfa"
   },
   "files": [
     "dist/",
diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
index e8043039..d7c63019 100644
--- a/src/components/comment/QuestionCommentIcon.jsx
+++ b/src/components/comment/QuestionCommentIcon.jsx
@@ -88,7 +88,7 @@ const QuestionCommentIcon = (props) => {
 
     return (
         <div ref={overlayTarget} onClick={handleStopPropagationClick}>
-            <span ref={target} onClick={handleOverlayClick}>
+            <span data-testid="comment-bubble" ref={target} onClick={handleOverlayClick}>
                 <CommentBubble/>
                 {getCommentsLength() > 0 ? <Badge className="comment-badge" pill variant="primary">{getCommentsLength()}</Badge> : null}
             </span>
diff --git a/src/stories/QuestionCommentIcon.stories.tsx b/src/stories/QuestionCommentIcon.stories.tsx
index 22053cda..910e8fec 100644
--- a/src/stories/QuestionCommentIcon.stories.tsx
+++ b/src/stories/QuestionCommentIcon.stories.tsx
@@ -3,6 +3,7 @@ import QuestionCommentIcon from "../components/comment/QuestionCommentIcon";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import IntlContextProvider from "../contexts/IntlContextProvider";
 import { ConfigurationContextProvider } from "../contexts/ConfigurationContext";
+import { screen, userEvent, within } from "@storybook/testing-library";
 
 import question from "./assets/question/question.json";
 import questionWithComment from "./assets/question/questionWithComment.json";
@@ -40,10 +41,19 @@ const Template: ComponentStory<typeof QuestionCommentIcon> = (
 
 export const Default = Template.bind({});
 Default.args = {
-  question: question
+  question: question,
 };
 
 export const WithComment = Template.bind({});
 WithComment.args = {
-  question: questionWithComment
+  question: questionWithComment,
+};
+
+export const TooltipOpen = Template.bind({});
+TooltipOpen.args = {
+  question: question,
+};
+TooltipOpen.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByTestId("comment-bubble"));
 };