src/test/rustdoc-gui/settings.goml

   1 // This test ensures that the settings menu display is working as expected and that
   2 // the settings page is also rendered as expected.
   3 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
   4 show-text: true // needed when we check for colors below.
   5 // First, we check that the settings page doesn't exist.
   6 assert-false: "#settings"
   7 // We now click on the settings button.
   8 click: "#settings-menu"
   9 wait-for: "#settings"
  10 assert-css: ("#settings", {"display": "block"})
  11 // Let's close it by clicking on the same button.
  12 click: "#settings-menu"
  13 wait-for-css: ("#settings", {"display": "none"})
  14
  15 // Let's check that pressing "ESCAPE" is closing it.
  16 click: "#settings-menu"
  17 wait-for-css: ("#settings", {"display": "block"})
  18 press-key: "Escape"
  19 wait-for-css: ("#settings", {"display": "none"})
  20
  21 // Let's click on it when the search results are displayed.
  22 focus: ".search-input"
  23 write: "test"
  24 // To be SURE that the search will be run.
  25 press-key: 'Enter'
  26 wait-for: "#alternative-display #search"
  27 click: "#settings-menu"
  28 wait-for-css: ("#settings", {"display": "block"})
  29 // Ensure that the search is still displayed.
  30 wait-for: "#alternative-display #search"
  31 assert: "#main-content.hidden"
  32
  33 // Now let's check the content of the settings menu.
  34 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
  35 reload:
  36 click: "#settings-menu"
  37 wait-for: "#settings"
  38
  39 // We check that the "Use system theme" is disabled.
  40 assert-property: ("#use-system-theme", {"checked": "false"})
  41 assert: "//*[@class='setting-line']//span[text()='Use system theme']"
  42 // Meaning that only the "theme" menu is showing up.
  43 assert: ".setting-line:not(.hidden) #theme"
  44 assert: ".setting-line.hidden #preferred-dark-theme"
  45 assert: ".setting-line.hidden #preferred-light-theme"
  46
  47 // We check that the correct theme is selected.
  48 assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
  49
  50 // Some style checks...
  51 move-cursor-to: "#settings-menu > a"
  52 // First we check the "default" display for radio buttons.
  53 assert-css: (
  54     "#theme-dark",
  55     {
  56         "border-color": "rgb(221, 221, 221)",
  57         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  58     },
  59 )
  60 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
  61 // Let's start with the hover for radio buttons.
  62 move-cursor-to: "#theme-dark"
  63 assert-css: (
  64     "#theme-dark",
  65     {
  66         "border-color": "rgb(33, 150, 243)",
  67         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  68     },
  69 )
  70 move-cursor-to: "#theme-light"
  71 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
  72 move-cursor-to: "#theme-ayu"
  73 // Let's now check with the focus for radio buttons.
  74 focus: "#theme-dark"
  75 assert-css: (
  76     "#theme-dark",
  77     {
  78         "border-color": "rgb(221, 221, 221)",
  79         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  80     },
  81 )
  82 focus: "#theme-light"
  83 assert-css: (
  84     "#theme-light",
  85     {
  86         "border-color": "rgb(221, 221, 221)",
  87         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
  88     },
  89 )
  90 // Now we check we both focus and hover for radio buttons.
  91 move-cursor-to: "#theme-dark"
  92 focus: "#theme-dark"
  93 assert-css: (
  94     "#theme-dark",
  95     {
  96         "border-color": "rgb(33, 150, 243)",
  97         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  98     },
  99 )
 100 move-cursor-to: "#theme-light"
 101 focus: "#theme-light"
 102 assert-css: (
 103     "#theme-light",
 104     {
 105         "border-color": "rgb(33, 150, 243)",
 106         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 107     },
 108 )
 109
 110 // First we check the "default" display for toggles.
 111 assert-css: (
 112     "#auto-hide-large-items",
 113     {
 114         "background-color": "rgb(33, 150, 243)",
 115         "border-color": "rgb(221, 221, 221)",
 116     },
 117 )
 118 assert-css: (
 119     "#use-system-theme",
 120     {
 121         "background-color": "rgba(0, 0, 0, 0)",
 122         "border-color": "rgb(221, 221, 221)",
 123     }
 124 )
 125 // Let's start with the hover for toggles.
 126 move-cursor-to: "#auto-hide-large-items"
 127 assert-css: (
 128     "#auto-hide-large-items",
 129     {
 130         "background-color": "rgb(33, 150, 243)",
 131         "border-color": "rgb(33, 150, 243)",
 132     },
 133 )
 134 move-cursor-to: "#use-system-theme"
 135 assert-css: (
 136     "#use-system-theme",
 137     {
 138         "background-color": "rgba(0, 0, 0, 0)",
 139         "border-color": "rgb(33, 150, 243)",
 140     }
 141 )
 142 move-cursor-to: "#settings-menu > a"
 143 // Let's now check with the focus for toggles.
 144 focus: "#auto-hide-large-items"
 145 assert-css: (
 146     "#auto-hide-large-items",
 147     {
 148         "background-color": "rgb(33, 150, 243)",
 149         "border-color": "rgb(221, 221, 221)",
 150         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 151     },
 152 )
 153 focus: "#use-system-theme"
 154 assert-css: (
 155     "#use-system-theme",
 156     {
 157         "background-color": "rgba(0, 0, 0, 0)",
 158         "border-color": "rgb(221, 221, 221)",
 159         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 160     },
 161 )
 162 // Now we check we both focus and hover for toggles.
 163 move-cursor-to: "#auto-hide-large-items"
 164 focus: "#auto-hide-large-items"
 165 assert-css: (
 166     "#auto-hide-large-items",
 167     {
 168         "background-color": "rgb(33, 150, 243)",
 169         "border-color": "rgb(33, 150, 243)",
 170         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 171     },
 172 )
 173 move-cursor-to: "#use-system-theme"
 174 focus: "#use-system-theme"
 175 assert-css: (
 176     "#use-system-theme",
 177     {
 178         "background-color": "rgba(0, 0, 0, 0)",
 179         "border-color": "rgb(33, 150, 243)",
 180         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 181     },
 182 )
 183
 184 // We now switch the display.
 185 click: "#use-system-theme"
 186 // Wait for the hidden element to show up.
 187 wait-for: ".setting-line:not(.hidden) #preferred-dark-theme"
 188 assert: ".setting-line:not(.hidden) #preferred-light-theme"
 189 // Check that the theme picking is hidden.
 190 assert: ".setting-line.hidden #theme"
 191
 192 // We check their text as well.
 193 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
 194 assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
 195
 196 // We now check that clicking on the toggles' text is like clicking on the checkbox.
 197 // To test it, we use the "Disable keyboard shortcuts".
 198 local-storage: {"rustdoc-disable-shortcuts": "false"}
 199 click: ".setting-line:last-child .toggle .label"
 200 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
 201
 202 // Make sure that "Disable keyboard shortcuts" actually took effect.
 203 press-key: "Escape"
 204 press-key: "?"
 205 assert-false: "#help-button .popover"
 206 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 207
 208 // Now turn keyboard shortcuts back on, and see if they work.
 209 click: ".setting-line:last-child .toggle .label"
 210 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
 211 press-key: "Escape"
 212 press-key: "?"
 213 wait-for-css: ("#help-button .popover", {"display": "block"})
 214 assert-css: ("#settings-menu .popover", {"display": "none"})
 215
 216 // Now we go to the settings page to check that the CSS is loaded as expected.
 217 goto: "file://" + |DOC_PATH| + "/settings.html"
 218 wait-for: "#settings"
 219 assert-css: (".setting-line", {"position": "relative"})
 220
 221 assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
 222 compare-elements-position: (".sub form", "#settings", ("x"))
 223
 224 // We now check the display with JS disabled.
 225 assert-false: "noscript section"
 226 javascript: false
 227 reload:
 228 assert-css: ("noscript section", {"display": "block"})
 229 javascript: true
 230
 231 // Check for the display on small screen
 232 show-text: true
 233 reload:
 234 size: (300, 1000)
 235 click: "#settings-menu"
 236 wait-for: "#settings"
 237 assert-css: (".setting-line", {"position": "relative"})