Check style changes on hover

[FanilZarip]

Feature Description

Hi! Provide a check and get changed css color or etc rules on element hover

Problem

I have css rules before hover .button[data-v-14f27f51] { background-color: var(--14f27f51-backgroundColor); padding: 10px 30px; border: none; color: var(--14f27f51-color); cursor: pointer; }

after hover has addintional rules

.button[data-v-14f27f51]:hover { filter: brightness(1.2); }

Expected behaviour

after await wrapper.trigger("hover") or await wrapper.trigger("mouseover") Getting access to css rules on hover

Alternatives

What are the alternative solutions? Please describe what else you have considered?

[BeatsuDev]

I tried this, but it didn't work. The test fails because the expression is not truthy.

    it("Button changes colour on hover", async () => {
        const wrapper = mount(ButtonComponent);

        const styleBefore = getComputedStyle(wrapper.element);
        wrapper.trigger("mouseover");
        await wrapper.vm.$nextTick();
        const styleAfter = getComputedStyle(wrapper.element);

        expect(
            styleBefore.backgroundColor !== styleAfter.backgroundColor
        ).toBeTruthy();
    });