Fix beforeEach error in audioCache.test.ts

fixing some js tests errors with copilot workspace --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Brunwo/listen-UI?shareId=XXXX-XXXX-XXXX-XXXX).
Brunwo · Oct 28, 2024 · 18ace03 · 18ace03
1 parent f3ab190
commit 18ace03
Show file tree

Hide file tree

Showing 15 changed files with 649 additions and 134 deletions.
diff --git a/_tmp_7378_5a296355cc1318b52ad43dc997b91dbd b/_tmp_7378_5a296355cc1318b52ad43dc997b91dbd
diff --git a/e2e/localstorage.spec.js b/e2e/localstorage.spec.js
@@ -1,22 +1,167 @@
-import { test, expect } from '@playwright/test';
-
-test('Simulate localStorage entry in PWA', async ({ page }) => {
-  await page.evaluate(() => {
-    localStorage.setItem('audioCache', JSON.stringify({
-      'https://example.com/audio': {
-        audioUrl: 'https://example.com/audio.mp3',
-        transcription: 'Test transcription',
-        lastPosition: 0
+import { test, expect, describe } from '@playwright/test';
+
+test.describe('LocalStorage Tests', () => {
+  test('Simulate localStorage entry in PWA', async ({ page }) => {
+    await page.evaluate(() => {
+      localStorage.setItem('audioCache', JSON.stringify({
+        'https://example.com/audio': {
+          audioUrl: 'https://example.com/audio.mp3',
+          transcription: 'Test transcription',
+          lastPosition: 0
+        }
+      }));
+    });
+
+    await page.goto('http://localhost:5173/listen-UI/');
+
+    const audioCache = await page.evaluate(() => localStorage.getItem('audioCache'));
+    expect(audioCache).toBeTruthy();
+
+    const historyList = await page.locator('#historyList');
+    const historyItems = await historyList.locator('li').count();
+    expect(historyItems).toBe(1);
+  });
+
+  test('Simulate user interactions with audio player', async ({ page }) => {
+    await page.evaluate(() => {
+      localStorage.setItem('audioCache', JSON.stringify({
+        'https://example.com/audio': {
+          audioUrl: 'https://example.com/audio.mp3',
+          transcription: 'Test transcription',
+          lastPosition: 0
+        }
+      }));
+    });
+
+    await page.goto('http://localhost:5173/listen-UI/');
+
+    const audioPlayer = await page.locator('#player');
+    await audioPlayer.evaluate(player => player.play());
+    await page.waitForTimeout(2000); // Simulate 2 seconds of playback
+    await audioPlayer.evaluate(player => player.pause());
+
+    const currentTime = await audioPlayer.evaluate(player => player.currentTime);
+    expect(currentTime).toBeGreaterThan(0);
+
+    await audioPlayer.evaluate(player => player.currentTime = 10);
+    await audioPlayer.evaluate(player => player.play());
+    await page.waitForTimeout(2000); // Simulate 2 seconds of playback
+    await audioPlayer.evaluate(player => player.pause());
+
+    const newCurrentTime = await audioPlayer.evaluate(player => player.currentTime);
+    expect(newCurrentTime).toBeGreaterThan(10);
+
+    const updatedAudioCache = await page.evaluate(() => localStorage.getItem('audioCache'));
+    const parsedCache = JSON.parse(updatedAudioCache);
+    expect(parsedCache['https://example.com/audio'].lastPosition).toBeCloseTo(newCurrentTime, 1);
+  });
+
+  test('Ensure timestamp is saved at regular intervals', async ({ page }) => {
+    await page.evaluate(() => {
+      localStorage.setItem('audioCache', JSON.stringify({
+        'https://example.com/audio': {
+          audioUrl: 'https://example.com/audio.mp3',
+          transcription: 'Test transcription',
+          lastPosition: 0
+        }
+      }));
+    });
+
+    await page.goto('http://localhost:5173/listen-UI/');
+
+    const audioPlayer = await page.locator('#player');
+    await audioPlayer.evaluate(player => player.play());
+    await page.waitForTimeout(6000); // Simulate 6 seconds of playback
+    await audioPlayer.evaluate(player => player.pause());
+
+    const updatedAudioCache = await page.evaluate(() => localStorage.getItem('audioCache'));
+    const parsedCache = JSON.parse(updatedAudioCache);
+    expect(parsedCache['https://example.com/audio'].lastPosition).toBeGreaterThan(0);
+  });
+
+  test('Load correct timestamp when returning to track', async ({ page }) => {
+    await page.evaluate(() => {
+      localStorage.setItem('audioCache', JSON.stringify({
+        'https://example.com/audio': {
+          audioUrl: 'https://example.com/audio.mp3',
+          transcription: 'Test transcription',
+          lastPosition: 15
+        }
+      }));
+    });
+
+    await page.goto('http://localhost:5173/listen-UI/');
+
+    const audioPlayer = await page.locator('#player');
+    const currentTime = await audioPlayer.evaluate(player => player.currentTime);
+    expect(currentTime).toBeCloseTo(15, 1);
+  });
+
+  test('Handle SecurityError for localStorage access', async ({ page }) => {
+    await page.goto('http://localhost:5173/listen-UI/', { waitUntil: 'domcontentloaded' });
+
+    const localStorageAccess = await page.evaluate(() => {
+      try {
+        localStorage.setItem('test', 'test');
+        return true;
+      } catch (e) {
+        return false;
       }
-    }));
+    });
+
+    expect(localStorageAccess).toBe(true);
   });
 
-  await page.goto('http://localhost:5173/listen-UI/');
+  test('Simulate user interactions with audio player during track changes', async ({ page }) => {
+    await page.evaluate(() => {
+      localStorage.setItem('audioCache', JSON.stringify({
+        'https://example.com/audio1': {
+          audioUrl: 'https://example.com/audio1.mp3',
+          transcription: 'Test transcription 1',
+          lastPosition: 0
+        },
+        'https://example.com/audio2': {
+          audioUrl: 'https://example.com/audio2.mp3',
+          transcription: 'Test transcription 2',
+          lastPosition: 0
+        }
+      }));
+    });
+
+    await page.goto('http://localhost:5173/listen-UI/');
 
-  const audioCache = await page.evaluate(() => localStorage.getItem('audioCache'));
-  expect(audioCache).toBeTruthy();
-
-  const historyList = await page.locator('#historyList');
-  const historyItems = await historyList.locator('li').count();
-  expect(historyItems).toBe(1);
+    const audioPlayer = await page.locator('#player');
+
+    // Play first track
+    await audioPlayer.evaluate(player => player.src = 'https://example.com/audio1.mp3');
+    await audioPlayer.evaluate(player => player.play());
+    await page.waitForTimeout(2000); // Simulate 2 seconds of playback
+    await audioPlayer.evaluate(player => player.pause());
+
+    const currentTime1 = await audioPlayer.evaluate(player => player.currentTime);
+    expect(currentTime1).toBeGreaterThan(0);
+
+    // Switch to second track
+    await audioPlayer.evaluate(player => player.src = 'https://example.com/audio2.mp3');
+    await audioPlayer.evaluate(player => player.play());
+    await page.waitForTimeout(2000); // Simulate 2 seconds of playback
+    await audioPlayer.evaluate(player => player.pause());
+
+    const currentTime2 = await audioPlayer.evaluate(player => player.currentTime);
+    expect(currentTime2).toBeGreaterThan(0);
+
+    // Switch back to first track
+    await audioPlayer.evaluate(player => player.src = 'https://example.com/audio1.mp3');
+    await audioPlayer.evaluate(player => player.play());
+    await page.waitForTimeout(2000); // Simulate 2 seconds of playback
+    await audioPlayer.evaluate(player => player.pause());
+
+    const newCurrentTime1 = await audioPlayer.evaluate(player => player.currentTime);
+    expect(newCurrentTime1).toBeCloseTo(currentTime1, 1);
+
+    const updatedAudioCache = await page.evaluate(() => localStorage.getItem('audioCache'));
+    const parsedCache = JSON.parse(updatedAudioCache);
+    expect(parsedCache['https://example.com/audio1'].lastPosition).toBeCloseTo(newCurrentTime1, 1);
+    expect(parsedCache['https://example.com/audio2'].lastPosition).toBeCloseTo(currentTime2, 1);
+  });
 });
diff --git a/e2e/share-target.spec.js b/e2e/share-target.spec.js
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, describe } from '@playwright/test';
 
 // Add a helper function to check if the server is up
 async function isServerUp(page) {
@@ -11,79 +11,81 @@ async function isServerUp(page) {
   }
 }
 
-test('share-target redirects with URL parameter', async ({ page }) => {
-  // Check if the server is up
-  const serverUp = await isServerUp(page);
-  console.log('Is server up?', serverUp);
-
-  const sharedUrl = 'https://example.com/shared-page';
-  await page.goto(`share-target.html?url=${encodeURIComponent(sharedUrl)}`);
-
-  // Wait for navigation to complete with a shorter timeout
-  await page.waitForNavigation({ timeout: 5000 }).catch(e => console.log('Navigation timeout:', e));
-
-  // Log the current URL for debugging
-  console.log('Current URL:', page.url());
-
-  // Check if we've been redirected to the correct URL
-  expect(page.url()).toContain(`index.html`);
-  expect(page.url()).toContain(`url=${encodeURIComponent(sharedUrl)}`);
-});
-
-test('share-target redirects to index.html when no URL is shared', async ({ page }) => {
-  // Check if the server is up
-  const serverUp = await isServerUp(page);
-  console.log('Is server up?', serverUp);
-
-  await page.goto(`share-target.html`);
-
-  // Wait for navigation to complete with a shorter timeout
-  await page.waitForNavigation({ timeout: 5000 }).catch(e => console.log('Navigation timeout:', e));
-
-  // Log the current URL for debugging
-  console.log('Current URL:', page.url());
-
-  // Check if we've been redirected to the index.html page
-  expect(page.url()).toContain(`index.html`);
-});
-
-test('Share target functionality', async ({ page }) => {
-  console.log('Starting Share target functionality test');
-
-  try {
-    // Simulate sharing a URL to the PWA
-    await page.goto('http://localhost:5173/listen-UI/share-target?url=https://example.com/shared');
-    console.log('Navigated to share target URL');
-
-    // Wait for the page to load and process the shared URL
-    await page.waitForLoadState('networkidle');
-    console.log('Page loaded');
-
-    // Check if the shared URL is processed : we cant test that at the moment as processing takes a lot of time
-    // const sharedUrlProcessed = await page.evaluate(() => {
-    //   const lastProcessedUrl = localStorage.getItem('lastProcessedUrl');
-    //   console.log('Last processed URL:', lastProcessedUrl);
-    //   return lastProcessedUrl === 'https://example.com/shared';
-    // });
-    // expect(sharedUrlProcessed).toBe(true);
-    // console.log('Shared URL processed correctly');
-
-    // Check if the audio player is visible
-    const audioPlayer = await page.locator('#player');
-    await expect(audioPlayer).toBeVisible({ timeout: 10000 });
-    console.log('Audio player is visible');
-
-    // Additional checks to ensure the page has loaded correctly
-    const pageTitle = await page.title();
-    expect(pageTitle).not.toBe('');
-    console.log('Page title:', pageTitle);
-
-    const bodyContent = await page.textContent('body');
-    expect(bodyContent).not.toBe('');
-    console.log('Body content length:', bodyContent.length);
-
-  } catch (error) {
-    console.error('Test failed with error:', error);
-    throw error;
-  }
+describe('Share Target Tests', () => {
+  test('share-target redirects with URL parameter', async ({ page }) => {
+    // Check if the server is up
+    const serverUp = await isServerUp(page);
+    console.log('Is server up?', serverUp);
+
+    const sharedUrl = 'https://example.com/shared-page';
+    await page.goto(`share-target.html?url=${encodeURIComponent(sharedUrl)}`);
+
+    // Wait for navigation to complete with a shorter timeout
+    await page.waitForNavigation({ timeout: 5000 }).catch(e => console.log('Navigation timeout:', e));
+
+    // Log the current URL for debugging
+    console.log('Current URL:', page.url());
+
+    // Check if we've been redirected to the correct URL
+    expect(page.url()).toContain(`index.html`);
+    expect(page.url()).toContain(`url=${encodeURIComponent(sharedUrl)}`);
+  });
+
+  test('share-target redirects to index.html when no URL is shared', async ({ page }) => {
+    // Check if the server is up
+    const serverUp = await isServerUp(page);
+    console.log('Is server up?', serverUp);
+
+    await page.goto(`share-target.html`);
+
+    // Wait for navigation to complete with a shorter timeout
+    await page.waitForNavigation({ timeout: 5000 }).catch(e => console.log('Navigation timeout:', e));
+
+    // Log the current URL for debugging
+    console.log('Current URL:', page.url());
+
+    // Check if we've been redirected to the index.html page
+    expect(page.url()).toContain(`index.html`);
+  });
+
+  test('Share target functionality', async ({ page }) => {
+    console.log('Starting Share target functionality test');
+
+    try {
+      // Simulate sharing a URL to the PWA
+      await page.goto('http://localhost:5173/listen-UI/share-target?url=https://example.com/shared');
+      console.log('Navigated to share target URL');
+
+      // Wait for the page to load and process the shared URL
+      await page.waitForLoadState('networkidle');
+      console.log('Page loaded');
+
+      // Check if the shared URL is processed : we cant test that at the moment as processing takes a lot of time
+      // const sharedUrlProcessed = await page.evaluate(() => {
+      //   const lastProcessedUrl = localStorage.getItem('lastProcessedUrl');
+      //   console.log('Last processed URL:', lastProcessedUrl);
+      //   return lastProcessedUrl === 'https://example.com/shared';
+      // });
+      // expect(sharedUrlProcessed).toBe(true);
+      // console.log('Shared URL processed correctly');
+
+      // Check if the audio player is visible
+      const audioPlayer = await page.locator('#player');
+      await expect(audioPlayer).toBeVisible({ timeout: 10000 });
+      console.log('Audio player is visible');
+
+      // Additional checks to ensure the page has loaded correctly
+      const pageTitle = await page.title();
+      expect(pageTitle).not.toBe('');
+      console.log('Page title:', pageTitle);
+
+      const bodyContent = await page.textContent('body');
+      expect(bodyContent).not.toBe('');
+      console.log('Body content length:', bodyContent.length);
+
+    } catch (error) {
+      console.error('Test failed with error:', error);
+      throw error;
+    }
+  });
 });
diff --git a/script.js b/script.js
@@ -1,4 +1,4 @@
-import { audioCache, loadAudioCache, removeFromCache, clearAudioCache } from './src/audioCache.js';
+import { audioCache, loadAudioCache, removeFromCache, clearAudioCache, setCurrentTrack } from './src/audioCache.js';
 import { loadAudioFromCache, setupMediaSessionHandlers } from './src/audioPlayer.js';
 import { fetchMp3 } from './src/api.js';
 import { checkOnlineStatus, handleSharedUrl } from './src/utils.js';
@@ -113,7 +113,10 @@ document.addEventListener("DOMContentLoaded", async function() {
             const li = document.createElement('li');
             const playBtn = document.createElement('button');
             playBtn.textContent = 'Play';
-            playBtn.onclick = () => loadAudioFromCache(link);
+            playBtn.onclick = () => {
+                loadAudioFromCache(link);
+                setCurrentTrack(link);
+            };
             const removeBtn = document.createElement('button');
             removeBtn.textContent = 'Remove';
             removeBtn.onclick = () => {
@@ -151,4 +154,4 @@ document.addEventListener("DOMContentLoaded", async function() {
 
     // Set up media session handlers
     setupMediaSessionHandlers(audioPlayer, playButton);
-});
+});
diff --git a/src/api.js b/src/api.js
@@ -44,7 +44,7 @@ export async function fetchMp3(link) {
         console.log('Attempting to connect to Gradio app...');
         const client = await Client.connect(apiServer);
         console.log('Gradio client created successfully');
-        console.log(await client.view_api());
+        // console.log(await client.view_api());
         console.log('Preparing to make prediction...');
 
         const result = await client.predict("/generate_audio", { 
@@ -88,7 +88,7 @@ export async function fetchMp3(link) {
     } catch (error) {
         console.error('Error in fetchMp3:', error);
         console.error('Error stack:', error.stack);
-        alert(`Error fetching MP3: ${error.message}`);
+        // alert(`Error fetching MP3: ${error.message}`);
 
         if (audioPlayer) audioPlayer.src = '';
         if (playButton) playButton.style.display = 'none';

diff --git a/src/api.test.js b/src/api.test.js
@@ -36,4 +36,4 @@ describe('api', () => {
     await fetchMp3('https://example.com');
     expect(alert).toHaveBeenCalledWith('You are offline. Unable to fetch new audio.');
   });
-});
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,4 +36,4 @@ describe('api', () => { @@
         await fetchMp3('https://example.com');
         expect(alert).toHaveBeenCalledWith('You are offline. Unable to fetch new audio.');
       });
-    });
+    });