refactor: move test active state to a signal

Author: Miodec

frontend/__tests__/root/config.spec.ts

@@ -15,6 +15,8 @@ import * as ConfigValidation from "../../src/ts/config/validation";
 import { configEvent } from "../../src/ts/events/config";
 import * as ApeConfig from "../../src/ts/ape/config";
 import * as Notifications from "../../src/ts/states/notifications";
+import * as TestState from "../../src/ts/states/test";
+
 const { replaceConfig, getConfig } = __testing;
 
 describe("Config", () => {
@@ -41,6 +43,7 @@ describe("Config", () => {
     );
     const miscReloadAfterMock = vi.spyOn(Misc, "reloadAfter");
     const miscTriggerResizeMock = vi.spyOn(Misc, "triggerResize");
+    const stateIsTestActiveMock = vi.spyOn(TestState, "isTestActive");
 
     const mocks = [
       canSetConfigWithCurrentFunboxesMock,
@@ -56,13 +59,10 @@ describe("Config", () => {
       vi.useFakeTimers();
       mocks.forEach((it) => it.mockClear());
 
-      vi.mock("../../src/ts/test/test-state", () => ({
-        isActive: true,
-      }));
-
       isConfigValueValidMock.mockReturnValue(true);
       canSetConfigWithCurrentFunboxesMock.mockReturnValue(true);
       dbSaveConfigMock.mockResolvedValue();
+      stateIsTestActiveMock.mockReturnValue(true);
 
       replaceConfig({});
     });

frontend/src/ts/config/setters.ts

@@ -9,12 +9,12 @@ import {
   canSetConfigWithCurrentFunboxes,
   canSetFunboxWithConfig,
 } from "./funbox-validation";
-import * as TestState from "../test/test-state";
 import { triggerResize, escapeHTML } from "../utils/misc";
 import { camelCaseToWords, capitalizeFirstLetter } from "../utils/strings";
 import { Config, setConfigStore } from "./store";
 import { FunboxName } from "@monkeytype/schemas/configs";
 import { typedKeys } from "@monkeytype/util/objects";
+import { isTestActive } from "../states/test";
 
 export function setConfig<T extends keyof ConfigSchemas.Config>(
   key: T,
@@ -41,7 +41,7 @@ export function setConfig<T extends keyof ConfigSchemas.Config>(
 
   if (
     metadata.changeRequiresRestart &&
-    TestState.isActive &&
+    isTestActive() &&
     Config.funbox.includes("no_quit")
   ) {
     showNoticeNotification(
@@ -154,7 +154,7 @@ export function setQuoteLengthAll(nosave?: boolean): boolean {
 }
 
 export function toggleFunbox(funbox: FunboxName, nosave?: boolean): boolean {
-  if (TestState.isActive && Config.funbox.includes("no_quit")) {
+  if (isTestActive() && Config.funbox.includes("no_quit")) {
     showNoticeNotification(
       "No quit funbox is active. Please finish the test.",
       {

frontend/src/ts/controllers/ad-controller.ts

@@ -2,10 +2,10 @@
 import { debounce } from "throttle-debounce";
 import { configEvent } from "../events/config";
 import { Config } from "../config/store";
-import * as TestState from "../test/test-state";
 import * as EG from "./eg-ad-controller";
 import * as PW from "./pw-ad-controller";
 import { onDOMReady, qs } from "../utils/dom";
+import { isTestActive } from "../states/test";
 // import { createEffect } from "solid-js";
 
 const breakpoint = 900;
@@ -41,7 +41,7 @@ function init(): void {
   }
 
   setInterval(() => {
-    if (TestState.isActive) {
+    if (isTestActive()) {
       return;
     }
     if (choice === "eg") {

frontend/src/ts/controllers/route-controller.ts

@@ -7,6 +7,7 @@ import * as TestState from "../test/test-state";
 import { showNoticeNotification } from "../states/notifications";
 import { navigationEvent, type NavigateOptions } from "../events/navigation";
 import { authEvent } from "../events/auth";
+import { isTestActive } from "../states/test";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -176,7 +177,7 @@ export async function navigate(
   }
 
   const noQuit = isFunboxActive("no_quit");
-  if (TestState.isActive && noQuit) {
+  if (isTestActive() && noQuit) {
     showNoticeNotification(
       "No quit funbox is active. Please finish the test.",
       {

frontend/src/ts/input/handlers/before-delete.ts

@@ -5,9 +5,10 @@ import { getInputElementValue } from "../input-element";
 import * as TestUI from "../../test/test-ui";
 import { isAwaitingNextWord } from "../state";
 import { getInputForWord } from "../../test/events/data";
+import { isTestActive } from "../../states/test";
 
 export function onBeforeDelete(event: InputEvent): void {
-  if (!TestState.isActive) {
+  if (!isTestActive()) {
     event.preventDefault();
     return;
   }

frontend/src/ts/input/handlers/insert-text.ts

@@ -31,6 +31,7 @@ import { shouldGoToNextWord, isCharCorrect } from "../helpers/validation";
 import { getCurrentInput, logTestEvent } from "../../test/events/data";
 import { getCommitCharacterType, normalizeData } from "../helpers/util";
 import { areAllWordsGenerated } from "../../test/words-generator";
+import { isTestActive } from "../../states/test";
 
 const charOverrides = new Map<string, string>([
   ["…", "..."],
@@ -132,7 +133,7 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
   const data = normalizedData ?? options.data;
 
   // start if needed
-  if (!TestState.isActive) {
+  if (!isTestActive()) {
     TestLogic.startTest(now);
   }
 

frontend/src/ts/input/listeners/composition.ts

@@ -6,6 +6,7 @@ import { setLastInsertCompositionTextData } from "../state";
 import * as CompositionDisplay from "../../elements/composition-display";
 import { onInsertText } from "../handlers/insert-text";
 import { logTestEvent } from "../../test/events/data";
+import { isTestActive } from "../../states/test";
 
 const inputEl = getInputElement();
 
@@ -21,7 +22,7 @@ inputEl.addEventListener("compositionstart", (event) => {
   CompositionState.setComposing(true);
   CompositionState.setData("");
   setLastInsertCompositionTextData("");
-  if (!TestState.isActive) {
+  if (!isTestActive()) {
     TestLogic.startTest(now);
   }
 

frontend/src/ts/legacy-states/connection.ts

@@ -1,9 +1,9 @@
 import { debounce } from "throttle-debounce";
 import { showSuccessNotification } from "../states/notifications";
 import { connectionEvent } from "../events/connection";
-import * as TestState from "../test/test-state";
 import { onDOMReady } from "../utils/dom";
 import { addBanner, removeBanner } from "../states/banners";
+import { isTestActive } from "../states/test";
 
 let state = navigator.onLine;
 
@@ -38,7 +38,7 @@ const throttledHandleState = debounce(5000, () => {
       noInternetBannerId = undefined;
     }
     bannerAlreadyClosed = false;
-  } else if (!TestState.isActive) {
+  } else if (!isTestActive()) {
     showOfflineBanner();
   }
 });

frontend/src/ts/states/test.ts

@@ -58,6 +58,8 @@ export const [getCurrentQuote, setCurrentQuote] =
 export const [getLastSignedOutResult, setLastSignedOutResult] =
   createSignal<CompletedEvent | null>(null);
 
+export const [isTestActive, setTestActive] = createSignal(false);
+
 createEffect(() => {
   getActivePage(); // depend on active page
   setIsLongTest(

frontend/src/ts/test/live-acc.ts

@@ -1,9 +1,9 @@
 import { Config } from "../config/store";
-import * as TestState from "../test/test-state";
 import { configEvent } from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { qs } from "../utils/dom";
+import { isTestActive } from "../states/test";
 
 const textEl = qs("#liveStatsTextBottom .liveAcc");
 const miniEl = qs("#liveStatsMini .acc");
@@ -30,7 +30,7 @@ let state = false;
 
 export function show(): void {
   if (Config.liveAccStyle === "off") return;
-  if (!TestState.isActive) return;
+  if (!isTestActive()) return;
   if (state) return;
   requestDebouncedAnimationFrame("live-acc.show", () => {
     if (Config.liveAccStyle === "mini") {