pleno-vue/tests/unit/red-car-warning.spec.js

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

import RedCarWarning from "@/components/displays/selfServe/RedCarWarning.vue";
import { createTestI18n } from "./helpers/mountWithApp.js";

const BMessageStub = {
  name: "BMessage",
  props: {
    type: { type: String, default: "" },
    title: { type: String, default: "" },
  },
  emits: ["close"],
  template: `
    <div
      class="b-message-stub"
      :data-type="type"
      :data-title="title"
      data-testid="red-car-warning"
    >
      <slot />
    </div>
  `,
};

const factory = (props = {}, messages = {}) => {
  const i18n = createTestI18n({
    en: {
      self_wash: {
        red_car_warning_title: "Red car on site",
        red_car_warning_message: "Handle with extra care.",
        red_car_warning_suggestion: "Use a gentler wash.",
        ...messages.en?.self_wash,
      },
    },
  });

  return mount(RedCarWarning, {
    props,
    global: {
      plugins: [i18n],
      stubs: {
        BMessage: BMessageStub,
      },
    },
  });
};

describe("RedCarWarning", () => {
  it("renders the warning when isRedCar is true", () => {
    const wrapper = factory({ isRedCar: true });
    expect(wrapper.find('[data-testid="red-car-warning"]').exists()).toBe(true);
    expect(wrapper.find('[data-testid="red-car-warning-message"]').text()).toBe("Handle with extra care.");
    expect(wrapper.find('[data-testid="red-car-warning-suggestion"]').text()).toBe("Use a gentler wash.");
  });

  it("does not render the warning when isRedCar is false", () => {
    const wrapper = factory({ isRedCar: false });
    expect(wrapper.find('[data-testid="red-car-warning"]').exists()).toBe(false);
  });

  it("does not render by default (no prop passed)", () => {
    const wrapper = factory();
    expect(wrapper.find('[data-testid="red-car-warning"]').exists()).toBe(false);
  });

  it("forwards the close event from the b-message as a dismiss emit", () => {
    const wrapper = factory({ isRedCar: true });
    const bMessage = wrapper.findComponent(BMessageStub);
    bMessage.vm.$emit("close");
    expect(wrapper.emitted()).toHaveProperty("dismiss");
  });
});