Check style changes on hover

[JustGitUserAccount]

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();
    });