Update GUI tests for code example buttons
This commit is contained in:
parent
a282e520b2
commit
be71bd9cec
@ -1,5 +1,6 @@
|
|||||||
// This test ensures that code blocks buttons are displayed on hover and when you click on them.
|
// 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"
|
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
|
||||||
|
include: "utils.goml"
|
||||||
|
|
||||||
// First we check we "hover".
|
// First we check we "hover".
|
||||||
move-cursor-to: ".example-wrap"
|
move-cursor-to: ".example-wrap"
|
||||||
@ -19,3 +20,71 @@ click: ".example-wrap"
|
|||||||
move-cursor-to: ".search-input"
|
move-cursor-to: ".search-input"
|
||||||
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
|
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
|
||||||
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
|
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)",
|
||||||
|
})
|
||||||
|
@ -24,11 +24,11 @@ define-function: (
|
|||||||
)
|
)
|
||||||
|
|
||||||
call-function: ("check-copy-button", {})
|
call-function: ("check-copy-button", {})
|
||||||
// Checking that the run button and the copy button have the same height.
|
// Checking that the run button and the copy button have the same height and same width.
|
||||||
compare-elements-size: (
|
compare-elements-size: (
|
||||||
".example-wrap:nth-of-type(1) .test-arrow",
|
".example-wrap:nth-of-type(1) .test-arrow",
|
||||||
".example-wrap:nth-of-type(1) .copy-button",
|
".example-wrap:nth-of-type(1) .copy-button",
|
||||||
["height"],
|
["height", "width"],
|
||||||
)
|
)
|
||||||
// ... and the same y position.
|
// ... and the same y position.
|
||||||
compare-elements-position: (
|
compare-elements-position: (
|
||||||
|
@ -1,54 +0,0 @@
|
|||||||
// Example code blocks sometimes have a "Run" button to run them on the
|
|
||||||
// Playground. That button is hidden until the user hovers over the code block.
|
|
||||||
// This test checks that it is hidden, and that it shows on hover. It also
|
|
||||||
// checks for its color.
|
|
||||||
include: "utils.goml"
|
|
||||||
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
|
|
||||||
show-text: true
|
|
||||||
|
|
||||||
define-function: (
|
|
||||||
"check-run-button",
|
|
||||||
[theme, color, background, hover_color, hover_background],
|
|
||||||
block {
|
|
||||||
call-function: ("switch-theme", {"theme": |theme|})
|
|
||||||
assert-css: (".test-arrow", {"visibility": "hidden"})
|
|
||||||
move-cursor-to: ".example-wrap"
|
|
||||||
assert-css: (".test-arrow", {
|
|
||||||
"visibility": "visible",
|
|
||||||
"color": |color|,
|
|
||||||
"background-color": |background|,
|
|
||||||
"font-size": "16px",
|
|
||||||
"border-radius": "2px",
|
|
||||||
})
|
|
||||||
move-cursor-to: ".test-arrow"
|
|
||||||
assert-css: (".test-arrow:hover", {
|
|
||||||
"visibility": "visible",
|
|
||||||
"color": |hover_color|,
|
|
||||||
"background-color": |hover_background|,
|
|
||||||
"font-size": "16px",
|
|
||||||
"border-radius": "2px",
|
|
||||||
})
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
call-function: ("check-run-button", {
|
|
||||||
"theme": "ayu",
|
|
||||||
"color": "#788797",
|
|
||||||
"background": "rgba(57, 175, 215, 0.09)",
|
|
||||||
"hover_color": "#c5c5c5",
|
|
||||||
"hover_background": "rgba(57, 175, 215, 0.37)",
|
|
||||||
})
|
|
||||||
call-function: ("check-run-button", {
|
|
||||||
"theme": "dark",
|
|
||||||
"color": "#dedede",
|
|
||||||
"background": "rgba(78, 139, 202, 0.2)",
|
|
||||||
"hover_color": "#dedede",
|
|
||||||
"hover_background": "rgb(78, 139, 202)",
|
|
||||||
})
|
|
||||||
call-function: ("check-run-button", {
|
|
||||||
"theme": "light",
|
|
||||||
"color": "#f5f5f5",
|
|
||||||
"background": "rgba(78, 139, 202, 0.2)",
|
|
||||||
"hover_color": "#f5f5f5",
|
|
||||||
"hover_background": "rgb(78, 139, 202)",
|
|
||||||
})
|
|
Loading…
Reference in New Issue
Block a user