feat(EMI-2147): Acknowledge tasks when tapping on them (#10991)

src/app/Components/Tasks/Task.tests.tsx

@@ -1,39 +1,64 @@
-import { screen } from "@testing-library/react-native"
+import { fireEvent, screen } from "@testing-library/react-native"
 import { TaskTestQuery } from "__generated__/TaskTestQuery.graphql"
 import { Task } from "app/Components/Tasks/Task"
 import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
 import { graphql } from "react-relay"
 
-describe("Task Component", () => {
-  const mockClearTask = jest.fn()
+// mock clear task function
+const mockClearTask = jest.fn()
+const mockDissmissTask = jest.fn()
+const mockAcknowledgeTask = jest.fn()
 
-  it("should render without crashing", () => {
-    const { renderWithRelay } = setupTestWrapper<TaskTestQuery>({
-      Component: ({ me }) => {
-        const task = me?.tasks?.[0]
+jest.mock("app/utils/mutations/useDismissTask", () => ({
+  useDismissTask: () => ({ submitMutation: mockDissmissTask }),
+}))
 
-        if (!task) {
-          return null
-        }
+jest.mock("app/utils/mutations/useAcknowledgeTask.ts", () => ({
+  useAcknowledgeTask: () => ({ submitMutation: mockAcknowledgeTask }),
+}))
 
-        return <Task task={task} onClearTask={mockClearTask} />
-      },
-      query: graphql`
-        query TaskTestQuery @relay_test_operation {
-          me {
-            tasks {
-              ...Task_task
-            }
+describe("Task Component", () => {
+  const { renderWithRelay } = setupTestWrapper<TaskTestQuery>({
+    Component: ({ me }) => {
+      return <Task task={me!.tasks![0]!} onClearTask={mockClearTask} />
+    },
+    query: graphql`
+      query TaskTestQuery @relay_test_operation {
+        me {
+          tasks {
+            ...Task_task
           }
         }
-      `,
-    })
+      }
+    `,
+  })
 
+  it("should render without crashing", () => {
     renderWithRelay({ Task: () => mockTask })
 
     expect(screen.getByText("Test Task")).toBeOnTheScreen()
     expect(screen.getByText("Test Message")).toBeOnTheScreen()
   })
+
+  it("should dismiss when the task is cleared", () => {
+    renderWithRelay({ Task: () => mockTask })
+
+    const clearButton = screen.getByText("Clear")
+
+    fireEvent.press(clearButton)
+
+    expect(mockClearTask).toHaveBeenCalled()
+    expect(mockDissmissTask).toHaveBeenCalled()
+  })
+
+  it("should acknowledge the task when pressed", () => {
+    renderWithRelay({ Task: () => mockTask })
+
+    fireEvent.press(screen.getByText("Test Task"))
+
+    expect(mockAcknowledgeTask).toHaveBeenCalled()
+    expect(mockClearTask).toHaveBeenCalled()
+  })
 })
 
 const mockTask = {

src/app/Components/Tasks/Task.tsx

@@ -2,6 +2,7 @@ import { Flex, Image, Text, Touchable } from "@artsy/palette-mobile"
 import { Task_task$key } from "__generated__/Task_task.graphql"
 import { Swipeable } from "app/Components/Swipeable/Swipeable"
 import { navigate } from "app/system/navigation/navigate"
+import { useAcknowledgeTask } from "app/utils/mutations/useAcknowledgeTask"
 import { useDismissTask } from "app/utils/mutations/useDismissTask"
 import { useRef } from "react"
 import { PixelRatio } from "react-native"
@@ -23,6 +24,7 @@ export const Task: React.FC<TaskProps> = ({
   ...restProps
 }) => {
   const { submitMutation: dismissTask } = useDismissTask()
+  const { submitMutation: acknowledgeTask } = useAcknowledgeTask()
   const fontScale = PixelRatio.getFontScale()
 
   const task = useFragment(taskFragment, restProps.task)
@@ -35,8 +37,7 @@ export const Task: React.FC<TaskProps> = ({
 
     // TODO: Add tracking
 
-    // TODO: Resolve the task instead of dismissing it.
-    dismissTask({ variables: { taskID: task.internalID } })
+    acknowledgeTask({ variables: { taskID: task.internalID } })
     onClearTask()
 
     navigate(task.actionLink)

src/app/utils/mutations/useAcknowledgeTask.ts

@@ -0,0 +1,29 @@
+import { useAcknowledgeTaskMutation } from "__generated__/useAcknowledgeTaskMutation.graphql"
+import { useMutation } from "app/utils/useMutation"
+import { graphql } from "react-relay"
+
+export const useAcknowledgeTask = () => {
+  return useMutation<useAcknowledgeTaskMutation>({
+    mutation: AcknowledgeTaskMutation,
+  })
+}
+
+const AcknowledgeTaskMutation = graphql`
+  mutation useAcknowledgeTaskMutation($taskID: String!) {
+    ackTask(input: { id: $taskID }) {
+      taskOrError {
+        ... on AckTaskSuccess {
+          task {
+            internalID
+          }
+        }
+
+        ... on AckTaskFailure {
+          mutationError {
+            error
+          }
+        }
+      }
+    }
+  }
+`