test: run frontend unit tests in browsers (#38860)

Run them in headless [vitest browser
mode](https://vitest.dev/guide/browser/) in chromium and firefox.
Similar UX than current tests, it's about 5 times as slow (goes from 1s
to 5s on my machine), but definitely worth it as it removes all
happy-dom problems.

---------

Signed-off-by: silverwind <me@silverwind.io>
This commit is contained in:
silverwind
2026-08-18 00:22:54 +02:00
committed by GitHub
parent 55e7cafcb6
commit df71d5f5e2
22 changed files with 211 additions and 146 deletions
@@ -1,6 +1,6 @@
import {execPseudoSelectorCommands, handleFetchActionErrorFields, handleFetchActionSuccessJson} from './common-fetch-action.ts';
import {createElementFromHTML} from '../utils/dom.ts';
import {normalizeTestHtml} from '../utils/testhelper.ts';
import {captureNavigations, normalizeTestHtml} from '../utils/testhelper.ts';
test('execPseudoSelectorCommands', () => {
window.document.body.innerHTML = `
@@ -41,23 +41,11 @@ test('execPseudoSelectorCommands', () => {
});
test('handleFetchActionSuccessJson', async () => {
const spyAssign = vi.spyOn(window.location, 'assign').mockImplementation(() => {});
const spyReload = vi.spyOn(window.location, 'reload').mockImplementation(() => {});
const navigations = captureNavigations();
await handleFetchActionSuccessJson(document.body, {redirect: '/'});
expect(spyAssign).toHaveBeenCalledTimes(1);
expect(spyReload).toHaveBeenCalledTimes(0);
vi.resetAllMocks();
await handleFetchActionSuccessJson(document.body, {redirect: ''});
expect(spyAssign).toHaveBeenCalledTimes(0);
expect(spyReload).toHaveBeenCalledTimes(1);
vi.resetAllMocks();
await handleFetchActionSuccessJson(document.body, {});
expect(spyAssign).toHaveBeenCalledTimes(0);
expect(spyReload).toHaveBeenCalledTimes(1);
vi.resetAllMocks();
expect(navigations.map((n) => n.type)).toEqual(['push', 'reload', 'reload']);
});
test('handleFetchActionErrorFields', () => {
@@ -3,13 +3,8 @@ import {POST} from '../modules/fetch.ts';
import {createSortable} from '../modules/sortable.ts';
import type {SortableEvent} from 'sortablejs';
vi.mock('../modules/fetch.ts', () => ({
POST: vi.fn(),
}));
vi.mock('../modules/sortable.ts', () => ({
createSortable: vi.fn(),
}));
vi.mock('../modules/fetch.ts', () => ({POST: vi.fn()}));
vi.mock('../modules/sortable.ts', () => ({createSortable: vi.fn()}));
const branchesHTML = `
<div id="protected-branches-list" data-update-priority-url="some/repo/branches/priority">
@@ -26,29 +21,29 @@ const branchesHTML = `
`;
describe('Repository Branch Settings', () => {
beforeEach(() => {
vi.mocked(createSortable).mockClear();
vi.mocked(POST).mockClear();
});
test('should initialize sortable for protected branches list', () => {
document.body.innerHTML = branchesHTML;
const callsBefore = vi.mocked(createSortable).mock.calls.length;
initRepoSettingsBranchesDrag();
const newCalls = vi.mocked(createSortable).mock.calls.slice(callsBefore);
expect(newCalls).toHaveLength(1);
expect(newCalls[0][0]).toBe(document.querySelector('#protected-branches-list'));
expect(newCalls[0][1]).toMatchObject({handle: '.drag-handle', animation: 150});
expect(createSortable).toHaveBeenCalledTimes(1);
expect(createSortable).toHaveBeenCalledWith(document.querySelector('#protected-branches-list'), expect.objectContaining({handle: '.drag-handle', animation: 150}));
});
test('should not initialize if protected branches list is not present', () => {
document.querySelector('#protected-branches-list')?.remove();
const callsBefore = vi.mocked(createSortable).mock.calls.length;
document.body.replaceChildren();
initRepoSettingsBranchesDrag();
expect(vi.mocked(createSortable).mock.calls.length).toBe(callsBefore);
expect(createSortable).toHaveBeenCalledTimes(0);
});
test('should post new order after sorting', () => {
document.body.innerHTML = branchesHTML;
vi.mocked(POST).mockResolvedValue({ok: true} as Response);
const callsBefore = vi.mocked(createSortable).mock.calls.length;
initRepoSettingsBranchesDrag();
const onEnd = vi.mocked(createSortable).mock.calls[callsBefore][1]!.onEnd!;
const onEnd = vi.mocked(createSortable).mock.calls[0][1]!.onEnd!;
onEnd(new Event('SortableEvent') as SortableEvent);
expect(POST).toHaveBeenCalledWith(
'some/repo/branches/priority',