pleno-vue/tests/unit/department-daily-report-product-sales.behavior.spec.js

// @vitest-environment jsdom
import { mount } from "@vue/test-utils";
import { nextTick } from "vue";
import { beforeEach, describe, expect, it, vi } from "vitest";

const dailyReportProductsState = vi.hoisted(() => ({ value: {} }));
const selectedDepartmentIdsState = vi.hoisted(() => ({ value: [] }));
const refreshOverviewMock = vi.hoisted(() => vi.fn());
const hasPermissionMock = vi.hoisted(() => vi.fn());
const setProductTargetMock = vi.hoisted(() => vi.fn());

vi.mock("@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue", () => ({
  daily_report_products: dailyReportProductsState,
  selected_department_ids: selectedDepartmentIdsState,
  refreshOverview: refreshOverviewMock,
}));

vi.mock("@/components/session/token/SessionUser.vue", () => ({
  SessionUser: {
    hasPermission: hasPermissionMock,
    objects: {
      department_daily_reports: {
        functions: {
          setProductTarget: setProductTargetMock,
        },
      },
    },
  },
}));

vi.mock("vue-i18n", async (importOriginal) => {
  const actual = await importOriginal();

  return {
    ...actual,
    useI18n: () => ({
      t: (value) => value,
    }),
  };
});

import DepartmentDashboardDailyReportProductSales from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportProductSales.vue";

describe("DepartmentDashboardDailyReportProductSales behavior", () => {
  beforeEach(() => {
    dailyReportProductsState.value = {};
    selectedDepartmentIdsState.value = [];
    refreshOverviewMock.mockReset();
    hasPermissionMock.mockReset();
    hasPermissionMock.mockReturnValue(false);
    setProductTargetMock.mockReset();
    setProductTargetMock.mockResolvedValue({ data: { data: { target_percentage: null } } });
  });

  it("renders the API title when the overview payload includes one", () => {
    dailyReportProductsState.value = {
      24: {
        title: "Custom API Title",
        value: 3,
        out_of: 8,
        state: "ready",
        message: null,
      },
    };

    const wrapper = mount(DepartmentDashboardDailyReportProductSales, {
      props: {
        product_id: 24,
        subtitle: "Dagens salg af produktet",
      },
    });

    expect(wrapper.text()).toContain("Custom API Title");
    expect(wrapper.text()).not.toContain("Spot Free (Lastbil)");
  });

  it("falls back to the configured product title when the overview title is blank or missing", () => {
    dailyReportProductsState.value = {
      24: {
        title: "   ",
        value: 3,
        out_of: 8,
        state: "ready",
        message: null,
      },
    };

    const blankTitleWrapper = mount(DepartmentDashboardDailyReportProductSales, {
      props: {
        product_id: 24,
        subtitle: "Dagens salg af produktet",
      },
    });

    expect(blankTitleWrapper.text()).toContain("Spot Free (Lastbil)");

    dailyReportProductsState.value = {};

    const missingTileWrapper = mount(DepartmentDashboardDailyReportProductSales, {
      props: {
        product_id: 22,
        subtitle: "Dagens salg af produktet",
      },
    });

    expect(missingTileWrapper.text()).toContain("Tillæg for Specialsæbe - DD");
  });

  it("falls back to a brand-agnostic wax title for product 26 (TRU-130)", () => {
    // TRU-130: the previous wax product ("Højglans - Voksforsegling") tested
    // poorly in the field and is being replaced. The fallback title should
    // therefore stay brand-agnostic so the tile keeps matching whatever
    // wax product the API eventually reports.
    dailyReportProductsState.value = {};

    const waxWrapper = mount(DepartmentDashboardDailyReportProductSales, {
      props: {
        product_id: 26,
        subtitle: "Dagens salg af produktet",
        dataTestid: "daily-report-tile-hoejglans",
      },
    });

    const rendered = waxWrapper.text();
    expect(rendered).toContain("Voksforsegling pr. enhed");
    expect(rendered).not.toContain("Højglans");
  });

  it("shows a saved target percentage below the product percentage", () => {
    dailyReportProductsState.value = {
      24: {
        title: "Spot Free (Lastbil)",
        value: 3,
        out_of: 8,
        state: "ready",
        message: null,
        target_percentage: 62.5,
        target_department_id: 1,
      },
    };

    const wrapper = mount(DepartmentDashboardDailyReportProductSales, {
      props: {
        product_id: 24,
        subtitle: "Dagens salg af produktet",
        dataTestid: "daily-report-tile-spot-free-lastbil",
      },
    });

    expect(wrapper.get('[data-testid="daily-report-tile-spot-free-lastbil-target-button"]').text()).toContain("62.5%");
  });

  it("opens the target editor from the percentage button and saves through the daily report API", async () => {
    selectedDepartmentIdsState.value = [1];
    hasPermissionMock.mockImplementation((permission) => permission === "set_department_daily_report_product_targets");
    setProductTargetMock.mockResolvedValue({ data: { data: { target_percentage: 70 } } });
    dailyReportProductsState.value = {
      24: {
        title: "Spot Free (Lastbil)",
        value: 3,
        out_of: 8,
        state: "ready",
        message: null,
        target_percentage: null,
        target_department_id: null,
      },
    };

    const wrapper = mount(DepartmentDashboardDailyReportProductSales, {
      props: {
        product_id: 24,
        subtitle: "Dagens salg af produktet",
        dataTestid: "daily-report-tile-spot-free-lastbil",
      },
    });

    await wrapper.get('[data-testid="daily-report-tile-spot-free-lastbil-percentage-button"]').trigger("click");
    await nextTick();
    await wrapper.get('[data-testid="daily-report-tile-spot-free-lastbil-target-input"]').setValue("70");
    await wrapper.find("form").trigger("submit");
    await nextTick();
    await Promise.resolve();

    expect(setProductTargetMock).toHaveBeenCalledWith({
      department_id: 1,
      product_id: 24,
      target_percentage: 70,
    });
    expect(refreshOverviewMock).toHaveBeenCalledTimes(1);
    expect(dailyReportProductsState.value[24]).toMatchObject({
      target_percentage: 70,
      target_department_id: 1,
    });
  });
});