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

A collection of tools for modern JavaScript development

import { DefaultLogger } from '@applicvision/js-toolbox/test'

export class BrowserLogger extends DefaultLogger {
	suiteTemplate
	testTemplate
	testErrorTemplate
	testArtifactTemplate
	options

	constructor(container, options = {}) {
		super()
		this.options = options
		this.container = container
	}
	suiteLogger(suite) {
		const logger = new Suitelogger(suite,
			suite.suite?.loggerInstance?.container ?? this.container,
			this.suiteTemplate,
			this.options
		)
		logger.start()
		return logger
	}

	testLogger(test) {
		const logger = new Testlogger(
			test,
			test.suite?.loggerInstance?.container ?? this.container,
			this.testTemplate,
			this.options
		)
		logger.errorTemplate = this.testErrorTemplate
		logger.artifactsTemplate = this.testArtifactTemplate
		logger.start()
		return logger
	}
}

class Testlogger {
	errorTemplate
	artifactsTemplate
	options
	constructor(test, container, template, options = {}) {
		this.test = test
		this.options = options

		const content = template.content.cloneNode(true)

		this.element = content.querySelector('details')
		this.element.open = true

		const summary = this.element.firstElementChild

		summary.querySelector('.title').textContent = test.description

		this.contentElement = this.element.querySelector('section')
		container.appendChild(content)

	}

	#installArtifactsContainer() {
		const content = this.artifactsTemplate.content.cloneNode(true)
		const node = content.firstElementChild
		this.element.appendChild(content)
		return node
	}

	#installErrorContainer() {
		const content = this.errorTemplate.content.cloneNode(true)
		const node = content.firstElementChild
		this.element.appendChild(content)
		return node
	}

	start() {
		this.element.classList.add('running')
	}

	finished() {
		const { error, artifact, artifacts, failed } = this.test
		this.element.open = this.options.expand || failed
		this.element.classList.remove('running')
		this.element.classList.add(error ? 'fail' : 'pass')

		if (artifacts.length + Object.keys(artifact).length > 0) {
			const container = this.#installArtifactsContainer()
			const unorderedList = container.querySelector('ul')
			const definitionList = container.querySelector('dl')

			unorderedList.append(...artifacts.map(artifact => {
				const listElement = document.createElement('li')
				listElement.append(artifact)
				return listElement
			}))
			Object.entries(artifact).forEach(([key, value]) => {
				const term = document.createElement('dt')
				term.textContent = key
				const definition = document.createElement('dd')
				definition.append(value)
				definitionList.append(term, definition)
			})

		}
		if (error) {
			console.log(`%cFAILED: ${this.test.description}`, 'background: #900; font-weight: bold; font-size: 1.5em')
			console.error(error)

			const errorContainer = this.#installErrorContainer()
			errorContainer.querySelector('.message').textContent = error.message

			errorContainer.querySelector('.error-location')
				.append(error.file?.split('/testfile/').pop() ?? '')
		}
	}
}

class Suitelogger {

	constructor(suite, container, template, options = {}) {
		this.suite = suite
		this.element = template.content.cloneNode(true).firstElementChild
		this.options = options
		this.element.open = true

		const summary = this.element.firstElementChild
		this.progressIndicator = summary.querySelector('av-progress')
		summary.querySelector('.title').textContent = this.suite.description

		this.container = this.element.lastElementChild;

		(container.tagName == 'UL' ?
			container.appendChild(document.createElement('li')) :
			container
		).appendChild(this.element)
	}

	start() {
		this.element.classList.add('running')
	}

	updateProgress() {
		const { progress, failed } = this.suite

		if (failed) {
			this.progressIndicator.classList.add('failed')
		}
		this.progressIndicator.value = progress

	}

	finished() {
		const { failed } = this.suite
		this.element.open = this.options.expand || failed
		this.element.classList.remove('running')
		this.element.classList.add(failed ? 'fail' : 'pass')
	}
}