fix(ui): handle error when scan (#820)

Co-authored-by: Vu Van Duc <vuvanduc@Vus-MacBook-Pro.local>
cardano-foundation · Nov 7, 2024 · 94c4b12 · 94c4b12
1 parent b5cd559
commit 94c4b12
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 8 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -1076,7 +1076,8 @@
     "scan": {
       "tab": {
         "title": "Align the QR code within the frame to scan",
-        "permissionalert": "Enable the camera in your device settings to start scanning"
+        "permissionalert": "Enable the camera in your device settings to start scanning",
+        "cameraunavailable": "We're unable to access your camera."
       },
       "pastemeerkatid": "Paste Meerkat ID"
     },

diff --git a/src/ui/components/Scanner/Scanner.scss b/src/ui/components/Scanner/Scanner.scss
@@ -9,11 +9,11 @@ ion-grid.qr-code-scanner {
     display: none;
   }
 
-  &.scan-unavaible {
+  &.scan-unavailable {
     background: var(--ion-color-secondary);
   }
 
-  &.no-permission {
+  &.no-permission,&.scan-unavailable {
     background: var(--ion-color-secondary);
 
     .qr-code-scanner-text {

diff --git a/src/ui/components/Scanner/Scanner.test.tsx b/src/ui/components/Scanner/Scanner.test.tsx
@@ -84,7 +84,7 @@ const checkPermisson = jest.fn(() =>
 );
 
 const requestPermission = jest.fn();
-
+const startScan = jest.fn();
 jest.mock("@capacitor-mlkit/barcode-scanning", () => {
   return {
     ...jest.requireActual("@capacitor-mlkit/barcode-scanning"),
@@ -95,7 +95,7 @@ jest.mock("@capacitor-mlkit/barcode-scanning", () => {
         eventName: string,
         listenerFunc: (result: BarcodeScannedEvent) => void
       ) => addListener(eventName, listenerFunc),
-      startScan: jest.fn(),
+      startScan: () => startScan(),
       stopScan: jest.fn(),
     },
   };
@@ -1079,4 +1079,44 @@ describe("Scanner", () => {
       expect(requestPermission).toBeCalled();
     });
   });
+
+  test("Unable to access camera", async () => {
+    const initialState = {
+      stateCache: {
+        routes: [TabsRoutePath.SCAN],
+        authentication: {
+          loggedIn: true,
+          time: Date.now(),
+          passcodeIsSet: true,
+          passwordIsSet: false,
+        },
+        currentOperation: OperationType.SCAN_CONNECTION,
+        toastMsgs: [],
+      },
+      identifiersCache: {
+        identifiers: [],
+      },
+    };
+
+    const storeMocked = {
+      ...mockStore(initialState),
+      dispatch: dispatchMock,
+    };
+
+    const handleReset = jest.fn();
+    startScan.mockImplementationOnce(() => Promise.reject("Error"));
+
+    const { getByText } = render(
+      <Provider store={storeMocked}>
+        <Scanner
+          setIsValueCaptured={setIsValueCaptured}
+          handleReset={handleReset}
+        />
+      </Provider>
+    );
+
+    await waitFor(() => {
+      expect(getByText(EN_Translation.tabs.scan.tab.cameraunavailable)).toBeVisible();
+    });
+  });
 });
diff --git a/src/ui/components/Scanner/Scanner.tsx b/src/ui/components/Scanner/Scanner.tsx
@@ -411,7 +411,7 @@ const Scanner = forwardRef(
               lensFacing: cameraDirection,
             });
           } catch (error) {
-            showError("Error starting barcode scan:", error, dispatch);
+            showError("Error starting barcode scan:", error);
             setScanUnavailable(true);
             stopScan();
           }
@@ -533,7 +533,7 @@ const Scanner = forwardRef(
 
     const containerClass = combineClassNames("qr-code-scanner", {
       "no-permission": !permission || mobileweb,
-      "scan-unavaible": scanUnavailable,
+      "scan-unavailable": scanUnavailable,
     });
 
     return (
@@ -558,7 +558,7 @@ const Scanner = forwardRef(
                   className="qr-code-scanner-icon"
                 />
                 <span className="qr-code-scanner-permission-text">
-                  {i18n.t("tabs.scan.tab.permissionalert")}
+                  {scanUnavailable ? i18n.t("tabs.scan.tab.cameraunavailable") : i18n.t("tabs.scan.tab.permissionalert")}
                 </span>
               </IonRow>
               <RenderPageFooter />