UI: Switching to vitest (#251)

* Removing jest and all of its crutches.

* Switching to vitest.

* Improving the coverage of setCountdown() branches.

* Improving the branch coverage for makeMessageHandler().

* Restoring previous implementation of hasPermission flag, as more elegant and now covered by tests.

* Ref: now it's safe to mock not implementation not only once.

ui/.eslintrc.json

@@ -1,8 +1,7 @@
 {
   "env": {
     "es6": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "extends": [
     "airbnb-typescript/base",
@@ -24,7 +23,7 @@
   },
   "overrides": [
     {
-      "files": ["tsup.config.ts"],
+      "files": ["*.config.*ts", "mocks/*.ts"],
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }

ui/bindings.spec.ts

@@ -1,5 +1,6 @@
 import { readFileSync } from "node:fs";
 import { JSDOM } from "jsdom";
+import { describe, test, expect } from "vitest";
 
 describe("Knockout bindings", () => {
   const html = readFileSync(

ui/helpers/__snapshots__/actions.spec.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Actions toggleRelay() action should open the confirmation dialog: .find() 1`] = `
+exports[`Actions > toggleRelay() action > should open the confirmation dialog > .find() 1`] = `
 [
   [
     ".modal-title",
@@ -17,7 +17,7 @@ exports[`Actions toggleRelay() action should open the confirmation dialog: .find
 ]
 `;
 
-exports[`Actions toggleRelay() action should open the confirmation dialog: .text() 1`] = `
+exports[`Actions > toggleRelay() action > should open the confirmation dialog > .text() 1`] = `
 [
   [
     "Turning Printer off",

ui/helpers/__snapshots__/countdown.spec.ts.snap

@@ -1,33 +1,33 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 0 seconds 1`] = `"in 0 seconds"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 0 seconds 1`] = `"in 0 seconds"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 1 seconds 1`] = `"in 1 second"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 1 seconds 1`] = `"in 1 second"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 30 seconds 1`] = `"in 30 seconds"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 30 seconds 1`] = `"in 30 seconds"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 59 seconds 1`] = `"in 59 seconds"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 59 seconds 1`] = `"in 59 seconds"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 60 seconds 1`] = `"in 1.0 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 60 seconds 1`] = `"in 1.0 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 61 seconds 1`] = `"in 1.0 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 61 seconds 1`] = `"in 1.0 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 90 seconds 1`] = `"in 1.5 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 90 seconds 1`] = `"in 1.5 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 119 seconds 1`] = `"in 2.0 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 119 seconds 1`] = `"in 2.0 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 120 seconds 1`] = `"in 2 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 120 seconds 1`] = `"in 2 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 121 seconds 1`] = `"in 2 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 121 seconds 1`] = `"in 2 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 300 seconds 1`] = `"in 5 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 300 seconds 1`] = `"in 5 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 600 seconds 1`] = `"in 10 minutes"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 600 seconds 1`] = `"in 10 minutes"`;
 
-exports[`Countdown helpers formatDeadline() helper Should format the supplied UNIX timestamp having offset 3600 seconds 1`] = `"in 1 hour"`;
+exports[`Countdown helpers > formatDeadline() helper > Should format the supplied UNIX timestamp having offset 3600 seconds 1`] = `"in 1 hour"`;
 
-exports[`Countdown helpers getCountdownDelay() helper should return refresh interval for supplied timestamp having offset 60 seconds 1`] = `1000`;
+exports[`Countdown helpers > getCountdownDelay() helper > should return refresh interval for supplied timestamp having offset 60 seconds 1`] = `1000`;
 
-exports[`Countdown helpers getCountdownDelay() helper should return refresh interval for supplied timestamp having offset 120 seconds 1`] = `1000`;
+exports[`Countdown helpers > getCountdownDelay() helper > should return refresh interval for supplied timestamp having offset 120 seconds 1`] = `1000`;
 
-exports[`Countdown helpers getCountdownDelay() helper should return refresh interval for supplied timestamp having offset 121 seconds 1`] = `60000`;
+exports[`Countdown helpers > getCountdownDelay() helper > should return refresh interval for supplied timestamp having offset 121 seconds 1`] = `60000`;

ui/helpers/__snapshots__/hints.spec.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Hints helpers addPopover() helper should add a popover to the target element: .find() 1`] = `
+exports[`Hints helpers > addPopover() helper > should add a popover to the target element > .find() 1`] = `
 [
   [
     "#pop-closer",
@@ -14,7 +14,7 @@ exports[`Hints helpers addPopover() helper should add a popover to the target el
 ]
 `;
 
-exports[`Hints helpers addPopover() helper should add a popover to the target element: .popover() 1`] = `
+exports[`Hints helpers > addPopover() helper > should add a popover to the target element > .popover() 1`] = `
 [
   [
     {
@@ -32,7 +32,7 @@ exports[`Hints helpers addPopover() helper should add a popover to the target el
 ]
 `;
 
-exports[`Hints helpers showHints() helper should display tooltips 1`] = `
+exports[`Hints helpers > showHints() helper > should display tooltips 1`] = `
 [
   [
     {
@@ -49,7 +49,7 @@ exports[`Hints helpers showHints() helper should display tooltips 1`] = `
 ]
 `;
 
-exports[`Hints helpers showHints() helper should show popover for a single upcoming task 1`] = `
+exports[`Hints helpers > showHints() helper > should show popover for a single upcoming task 1`] = `
 [
   [
     {
@@ -67,7 +67,7 @@ exports[`Hints helpers showHints() helper should show popover for a single upcom
 ]
 `;
 
-exports[`Hints helpers showHints() helper should show single popover for multiple upcoming tasks 1`] = `
+exports[`Hints helpers > showHints() helper > should show single popover for multiple upcoming tasks 1`] = `
 [
   [
     {
@@ -78,7 +78,7 @@ exports[`Hints helpers showHints() helper should show single popover for multipl
 ]
 `;
 
-exports[`Hints helpers showHints() helper should show single popover for multiple upcoming tasks 2`] = `
+exports[`Hints helpers > showHints() helper > should show single popover for multiple upcoming tasks 2`] = `
 [
   [
     {

ui/helpers/actions.spec.ts

@@ -1,8 +1,9 @@
 import { elementMock, jQueryMock } from "../mocks/jQuery";
 import { cancelTask, toggleRelay } from "./actions";
+import { vi, describe, afterEach, test, expect } from "vitest";
 
 describe("Actions", () => {
-  const apiMock = jest.fn();
+  const apiMock = vi.fn();
 
   Object.assign(global, {
     OctoPrint: { simpleApiCommand: apiMock },

ui/helpers/countdown.spec.ts

@@ -1,12 +1,21 @@
 import MockDate from "mockdate";
 import { elementMock, jQueryMock } from "../mocks/jQuery";
 import { formatDeadline, getCountdownDelay, setCountdown } from "./countdown";
+import {
+  describe,
+  vi,
+  beforeAll,
+  afterEach,
+  afterAll,
+  expect,
+  test,
+} from "vitest";
 
 describe("Countdown helpers", () => {
-  const setIntervalMock = jest.fn<void, [() => void, number]>(
+  const setIntervalMock = vi.fn<[() => void, number], void>(
     () => "mockedInterval",
   );
-  const clearIntervalMock = jest.fn();
+  const clearIntervalMock = vi.fn();
 
   Object.assign(global, {
     LOCALE: "en",
@@ -63,6 +72,11 @@ describe("Countdown helpers", () => {
           expect.any(Function),
           1000,
         );
+        // coverage branch for the case nextDelay === delay
+        const nextIntervalFn = setIntervalMock.mock.calls[1][0];
+        MockDate.set(Date.now() + 1000); // same delay branch this time
+        nextIntervalFn();
+        expect(setIntervalMock).toHaveBeenCalledTimes(2); // not called again this time
       } else {
         expect(elementMock.text).not.toHaveBeenCalled();
         expect(clearIntervalMock).toHaveBeenCalledWith("mockedInterval");

ui/helpers/hints.spec.ts

@@ -3,6 +3,7 @@ import { countdownMock, deadlineMock, disposerMock } from "../mocks/countdown";
 import { cancelMock } from "../mocks/actions";
 import { elementMock, jQueryMock } from "../mocks/jQuery";
 import { addTooltip, clearHints, addPopover, showHints } from "./hints";
+import { describe, beforeAll, afterAll, afterEach, test, expect } from "vitest";
 
 describe("Hints helpers", () => {
   Object.assign(global, {

ui/helpers/narrowing.spec.ts

@@ -1,4 +1,5 @@
 import { hasUpcomingTask } from "./narrowing";
+import { describe, test, expect } from "vitest";
 
 describe("Narrowing helpers", () => {
   describe("hasUpcomingTask() helper", () => {

ui/mocks/OctoRelayModel.ts

@@ -1,3 +1,5 @@
-export const modelMock = jest.fn();
+import { vi } from "vitest";
 
-jest.mock("../model/OctoRelayModel", () => ({ OctoRelayViewModel: modelMock }));
+export const modelMock = vi.fn();
+
+vi.mock("../model/OctoRelayModel", () => ({ OctoRelayViewModel: modelMock }));

ui/mocks/actions.ts

@@ -1,7 +1,9 @@
-export const cancelMock = jest.fn();
-export const toggleMock = jest.fn();
+import { vi } from "vitest";
 
-jest.mock("../helpers/actions", () => ({
+export const cancelMock = vi.fn();
+export const toggleMock = vi.fn();
+
+vi.mock("../helpers/actions", () => ({
   cancelTask: cancelMock,
   toggleRelay: toggleMock,
 }));

ui/mocks/countdown.ts

@@ -1,8 +1,10 @@
-export const disposerMock = jest.fn();
-export const countdownMock = jest.fn(() => disposerMock);
-export const deadlineMock = jest.fn(() => "sample deadline");
+import { vi } from "vitest";
 
-jest.mock("../helpers/countdown", () => ({
+export const disposerMock = vi.fn();
+export const countdownMock = vi.fn(() => disposerMock);
+export const deadlineMock = vi.fn(() => "sample deadline");
+
+vi.mock("../helpers/countdown", () => ({
   setCountdown: countdownMock,
   formatDeadline: deadlineMock,
 }));

ui/mocks/hints.ts

@@ -1,7 +1,9 @@
-export const clearMock = jest.fn();
-export const showMock = jest.fn();
+import { vi } from "vitest";
 
-jest.mock("../helpers/hints", () => ({
+export const clearMock = vi.fn();
+export const showMock = vi.fn();
+
+vi.mock("../helpers/hints", () => ({
   clearHints: clearMock,
   showHints: showMock,
 }));

ui/mocks/jQuery.ts

@@ -1,3 +1,5 @@
+import { vi, Mock } from "vitest";
+
 export const elementMock: Record<
   | "toggle"
   | "html"
@@ -9,21 +11,21 @@ export const elementMock: Record<
   | "is"
   | "popover"
   | "tooltip",
-  jest.Mock
+  Mock
 > = {
-  toggle: jest.fn(() => elementMock),
-  html: jest.fn(() => elementMock),
-  off: jest.fn(() => elementMock),
-  on: jest.fn(() => elementMock),
-  find: jest.fn(() => elementMock),
-  text: jest.fn(() => elementMock),
-  modal: jest.fn(() => elementMock),
-  is: jest.fn(() => elementMock),
-  tooltip: jest.fn(() => elementMock),
-  popover: jest.fn(() => elementMock),
+  toggle: vi.fn(() => elementMock),
+  html: vi.fn(() => elementMock),
+  off: vi.fn(() => elementMock),
+  on: vi.fn(() => elementMock),
+  find: vi.fn(() => elementMock),
+  text: vi.fn(() => elementMock),
+  modal: vi.fn(() => elementMock),
+  is: vi.fn(() => elementMock),
+  tooltip: vi.fn(() => elementMock),
+  popover: vi.fn(() => elementMock),
 };
 
-export const jQueryMock = jest.fn((subject: string | (() => void)) => {
+export const jQueryMock = vi.fn((subject: string | (() => void)) => {
   if (typeof subject === "function") {
     return subject();
   }

ui/mocks/messageHandler.ts

@@ -1,5 +1,7 @@
-export const handlerMock = jest.fn();
+import { vi } from "vitest";
 
-jest.mock("../model/messageHandler", () => ({
-  makeMessageHandler: jest.fn(() => handlerMock),
+export const handlerMock = vi.fn();
+
+vi.mock("../model/messageHandler", () => ({
+  makeMessageHandler: vi.fn(() => handlerMock),
 }));

ui/model/OctoRelayModel.spec.ts

@@ -1,11 +1,12 @@
 import { handlerMock } from "../mocks/messageHandler";
 import type { OwnModel, OwnProperties } from "../types/OwnModel";
 import { OctoRelayViewModel } from "./OctoRelayModel";
+import { describe, test, vi, expect } from "vitest";
 
 describe("OctoRelayViewModel", () => {
   test("should set certain props of itself", () => {
-    const dep1 = jest.fn();
-    const dep2 = jest.fn();
+    const dep1 = vi.fn();
+    const dep2 = vi.fn();
     OctoRelayViewModel.call(OctoRelayViewModel as OwnModel & OwnProperties, [
       dep1,
       dep2,

ui/model/initOctoRelayModel.spec.ts

@@ -1,5 +1,6 @@
 import { modelMock } from "../mocks/OctoRelayModel";
 import { initOctoRelayModel } from "./initOctoRelayModel";
+import { describe, test, expect } from "vitest";
 
 describe("initOctorelayModel()", () => {
   const registryMock: ViewModel[] = [];