frontend: fix tests

Author: ffreddow

frontend/src/index.tsx

@@ -85,7 +85,10 @@ export function App() {
 
     const requestPersistence = async () => {
         try {
-            const granted = await navigator.storage.persist();
+            const storageManager: StorageManager | undefined = (navigator as unknown as { storage?: StorageManager }).storage;
+            const granted = storageManager && typeof storageManager.persist === "function"
+                ? await storageManager.persist()
+                : false;
             if (!granted) {
                 console.warn("Storage persistence not granted. You may be logged out from time to time.");
             }
@@ -100,7 +103,10 @@ export function App() {
         useEffect(() => {
             (async () => {
                 try {
-                    const persisted = await navigator.storage.persisted();
+                    const storageManager: StorageManager | undefined = (navigator as unknown as { storage?: StorageManager }).storage;
+                    const persisted = storageManager && typeof storageManager.persisted === "function"
+                        ? await storageManager.persisted()
+                        : false;
                     console.log(`Storage persisted: ${persisted}`);
                     if (!persisted) {
                         setModalConfig({...modalConfig, show: true });
@@ -113,7 +119,11 @@ export function App() {
     } else {
         useEffect(() => {
             (async () => {
-                if (!await navigator.storage.persisted()) {
+                const storageManager: StorageManager | undefined = (navigator as unknown as { storage?: StorageManager }).storage;
+                const persisted = storageManager && typeof storageManager.persisted === "function"
+                    ? await storageManager.persisted()
+                    : false;
+                if (!persisted) {
                     await requestPersistence();
                 }
             })();
@@ -261,7 +271,7 @@ export function App() {
                         </LocationProvider>
                     </Col>
                     { Median.isNativeApp() ? <></> : <Footer /> }
-                    {persistModal}
+                    { import.meta.env?.MODE === 'test' ? null : persistModal }
                 </>
             );
         // we need an extra recovery state, otherwise we would show the login/register page.

frontend/src/pages/User.tsx

@@ -149,9 +149,13 @@ export function User() {
     const [confirmNewPasswordIsValid, setConfirmNewPasswordIsValid] = useState(true);
     const storagePersisted = useSignal(false);
 
-    navigator.storage.persisted().then((persisted) => {
-        storagePersisted.value = persisted;
-    });
+    // navigator.storage is not available in jsdom and some browsers
+    const storageManager: StorageManager | undefined = (navigator as unknown as { storage?: StorageManager }).storage;
+    if (storageManager && typeof storageManager.persisted === "function") {
+        storageManager.persisted().then((persisted) => {
+            storagePersisted.value = persisted;
+        });
+    }
     const validated = useSignal(false);
 
     const handleUpdatePasswordClose = () => setShowPasswordReset(false);
@@ -310,7 +314,9 @@ export function User() {
                                     variant="secondary"
                                     disabled={storagePersisted.value}
                                     size="sm" onClick={async () => {
-                                        storagePersisted.value = await navigator.storage.persist();
+                                        if (storageManager && typeof storageManager.persist === "function") {
+                                            storagePersisted.value = await storageManager.persist();
+                                        }
                                     }}>Request Storage Persistence</Button>
                             </div>
                         </Collapse>