import { shallowMount, mount } from "@vue/test-utils";
import TechNotes from "./tech-notes.vue";
import TextareaQuestion from "@/digital-components/textarea-question/textarea-question.vue";

const mockMixin = {
    methods: {
        getCmsContent() {
            return "Mocked CMS Content";
        },
    },
};

describe("TechNotes.vue", () => {
    it("Should render TechNotes", async () => {
        // Arrange
        const wrapper = shallowMount(TechNotes, {
            props: {
                modelValue: "Initial Tech Notes",
                textAreaLabelCopy: "Notes for your technician",
            },
            global: {
                mixins: [mockMixin],
            },
        });

        // Act
        const techNotes = wrapper.findComponent({ ref: "techNotes" });

        // Assert
        expect(techNotes.exists()).toBe(true);
    });

    it("Should populate the techNotes prop and render it correctly", async () => {
        // Arrange
        const wrapper = mount(TechNotes, {
            props: {
                modelValue: "Populated Tech Notes",
                textAreaLabelCopy: "Notes for your technician",
            },
            global: {
                components: {
                    TextareaQuestion,
                },
                mixins: [mockMixin],
            },
        });

        // Act
        const textarea = wrapper.find("textarea");

        // Assert
        expect(textarea.element.value).toBe("Populated Tech Notes");
    });

    it("Should toggle the active class when clicked", async () => {
        // Arrange
        const wrapper = shallowMount(TechNotes, {
            props: {
                modelValue: "Initial Tech Notes",
                textAreaLabelCopy: "Notes for your technician",
            },
            global: {
                mixins: [mockMixin],
            },
        });

        const toggleElement = wrapper.find(".tech-notes-toggle");

        // Act & Assert
        expect(wrapper.vm.isActive).toBe(false); // inactive
        await toggleElement.trigger("click");
        expect(wrapper.vm.isActive).toBe(true); // Active after first click
        await toggleElement.trigger("click");
        expect(wrapper.vm.isActive).toBe(false); // Inactive after second click
    });
});
