[New #113] Add useEvent to trigger comment tooltip

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/",

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>

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"));
 };