[#99] Render sync button on Submitted FormData page

akvo · Jul 31, 2023 · ae8290b · ae8290b
1 parent 6d7e700
commit ae8290b
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 3 deletions.
diff --git a/app/src/lib/__test__/background-task.test.js b/app/src/lib/__test__/background-task.test.js
@@ -15,7 +15,7 @@ describe('backgroundTask', () => {
   const mockTaskOption = {
     minimumInterval: 86400,
     startOnBoot: true,
-    stopOnTerminate: true,
+    stopOnTerminate: false,
   };
 
   describe('syncFormVersion', () => {

diff --git a/app/src/lib/background-task.js b/app/src/lib/background-task.js
@@ -54,7 +54,7 @@ const registerBackgroundTask = async (TASK_NAME, minimumInterval = 86400) => {
   try {
     await BackgroundFetch.registerTaskAsync(TASK_NAME, {
       minimumInterval: minimumInterval,
-      stopOnTerminate: true, // android only,
+      stopOnTerminate: false, // android only,
       startOnBoot: true, // android only
     });
   } catch (err) {

diff --git a/app/src/navigation/index.js b/app/src/navigation/index.js
@@ -38,7 +38,7 @@ TaskManager.defineTask(SYNC_FORM_VERSION_TASK_NAME, async () => {
       sendPushNotification: notification.sendPushNotification,
       showNotificationOnly: true,
     });
-    return BackgroundFetch.BackgroundFetchResult.NewData;
+    return BackgroundFetch.BackgroundFetchResult.NoData;
   } catch (err) {
     console.error(`[${SYNC_FORM_VERSION_TASK_NAME}] Define task manager failed`, err);
     return BackgroundFetch.Result.Failed;

diff --git a/app/src/pages/FormData.js b/app/src/pages/FormData.js
@@ -18,6 +18,24 @@ const convertMinutesToHHMM = (minutes) => {
   return `${formattedHours}h ${formattedMinutes}m`;
 };
 
+const syncButtonElement = ({ showSubmitted, handleSyncButtonOnPress, disabled }) => {
+  if (!showSubmitted) {
+    return {};
+  }
+  return {
+    rightComponent: (
+      <Button
+        type="clear"
+        disabled={disabled}
+        onPress={handleSyncButtonOnPress}
+        testID="button-to-trigger-sync"
+      >
+        <Icon name="arrow-back" size={18} />
+      </Button>
+    ),
+  };
+};
+
 const FormData = ({ navigation, route }) => {
   const formId = route?.params?.id;
   const showSubmitted = route?.params?.showSubmitted || false;
@@ -78,6 +96,10 @@ const FormData = ({ navigation, route }) => {
     });
   };
 
+  const handleSyncButtonOnPress = () => {
+    console.log('aaaa');
+  };
+
   return (
     <BaseLayout
       title={route?.params?.name}
@@ -92,6 +114,7 @@ const FormData = ({ navigation, route }) => {
           <Icon name="arrow-back" size={18} />
         </Button>
       }
+      {...syncButtonElement({ showSubmitted, handleSyncButtonOnPress, disabled: !data.length })}
     >
       <BaseLayout.Content data={filteredData} action={handleFormDataListAction} />
     </BaseLayout>

diff --git a/app/src/pages/__tests__/FormData.test.js b/app/src/pages/__tests__/FormData.test.js
@@ -181,4 +181,96 @@ describe('FormDataPage', () => {
       newSubmission: false,
     });
   });
+
+  it('should not render render sync button on Saved FormData page', async () => {
+    const mockRoute = {
+      params: {
+        id: 123,
+        name: 'Form Name',
+        showSubmitted: false,
+      },
+    };
+
+    const mockData = [
+      {
+        id: 1,
+        name: 'Datapoint 1',
+        createdAt: '2023-07-18T12:34:56.789Z',
+        duration: 145,
+        syncedAt: '2023-07-18T13:00:00.000Z',
+        submitted: 1,
+      },
+    ];
+
+    crudDataPoints.selectDataPointsByFormAndSubmitted.mockResolvedValue(mockData);
+
+    const wrapper = render(<FormDataPage route={mockRoute} />);
+
+    await waitFor(() => {
+      expect(wrapper.getByText('Form Name')).toBeTruthy();
+      // check sync button rendered
+      expect(wrapper.queryByTestId('button-to-trigger-sync')).toBeFalsy();
+      const list0 = wrapper.getByTestId('card-touchable-0');
+      expect(list0).toBeTruthy();
+    });
+  });
+
+  it('should render render sync button on Submitted FormData page', async () => {
+    const mockRoute = {
+      params: {
+        id: 123,
+        name: 'Form Name',
+        showSubmitted: true,
+      },
+    };
+
+    const mockData = [
+      {
+        id: 1,
+        name: 'Datapoint 1',
+        createdAt: '2023-07-18T12:34:56.789Z',
+        duration: 145,
+        syncedAt: '2023-07-18T13:00:00.000Z',
+        submitted: 1,
+      },
+    ];
+
+    crudDataPoints.selectDataPointsByFormAndSubmitted.mockResolvedValue(mockData);
+
+    const wrapper = render(<FormDataPage route={mockRoute} />);
+
+    await waitFor(() => {
+      expect(wrapper.getByText('Form Name')).toBeTruthy();
+      // check sync button rendered
+      expect(wrapper.getByTestId('button-to-trigger-sync')).toBeTruthy();
+      const list0 = wrapper.getByTestId('card-touchable-0');
+      expect(list0).toBeTruthy();
+    });
+  });
+
+  it('should disable sync button if no data on Submitted FormData page', async () => {
+    const mockRoute = {
+      params: {
+        id: 123,
+        name: 'Form Name',
+        showSubmitted: true,
+      },
+    };
+
+    crudDataPoints.selectDataPointsByFormAndSubmitted.mockResolvedValue([]);
+
+    const wrapper = render(<FormDataPage route={mockRoute} />);
+
+    await waitFor(() => {
+      expect(wrapper.getByText('Form Name')).toBeTruthy();
+      // check sync button rendered
+      const syncButtonElement = wrapper.getByTestId('button-to-trigger-sync');
+      expect(syncButtonElement).toBeTruthy();
+      expect(syncButtonElement.props.accessibilityState.disabled).toEqual(true);
+      const list0 = wrapper.queryByTestId('card-touchable-0');
+      expect(list0).toBeFalsy();
+    });
+  });
+
+  it.todo('should handle sync submission when sync button pressed');
 });