Browse Source

record some info on my attempt to test a service worker

pull/123/head
Trent Larson 3 months ago
parent
commit
3f77f9b3ff
  1. 59
      src/registerServiceWorker.ts
  2. 3
      src/router/index.ts
  3. 39
      test-playwright/35-record-gift-from-image-share.spec.ts

59
src/registerServiceWorker.ts

@ -2,33 +2,32 @@
import { register } from "register-service-worker"; import { register } from "register-service-worker";
if (import.meta.env.NODE_ENV === "production") { // This used to be only done when: import.meta.env.NODE_ENV === "production"
register("/sw_scripts-combined.js", { register("/sw_scripts-combined.js", {
ready() { ready() {
console.log( console.log(
"App is being served from cache by a service worker.\n" + "App is being served from cache by a service worker.\n" +
"For more details, visit https://goo.gl/AFskqB", "For more details, visit https://goo.gl/AFskqB",
); );
}, },
registered() { registered() {
console.log("Service worker has been registered."); console.log("Service worker has been registered.");
}, },
cached() { cached() {
console.log("Content has been cached for offline use."); console.log("Content has been cached for offline use.");
}, },
updatefound() { updatefound() {
console.log("New content is downloading."); console.log("New content is downloading.");
}, },
updated() { updated() {
console.log("New content is available; please refresh."); console.log("New content is available; please refresh.");
}, },
offline() { offline() {
console.log( console.log(
"No internet connection found. App is running in offline mode.", "No internet connection found. App is running in offline mode.",
); );
}, },
error(error) { error(error) {
console.error("Error during service worker registration:", error); console.error("Error during service worker registration:", error);
}, },
}); });
}

3
src/router/index.ts

@ -189,6 +189,9 @@ const routes: Array<RouteRecordRaw> = [
name: "shared-photo", name: "shared-photo",
component: () => import("@/views/SharedPhotoView.vue"), component: () => import("@/views/SharedPhotoView.vue"),
}, },
// /share-target is also an endpoint in the service worker
{ {
path: "/start", path: "/start",
name: "start", name: "start",

39
test-playwright/35-record-gift-from-image-share.spec.ts

@ -1,5 +1,6 @@
import path from 'path'; import path from 'path';
import { test, expect } from '@playwright/test'; import { test, expect } from '@playwright/test';
import { importUser } from './testUtils';
test('Record item given from image-share', async ({ page }) => { 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 // Combine title prefix with the random string
const finalTitle = `Gift ${randomString} from image-share`; const finalTitle = `Gift ${randomString} from image-share`;
// Create new ID using seed phrase "rigid shrug mobile…" await importUser(page, '00');
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();
// Record something given // Record something given
await page.goto('./test'); await page.goto('./test');
@ -38,3 +35,35 @@ test('Record item given from image-share', async ({ page }) => {
const item1 = page.locator('li').filter({ hasText: finalTitle }); const item1 = page.locator('li').filter({ hasText: finalTitle });
await expect(item1.getByRole('img')).toBeVisible(); await expect(item1.getByRole('img')).toBeVisible();
}); });
// // 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');
// });

Loading…
Cancel
Save