Matt Gaunt-Seo gauntface

🤓

Mon-Fri: Working. Sat-Sun: Not Working.

gauntface / my-first-test.js

Created March 6, 2017 22:01

Full test to register a service worker and ensure the install step occurred as expected.

	it('should register a service worker and cache file on install', function() {
	// Mocha can handle promises, so as long as the promise doesn’t reject
	// this test will pass.
	return navigator.serviceWorker.register('/test/static/my-first-sw.js')
	.then((reg) => {
	return window.__waitForSWState(reg, 'installed');
	})
	.then(() => {
	return caches.match('/__test/example')
	.then((response) => {

gauntface / my-first-sw.js

Created March 6, 2017 22:00

Example service worker performing a fake install process.

	self.addEventListener('install', (event) => {
	const promiseChain = caches.open('test-cache')
	.then((openCache) => {
	return openCache.put(
	new Request('/__test/example'),
	new Response('Hello, World!')
	);
	});
	event.waitUntil(promiseChain);
	});

gauntface / my-first-test.js

Created March 6, 2017 21:59

Adding function to unregister service workers.

	describe('Service Worker Suite', function() {

	beforeEach(function() {
	return navigator.serviceWorker.getRegistrations()
	.then((registrations) => {
	const unregisterPromises = registrations.map((registration) => {
	return registration.unregister();
	});
	return Promise.all(unregisterPromises);
	});

gauntface / my-first-test.js

Created March 6, 2017 21:58

Using helper function in test

	it('should register a service worker and cache file on install', function() {
	// 1: Register service worker.
	// 2: Wait for service worker to install.
	// 3: Check cache was performed correctly.

	return navigator.serviceWorker.register('/test/static/my-first-sw.js')
	.then((reg) => {
	return window.__waitForSWState(reg, 'installed');
	});
	});

gauntface / index.html

Created March 6, 2017 21:58

Adding helper script to browser tests.

	<!-- This Projects Libraries / Pieces of Code Here -->
	<script src="/test/utils/wait-for-sw-state.js"></script>

gauntface / wait-for-sw-state.js

Last active March 6, 2017 21:57

A helper function that will wait for a service worker to fall into a specific state.

	window.__waitForSWState = (registration, desiredState) => {
	return new Promise((resolve, reject) => {
	let serviceWorker = registration.installing;

	if (!serviceWorker) {
	return reject(new Error('The service worker is not installing. ' +
	'Is the test environment clean?'));
	}

	const stateListener = (evt) => {

gauntface / my-first-test.js

Created March 6, 2017 21:55

Registering service worker in test.

	it(‘should register a service worker and cache file on install’, function() {
	// 1: Register service worker.
	// 2: Wait for service worker to install.
	// 3: Check cache was performed correctly.

	return navigator.serviceWorker.register(‘/test/static/my-first-sw.js’);
	});

gauntface / index.html

Created March 6, 2017 21:37

Adding test to mocha tests via HTML script tag.

	<!-- This Projects Unit Tests Here -->
	<script src="/test/browser/my-first-test.js"></script>

gauntface / my-first-test.js

Last active March 6, 2017 21:37

Example Mocha Test Running in Browser to register a test a service worker install step.

	describe(‘Service Worker Suite’, function() {
	it(‘should register a service worker and cache file on install’, function() {
	// 1: Register service worker.
	// 2: Wait for service worker to install.
	// 3: Check cache was performed correctly.
	});
	});

gauntface / index.html

Created March 6, 2017 21:30

Basic Mocha HTML Page

	<html>
	<head>
	<meta charset="utf-8">
	<title>Mocha Tests</title>
	<link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
	</head>
	<body>
	<!-- Mocha Requires a <div> with ID Mocha to Inject UI -->
	<div id="mocha"></div>