Feat - add tasks tests

src/molecules/Task/Task.tsx

@@ -18,8 +18,7 @@ type TaskProps = {
 export const Task = ({ task: { id, title, state }, onPinTask, onArchiveTask }: TaskProps) => {
 
   return (
-    <div data-testid={`task-${id}`} className="flex flex-row p-3 bg-white border-2 border-gray-50">
-
+    <div role="task" data-testid={`task-${id}`} className="flex flex-row p-3 bg-white border-2 border-gray-50">
       <Checkbox
         role="archive-task"
         className="mr-4"

src/molecules/TaskSkeleton/TaskSkeleton.tsx

@@ -1,5 +1,5 @@
 export const TaskSkeleton = () => (
-  <div className="bg-white border-2 border-gray-50 p-3 w-full mx-auto">
+  <div data-testid="task-skeleton" className="bg-white border-2 border-gray-50 p-3 w-full mx-auto">
     <div className="animate-pulse flex space-x-4">
 
       <div className="flex-none">

src/organisms/Tasks/Tasks.stories.tsx

@@ -1,6 +1,7 @@
 import { Tasks } from './Tasks'
 import { Meta, StoryObj } from "@storybook/react"
-
+import { within } from "@storybook/testing-library"
+import { expect } from "@storybook/jest"
 
 const meta: Meta<typeof Tasks> = {
   component: Tasks,
@@ -22,31 +23,38 @@ export const Default: Story = {
       { id: '6', title: 'Task 6', state: 'TASK_ARCHIVED' },
     ],
   },
+  play: async ({ args, canvasElement, step })  => {
+    const canvas = within(canvasElement)
+    await step('👇 Verify that the Tasks are displayed correctly.', async () => {
+      const tasks = await  canvas.findAllByRole("task")
+      await expect(tasks.length).toBe(args.tasks.length)
+    })
+  }
 }
 
-// export const WithPinnedTasks: Story = {
-//   args: {
-//     tasks: [
-//       { id: '1', title: 'Task 1', state: 'TASK_INBOX' },
-//       { id: '2', title: 'Task 2', state: 'TASK_INBOX' },
-//       { id: '3', title: 'Task 3', state: 'TASK_PINNED' },
-//       { id: '4', title: 'Task 4', state: 'TASK_PINNED' },
-//       { id: '5', title: 'Task 5', state: 'TASK_ARCHIVED' },
-//       { id: '6', title: 'Task 6', state: 'TASK_PINNED' },
-//     ],
-//   },
-// }
-
 export const Loading : Story= {
   args: {
     tasks: [],
     loading: true,
   },
+  play: async ({ canvasElement, step })  => {
+    const canvas = within(canvasElement)
+    await step('👇 Verify that TaskSkeleton is displayed correctly.', async () => {
+      const tasks = await canvas.findAllByTestId(`task-skeleton`)
+      await expect(tasks.length).toBe(6)
+    })
+  }
 }
 
 export const Empty : Story = {
   args: {
     tasks: [],
     loading: false,
   },
+  play: async ({ canvasElement, step })  => {
+    const canvas = within(canvasElement)
+    await step('👇 Verify that the message "You have no tasks" is displayed.', async () => {
+      await expect(await canvas.findByText(`You have no tasks`)).toBeInTheDocument()
+    })
+  }
 }

src/templates/TaskBox/TaskBox.stories.tsx

@@ -26,16 +26,6 @@ export const Default: Story = {
   args: {
     tasks: tasksMock,
   },
-  play: async ({ args, canvasElement, step })  => {
-    const canvas = within(canvasElement)
-    await step('👇 Verify that the Tasks are displayed correctly.', async () => {
-      // TODO improvement - forof to test.each
-      for (const { id } of args.tasks ) {
-        const task = await  canvas.getByTestId(`task-${id}`)
-        await expect(task).toBeInTheDocument()
-      }
-    })
-  }
 }
 
 export const UnpinTask: Story = {