|
| 1 | +import assert = require('assert') |
| 2 | + |
| 3 | +describe('Service Worker', () => { |
| 4 | + before(() => { |
| 5 | + // Fail fast if there is no Service Worker on this build. |
| 6 | + cy.request({ url: '/service-worker.js', headers: { 'Service-Worker': 'script' } }).then((response) => { |
| 7 | + const isValid = isValidServiceWorker(response) |
| 8 | + if (!isValid) { |
| 9 | + throw new Error( |
| 10 | + '\n' + |
| 11 | + 'Service Worker tests must be run on a production-like build\n' + |
| 12 | + 'To test, build with `yarn build:e2e` and serve with `yarn serve`' |
| 13 | + ) |
| 14 | + } |
| 15 | + }) |
| 16 | + |
| 17 | + function isValidServiceWorker(response: Cypress.Response<any>) { |
| 18 | + const contentType = response.headers['content-type'] |
| 19 | + return !(response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) |
| 20 | + } |
| 21 | + }) |
| 22 | + |
| 23 | + function unregister() { |
| 24 | + return cy.log('unregister service worker').then(async () => { |
| 25 | + const cacheKeys = await window.caches.keys() |
| 26 | + const cacheKey = cacheKeys.find((key) => key.match(/precache/)) |
| 27 | + if (cacheKey) { |
| 28 | + await window.caches.delete(cacheKey) |
| 29 | + } |
| 30 | + |
| 31 | + const sw = await window.navigator.serviceWorker.getRegistration(Cypress.config().baseUrl ?? undefined) |
| 32 | + await sw?.unregister() |
| 33 | + }) |
| 34 | + } |
| 35 | + before(unregister) |
| 36 | + after(unregister) |
| 37 | + |
| 38 | + beforeEach(() => { |
| 39 | + cy.intercept({ hostname: 'www.google-analytics.com' }, (req) => { |
| 40 | + const body = req.body.toString() |
| 41 | + if (req.query['ep.event_category'] === 'Service Worker' || body.includes('Service%20Worker')) { |
| 42 | + if (req.query['en'] === 'Not Installed' || body.includes('Not%20Installed')) { |
| 43 | + req.alias = 'NotInstalled' |
| 44 | + } else if (req.query['en'] === 'Cache Hit' || body.includes('Cache%20Hit')) { |
| 45 | + req.alias = 'CacheHit' |
| 46 | + } else if (req.query['en'] === 'Cache Miss' || body.includes('Cache%20Miss')) { |
| 47 | + req.alias = 'CacheMiss' |
| 48 | + } |
| 49 | + } |
| 50 | + }) |
| 51 | + }) |
| 52 | + |
| 53 | + it('installs a ServiceWorker', () => { |
| 54 | + cy.visit('/', { serviceWorker: true }) |
| 55 | + .get('#swap-page') |
| 56 | + .wait('@NotInstalled', { timeout: 20000 }) |
| 57 | + .window({ timeout: 20000 }) |
| 58 | + .and((win) => { |
| 59 | + expect(win.navigator.serviceWorker.controller?.state).to.equal('activated') |
| 60 | + }) |
| 61 | + }) |
| 62 | + |
| 63 | + it('records a cache hit', () => { |
| 64 | + cy.visit('/', { serviceWorker: true }).get('#swap-page').wait('@CacheHit', { timeout: 20000 }) |
| 65 | + }) |
| 66 | + |
| 67 | + it('records a cache miss', () => { |
| 68 | + cy.then(async () => { |
| 69 | + const cacheKeys = await window.caches.keys() |
| 70 | + const cacheKey = cacheKeys.find((key) => key.match(/precache/)) |
| 71 | + assert(cacheKey) |
| 72 | + |
| 73 | + const cache = await window.caches.open(cacheKey) |
| 74 | + const keys = await cache.keys() |
| 75 | + const key = keys.find((key) => key.url.match(/index/)) |
| 76 | + assert(key) |
| 77 | + |
| 78 | + await cache.put(key, new Response()) |
| 79 | + }) |
| 80 | + .visit('/', { serviceWorker: true }) |
| 81 | + .get('#swap-page') |
| 82 | + .wait('@CacheMiss', { timeout: 20000 }) |
| 83 | + }) |
| 84 | +}) |
0 commit comments