import { TestCase } from "./framework/test_case.js";
import { setupDom, teardownDom } from "./framework/dom.js";
import { LoadingLog } from "../client/js/loading.js";

export class LoadingTest extends TestCase {
  async test_steps_are_logged_with_their_timings() {
    const env = await setupDom();
    try {
      const log = new LoadingLog().bind(env.$("#loading-overlay"));
      log.begin();
      this.assertFalse(env.$("#loading-overlay").hasClass("hidden"), "the overlay is shown");
      this.assertSize(env.$("#loading-overlay .loading-line"), 1, "the boot line is first");

      log.step("did a thing");
      log.measure("did a bigger thing", () => 42);
      log.finish();

      const lines = env.$("#loading-overlay .loading-line");
      this.assertGreaterOrEqual(lines.length, 4, "every step is a line");
      const text = lines.map((_index, element) => env.$(element).text()).get().join("\n");
      this.assertTrue(text.includes("did a thing"), "the step label is shown");
      this.assertTrue(text.includes("did a bigger thing"), "the measured label is shown");
      this.assertTrue(text.includes("Total map setup"), "the total is shown");
      this.assertTrue(/ms|s/.test(text), "each line carries a duration");
    } finally {
      teardownDom(env);
    }
  }

  async test_measure_returns_the_wrapped_value_and_logs_nothing_when_idle() {
    const idle = new LoadingLog();
    this.assertEqual(idle.measure("noop", () => 7), 7, "the value is returned when idle");
    idle.step("ignored");
    this.assertNull(idle.$root, "an unbound log stays inert");

    const env = await setupDom();
    try {
      const log = new LoadingLog().bind(env.$("#loading-overlay"));
      log.begin();
      this.assertEqual(log.measure("value", () => 7), 7, "the value is returned while active");
      this.assertGreater(env.$("#loading-overlay .loading-line").length, 1, "the measure logs a line");
    } finally {
      teardownDom(env);
    }
  }
}