chore: add Playwright offline tests (#624)

* chore: add Svelte ecosystem-ci script

* chore: remove script

examples/preact-router/client-test/offline.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+const injectManifest = process.env.SW === 'true'
+const swName = `${injectManifest ? 'claims-sw.js' : 'sw.js'}`
+
+test('Preact: Test offline', async ({ browser }) => {
+  // test offline + trailing slashes routes
+  const context = await browser.newContext()
+  const offlinePage = await context.newPage()
+  await offlinePage.goto('/')
+  const offlineSwURL = await offlinePage.evaluate(async () => {
+    const registration = await Promise.race([
+      navigator.serviceWorker.ready,
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
+    ])
+    // @ts-expect-error registration is of type any
+    return registration.active?.scriptURL
+  })
+  expect(offlineSwURL).toBe(`http://localhost:4173/${swName}`)
+  await context.setOffline(true)
+  const aboutAnchor = offlinePage.getByRole('link', { name: 'About' })
+  expect(await aboutAnchor.getAttribute('href')).toBe('/about')
+  await aboutAnchor.click({ noWaitAfter: false })
+  const url = await offlinePage.evaluate(async () => {
+    await new Promise(resolve => setTimeout(resolve, 3000))
+    return location.href
+  })
+  expect(url).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  await offlinePage.reload({ waitUntil: 'load' })
+  expect(offlinePage.url()).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  // Dispose context once it's no longer needed.
+  await context.close()
+})

examples/preact-router/client-test/sw.spec.ts

@@ -12,7 +12,7 @@ test('Preact: The service worker is registered and cache storage is present', as
       navigator.serviceWorker.ready,
       new Promise((_resolve, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
     ])
-    // @ts-expect-error registration is of type unknown
+    // @ts-expect-error registration is of type any
     return registration.active?.scriptURL
   })
   expect(swURL).toBe(`http://localhost:4173/${swName}`)

examples/react-router/client-test/offline.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+const injectManifest = process.env.SW === 'true'
+const swName = `${injectManifest ? 'claims-sw.js' : 'sw.js'}`
+
+test('React: Test offline', async ({ browser }) => {
+  // test offline + trailing slashes routes
+  const context = await browser.newContext()
+  const offlinePage = await context.newPage()
+  await offlinePage.goto('/')
+  const offlineSwURL = await offlinePage.evaluate(async () => {
+    const registration = await Promise.race([
+      navigator.serviceWorker.ready,
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
+    ])
+    // @ts-expect-error registration is of type any
+    return registration.active?.scriptURL
+  })
+  expect(offlineSwURL).toBe(`http://localhost:4173/${swName}`)
+  await context.setOffline(true)
+  const aboutAnchor = offlinePage.getByRole('link', { name: 'About' })
+  expect(await aboutAnchor.getAttribute('href')).toBe('/about')
+  await aboutAnchor.click({ noWaitAfter: false })
+  const url = await offlinePage.evaluate(async () => {
+    await new Promise(resolve => setTimeout(resolve, 3000))
+    return location.href
+  })
+  expect(url).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  await offlinePage.reload({ waitUntil: 'load' })
+  expect(offlinePage.url()).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  // Dispose context once it's no longer needed.
+  await context.close()
+})

examples/react-router/client-test/sw.spec.ts

@@ -12,7 +12,7 @@ test('React: The service worker is registered and cache storage is present', asy
       navigator.serviceWorker.ready,
       new Promise((_resolve, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
     ])
-    // @ts-expect-error registration is of type unknown
+    // @ts-expect-error registration is of type any
     return registration.active?.scriptURL
   })
   expect(swURL).toBe(`http://localhost:4173/${swName}`)

examples/solid-router/client-test/offline.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+const injectManifest = process.env.SW === 'true'
+const swName = `${injectManifest ? 'claims-sw.js' : 'sw.js'}`
+
+test('Solid: Test offline', async ({ browser }) => {
+  // test offline + trailing slashes routes
+  const context = await browser.newContext()
+  const offlinePage = await context.newPage()
+  await offlinePage.goto('/')
+  const offlineSwURL = await offlinePage.evaluate(async () => {
+    const registration = await Promise.race([
+      navigator.serviceWorker.ready,
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
+    ])
+    // @ts-expect-error registration is of type any
+    return registration.active?.scriptURL
+  })
+  expect(offlineSwURL).toBe(`http://localhost:4173/${swName}`)
+  await context.setOffline(true)
+  const aboutAnchor = offlinePage.getByRole('link', { name: 'About' })
+  expect(await aboutAnchor.getAttribute('href')).toBe('/about')
+  await aboutAnchor.click({ noWaitAfter: false })
+  const url = await offlinePage.evaluate(async () => {
+    await new Promise(resolve => setTimeout(resolve, 3000))
+    return location.href
+  })
+  expect(url).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  await offlinePage.reload({ waitUntil: 'load' })
+  expect(offlinePage.url()).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  // Dispose context once it's no longer needed.
+  await context.close()
+})

examples/solid-router/client-test/sw.spec.ts

@@ -9,10 +9,10 @@ test('Solid: The service worker is registered and cache storage is present', asy
 
   const swURL = await page.evaluate(async () => {
     const registration = await Promise.race([
-      // @ts-expect-error TS2339: Property 'serviceWorker' does not exist on type 'WorkerNavigator'.
       navigator.serviceWorker.ready,
       new Promise((_resolve, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
     ])
+    // @ts-expect-error registration is of type any
     return registration.active?.scriptURL
   })
   expect(swURL).toBe(`http://localhost:4173/${swName}`)

examples/svelte-routify/client-test/offline.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+const injectManifest = process.env.SW === 'true'
+const swName = `${injectManifest ? 'claims-sw.js' : 'sw.js'}`
+
+test('Svelte: Test offline', async ({ browser }) => {
+  // test offline + trailing slashes routes
+  const context = await browser.newContext()
+  const offlinePage = await context.newPage()
+  await offlinePage.goto('/')
+  const offlineSwURL = await offlinePage.evaluate(async () => {
+    const registration = await Promise.race([
+      navigator.serviceWorker.ready,
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
+    ])
+    // @ts-expect-error registration is of type any
+    return registration.active?.scriptURL
+  })
+  expect(offlineSwURL).toBe(`http://localhost:4173/${swName}`)
+  await context.setOffline(true)
+  const aboutAnchor = offlinePage.getByRole('link', { name: 'About' })
+  expect(await aboutAnchor.getAttribute('href')).toBe('/about')
+  await aboutAnchor.click({ noWaitAfter: false })
+  const url = await offlinePage.evaluate(async () => {
+    await new Promise(resolve => setTimeout(resolve, 3000))
+    return location.href
+  })
+  expect(url).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  await offlinePage.reload({ waitUntil: 'load' })
+  expect(offlinePage.url()).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('a').getByText('Go Home')).toBeTruthy()
+  // Dispose context once it's no longer needed.
+  await context.close()
+})

examples/svelte-routify/client-test/sw.spec.ts

@@ -11,7 +11,7 @@ test('Svelte: The service worker is registered and cache storage is present', as
       navigator.serviceWorker.ready,
       new Promise((_resolve, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
     ])
-    // @ts-expect-error missing types
+    // @ts-expect-error registration is of type any
     return registration.active?.scriptURL
   })
   expect(swURL).toBe(`http://localhost:4173/${swName}`)

examples/vue-router/client-test/offline.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+const injectManifest = process.env.SW === 'true'
+const swName = `${injectManifest ? 'claims-sw.js' : 'sw.js'}`
+
+test('Vue3: Test offline', async ({ browser }) => {
+  // test offline + trailing slashes routes
+  const context = await browser.newContext()
+  const offlinePage = await context.newPage()
+  await offlinePage.goto('/')
+  const offlineSwURL = await offlinePage.evaluate(async () => {
+    const registration = await Promise.race([
+      navigator.serviceWorker.ready,
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
+    ])
+    // @ts-expect-error registration is of type any
+    return registration.active?.scriptURL
+  })
+  expect(offlineSwURL).toBe(`http://localhost:4173/${swName}`)
+  await context.setOffline(true)
+  const aboutAnchor = offlinePage.getByRole('button', { name: 'About' })
+  expect(await aboutAnchor.getAttribute('type')).toBe('button')
+  await aboutAnchor.click({ noWaitAfter: false })
+  const url = await offlinePage.evaluate(async () => {
+    await new Promise(resolve => setTimeout(resolve, 3000))
+    return location.href
+  })
+  expect(url).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('button').getByText('Home')).toBeTruthy()
+  await offlinePage.reload({ waitUntil: 'load' })
+  expect(offlinePage.url()).toBe('http://localhost:4173/about')
+  expect(offlinePage.locator('button').getByText('Home')).toBeTruthy()
+  // Dispose context once it's no longer needed.
+  await context.close()
+})

examples/vue-router/client-test/sw.spec.ts

@@ -12,7 +12,7 @@ test('Vue3: The service worker is registered and cache storage is present', asyn
       navigator.serviceWorker.ready,
       new Promise((_resolve, reject) => setTimeout(() => reject(new Error('Service worker registration failed: time out')), 10000)),
     ])
-    // @ts-expect-error registration is of type unknown
+    // @ts-expect-error registration is of type any
     return registration.active?.scriptURL
   })
   expect(swURL).toBe(`http://localhost:4173/${swName}`)