+ Test results will automatically appear in this sidebar. To view results, modify a Go source file within your
+ project or dispatchRunTests('./...')}>run all tests.
+
+
+
+
+
+ Tip:
+
+ need more screen space? Collapse this sidebar by pressing the
+ « button at the top.
+
+
+ {/if}
+ {/if}
+
diff --git a/web/app/src/lib/components/SvgIcon.svelte b/web/app/src/lib/components/SvgIcon.svelte
new file mode 100644
index 0000000..67745ea
--- /dev/null
+++ b/web/app/src/lib/components/SvgIcon.svelte
@@ -0,0 +1,9 @@
+
+
+
diff --git a/web/app/src/lib/conditionalTransitions.spec.ts b/web/app/src/lib/conditionalTransitions.spec.ts
new file mode 100644
index 0000000..87c37db
--- /dev/null
+++ b/web/app/src/lib/conditionalTransitions.spec.ts
@@ -0,0 +1,116 @@
+import { get } from 'svelte/store';
+
+import {
+ conditionalScale,
+ transitionsOff,
+ transitionsOffForDuration,
+ transitionsOn
+} from '$lib/conditionalTransitions';
+import { afterEach, describe, expect, it, type Mock, vi } from 'vitest';
+
+import { transitionsActive } from '$lib/stores/transitions';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function mockLockWith(returnVal: Lock | null): Mock {
+ const mockLockRequest = vi.fn((_name: string, _options: LockOptions, callback: (lock: Lock | null) => void) => {
+ callback(returnVal);
+ });
+
+ vi.stubGlobal('navigator', {
+ locks: {
+ request: mockLockRequest
+ }
+ });
+
+ return mockLockRequest;
+}
+
+beforeEach(() => {
+ vi.useRealTimers();
+});
+
+afterEach(() => {
+ vi.clearAllMocks();
+});
+
+describe('transitionsOff', () => {
+ it('acquires lock and sets transitionsActive store to false', async () => {
+ const mock = mockLockWith({} as Lock);
+ transitionsActive.set(true);
+ expect(await transitionsOff()).toBe(true);
+ expect(get(transitionsActive)).toBe(false);
+ expect(mock).toHaveBeenCalledWith('stores.transitionsActive', { ifAvailable: true }, expect.any(Function));
+ });
+
+ describe('when lock is not available', () => {
+ it('does not set transitionsActive store to false', async () => {
+ const mock = mockLockWith(null);
+ transitionsActive.set(true);
+ expect(await transitionsOff()).toBe(false);
+ expect(get(transitionsActive)).toBe(true);
+ expect(mock).toHaveBeenCalledWith('stores.transitionsActive', { ifAvailable: true }, expect.any(Function));
+ });
+ });
+});
+
+describe('transitionsOn', () => {
+ it('acquires lock and sets transitionsActive store to true', async () => {
+ const mock = mockLockWith({} as Lock);
+ transitionsActive.set(false);
+ expect(await transitionsOn()).toBe(true);
+ expect(get(transitionsActive)).toBe(true);
+ expect(mock).toHaveBeenCalledWith('stores.transitionsActive', { ifAvailable: true }, expect.any(Function));
+ });
+
+ describe('when lock is not available', () => {
+ it('does not set transitionsActive store to true', async () => {
+ const mock = mockLockWith(null);
+ transitionsActive.set(false);
+ expect(await transitionsOn()).toBe(false);
+ expect(get(transitionsActive)).toBe(false);
+ expect(mock).toHaveBeenCalledWith('stores.transitionsActive', { ifAvailable: true }, expect.any(Function));
+ });
+ });
+});
+
+describe('transitionsOffForDuration', () => {
+ it('acquires lock and sets transitionsActive store to false for duration', async () => {
+ vi.useFakeTimers();
+ const mock = mockLockWith({} as Lock);
+ transitionsActive.set(true);
+ expect(transitionsOffForDuration(1000)).resolves.toBe(true);
+ await new Promise(process.nextTick);
+ expect(get(transitionsActive)).toBe(false);
+ vi.advanceTimersByTime(1000);
+ await new Promise(process.nextTick);
+ expect(mock).toHaveBeenCalledWith('stores.transitionsActive', { ifAvailable: true }, expect.any(Function));
+ });
+
+ describe('when lock is not available', () => {
+ it('does not set transitionsActive store to true', async () => {
+ const mock = mockLockWith(null);
+ transitionsActive.set(true);
+ expect(transitionsOffForDuration(1000)).resolves.toBe(false);
+ expect(get(transitionsActive)).toBe(true);
+ expect(mock).toHaveBeenCalledWith('stores.transitionsActive', { ifAvailable: true }, expect.any(Function));
+ });
+ });
+});
+
+describe('conditionalScale', () => {
+ describe('when transitionsActive is true', () => {
+ it('returns a scale transition', () => {
+ transitionsActive.set(true);
+ const transition = conditionalScale(document.createElement('div'));
+ expect(transition.css).toBeTypeOf('function');
+ });
+ });
+
+ describe('when transitionsActive is false', () => {
+ it('returns empty object', () => {
+ transitionsActive.set(false);
+ const transition = conditionalScale(document.createElement('div'));
+ expect(transition.css).toBeUndefined;
+ });
+ });
+});
diff --git a/web/app/src/lib/conditionalTransitions.ts b/web/app/src/lib/conditionalTransitions.ts
new file mode 100644
index 0000000..a41bc63
--- /dev/null
+++ b/web/app/src/lib/conditionalTransitions.ts
@@ -0,0 +1,97 @@
+import type { ScaleParams, TransitionConfig } from 'svelte/transition';
+import { scale } from 'svelte/transition';
+
+import { transitionsActive } from '$lib/stores/transitions';
+
+import { sleep } from '$lib/common/utils';
+
+const lockName = 'stores.transitionsActive';
+
+let transitionsActiveVal = true;
+
+transitionsActive.subscribe((newSetting) => {
+ transitionsActiveVal = newSetting;
+});
+
+/**
+ * Turn transitions off.
+ *
+ * Instructs aware components to not use transitions.
+ * until enabled again with {@line transitionsOn()} or
+ * {@link transitionsOffForDuration}.
+ *
+ * @returns - Promise that resolves to true if lock was acquired and
+ * transitions were turned off.
+ */
+export function transitionsOff(): Promise {
+ return new Promise((resolve) => {
+ navigator.locks.request(lockName, { ifAvailable: true }, (lock) => {
+ if (lock) {
+ transitionsActive.set(false);
+ return resolve(true);
+ }
+ resolve(false);
+ });
+ });
+}
+
+/**
+ * Turn transitions on.
+ *
+ * Instructs aware components to use transitions.
+ *
+ * @returns - Promise that resolves to true if lock was acquired and
+ * transitions were turned on.
+ */
+export function transitionsOn(): Promise {
+ return new Promise((resolve) => {
+ navigator.locks.request(lockName, { ifAvailable: true }, (lock) => {
+ if (lock) {
+ transitionsActive.set(true);
+ return resolve(true);
+ }
+ resolve(false);
+ });
+ });
+}
+
+/**
+ * Turn transitions off for a duration.
+ *
+ * Instructs aware components to not use transitions for the given duration,
+ * which is useful for situations where many transitions would otherwise happen
+ * at once.
+ *
+ * Calling this function will lock the transitions off until the duration has
+ * passed, to prevent another call to {@link transitionsOn} or
+ * {@link transitionsOffForDuration} with a shorter duration from prematurely
+ * re-enabling transitions.
+ *
+ * @param duration - Duration in milliseconds to turn transitions off for.
+ *
+ * @returns - Promise that resolves to true if lock was acquired and
+ * transitions were turned off for duration.
+ */
+export function transitionsOffForDuration(duration: number): Promise {
+ return new Promise((resolve) => {
+ navigator.locks.request(lockName, { ifAvailable: true }, async (lock) => {
+ if (lock) {
+ transitionsActive.set(false);
+ await sleep(duration);
+ transitionsActive.set(true);
+ return resolve(true);
+ }
+ resolve(false);
+ });
+ });
+}
+
+/**
+ * Conditional scale transition.
+ *
+ * Returns a scale transition if transitions are enabled, otherwise returns
+ * an empty object.
+ */
+export function conditionalScale(node: Element, params?: ScaleParams | undefined): TransitionConfig {
+ return transitionsActiveVal ? scale(node, params) : {};
+}
diff --git a/web/app/src/lib/coverage.spec.ts b/web/app/src/lib/coverage.spec.ts
new file mode 100644
index 0000000..2ab6950
--- /dev/null
+++ b/web/app/src/lib/coverage.spec.ts
@@ -0,0 +1,115 @@
+import { renderProfile } from '$lib/coverage';
+import { describe, expect, it } from 'vitest';
+
+import type { Profile } from '$lib/common/types';
+
+const subject = `
+package shapes
+
+// Rect represents a rectangle shape.
+type Rect struct {
+ width, height int
+}
+
+// Area of the rectangle.
+func (r *Rect) Area() int {
+ return r.width * r.height
+}
+
+// Perimeter of the rectangle.
+//
+// a bit of HTML for some reason.
+func (r Rect) Perimeter() int {
+ return 2*r.width + 2*r.height
+}
+
+// Angles returns number of angles in a rectangle.
+func (r Rect) Angles() int {
+ return 4;
+}
+`;
+
+const expected = `
+package shapes
+
+// Rect represents a rectangle shape.
+type Rect struct {
+ width, height int
+}
+
+// Area of the rectangle.
+func (r *Rect) Area() int {
+ return r.width * r.height
+}
+
+// Perimeter of the rectangle.
+//
+// a bit of <strong>HTML</strong> for some reason.
+func (r Rect) Perimeter() int {
+ return 2*r.width + 2*r.height
+}
+
+// Angles returns number of angles in a rectangle.
+func (r Rect) Angles() int {
+ return 4;
+}
+`;
+
+describe('renderProfile', () => {
+ it('renders file contents with coverage blocks', () => {
+ const profile: Profile = {
+ filename: 'shapes/rectangle.go',
+ package: 'shapes',
+ path: '~/src/project/shapes/rectangle.go',
+ content: window.btoa(subject),
+ size: subject.length,
+ coverage: 100,
+ boundaries: [
+ {
+ offset: 151, // Opening `{` of Area method.
+ start: true,
+ count: 2,
+ norm: 0.3,
+ index: 0
+ },
+ {
+ offset: 184, // Closing `}` of Area method.
+ start: false,
+ count: 0,
+ norm: 0,
+ index: 1
+ },
+ {
+ offset: 301, // Opening `{` of Perimiter method.
+ start: true,
+ count: 1,
+ norm: 0.2,
+ index: 2
+ },
+ {
+ offset: 338, // Closing `}` of Perimeter method.
+ start: false,
+ count: 0,
+ norm: 0,
+ index: 3
+ },
+ {
+ offset: 418, // Opening `{` of Angles method.
+ start: true,
+ count: 0,
+ norm: 0,
+ index: 4
+ },
+ {
+ offset: 435, // Closing `}` of Angles method.
+ start: false,
+ count: 0,
+ norm: 0,
+ index: 5
+ }
+ ]
+ };
+
+ expect(renderProfile(profile)).toEqual(expected);
+ });
+});
diff --git a/web/app/src/lib/coverage.ts b/web/app/src/lib/coverage.ts
new file mode 100644
index 0000000..c6593b1
--- /dev/null
+++ b/web/app/src/lib/coverage.ts
@@ -0,0 +1,73 @@
+import { escapeHtml } from '$lib/common/utils';
+import type { Profile, ProfileBoundary } from '$lib/common/types';
+
+/**
+ * Render a code coverage profile for a file as safe HTML.
+ *
+ * Renders the file's content with code coverage blocks wrapped in `span`
+ * tags like so:
+ *
+ * ...
+ *
+ * The number in the `gokiburi-cov-*` class will be between 0 and 10 and describes
+ * the level of relative coverage, where 0 means no coverage and 10 means the
+ * highest coverage. The level will also be available in the `data-cov-level`
+ * attribute.
+ *
+ * The value in the `data-cov-count` is the number of times the wrapped code
+ * block was invoked in tests.
+ *
+ * All special HTML characters will be escaped, except for the safe code block
+ * coverage tags.
+ */
+export function renderProfile(profile: Profile): string {
+ // Decode Base64 encoded file content from profile.
+ const content = window.atob(profile.content);
+
+ // Sort the profile boundaries by index in ascending order.
+ const sortedBoundaries = profile.boundaries.sort((a: ProfileBoundary, b: ProfileBoundary): number => {
+ return a.index - b.index;
+ });
+
+ // Initialize result array.
+ const result: string[] = [];
+ let offset = 0;
+
+ // Iterate through boundaries and create result array.
+ for (const boundary of sortedBoundaries) {
+ // Add escaped content between current offset and boundary offset.
+ result.push(escapeHtml(content.slice(offset, boundary.offset)));
+
+ if (boundary.start) {
+ const level = normLevel(boundary.count, boundary.norm);
+ // Add opening span tag.
+ result.push(
+ ``
+ );
+ } else {
+ // Add closing span tag.
+ result.push('');
+ }
+
+ // Update the offset.
+ offset = boundary.offset;
+ }
+
+ // Add remaining content.
+ result.push(escapeHtml(content.slice(offset)));
+
+ // Join the result array into a single string.
+ return result.join('');
+}
+
+/**
+ * Converts a profile block norm float value to number between 0 - 10 as a string.
+ */
+function normLevel(count: number, norm: number): string {
+ if (count === 0) {
+ return '0';
+ }
+
+ const level = Math.floor(norm * 9) + 1;
+ return level > 10 ? '10' : level.toString();
+}
diff --git a/web/app/src/lib/filtering.ts b/web/app/src/lib/filtering.ts
new file mode 100644
index 0000000..f85882c
--- /dev/null
+++ b/web/app/src/lib/filtering.ts
@@ -0,0 +1,121 @@
+import { get } from 'svelte/store';
+
+import { coverageHighMin, coverageMediumMin } from './stores/settings';
+
+import type { FilterSettings, Package, Test } from '$lib/common/types';
+
+const coverageHighMinVal = parseFloat(get(coverageHighMin));
+const coverageMediumMinVal = parseFloat(get(coverageMediumMin));
+
+/**
+ * Default filter settings.
+ */
+export const defaultFilterSettings: FilterSettings = {
+ search: '',
+ packageStatus: ['failing', 'passing'],
+ testStatus: ['failing', 'passing', 'skipped'],
+ coverage: ['high', 'medium', 'low', 'none']
+};
+
+/**
+ * Filter packages according to the provided settings.
+ *
+ * @remarks If a search term is provided, all other settings are ignored.
+ *
+ * @param pkgs - Packages to filter.
+ * @param settings - Settings to filter by.
+ *
+ * @returns Filtered packages.
+ */
+export function filterPackages(pkgs: Package[], settings: FilterSettings): Package[] {
+ if (pkgs === undefined) {
+ return [];
+ }
+
+ if (!settings) {
+ return pkgs;
+ }
+
+ if (settings.search !== '') {
+ const search = settings.search.toLowerCase();
+
+ return pkgs.filter((pkg: Package): boolean => {
+ return pkg.tests.some((test: Test): boolean => test.name.toLowerCase().includes(search));
+ });
+ }
+
+ return pkgs.filter((pkg: Package): boolean => {
+ return Object.keys(settings).every((key: string): boolean => {
+ switch (key) {
+ case 'search':
+ return (
+ pkg.name.toLowerCase().includes(settings.search.toLowerCase()) ||
+ pkg.tests.some((test: Test): boolean => test.name.toLowerCase().includes(settings.search.toLowerCase()))
+ );
+ case 'packageStatus':
+ if (pkg.tests.length === 0) {
+ return settings.packageStatus.includes('noTests');
+ }
+
+ return settings.packageStatus.includes(pkg.pass ? 'passing' : 'failing');
+ case 'coverage':
+ if (pkg.coverage >= coverageHighMinVal) {
+ return settings.coverage.includes('high');
+ } else if (pkg.coverage >= coverageMediumMinVal) {
+ return settings.coverage.includes('medium');
+ } else if (pkg.coverage > 0) {
+ return settings.coverage.includes('low');
+ } else {
+ return settings.coverage.includes('none');
+ }
+ default:
+ return true;
+ }
+ });
+ });
+}
+
+/**
+ * Filter tests according to the provided settings.
+ *
+ * @remarks If a search term is provided, all other settings are ignored.
+ *
+ * @param tests - Tests to filter.
+ * @param settings - Settings to filter by.
+ *
+ * @returns Filtered tests.
+ */
+export function filterTests(tests: Test[], settings: FilterSettings): Test[] {
+ if (tests === undefined) {
+ return [];
+ }
+
+ if (!settings) {
+ return tests;
+ }
+
+ if (settings.search !== '') {
+ const search = settings.search.toLowerCase();
+
+ return tests.filter((test: Test): boolean => {
+ return test.name.toLowerCase().includes(search);
+ });
+ }
+
+ return tests.filter((test: Test): boolean => {
+ return Object.keys(settings).every((key: string): boolean => {
+ switch (key) {
+ case 'search':
+ return test.name.toLowerCase().includes(settings[key].toLowerCase());
+ case 'testStatus':
+ if (test.skip) {
+ return settings.testStatus.includes('skipped');
+ }
+
+ return settings.testStatus.includes(test.pass ? 'passing' : 'failing');
+ default:
+ return true;
+ }
+ });
+ });
+}
diff --git a/web/app/src/lib/services/api.spec.ts b/web/app/src/lib/services/api.spec.ts
new file mode 100644
index 0000000..12e0e94
--- /dev/null
+++ b/web/app/src/lib/services/api.spec.ts
@@ -0,0 +1,63 @@
+import coverageReportResponse from '$lib/tests/apiResponses/coverageReport.json';
+import WS from 'jest-websocket-mock';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import createFetchMock from 'vitest-fetch-mock';
+
+import ApiService from '$lib/services/api';
+
+const fetchMocker = createFetchMock(vi);
+
+fetchMocker.enableMocks();
+
+afterEach(() => {
+ fetchMocker.resetMocks();
+ WS.clean();
+ vi.clearAllMocks();
+});
+
+describe('ApiService', () => {
+ describe('results', () => {
+ it('fetches test results from API', async () => {
+ fetchMocker.mockResponseOnce(JSON.stringify([{ uuid: 'deadbeef', pass: true }]));
+
+ const results = await ApiService.results();
+
+ expect(results).not.toBeNull;
+ expect(results?.length).toBe(1);
+
+ const result = results?.[0];
+
+ expect(result?.uuid).toBe('deadbeef');
+ expect(result?.pass).toBe(true);
+
+ const req = fetchMocker.requests()[0];
+ expect(req.url).toBe('/api/results');
+ expect(req.method).toBe('GET');
+ });
+
+ describe('when there are no test results', () => {
+ it('returns null', async () => {
+ fetchMocker.mockResponseOnce(JSON.stringify(null));
+
+ const results = await ApiService.results();
+
+ expect(results).toBeNull;
+ });
+ });
+ });
+
+ describe('report', () => {
+ it('fetches coverage report from API', async () => {
+ fetchMocker.mockResponseOnce(JSON.stringify(coverageReportResponse));
+
+ const report = await ApiService.report('deadbeef');
+
+ expect(report.profiles.length).toBe(1);
+ expect(report.profiles[0].path).toBe('/Users/johndoe/src/github.com/johndoe/project/pkg/warpcore/warpcore.go');
+
+ const req = fetchMocker.requests()[0];
+ expect(req.url).toBe('/api/results/deadbeef/report');
+ expect(req.method).toBe('GET');
+ });
+ });
+});
diff --git a/web/app/src/lib/services/api.ts b/web/app/src/lib/services/api.ts
new file mode 100644
index 0000000..3134664
--- /dev/null
+++ b/web/app/src/lib/services/api.ts
@@ -0,0 +1,227 @@
+import { toastStore } from '../../skeleton';
+import type { ToastSettings } from '../../skeleton';
+
+import { state } from '$lib/stores/status';
+
+import type { ErrorType, Report, Result } from '$lib/common/types';
+
+/**
+ * Custom error for unexpected API responses.
+ */
+export class StatusError extends Error {
+ status: number;
+ statusText: string;
+
+ /**
+ * Constructs a new StatusError.
+ *
+ * @param status - HTTP status code from server
+ * @param statusText HTTP status text from server
+ */
+ constructor(status: number, statusText: string) {
+ super(`${status} ${statusText}`);
+ this.name = 'StatusError';
+ this.status = status;
+ this.statusText = statusText;
+ }
+}
+
+/**
+ * Custom error for invalid data responses from the API.
+ *
+ * API responds with `422 Unprocessable Entity` and a JSON body containing
+ * validation messages if request data validation fails.
+ */
+export class UnprocessableEntityError extends StatusError {
+ messages: Record;
+
+ /**
+ * Constructs a new UnprocessableEntityError.
+ *
+ * @param messages - the JSON response body
+ */
+ constructor(messages: Record) {
+ super(422, 'Unprocessable Entity');
+ this.name = 'UnprocessableEntityError';
+ this.messages = messages;
+ }
+}
+
+/**
+ * Custom error for API connection errors.
+ */
+export class ConnectionError extends Error {
+ constructor(message: string | undefined) {
+ super(message);
+ this.name = 'ConnectionError';
+ }
+}
+
+export default {
+ /**
+ * Fetches test run results from the API.
+ *
+ * Performs a GET request to `/api/results`.
+ *
+ * @returns A list of test run results.
+ *
+ * @throws {@link StatusError}
+ * Thrown if API responds with a non-2xx status.
+ *
+ * @throws {@link ConnectionError}
+ * Thrown if API is unresponsive.
+ */
+ async results(): Promise {
+ const resp = await performRequest(new Request('/api/results'));
+
+ return resp.json().catch(() => ({}));
+ },
+
+ /**
+ * Fetches a coverage report for a test run from the API.
+ *
+ * Performs a GET request to `/api/results/:uuid/report`.
+ *
+ * @returns A coverage report for all files in a test.
+ *
+ * @throws {@link StatusError}
+ * Thrown if API responds with a non-2xx status.
+ *
+ * @throws {@link ConnectionError}
+ * Thrown if API is unresponsive.
+ */
+ async report(uuid: string): Promise {
+ const resp = await performRequest(new Request(`/api/results/${uuid}/report`));
+
+ return resp.json().catch(() => ({}));
+ },
+
+ /**
+ * Instruct the backend to pause automatic test runs.
+ *
+ * Performs a PUT request to `/api/state/pause`.
+ *
+ * @throws {@link StatusError}
+ * Thrown if API responds with a non-2xx status.
+ *
+ * @throws {@link ConnectionError}
+ * Thrown if API is unresponsive.
+ */
+ async pause() {
+ const req = new Request('/api/state/pause', {
+ method: 'PUT'
+ });
+
+ await performRequest(req);
+ },
+
+ /**
+ * Instruct the backend to resume automatic test runs.
+ *
+ * Performs a PUT request to `/api/state/resume`.
+ *
+ * @throws {@link StatusError}
+ * Thrown if API responds with a non-2xx status.
+ *
+ * @throws {@link ConnectionError}
+ * Thrown if API is unresponsive.
+ */
+ async resume() {
+ const req = new Request('/api/state/resume', {
+ method: 'PUT'
+ });
+
+ await performRequest(req);
+ },
+
+ /**
+ * Instruct the backend to run tests for a Go package.
+ *
+ * Performs a POST request to `/api/run`.
+ *
+ * @param pkg - Go package target (e.g. `./...`)
+ *
+ * @throws {@link UnprocessableEntityError}
+ * Thrown if the Go package target is invalid.
+ *
+ * @throws {@link StatusError}
+ * Thrown if API responds with a non-2xx status.
+ *
+ * @throws {@link ConnectionError}
+ * Thrown if API is unresponsive.
+ */
+ async run(pkg: string) {
+ const req = new Request('/api/run', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ package: pkg })
+ });
+
+ await performRequest(req);
+ },
+
+ /**
+ * Clear all test run data on the server.
+ *
+ * @throws {@link StatusError}
+ * Thrown if API responds with a non-2xx status.
+ *
+ * @throws {@link ConnectionError}
+ * Thrown if API is unresponsive.
+ */
+ async clearResults() {
+ const req = new Request('/api/results', {
+ method: 'DELETE'
+ });
+
+ await performRequest(req);
+ }
+};
+
+export async function apiErrorHandler(fn: () => Promise): Promise<[ErrorType, T | undefined]> {
+ try {
+ const result = await fn();
+ return [null, result];
+ } catch (error) {
+ if (error instanceof ConnectionError) {
+ state.set('offline');
+ } else if (error instanceof StatusError) {
+ toastStore.trigger({
+ message: `Received bad response from API: ${error.message}`,
+ background: 'variant-soft-error'
+ });
+ } else {
+ toastStore.trigger({
+ message: `Unexpected error when fetching data from API: ${error}`,
+ background: 'variant-soft-error'
+ });
+ }
+
+ return [error, undefined];
+ }
+}
+
+const performRequest = async (req: Request): Promise => {
+ let resp: Response;
+
+ try {
+ resp = await fetch(req);
+ } catch (error) {
+ const message = error instanceof Error ? error.message : String(error);
+ throw new ConnectionError(message);
+ }
+
+ if (!resp.ok) {
+ if (resp.status == 422) {
+ throw new UnprocessableEntityError(await resp.json().catch(() => ({})));
+ }
+
+ throw new StatusError(resp.status, resp.statusText);
+ }
+
+ return new Promise((resolve) => {
+ resolve(resp);
+ });
+};
diff --git a/web/app/src/lib/services/audio.ts b/web/app/src/lib/services/audio.ts
new file mode 100644
index 0000000..792c806
--- /dev/null
+++ b/web/app/src/lib/services/audio.ts
@@ -0,0 +1,226 @@
+import { get } from 'svelte/store';
+
+import { type ToastSettings, toastStore } from '../../skeleton';
+import { Howl, Howler } from 'howler';
+
+import { audioContextUnlocked, audioNotifyOn, audioVolume } from '$lib/stores/settings';
+
+import type { AudioNotifyOnSetting } from '$lib/common/types';
+
+Howler.autoUnlock = false;
+Howler.autoSuspend = false;
+
+/**
+ * The type of sound to play.
+ */
+type SoundType = 'pass' | 'fail' | 'error' | 'warning';
+
+const passSound = new Howl({
+ src: ['/sounds/pass.webm'],
+ mute: true
+})
+ .on('loaderror', (_: number, errorCode: unknown) => {
+ toastStore.trigger({
+ message: 'Failed to load pass notification sound: ' + translateMediaErrorCode(errorCode),
+ background: 'variant-soft-error'
+ });
+ })
+ .on('playerror', (_: number, errorCode: unknown) => {
+ toastStore.trigger({
+ message: 'Failed to play pass notification sound: ' + translateMediaErrorCode(errorCode),
+ background: 'variant-soft-error'
+ });
+ });
+
+const failSound = new Howl({
+ src: ['/sounds/fail.webm'],
+ mute: true
+})
+ .on('loaderror', (_: number, errorCode: unknown) => {
+ toastStore.trigger({
+ message: 'Failed to load fail notification sound: ' + translateMediaErrorCode(errorCode),
+ background: 'variant-soft-error'
+ });
+ })
+ .on('playerror', (_: number, errorCode: unknown) => {
+ toastStore.trigger({
+ message: 'Failed to play fail notification sound: ' + translateMediaErrorCode(errorCode),
+ background: 'variant-soft-error'
+ });
+ });
+
+const warningSound = new Howl({
+ src: ['/sounds/warning.webm'],
+ mute: true
+})
+ .on('loaderror', (_: number, errorCode: unknown) => {
+ toastStore.trigger({
+ message: 'Failed to load warning notification sound: ' + translateMediaErrorCode(errorCode),
+ background: 'variant-soft-error'
+ });
+ })
+ .on('playerror', (_: number, errorCode: unknown) => {
+ toastStore.trigger({
+ message: 'Failed to play warning notification sound: ' + translateMediaErrorCode(errorCode),
+ background: 'variant-soft-error'
+ });
+ });
+
+let audioNotifyOnVal: AudioNotifyOnSetting = 'all';
+let audioVolumeVal = 1;
+
+audioNotifyOn.subscribe((newSetting) => {
+ audioNotifyOnVal = newSetting;
+});
+
+audioVolume.subscribe((newSetting) => {
+ const f = parseFloat(newSetting);
+
+ if (f >= 0 && f <= 1) {
+ audioVolumeVal = f;
+ } else {
+ audioVolumeVal = 1;
+ }
+
+ Howler.volume(audioVolumeVal);
+});
+
+export default {
+ /**
+ * Determine if a sound is currently playing.
+ *
+ * @returns true if a sound is playing, and false otherwise.
+ */
+ playing(): boolean {
+ return passSound.playing() || failSound.playing();
+ },
+
+ /**
+ * Activate audio.
+ *
+ * Because of browser security restrictions, audio must be activated before
+ * it can be played. This function will load the audio files and unlock the
+ * audio context.
+ *
+ * The function must be called from a user interaction event handler, such as
+ * a click or keypress event.
+ */
+ async activate() {
+ await Howler.ctx.resume();
+
+ if (passSound.state() === 'unloaded') {
+ passSound.load();
+ }
+ if (failSound.state() === 'unloaded') {
+ failSound.load();
+ }
+ if (warningSound.state() === 'unloaded') {
+ warningSound.load();
+ }
+
+ passSound.mute(false);
+ failSound.mute(false);
+ warningSound.mute(false);
+
+ audioContextUnlocked.set(true);
+ },
+
+ /**
+ * Deactivate audio.
+ *
+ * This function will unload the audio files and suspend the audio context.
+ *
+ * The {@link activate} function must be called again before audio can be
+ * played.
+ */
+ async deactivate() {
+ await Howler.ctx.suspend();
+ Howler.unload();
+ audioContextUnlocked.set(false);
+ },
+
+ /**
+ * Play a sound.
+ *
+ * By default, plays a sound if the sound type is enabled, and if a sound is
+ * not already playing.
+ *
+ * @param type - Type of sound to play.
+ * @param force - If true, the sound will play regardless of current settings.
+ *
+ * @returns true if the sound was played, and false otherwise.
+ */
+ play(type: SoundType, force = false): boolean {
+ if (!this.hasAudio() || get(audioContextUnlocked) === false || !this.shouldPlay(type, force)) {
+ return false;
+ }
+
+ switch (type) {
+ case 'pass':
+ passSound.play();
+ break;
+ case 'warning':
+ warningSound.play();
+ break;
+ default:
+ failSound.play();
+ break;
+ }
+
+ return true;
+ },
+
+ /**
+ * Determine if a sound should play.
+ *
+ * @param type - Type of sound to play.
+ * @param force - If true, the sound will play regardless of current settings.
+ *
+ * @returns true if the sound should play, and false otherwise.
+ */
+ shouldPlay(type: SoundType, force = false): boolean {
+ if (force) {
+ return true;
+ }
+
+ if (audioNotifyOnVal === 'all' || type === 'error' || type === 'warning') {
+ return true;
+ }
+
+ if (this.playing()) {
+ return false;
+ }
+
+ return audioNotifyOnVal === type;
+ },
+
+ /**
+ * Determine if the browser supports audio.
+ *
+ * @returns true if the browser supports audio, and false otherwise.
+ */
+ hasAudio(): boolean {
+ return !Howler.noAudio;
+ }
+};
+
+function translateMediaErrorCode(errorCode: unknown): string {
+ // If error code is a string, we assume it's a readable error message from
+ // Howler.
+ if (typeof errorCode === 'string') {
+ return errorCode;
+ }
+
+ switch (errorCode) {
+ case MediaError.MEDIA_ERR_ABORTED:
+ return 'audio playback was aborted.';
+ case MediaError.MEDIA_ERR_NETWORK:
+ return 'network error when fetching sound file.';
+ case MediaError.MEDIA_ERR_DECODE:
+ return 'sound file could not be decoded.';
+ case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+ return 'sound file format is not supported by your browser.';
+ default:
+ return 'unknown error.';
+ }
+}
diff --git a/web/app/src/lib/services/notifications.ts b/web/app/src/lib/services/notifications.ts
new file mode 100644
index 0000000..01ce647
--- /dev/null
+++ b/web/app/src/lib/services/notifications.ts
@@ -0,0 +1,138 @@
+import { get } from 'svelte/store';
+
+import { toastStore } from '../../skeleton';
+
+import { metadata } from '$lib/stores/metadata';
+import { notificationsActive, notifyOn } from '$lib/stores/settings';
+
+import AudioService from '$lib/services/audio';
+
+import type { NotificationType } from '$lib/common/types';
+
+const appName = get(metadata).appName;
+const alwaysNotifyOn: NotificationType[] = ['error', 'warning', 'info'];
+
+const toastVariantMap: Record = {
+ pass: 'variant-soft-success',
+ fail: 'variant-soft-error',
+ error: 'variant-soft-error',
+ warning: 'variant-soft-warning',
+ info: 'variant-soft-primary'
+};
+
+let lastTag: string;
+
+export default {
+ /**
+ * Check if browser notification permission has been granted.
+ *
+ * @returns boolean true if granted, and false otherwise.
+ */
+ browserNotificationsGranted(): boolean {
+ if (typeof Notification === 'undefined') {
+ return false;
+ }
+
+ return Notification.permission === 'granted';
+ },
+
+ /**
+ * Request browser notification permission from the user.
+ *
+ * If permission has already been granted, a call to this method is a no-op.
+ *
+ * @returns boolean true if user granted permission, and false otherwise.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission}
+ */
+ async requestBrowserNotifications(): Promise {
+ return new Promise((resolve, reject) => {
+ if (this.browserNotificationsGranted()) {
+ return resolve(true);
+ }
+
+ Notification.requestPermission()
+ .then((result) => {
+ if (result === 'granted') {
+ return resolve(true);
+ }
+ return resolve(false);
+ })
+ .catch((error) => {
+ return reject(error);
+ });
+ });
+ },
+
+ /**
+ * Notify user about an event.
+ *
+ * Notifies the user with a browser notification (if allowed and enabled),
+ * audio notification (if allowed and enabled), and with a toast notification.
+ *
+ * @param body - The message content.
+ * @param notificationType - The message type (one of 'pass', 'fail', 'error', 'warning', 'info').
+ * @param tag - A tag for the notification, used to avoid double notifications.
+ */
+ notify(body: string, notificationType: NotificationType, tag: string) {
+ if (tag === lastTag) {
+ console.debug('Skipping duplicate notification with tag:', tag);
+ return;
+ }
+
+ lastTag = tag;
+
+ if (this.browserNotificationsGranted() && this.shouldBrowserNotify(notificationType)) {
+ new Notification(`${appName.toUpperCase()}: ${notificationType.toUpperCase()}`, {
+ body: body,
+ icon: `/${notificationType}.png`,
+ lang: 'en-US',
+ tag: tag
+ });
+ }
+
+ switch (notificationType) {
+ case 'pass':
+ AudioService.play('pass');
+ break;
+ case 'fail':
+ AudioService.play('fail');
+ break;
+ case 'error':
+ AudioService.play('fail');
+ break;
+ case 'warning':
+ AudioService.play('warning');
+ break;
+ }
+
+ toastStore.trigger({ message: body, background: toastVariantMap[notificationType] });
+ },
+
+ /**
+ * Determine if a notification should be emitted.
+ *
+ * @param notificationType - Type of notification.
+ *
+ * @returns
+ * True if notification should be emitted according to the current
+ * settings, and false otherwise.
+ */
+ shouldBrowserNotify(notificationType: NotificationType): boolean {
+ if (get(notificationsActive) === 'false') {
+ return false;
+ }
+
+ const notifyOnSetting = get(notifyOn);
+
+ if (notifyOnSetting === 'all') {
+ return true;
+ }
+
+ if (!alwaysNotifyOn.includes(notificationType)) {
+ return false;
+ }
+
+ return notificationType === notifyOnSetting;
+ }
+};
diff --git a/web/app/src/lib/services/websocket.spec.ts b/web/app/src/lib/services/websocket.spec.ts
new file mode 100644
index 0000000..da50a91
--- /dev/null
+++ b/web/app/src/lib/services/websocket.spec.ts
@@ -0,0 +1,156 @@
+import { get } from 'svelte/store';
+
+import { toastStore } from '../../skeleton';
+import WS from 'jest-websocket-mock';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { lastResult, root, state } from '$lib/stores/status';
+
+import NotificationService from '$lib/services/notifications';
+import { WSMessageManager } from '$lib/services/websocket';
+
+import { sleep } from '$lib/common/utils';
+
+let manager: WSMessageManager;
+let server: WS;
+
+beforeEach(() => {
+ server = new WS('ws://localhost:3000/ws', { jsonProtocol: true });
+ manager = WSMessageManager.getInstance('ws://localhost:3000/ws');
+});
+
+afterEach(() => {
+ manager.stop();
+ WS.clean();
+ vi.clearAllMocks();
+ vi.useRealTimers();
+});
+
+describe('WSMessageManager', () => {
+ describe('when message kind is init', () => {
+ it('updates state and root stores', async () => {
+ manager.start();
+ await server.connected;
+
+ server.send({ kind: 'init', data: { state: 'ready', root: '~/src/github.com/johndoe/project' } });
+
+ expect(get(state)).toBe('ready');
+ expect(get(root)).toBe('~/src/github.com/johndoe/project');
+ });
+ });
+
+ describe('when message kind is state', () => {
+ it('updates state store', async () => {
+ manager.start();
+ await server.connected;
+
+ server.send({ kind: 'state', data: 'running' });
+
+ expect(get(state)).toBe('running');
+ });
+ });
+
+ describe('when message kind is result', () => {
+ it('updates lastResult store', async () => {
+ manager.start();
+ await server.connected;
+
+ server.send({ kind: 'result', data: { uuid: 'deadbeef', pass: true, tests: 10 } });
+
+ const result = get(lastResult);
+
+ expect(result?.uuid).toBe('deadbeef');
+ expect(result?.pass).toBe(true);
+ expect(result?.tests).toBe(10);
+ });
+ });
+
+ describe('when message kind is resultError', () => {
+ it('notifies the user', async () => {
+ NotificationService.notify = vi.fn();
+
+ manager.start();
+ await server.connected;
+
+ server.send({ kind: 'resultError', data: { uuid: 'deadbeef', pass: false, error: 'warp core breach' } });
+
+ expect(NotificationService.notify).toHaveBeenCalledWith(
+ 'Tests failed with error: warp core breach',
+ 'error',
+ 'deadbeef'
+ );
+
+ expect(document.title).toContain('ERROR: warp core breach');
+ });
+ });
+
+ describe('when message kind is resultEmpty', () => {
+ it('notifies the user', async () => {
+ NotificationService.notify = vi.fn();
+
+ manager.start();
+ await server.connected;
+
+ server.send({ kind: 'resultEmpty', data: { uuid: 'deadbeef', pass: false, packages: [{}, {}] } });
+
+ expect(NotificationService.notify).toHaveBeenCalledWith('No tests found for 2 packages', 'warning', 'deadbeef');
+
+ expect(document.title).toContain('NO TESTS FOUND');
+ });
+ });
+
+ describe('when message kind is notification', () => {
+ it('notifies the user with information', async () => {
+ NotificationService.notify = vi.fn();
+
+ manager.start();
+ await server.connected;
+
+ server.send({ kind: 'notification', data: { body: 'Hello, World!', type: 'info', tag: 'helloworld' } });
+
+ expect(NotificationService.notify).toHaveBeenCalledWith('Hello, World!', 'info', 'helloworld');
+ });
+ });
+
+ describe('when message kind is unknown', () => {
+ it('notifies the user', async () => {
+ toastStore.trigger = vi.fn();
+
+ manager.start();
+ await server.connected;
+
+ server.send({ kind: 'lolwut' });
+
+ expect(toastStore.trigger).toHaveBeenCalledWith({
+ message: `Received unknown "lolwut" message from server`,
+ background: 'variant-soft-error'
+ });
+ });
+ });
+
+ describe('when connection closes', () => {
+ describe('abnormally', async () => {
+ it('updates state store and notifies the user', async () => {
+ const setTimeoutSpy = vi.spyOn(global, 'setTimeout');
+ NotificationService.notify = vi.fn();
+
+ state.set('ready');
+
+ manager.start();
+ await server.connected;
+
+ server.error();
+
+ sleep(50);
+
+ expect(get(state)).toBe('offline');
+ expect(NotificationService.notify).toHaveBeenCalledWith(
+ 'Server connection lost. Trying to reconnect in 5 seconds...',
+ 'warning',
+ 'websocketReconnect'
+ );
+ expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 5000);
+ });
+ });
+ });
+});
diff --git a/web/app/src/lib/services/websocket.ts b/web/app/src/lib/services/websocket.ts
new file mode 100644
index 0000000..b8e10bb
--- /dev/null
+++ b/web/app/src/lib/services/websocket.ts
@@ -0,0 +1,243 @@
+import { toastStore } from '../../skeleton';
+
+import { lastResult, root, state } from '$lib/stores/status';
+
+import NotificationService from '$lib/services/notifications';
+
+import { pluralize, setPageTitle } from '$lib/common/utils';
+import type { Result, ServerNotification, State, WSMessage } from '$lib/common/types';
+
+const CODE_CLOSE_NORMAL = 1000;
+const CODE_CLOSE_GOING_AWAY = 1001;
+
+function isAbnormalClose(code: number): boolean {
+ return code !== CODE_CLOSE_NORMAL && code !== CODE_CLOSE_GOING_AWAY;
+}
+
+/**
+ * WSMessageManager handles WebSocket connection and messages.
+ */
+export class WSMessageManager {
+ private static instance: WSMessageManager;
+ private url: string;
+ private _connection: WebSocket | null = null;
+ private stopCalled = false;
+
+ private constructor(url: string) {
+ this.url = url;
+ }
+
+ /**
+ * Get WebSocket Manager instance.
+ *
+ * Instantiates a new singleton Websocket Manager with given URL if one is not
+ * already instantiated.
+ *
+ * @param url - WebSocket URL.
+ *
+ * @throws Error if WebSocket Manager is already instantiated with a different
+ * URL than the one provided.
+ */
+ public static getInstance(url: string): WSMessageManager {
+ if (!WSMessageManager.instance) {
+ WSMessageManager.instance = new WSMessageManager(url);
+ }
+
+ if (WSMessageManager.instance.url !== url) {
+ throw new Error('WebSocket Manager already instantiated with different URL');
+ }
+
+ return WSMessageManager.instance;
+ }
+
+ /**
+ * Subscribe to WebSocket messages and handle them.
+ */
+ public start() {
+ this.stopCalled = false;
+ const conn = this.connection();
+
+ this.removeEventListeners(conn);
+
+ conn.addEventListener('open', () => this.log('connection opened'));
+ conn.addEventListener('message', (event) => this.handleMessage(event));
+ conn.addEventListener('close', (event) => this.handleClose(event));
+ }
+
+ /**
+ * Unsubscribe from WebSocket messages and close connection.
+ */
+ public stop() {
+ this.stopCalled = true;
+
+ if (this._connection) {
+ this.removeEventListeners(this._connection);
+
+ if (this._connection.readyState === WebSocket.OPEN) {
+ this._connection.close();
+ }
+ }
+
+ this._connection = null;
+ }
+
+ private handleMessage(event: MessageEvent) {
+ const message = JSON.parse(event.data) as WSMessage;
+
+ switch (message.kind) {
+ case 'keepalive':
+ break;
+ case 'init':
+ this.handleInit(message);
+ break;
+ case 'state':
+ this.handleState(message);
+ break;
+ case 'result':
+ this.handleResult(message);
+ break;
+ case 'resultError':
+ this.handleResultError(message);
+ break;
+ case 'resultEmpty':
+ this.handleResultEmpty(message);
+ break;
+ case 'notification':
+ this.handleNotification(message);
+ break;
+ default:
+ toastStore.trigger({
+ message: `Received unknown "${message.kind}" message from server`,
+ background: 'variant-soft-error'
+ });
+ break;
+ }
+ }
+
+ private handleInit(message: WSMessage) {
+ this.log(`received init message`);
+
+ if (!message.data) {
+ this.log('init message missing data, ignoring');
+ return;
+ }
+
+ const data = message.data as InitData;
+
+ state.set(data.state);
+ root.set(data.root);
+ }
+
+ private handleState(message: WSMessage) {
+ this.log(`received state message`);
+
+ if (!message.data) {
+ this.log('state message missing data, ignoring');
+ return;
+ }
+
+ state.set(message.data as State);
+ }
+
+ private handleResult(message: WSMessage) {
+ this.log(`received result message`);
+
+ if (!message.data) {
+ this.log('result message missing data, ignoring');
+ return;
+ }
+
+ lastResult.set(message.data as Result);
+ }
+
+ private handleResultError(message: WSMessage) {
+ this.log(`received resultError message`);
+
+ if (!message.data) {
+ this.log('resultError message missing data, ignoring');
+ return;
+ }
+
+ const result = message.data as Result;
+
+ NotificationService.notify(`Tests failed with error: ${result.error}`, 'error', result.uuid);
+ setPageTitle(`✖ ERROR: ${result.error}`);
+ }
+
+ private handleResultEmpty(message: WSMessage) {
+ this.log(`received resultEmpty message`);
+
+ if (!message.data) {
+ this.log('resultEmpty message missing data, ignoring');
+ return;
+ }
+
+ const result = message.data as Result;
+
+ NotificationService.notify(
+ `No tests found for ${pluralize(result.packages?.length || 0, 'package', 'packages')}`,
+ 'warning',
+ result.uuid
+ );
+ setPageTitle('? NO TESTS FOUND');
+ }
+
+ private handleNotification(message: WSMessage) {
+ this.log(`received notification message`);
+
+ if (!message.data) {
+ this.log('notification message missing data, ignoring');
+ return;
+ }
+
+ const notification = message.data as ServerNotification;
+
+ NotificationService.notify(notification.body, notification.type, notification.tag);
+ }
+
+ private handleClose(event: CloseEvent) {
+ state.set('offline');
+
+ if (!this.stopCalled && isAbnormalClose(event.code)) {
+ this.stop();
+
+ this.log(`connection closed abnormally with code ${event.code}: ${event.reason || ''}`);
+ this.log(`resetting connection and trying again`);
+
+ NotificationService.notify(
+ 'Server connection lost. Trying to reconnect in 5 seconds...',
+ 'warning',
+ 'websocketReconnect'
+ );
+
+ setTimeout(() => this.start(), 5000);
+ return;
+ }
+
+ this.log(`connection closed with code ${event.code}: ${event.reason || ''}`);
+ }
+
+ private connection(): WebSocket {
+ if (!this._connection || this._connection.readyState !== WebSocket.OPEN) {
+ this._connection = new WebSocket(this.url);
+ }
+
+ return this._connection;
+ }
+
+ private log(msg: string) {
+ console.debug(`%c[WebSocket Message Manager] %c${msg}`, 'color: #a2a2a2', '');
+ }
+
+ private removeEventListeners(conn: WebSocket) {
+ conn.onopen = null;
+ conn.onmessage = null;
+ conn.onclose = null;
+ conn.onerror = null;
+ }
+}
+
+interface InitData {
+ state: State;
+ root: string;
+}
diff --git a/web/app/src/lib/stores/events.ts b/web/app/src/lib/stores/events.ts
new file mode 100644
index 0000000..c1faa8d
--- /dev/null
+++ b/web/app/src/lib/stores/events.ts
@@ -0,0 +1,20 @@
+import { writable } from 'svelte/store';
+
+export const runTestsEvent = writable('');
+export const openSettingsEvent = writable(false);
+
+/**
+ * Dispatch event to run tests for given package.
+ *
+ * @param pkg - Go package name.
+ */
+export function dispatchRunTests(pkg: string) {
+ runTestsEvent.set(pkg);
+}
+
+/**
+ * Dispatch event to open settings drawer.
+ */
+export function dispatchOpenSettings() {
+ openSettingsEvent.set(true);
+}
diff --git a/web/app/src/lib/stores/metadata.ts b/web/app/src/lib/stores/metadata.ts
new file mode 100644
index 0000000..e87cca7
--- /dev/null
+++ b/web/app/src/lib/stores/metadata.ts
@@ -0,0 +1,21 @@
+import { readable } from 'svelte/store';
+
+import { dev } from '$app/environment';
+import { PUBLIC_APP_NAME, PUBLIC_APP_VERSION } from '$env/static/public';
+
+import type { Metadata } from '$lib/common/types';
+
+const appName = PUBLIC_APP_NAME || 'gokiburi';
+const version = PUBLIC_APP_VERSION || '0.0.0-dev';
+const projectUrl = 'https://github.com/michenriksen/gokiburi';
+
+const data: Metadata = {
+ appName: appName,
+ version: version,
+ isDevVersion: version.endsWith('-dev'),
+ environment: dev ? 'development' : 'production',
+ projectUrl: projectUrl,
+ issuesUrl: `${projectUrl}/issues/new`
+};
+
+export const metadata = readable(data);
diff --git a/web/app/src/lib/stores/results.ts b/web/app/src/lib/stores/results.ts
new file mode 100644
index 0000000..dda02b8
--- /dev/null
+++ b/web/app/src/lib/stores/results.ts
@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+
+import type { Result } from '$lib/common/types';
+
+export const results = writable(null);
+
+export const currentResult = writable(null);
diff --git a/web/app/src/lib/stores/settings.ts b/web/app/src/lib/stores/settings.ts
new file mode 100644
index 0000000..fddfe28
--- /dev/null
+++ b/web/app/src/lib/stores/settings.ts
@@ -0,0 +1,62 @@
+import { type Writable, writable } from 'svelte/store';
+
+import { localStorageStore } from '../../skeleton';
+
+import type {
+ AudioNotifyOnSetting,
+ CoverageThemeSetting,
+ FilterCoverageLevel,
+ FilterPackageStatus,
+ FilterTestStatus,
+ NotifyOnSetting
+} from '$lib/common/types';
+
+const defaultFilterPackageStatus: FilterPackageStatus[] = ['failing', 'passing'];
+const defaultFilterTestStatus: FilterTestStatus[] = ['failing', 'passing', 'skipped'];
+const defaultFilterCoverageLevel: FilterCoverageLevel[] = ['high', 'medium', 'low', 'none'];
+
+export const runAllOnInit: Writable = localStorageStore('settings.runAllOnLoad', 'true');
+
+export const filterPackageStatus: Writable = localStorageStore(
+ 'settings.filterPackageStatus',
+ JSON.stringify(defaultFilterPackageStatus)
+);
+
+export const filterTestStatus: Writable = localStorageStore(
+ 'settings.filterTestStatus',
+ JSON.stringify(defaultFilterTestStatus)
+);
+
+export const filterCoverageLevel: Writable = localStorageStore(
+ 'settings.filterCoverageLevel',
+ JSON.stringify(defaultFilterCoverageLevel)
+);
+
+export const testGroupsCollapsed: Writable = localStorageStore('settings.testGroupsCollapsed', 'false');
+
+export const packagesPerPage: Writable = localStorageStore('settings.packagesPerPage', '50');
+
+export const sidebarCollapsed: Writable = localStorageStore('settings.sidebarCollapsed', 'false');
+
+export const audioContextUnlocked = writable(false);
+
+export const audioNotifyOn: Writable = localStorageStore('settings.audioNotifyOn', 'all');
+
+export const audioVolume: Writable = localStorageStore('settings.audioVolume', '1');
+
+export const notificationsActive: Writable = localStorageStore('settings.notificationsActive', 'false');
+
+export const notifyOn: Writable = localStorageStore('settings.notifyOn', 'all');
+
+export const coverageShowBadges: Writable = localStorageStore('settings.coverageShowBadges', 'true');
+
+export const coverageUseColor: Writable = localStorageStore('settings.coverageUseColor', 'true');
+
+export const coverageHighMin: Writable = localStorageStore('settings.coveragePositiveMin', '75');
+
+export const coverageMediumMin: Writable = localStorageStore('settings.coverageWarningMin', '50');
+
+export const coverageTheme: Writable = localStorageStore(
+ 'settings.coverageTheme',
+ 'white-to-green'
+);
diff --git a/web/app/src/lib/stores/status.ts b/web/app/src/lib/stores/status.ts
new file mode 100644
index 0000000..91b5834
--- /dev/null
+++ b/web/app/src/lib/stores/status.ts
@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+import type { Result, State } from '$lib/common/types';
+
+export const state = writable('init');
+
+export const lastResult = writable(null);
+
+export const root = writable(null);
diff --git a/web/app/src/lib/stores/transitions.ts b/web/app/src/lib/stores/transitions.ts
new file mode 100644
index 0000000..e2cc505
--- /dev/null
+++ b/web/app/src/lib/stores/transitions.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const transitionsActive = writable(true);
diff --git a/web/app/src/lib/tests/apiResponses/coverageReport.json b/web/app/src/lib/tests/apiResponses/coverageReport.json
new file mode 100644
index 0000000..6951754
--- /dev/null
+++ b/web/app/src/lib/tests/apiResponses/coverageReport.json
@@ -0,0 +1,30 @@
+{
+ "mode": "atomic",
+ "profiles": [
+ {
+ "filename": "github.com/johndoe/project/pkg/warpcore/warpcore.go",
+ "package": "github.com/johndoe/project/pkg/warpcore",
+ "path": "/Users/johndoe/src/github.com/johndoe/project/pkg/warpcore/warpcore.go",
+ "content": "...",
+ "size": 0,
+ "coverage": 88.88888888888889,
+ "boundaries": [
+ {
+ "offset": 137,
+ "start": true,
+ "count": 3,
+ "norm": 0.5645750340535796,
+ "index": 0
+ },
+ {
+ "offset": 202,
+ "start": false,
+ "count": 0,
+ "norm": 0,
+ "index": 1
+ }
+ ]
+ }
+ ],
+ "time": "2023-04-11T21:23:12.604891+02:00"
+}
diff --git a/web/app/src/lib/tests/helpers.ts b/web/app/src/lib/tests/helpers.ts
new file mode 100644
index 0000000..b613edf
--- /dev/null
+++ b/web/app/src/lib/tests/helpers.ts
@@ -0,0 +1,24 @@
+import type { SvelteComponent } from 'svelte';
+
+type Constructor = new (...args: any[]) => T;
+
+/**
+ * Render a Svelte component to string.
+ *
+ * Temporarily renders the given component in the DOM and returns
+ * the resulting HTML.
+ *
+ * @param component - Component Constructor.
+ * @param props - Optional props to give the component.
+ * @returns HTML of rendered component.
+ */
+export function renderComponentToString(component: Constructor, props?: any): string {
+ const host = document.createElement('div');
+ document.body.append(host);
+ const instance = new component({ target: host, props: props });
+ const result = host.innerHTML;
+ instance.$destroy();
+ host.remove();
+
+ return result;
+}
diff --git a/web/app/src/routes/+error.svelte b/web/app/src/routes/+error.svelte
new file mode 100644
index 0000000..f651e29
--- /dev/null
+++ b/web/app/src/routes/+error.svelte
@@ -0,0 +1,23 @@
+
+
+
diff --git a/web/app/src/skeleton/components/Accordion/Accordion.svelte.d.ts b/web/app/src/skeleton/components/Accordion/Accordion.svelte.d.ts
new file mode 100644
index 0000000..9545384
--- /dev/null
+++ b/web/app/src/skeleton/components/Accordion/Accordion.svelte.d.ts
@@ -0,0 +1,42 @@
+import { SvelteComponentTyped } from 'svelte';
+declare const __propDef: {
+ props: {
+ [x: string]: any;
+ /** Set the auto-collapse mode.*/
+ autocollapse?: boolean | undefined;
+ /** Set the drawer animation duration in milliseconds.*/
+ duration?: number | undefined;
+ /** Provide classes to set the vertical spacing between items.*/
+ spacing?: string | undefined;
+ /** Set the accordion disabled state for all items.*/
+ disabled?: boolean | undefined;
+ /** Provide classes to set the accordion item padding styles.*/
+ padding?: string | undefined;
+ /** Provide classes to set the accordion item hover styles.*/
+ hover?: string | undefined;
+ /** Provide classes to set the accordion item rounded styles.*/
+ rounded?: string | undefined;
+ /** Set the rotation of the item caret in the open state.*/
+ caretOpen?: string | undefined;
+ /** Set the rotation of the item caret in the closed state.*/
+ caretClosed?: string | undefined;
+ /** Provide arbitrary classes to the trigger button region.*/
+ regionControl?: string | undefined;
+ /** Provide arbitrary classes to the content panel region.*/
+ regionPanel?: string | undefined;
+ /** Provide arbitrary classes to the caret icon region.*/
+ regionCaret?: string | undefined;
+ };
+ events: {
+ [evt: string]: CustomEvent;
+ };
+ slots: {
+ default: {};
+ };
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+/** The Accordion parent element. */
+export default class Accordion extends SvelteComponentTyped {}
+export {};
diff --git a/web/app/src/skeleton/components/Accordion/Accordion.test.d.ts b/web/app/src/skeleton/components/Accordion/Accordion.test.d.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/web/app/src/skeleton/components/Accordion/Accordion.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/web/app/src/skeleton/components/Accordion/Accordion.test.js b/web/app/src/skeleton/components/Accordion/Accordion.test.js
new file mode 100644
index 0000000..2b54dfa
--- /dev/null
+++ b/web/app/src/skeleton/components/Accordion/Accordion.test.js
@@ -0,0 +1,26 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import Accordion from './Accordion.svelte';
+describe('Accordion.svelte', () => {
+ it('Renders with minimal props', async () => {
+ const { getByTestId } = render(Accordion);
+ expect(getByTestId('accordion')).toBeTruthy();
+ });
+ it('Renders with all props', async () => {
+ const { getByTestId } = render(Accordion, {
+ props: {
+ autocollapse: true,
+ duration: 200,
+ spacing: 'space-y-1',
+ padding: 'py-2 px-4',
+ hover: 'hover:bg-primary-hover-token',
+ rounded: 'rounded-container-token',
+ regionControl: '',
+ regionPanel: 'space-y-4',
+ regionCaret: ''
+ }
+ });
+ expect(getByTestId('accordion')).toBeTruthy();
+ expect(getByTestId('accordion').className).to.contain('space-y-1');
+ });
+});
diff --git a/web/app/src/skeleton/components/Accordion/AccordionItem.svelte b/web/app/src/skeleton/components/Accordion/AccordionItem.svelte
new file mode 100644
index 0000000..56b1c6c
--- /dev/null
+++ b/web/app/src/skeleton/components/Accordion/AccordionItem.svelte
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+ {#if openState}
+
+ (content)
+
+ {/if}
+
diff --git a/web/app/src/skeleton/components/Accordion/AccordionItem.svelte.d.ts b/web/app/src/skeleton/components/Accordion/AccordionItem.svelte.d.ts
new file mode 100644
index 0000000..07dafec
--- /dev/null
+++ b/web/app/src/skeleton/components/Accordion/AccordionItem.svelte.d.ts
@@ -0,0 +1,58 @@
+import { SvelteComponentTyped } from 'svelte';
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+ props: {
+ [x: string]: any;
+ /** Set open by default on load.*/
+ open?: boolean | undefined;
+ /** Provide a unique input id. Auto-generated by default*/
+ id?: string | undefined;
+ /** Set the auto-collapse mode.*/
+ autocollapse?: boolean | undefined;
+ /** The writable store that houses the auto-collapse active item UUID.*/
+ active?: Writable | undefined;
+ /** Set the drawer animation duration.*/
+ duration?: number | undefined;
+ /** Set the disabled state for this item.*/
+ disabled?: boolean | undefined;
+ /** Provide classes to set the accordion item padding styles.*/
+ padding?: string | undefined;
+ /** Provide classes to set the accordion item hover styles.*/
+ hover?: string | undefined;
+ /** Provide classes to set the accordion item rounded styles.*/
+ rounded?: string | undefined;
+ /** Provide arbitrary classes to the trigger button region.*/
+ caretOpen?: string | undefined;
+ /** Provide arbitrary classes to content panel region.*/
+ caretClosed?: string | undefined;
+ /** Provide arbitrary classes to the trigger button region.*/
+ regionControl?: string | undefined;
+ /** Provide arbitrary classes to content panel region.*/
+ regionPanel?: string | undefined;
+ /** Provide arbitrary classes caret icon region.*/
+ regionCaret?: string | undefined;
+ };
+ events: {
+ click: MouseEvent;
+ keydown: KeyboardEvent;
+ keyup: KeyboardEvent;
+ keypress: KeyboardEvent;
+ } & {
+ [evt: string]: CustomEvent;
+ };
+ slots: {
+ lead: {};
+ summary: {};
+ content: {};
+ };
+};
+export type AccordionItemProps = typeof __propDef.props;
+export type AccordionItemEvents = typeof __propDef.events;
+export type AccordionItemSlots = typeof __propDef.slots;
+/** The Accordion child element. */
+export default class AccordionItem extends SvelteComponentTyped<
+ AccordionItemProps,
+ AccordionItemEvents,
+ AccordionItemSlots
+> {}
+export {};
diff --git a/web/app/src/skeleton/components/Accordion/AccordionItem.test.d.ts b/web/app/src/skeleton/components/Accordion/AccordionItem.test.d.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/web/app/src/skeleton/components/Accordion/AccordionItem.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/web/app/src/skeleton/components/Accordion/AccordionItem.test.js b/web/app/src/skeleton/components/Accordion/AccordionItem.test.js
new file mode 100644
index 0000000..6c41038
--- /dev/null
+++ b/web/app/src/skeleton/components/Accordion/AccordionItem.test.js
@@ -0,0 +1,22 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import AccordionItem from './AccordionItem.svelte';
+describe('AccordionItem.svelte', () => {
+ it('Renders with minimal props', async () => {
+ const { getByTestId } = render(AccordionItem);
+ expect(getByTestId('accordion-item')).toBeTruthy();
+ });
+ it('Renders with all props', async () => {
+ const { getByTestId } = render(AccordionItem, {
+ open: true,
+ padding: 'py-2 px-4',
+ hover: 'hover:bg-primary-hover-token',
+ rounded: 'rounded-container-token',
+ regionControl: '',
+ regionPanel: 'space-y-4',
+ regionCaret: ''
+ });
+ expect(getByTestId('accordion-item')).toBeTruthy();
+ expect(getByTestId('accordion-item').querySelector('.accordion-control')?.className).to.contain('py-2 px-4');
+ });
+});
diff --git a/web/app/src/skeleton/components/AppBar/AppBar.svelte b/web/app/src/skeleton/components/AppBar/AppBar.svelte
new file mode 100644
index 0000000..ec4a876
--- /dev/null
+++ b/web/app/src/skeleton/components/AppBar/AppBar.svelte
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ {#if $$slots.lead}
+
+ {/if}
+
+
+
+ {#if $$slots.trail}
+
+ {/if}
+
+
+ {#if $$slots.headline}
+
+ {/if}
+
diff --git a/web/app/src/skeleton/components/AppBar/AppBar.svelte.d.ts b/web/app/src/skeleton/components/AppBar/AppBar.svelte.d.ts
new file mode 100644
index 0000000..155bc9e
--- /dev/null
+++ b/web/app/src/skeleton/components/AppBar/AppBar.svelte.d.ts
@@ -0,0 +1,48 @@
+import { SvelteComponentTyped } from 'svelte';
+declare const __propDef: {
+ props: {
+ [x: string]: any;
+ /** Provide classes to set background color.*/
+ background?: string | undefined;
+ /** Provide classes to set border styles.*/
+ border?: string | undefined;
+ /** Provide classes to set padding.*/
+ padding?: string | undefined;
+ /** Provide classes to define a box shadow.*/
+ shadow?: string | undefined;
+ /** Provide classes to set the vertical spacing between rows.*/
+ spacing?: string | undefined;
+ /** Provide classes to set grid columns for the main row.*/
+ gridColumns?: string | undefined;
+ /** Provide classes to set gap spacing for the main row.*/
+ gap?: string | undefined;
+ /** Provide arbitrary classes to style the top (main) row.*/
+ regionRowMain?: string | undefined;
+ /** Provide arbitrary classes to style the bottom (headline) row.*/
+ regionRowHeadline?: string | undefined;
+ /** Classes to apply to the lead slot container element*/
+ slotLead?: string | undefined;
+ /** Classes to apply to the default slot container element*/
+ slotDefault?: string | undefined;
+ /** Classes to apply to the trail slot container element*/
+ slotTrail?: string | undefined;
+ /** Provide a semantic ID for the ARIA label.*/
+ label?: string | undefined;
+ /** Provide the ID of the element that labels the toolbar.*/
+ labelledby?: string | undefined;
+ };
+ events: {
+ [evt: string]: CustomEvent;
+ };
+ slots: {
+ lead: {};
+ default: {};
+ trail: {};
+ headline: {};
+ };
+};
+export type AppBarProps = typeof __propDef.props;
+export type AppBarEvents = typeof __propDef.events;
+export type AppBarSlots = typeof __propDef.slots;
+export default class AppBar extends SvelteComponentTyped {}
+export {};
diff --git a/web/app/src/skeleton/components/AppBar/AppBar.test.d.ts b/web/app/src/skeleton/components/AppBar/AppBar.test.d.ts
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/web/app/src/skeleton/components/AppBar/AppBar.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/web/app/src/skeleton/components/AppBar/AppBar.test.js b/web/app/src/skeleton/components/AppBar/AppBar.test.js
new file mode 100644
index 0000000..c37ad83
--- /dev/null
+++ b/web/app/src/skeleton/components/AppBar/AppBar.test.js
@@ -0,0 +1,28 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import AppBar from './AppBar.svelte';
+describe('AppBar.svelte', () => {
+ it('Renders with minimal props', async () => {
+ const { getByTestId } = render(AppBar);
+ expect(getByTestId('app-bar')).toBeTruthy();
+ });
+ it('Renders with all props', async () => {
+ const { getByTestId } = render(AppBar, {
+ props: {
+ background: 'bg-primary-500',
+ border: 'border border-secondary-500',
+ padding: 'p-4',
+ shadow: 'shadow',
+ space: 'space-x-2',
+ // Slots
+ slotLead: 'bg-red-500',
+ slotCenter: 'bg-green-500',
+ slotTrail: 'bg-blue-500',
+ // a11y
+ label: 'TestAppShell',
+ labelledby: 'TestLabelAppShell'
+ }
+ });
+ expect(getByTestId('app-bar')).toBeTruthy();
+ });
+});
diff --git a/web/app/src/skeleton/components/AppRail/AppRail.svelte b/web/app/src/skeleton/components/AppRail/AppRail.svelte
new file mode 100644
index 0000000..0395adb
--- /dev/null
+++ b/web/app/src/skeleton/components/AppRail/AppRail.svelte
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/app/src/skeleton/components/AppRail/AppRail.svelte.d.ts b/web/app/src/skeleton/components/AppRail/AppRail.svelte.d.ts
new file mode 100644
index 0000000..beb8961
--- /dev/null
+++ b/web/app/src/skeleton/components/AppRail/AppRail.svelte.d.ts
@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from 'svelte';
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+ props: {
+ [x: string]: any;
+ /** Provide a writable store to maintain navigation selection.*/
+ selected?: Writable | undefined;
+ /** Provide classes to set the background color.*/
+ background?: string | undefined;
+ /** Provide classes to set the background color.*/
+ border?: string | undefined;
+ /** Provide classes to set the tile active tile background.*/
+ active?: string | undefined;
+ /** Provide classes to set the tile hover background color.*/
+ hover?: string | undefined;
+ /** Provide classes to set the width.*/
+ width?: string | undefined;
+ /** Provide classes to set the height.*/
+ height?: string | undefined;
+ /** Provide a class to set the grid gap.*/
+ gap?: string | undefined;
+ /** Provide arbitrary classes to the lead region.*/
+ regionLead?: string | undefined;
+ /** Provide arbitrary classes to the default region.*/
+ regionDefault?: string | undefined;
+ /** Provide arbitrary classes to the trail region.*/
+ regionTrail?: string | undefined;
+ };
+ events: {
+ [evt: string]: CustomEvent;
+ };
+ slots: {
+ lead: {};
+ default: {};
+ trail: {};
+ };
+};
+export type AppRailProps = typeof __propDef.props;
+export type AppRailEvents = typeof __propDef.events;
+export type AppRailSlots = typeof __propDef.slots;
+/** A vertical navigation rail component. */
+export default class AppRail extends SvelteComponentTyped {}
+export {};
diff --git a/web/app/src/skeleton/components/AppRail/AppRailTile.svelte b/web/app/src/skeleton/components/AppRail/AppRailTile.svelte
new file mode 100644
index 0000000..1511f14
--- /dev/null
+++ b/web/app/src/skeleton/components/AppRail/AppRailTile.svelte
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+ {#if $$slots.default}
+
+ {/if}
+
+ {#if label}
+
{label}
+ {/if}
+
+
diff --git a/web/app/src/skeleton/components/AppRail/AppRailTile.svelte.d.ts b/web/app/src/skeleton/components/AppRail/AppRailTile.svelte.d.ts
new file mode 100644
index 0000000..ff11659
--- /dev/null
+++ b/web/app/src/skeleton/components/AppRail/AppRailTile.svelte.d.ts
@@ -0,0 +1,38 @@
+import { SvelteComponentTyped } from 'svelte';
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+ props: {
+ [x: string]: any;
+ /** Provide a unique value, active tiles will be highlighted.*/
+ value?: any | undefined;
+ /** Provide the element tag. Button or Anchor recommended.*/
+ tag?: string | undefined;
+ /** Provide the visible text label.*/
+ label?: string | undefined;
+ /** Provide arbitrary classes to style the icon region.*/
+ regionIcon?: string | undefined;
+ /** Provide arbitrary classes to style the label region.*/
+ regionLabel?: string | undefined;
+ selected?: Writable | undefined;
+ active?: Writable | undefined;
+ hover?: Writable | undefined;
+ };
+ events: {
+ keydown: KeyboardEvent;
+ keyup: KeyboardEvent;
+ keypress: KeyboardEvent;
+ /** {{ event }} click - Fires when the component is clicked.*/
+ click: CustomEvent;
+ } & {
+ [evt: string]: CustomEvent;
+ };
+ slots: {
+ default: {};
+ };
+};
+export type AppRailTileProps = typeof __propDef.props;
+export type AppRailTileEvents = typeof __propDef.events;
+export type AppRailTileSlots = typeof __propDef.slots;
+/** A navigation tile for the App Rail component. */
+export default class AppRailTile extends SvelteComponentTyped {}
+export {};
diff --git a/web/app/src/skeleton/components/AppShell/AppShell.svelte b/web/app/src/skeleton/components/AppShell/AppShell.svelte
new file mode 100644
index 0000000..6eb4770
--- /dev/null
+++ b/web/app/src/skeleton/components/AppShell/AppShell.svelte
@@ -0,0 +1,68 @@
+
+
+
+