@applicvision/js-toolbox/src/av-test-browser/public/testrunner.js

A collection of tools for modern JavaScript development

import { getRootSuite } from '@applicvision/js-toolbox/test'
import { BrowserLogger } from './test-logger-browser.js'


function setupWatchMode(watchedPaths) {

	const listFormat = new Intl.ListFormat('en', { type: 'conjunction' })
	const element = document.getElementById('watch-indicator')
	element.classList.remove('inactive')
	element.firstElementChild.textContent = `Watching: ${listFormat.format([].concat(watchedPaths))}`

	const fileChangeListener = new EventSource('/filechangestream')

	fileChangeListener.addEventListener('filechange', (event) => {
		location.reload()
	})

	fileChangeListener.addEventListener('welcome', (event) => {
		element.classList.remove('inactive')
	})

	fileChangeListener.addEventListener('error', (event) => {
		element.classList.add('inactive')
	})
}

onload = async () => {
	const query = new URLSearchParams(location.search)
	const options = {
		only: query.get('only') !== null
	}

	const filter = query.getAll('filter')
	if (filter.length) {
		options.filter = filter.map(filter => new RegExp(filter, 'i'))
	}

	const { files, watchedPaths } = await fetch('/testfiles').then(res => res.json())

	const templatesResponse = await fetch('/public/templates.html')
	const templates = new DOMParser()
		.parseFromString(await templatesResponse.text(), 'text/html')

	const expandQuery = query.get('expand')

	const expandTests = expandQuery !== '0' &&
		expandQuery !== 'false' &&
		(expandQuery != null || options.filter || options.only)

	const logger = new BrowserLogger(document.getElementById('test-container'), { expand: expandTests })

	logger.suiteTemplate = templates.getElementById('suite-template')
	logger.testTemplate = templates.getElementById('test-template')
	logger.testErrorTemplate = templates.getElementById('test-error-content')
	logger.testArtifactTemplate = templates.getElementById('test-artifacts')
	const rootSuite = getRootSuite(logger)

	const progressElement = document.getElementById('master-progress')
	rootSuite.loggerInstance = {
		updateProgress() {
			progressElement.value = rootSuite.progress
		}
	}

	if (watchedPaths) {
		setupWatchMode(watchedPaths)
	}

	for (const file of files) {
		await rootSuite.addTestFile(file, () => import(`/hostproject/${file}`))
	}
	await rootSuite.run(options)

	const message = rootSuite.failed ? 'Tests failed' : 'All tests passed'
	const svgIcon = `/public/test-${rootSuite.failed ? 'fail' : 'pass'}.svg`
	document.querySelector('link[rel="icon"]').href = svgIcon
	document.title = rootSuite.error?.message ?? message

	if (Notification.permission == 'granted') {
		new Notification('Tests finished', {
			body: rootSuite.error?.message ?? message,
			icon: svgIcon
		})
	} else {
		const notificationButton = document.getElementById('show-notification')
		notificationButton.hidden = false
		notificationButton.addEventListener('click', async () => {
			const result = await Notification.requestPermission()
			if (result == 'granted') {
				notificationButton.hidden = true
			}
		})
	}


}