duty-teller/webapp/js/ui.test.js

/**
 * Unit tests for ui: showAccessDenied, hideAccessDenied, showError, setNavEnabled.
 */

import { describe, it, expect, beforeAll, beforeEach } from "vitest";

beforeAll(() => {
  document.body.innerHTML =
    '<div id="calendar"></div><h2 id="monthTitle"></h2>' +
    '<div id="dutyList"></div><div id="loading"></div><div id="error"></div>' +
    '<div id="accessDenied"></div><div class="header"></div><div class="weekdays"></div>' +
    '<button id="prevMonth"></button><button id="nextMonth"></button>';
});

import {
  showAccessDenied,
  hideAccessDenied,
  showError,
  setNavEnabled,
} from "./ui.js";
import { state } from "./dom.js";

describe("ui", () => {
  beforeEach(() => {
    state.lang = "ru";
    const calendar = document.getElementById("calendar");
    const dutyList = document.getElementById("dutyList");
    const loading = document.getElementById("loading");
    const error = document.getElementById("error");
    const accessDenied = document.getElementById("accessDenied");
    const header = document.querySelector(".header");
    const weekdays = document.querySelector(".weekdays");
    const prevBtn = document.getElementById("prevMonth");
    const nextBtn = document.getElementById("nextMonth");
    if (header) header.hidden = false;
    if (weekdays) weekdays.hidden = false;
    if (calendar) calendar.hidden = false;
    if (dutyList) dutyList.hidden = false;
    if (loading) loading.classList.remove("hidden");
    if (error) error.hidden = true;
    if (accessDenied) accessDenied.hidden = true;
    if (prevBtn) prevBtn.disabled = false;
    if (nextBtn) nextBtn.disabled = false;
  });

  describe("showAccessDenied", () => {
    it("hides header, weekdays, calendar, dutyList, loading, error and shows accessDenied", () => {
      showAccessDenied();
      expect(document.querySelector(".header")?.hidden).toBe(true);
      expect(document.querySelector(".weekdays")?.hidden).toBe(true);
      expect(document.getElementById("calendar")?.hidden).toBe(true);
      expect(document.getElementById("dutyList")?.hidden).toBe(true);
      expect(document.getElementById("loading")?.classList.contains("hidden")).toBe(true);
      expect(document.getElementById("error")?.hidden).toBe(true);
      expect(document.getElementById("accessDenied")?.hidden).toBe(false);
    });

    it("sets accessDenied innerHTML with translated message", () => {
      showAccessDenied();
      const el = document.getElementById("accessDenied");
      expect(el?.innerHTML).toContain("Доступ запрещён");
    });

    it("appends serverDetail in .access-denied-detail when provided", () => {
      showAccessDenied("Custom 403 message");
      const el = document.getElementById("accessDenied");
      const detail = el?.querySelector(".access-denied-detail");
      expect(detail?.textContent).toBe("Custom 403 message");
    });

    it("does not append detail element when serverDetail is empty string", () => {
      showAccessDenied("");
      const el = document.getElementById("accessDenied");
      expect(el?.querySelector(".access-denied-detail")).toBeNull();
    });
  });

  describe("hideAccessDenied", () => {
    it("hides accessDenied and shows header, weekdays, calendar, dutyList", () => {
      document.getElementById("accessDenied").hidden = false;
      document.querySelector(".header").hidden = true;
      document.getElementById("calendar").hidden = true;
      hideAccessDenied();
      expect(document.getElementById("accessDenied")?.hidden).toBe(true);
      expect(document.querySelector(".header")?.hidden).toBe(false);
      expect(document.querySelector(".weekdays")?.hidden).toBe(false);
      expect(document.getElementById("calendar")?.hidden).toBe(false);
      expect(document.getElementById("dutyList")?.hidden).toBe(false);
    });
  });

  describe("showError", () => {
    it("sets error text and shows error element", () => {
      showError("Network error");
      const errorEl = document.getElementById("error");
      expect(errorEl?.textContent).toBe("Network error");
      expect(errorEl?.hidden).toBe(false);
    });

    it("adds hidden class to loading element", () => {
      document.getElementById("loading").classList.remove("hidden");
      showError("Fail");
      expect(document.getElementById("loading")?.classList.contains("hidden")).toBe(true);
    });
  });

  describe("setNavEnabled", () => {
    it("disables prev and next buttons when enabled is false", () => {
      setNavEnabled(false);
      expect(document.getElementById("prevMonth")?.disabled).toBe(true);
      expect(document.getElementById("nextMonth")?.disabled).toBe(true);
    });

    it("enables prev and next buttons when enabled is true", () => {
      document.getElementById("prevMonth").disabled = true;
      document.getElementById("nextMonth").disabled = true;
      setNavEnabled(true);
      expect(document.getElementById("prevMonth")?.disabled).toBe(false);
      expect(document.getElementById("nextMonth")?.disabled).toBe(false);
    });
  });
});