const assert = require("assert");
const base = require("../../base");

describe("Steps", () => {
    it("should initialize the steps", () => {
        const component = base.getComponent("Steps", {
            props: { steps: ["A", "B", "C"], step: 1 }
        });
        assert.strictEqual(component.exists(), true);
    });

    it("should only highlight the current step", () => {
        const component = base.getComponent("Steps", {
            props: { steps: ["A", "B", "C", "D", "E"], step: 2 }
        });
        const steps = component.findAll(".step");
        assert.strictEqual(steps.at(0).isVisible(), true);
        assert.strictEqual(steps.at(1).isVisible(), true);
        assert.strictEqual(steps.at(2).isVisible(), true);
        assert.strictEqual(steps.at(2).isVisible(), true);
        assert.strictEqual(steps.at(2).isVisible(), true);
        const highlightedSteps = component.findAll(".step .highlight");
        assert.strictEqual(highlightedSteps.at(0).isVisible(), false);
        assert.strictEqual(highlightedSteps.at(1).isVisible(), true);
        assert.strictEqual(highlightedSteps.at(2).isVisible(), false);
        assert.strictEqual(highlightedSteps.at(2).isVisible(), false);
        assert.strictEqual(highlightedSteps.at(2).isVisible(), false);
    });

    it("should change to clicked step and emit change", async () => {
        const component = base.getComponent("Steps", {
            props: { steps: ["A", "B", "C", "D", "E"], step: 1, clickable: true }
        });
        const steps = component.findAll(".step");
        await steps.at(4).trigger("click");
        assert.strictEqual(component.vm.$data.stepData, 5);
        assert.strictEqual(component.emitted("update:value")[0][0], 5);
        assert.strictEqual(steps.at(4).get(".highlight").selector, ".highlight");
        await steps.at(2).trigger("click");
        assert.strictEqual(component.vm.$data.stepData, 3);
        assert.strictEqual(component.emitted("update:value")[1][0], 3);
        assert.strictEqual(steps.at(2).get(".highlight").selector, ".highlight");
    });

    it("should not change to clicked step and emit change when not clickable", async () => {
        const component = base.getComponent("Steps", {
            props: { steps: ["A", "B", "C", "D", "E"], step: 1, clickable: false }
        });
        const steps = component.findAll(".step");
        await steps.at(4).trigger("click");
        assert.strictEqual(component.vm.$data.stepData, 1);
        assert.strictEqual(component.emitted("update:value"), undefined);
        assert.strictEqual(steps.at(0).get(".highlight").selector, ".highlight");
        await steps.at(2).trigger("click");
        assert.strictEqual(component.vm.$data.stepData, 1);
        assert.strictEqual(component.emitted("update:value"), undefined);
        assert.strictEqual(steps.at(0).get(".highlight").selector, ".highlight");
    });

    it("should have the correct classes depending on step's state", () => {
        const component = base.getComponent("Steps", {
            props: { steps: ["A", "B", "C", "D", "E"], step: 3 }
        });
        const steps = component.findAll(".step");
        assert.strictEqual(steps.at(0).classes("finished"), true);
        assert.strictEqual(steps.at(1).classes("finished"), true);
        assert.strictEqual(steps.at(2).classes("current"), true);
        assert.strictEqual(steps.at(3).classes("unfinished"), true);
        assert.strictEqual(steps.at(4).classes("unfinished"), true);
    });
});
