From 3f77f9b3ff9763f4903d5fa2353ef30ca0113383 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sat, 10 Aug 2024 20:09:49 -0600 Subject: [PATCH] record some info on my attempt to test a service worker --- src/registerServiceWorker.ts | 59 +++++++++---------- src/router/index.ts | 3 + .../35-record-gift-from-image-share.spec.ts | 41 +++++++++++-- 3 files changed, 67 insertions(+), 36 deletions(-) diff --git a/src/registerServiceWorker.ts b/src/registerServiceWorker.ts index 6a4985823..2ad36791b 100644 --- a/src/registerServiceWorker.ts +++ b/src/registerServiceWorker.ts @@ -2,33 +2,32 @@ import { register } from "register-service-worker"; -if (import.meta.env.NODE_ENV === "production") { - register("/sw_scripts-combined.js", { - ready() { - console.log( - "App is being served from cache by a service worker.\n" + - "For more details, visit https://goo.gl/AFskqB", - ); - }, - registered() { - console.log("Service worker has been registered."); - }, - cached() { - console.log("Content has been cached for offline use."); - }, - updatefound() { - console.log("New content is downloading."); - }, - updated() { - console.log("New content is available; please refresh."); - }, - offline() { - console.log( - "No internet connection found. App is running in offline mode.", - ); - }, - error(error) { - console.error("Error during service worker registration:", error); - }, - }); -} +// This used to be only done when: import.meta.env.NODE_ENV === "production" +register("/sw_scripts-combined.js", { + ready() { + console.log( + "App is being served from cache by a service worker.\n" + + "For more details, visit https://goo.gl/AFskqB", + ); + }, + registered() { + console.log("Service worker has been registered."); + }, + cached() { + console.log("Content has been cached for offline use."); + }, + updatefound() { + console.log("New content is downloading."); + }, + updated() { + console.log("New content is available; please refresh."); + }, + offline() { + console.log( + "No internet connection found. App is running in offline mode.", + ); + }, + error(error) { + console.error("Error during service worker registration:", error); + }, +}); diff --git a/src/router/index.ts b/src/router/index.ts index 2505a765f..39901a6d4 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -189,6 +189,9 @@ const routes: Array = [ name: "shared-photo", component: () => import("@/views/SharedPhotoView.vue"), }, + + // /share-target is also an endpoint in the service worker + { path: "/start", name: "start", diff --git a/test-playwright/35-record-gift-from-image-share.spec.ts b/test-playwright/35-record-gift-from-image-share.spec.ts index 5e9d9ec0c..72223e501 100644 --- a/test-playwright/35-record-gift-from-image-share.spec.ts +++ b/test-playwright/35-record-gift-from-image-share.spec.ts @@ -1,5 +1,6 @@ import path from 'path'; import { test, expect } from '@playwright/test'; +import { importUser } from './testUtils'; test('Record item given from image-share', async ({ page }) => { @@ -8,11 +9,7 @@ test('Record item given from image-share', async ({ page }) => { // Combine title prefix with the random string const finalTitle = `Gift ${randomString} from image-share`; - // Create new ID using seed phrase "rigid shrug mobileā€¦" - await page.goto('./start'); - await page.getByText('You have a seed').click(); - await page.getByPlaceholder('Seed Phrase').fill('rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage'); - await page.getByRole('button', { name: 'Import' }).click(); + await importUser(page, '00'); // Record something given await page.goto('./test'); @@ -37,4 +34,36 @@ test('Record item given from image-share', async ({ page }) => { await page.goto('./'); const item1 = page.locator('li').filter({ hasText: finalTitle }); await expect(item1.getByRole('img')).toBeVisible(); -}); \ No newline at end of file +}); + +// // I believe there's a way to test this service worker feature. +// // The following is what I got from ChatGPT. I wonder if it doesn't work because it's not registering the service worker correctly. +// +// test('Trigger a photo-sharing fetch event in service worker with POST to /share-target', async ({ page }) => { +// await importUser(page, '00'); +// +// // Create a FormData object with a photo +// const photoPath = path.join(__dirname, '..', 'public', 'img', 'icons', 'android-chrome-192x192.png'); +// const photoContent = await fs.readFileSync(photoPath); +// const [response] = await Promise.all([ +// page.waitForResponse(response => response.url().includes('/share-target')), // also check for response.status() === 303 ? +// page.evaluate(async (photoContent) => { +// const formData = new FormData(); +// formData.append('photo', new Blob([photoContent], { type: 'image/png' }), 'test-photo.jpg'); +// +// const response = await fetch('/share-target', { +// method: 'POST', +// body: formData, +// }); +// +// return response; +// }, photoContent) +// ]); +// +// // Verify the response redirected to /shared-photo +// //expect(response.status).toBe(303); +// console.log('response headers', response.headers()); +// console.log('response status', response.status()); +// console.log('response url', response.url()); +// expect(response.url()).toContain('/shared-photo'); +// });