add test for long titles

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:66611647ec86d1e0b3e003b0",
+  "zip": true
+}

src/components/Task.jsx

@@ -1,5 +1,3 @@
-import PropTypes from "prop-types";
-
 export default function Task({
   task: { id, title, state },
   onArchiveTask,
@@ -30,8 +28,10 @@ export default function Task({
           name="title"
           id={`title-${id}`}
           placeholder="Input title"
+          style={{ textOverflow: "ellipsis" }}
         />
       </label>
+
       {state !== "TASK_ARCHIVED" && (
         <button
           className="pin-button"
@@ -46,18 +46,3 @@ export default function Task({
     </div>
   );
 }
-Task.propTypes = {
-  /** Composition of the task */
-  task: PropTypes.shape({
-    /** Id of the task */
-    id: PropTypes.string.isRequired,
-    /** Title of the task */
-    title: PropTypes.string.isRequired,
-    /** Current state of the task */
-    state: PropTypes.string.isRequired,
-  }),
-  /** Event to change the task to archived */
-  onArchiveTask: PropTypes.func,
-  /** Event to change the task to pinned */
-  onPinTask: PropTypes.func,
-};

src/components/Task.stories.jsx

@@ -45,3 +45,14 @@ export const Archived = {
     },
   },
 };
+
+const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;
+
+export const LongTitle = {
+  args: {
+    task: {
+      ...Default.args.task,
+      title: longTitleString,
+    },
+  },
+};