diff --git a/src/locales/en/en.json b/src/locales/en/en.json index 8f098a222..72677e1bc 100644 --- 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 index d62fd48c2..56f833d14 100644 --- 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 index d1b3b974e..521d65ddb 100644 --- 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( + + + + ); + + 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 index 22046df22..afc780f62 100644 --- 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" /> - {i18n.t("tabs.scan.tab.permissionalert")} + {scanUnavailable ? i18n.t("tabs.scan.tab.cameraunavailable") : i18n.t("tabs.scan.tab.permissionalert")}