// This test ensures that code blocks buttons are displayed on hover and when you click on them.
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
include: "utils.goml"

// First we check we "hover".
move-cursor-to: ".example-wrap"
assert-css: (".example-wrap .copy-button", { "visibility": "visible" })
move-cursor-to: ".search-input"
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })

// Now we check the click.
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
click: ".example-wrap"
move-cursor-to: ".search-input"
// It should have a new class and be visible.
wait-for-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 1)
wait-for-css: (".example-wrap:not(:hover) .button-holder.keep-visible", { "visibility": "visible" })
// Clicking again will remove the class.
click: ".example-wrap"
move-cursor-to: ".search-input"
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })

// Clicking on the "copy code" button shouldn't make the buttons stick.
click: ".example-wrap .copy-button"
move-cursor-to: ".search-input"
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })

define-function: (
    "check-buttons",
    [theme, background, filter, filter_hover],
    block {
        call-function: ("switch-theme", {"theme": |theme|})

        assert-css: (".example-wrap .test-arrow", {"visibility": "hidden"})
        assert-css: (".example-wrap .copy-button", {"visibility": "hidden"})

        move-cursor-to: ".example-wrap"
        assert-css: (".example-wrap .test-arrow", {
            "visibility": "visible",
            "background-color": |background|,
            "border-radius": "2px",
        })
        assert-css: (".example-wrap .test-arrow::before", {
            "filter": |filter|,
        })
        assert-css: (".example-wrap .copy-button", {
            "visibility": "visible",
            "background-color": |background|,
            "border-radius": "2px",
        })
        assert-css: (".example-wrap .copy-button::before", {
            "filter": |filter|,
        })

        move-cursor-to: ".example-wrap .test-arrow"
        assert-css: (".example-wrap .test-arrow:hover", {
            "visibility": "visible",
            "background-color": |background|,
            "border-radius": "2px",
        })
        assert-css: (".example-wrap .test-arrow:hover::before", {
            "filter": |filter_hover|,
        })

        move-cursor-to: ".example-wrap .copy-button"
        assert-css: (".example-wrap .copy-button:hover", {
            "visibility": "visible",
            "background-color": |background|,
            "border-radius": "2px",
        })
        assert-css: (".example-wrap .copy-button:hover::before", {
            "filter": |filter_hover|,
        })
    },
)

call-function: ("check-buttons",{
    "theme": "ayu",
    "background": "#0f1419",
    "filter": "invert(0.7)",
    "filter_hover": "invert(1)",
})
call-function: ("check-buttons",{
    "theme": "dark",
    "background": "#353535",
    "filter": "invert(0.5)",
    "filter_hover": "invert(0.65)",
})
call-function: ("check-buttons",{
    "theme": "light",
    "background": "#fff",
    "filter": "invert(0.5)",
    "filter_hover": "invert(0.35)",
})