tests/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: ("#theme-system-preference", {"checked": "false"})
  41 // Meaning that only the "theme" menu is showing up.
  42 assert: ".setting-line:not(.hidden) #theme"
  43 assert: ".setting-line.hidden #preferred-dark-theme"
  44 assert: ".setting-line.hidden #preferred-light-theme"
  45
  46 // We check that the correct theme is selected.
  47 assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
  48
  49 // Some style checks...
  50 move-cursor-to: "#settings-menu > a"
  51 // First we check the "default" display for radio buttons.
  52 assert-css: (
  53     "#theme-dark",
  54     {
  55         "border-color": "rgb(221, 221, 221)",
  56         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  57     },
  58 )
  59 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
  60 // Let's start with the hover for radio buttons.
  61 move-cursor-to: "#theme-dark"
  62 assert-css: (
  63     "#theme-dark",
  64     {
  65         "border-color": "rgb(33, 150, 243)",
  66         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  67     },
  68 )
  69 move-cursor-to: "#theme-light"
  70 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
  71 move-cursor-to: "#theme-ayu"
  72 // Let's now check with the focus for radio buttons.
  73 focus: "#theme-dark"
  74 assert-css: (
  75     "#theme-dark",
  76     {
  77         "border-color": "rgb(221, 221, 221)",
  78         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  79     },
  80 )
  81 focus: "#theme-light"
  82 assert-css: (
  83     "#theme-light",
  84     {
  85         "border-color": "rgb(221, 221, 221)",
  86         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
  87     },
  88 )
  89 // Now we check we both focus and hover for radio buttons.
  90 move-cursor-to: "#theme-dark"
  91 focus: "#theme-dark"
  92 assert-css: (
  93     "#theme-dark",
  94     {
  95         "border-color": "rgb(33, 150, 243)",
  96         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  97     },
  98 )
  99 move-cursor-to: "#theme-light"
 100 focus: "#theme-light"
 101 assert-css: (
 102     "#theme-light",
 103     {
 104         "border-color": "rgb(33, 150, 243)",
 105         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 106     },
 107 )
 108
 109 // First we check the "default" display for toggles.
 110 assert-css: (
 111     "#auto-hide-large-items",
 112     {
 113         "background-color": "rgb(33, 150, 243)",
 114         "border-color": "rgb(221, 221, 221)",
 115     },
 116 )
 117 // Let's start with the hover for toggles.
 118 move-cursor-to: "#auto-hide-large-items"
 119 assert-css: (
 120     "#auto-hide-large-items",
 121     {
 122         "background-color": "rgb(33, 150, 243)",
 123         "border-color": "rgb(33, 150, 243)",
 124     },
 125 )
 126 move-cursor-to: "#settings-menu > a"
 127 // Let's now check with the focus for toggles.
 128 focus: "#auto-hide-large-items"
 129 assert-css: (
 130     "#auto-hide-large-items",
 131     {
 132         "background-color": "rgb(33, 150, 243)",
 133         "border-color": "rgb(221, 221, 221)",
 134         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 135     },
 136 )
 137 // Now we check we both focus and hover for toggles.
 138 move-cursor-to: "#auto-hide-large-items"
 139 focus: "#auto-hide-large-items"
 140 assert-css: (
 141     "#auto-hide-large-items",
 142     {
 143         "background-color": "rgb(33, 150, 243)",
 144         "border-color": "rgb(33, 150, 243)",
 145         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 146     },
 147 )
 148
 149 // We now switch the display.
 150 click: "#theme-system-preference"
 151 // Wait for the hidden element to show up.
 152 wait-for: ".setting-line:not(.hidden) #preferred-dark-theme"
 153 assert: ".setting-line:not(.hidden) #preferred-light-theme"
 154
 155 // We check their text as well.
 156 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
 157 assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
 158
 159 // We now check that clicking on the toggles' text is like clicking on the checkbox.
 160 // To test it, we use the "Disable keyboard shortcuts".
 161 local-storage: {"rustdoc-disable-shortcuts": "false"}
 162 click: ".setting-line:last-child .toggle .label"
 163 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
 164
 165 // Make sure that "Disable keyboard shortcuts" actually took effect.
 166 press-key: "Escape"
 167 press-key: "?"
 168 assert-false: "#help-button .popover"
 169 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 170
 171 // Now turn keyboard shortcuts back on, and see if they work.
 172 click: ".setting-line:last-child .toggle .label"
 173 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
 174 press-key: "Escape"
 175 press-key: "?"
 176 wait-for-css: ("#help-button .popover", {"display": "block"})
 177 assert-css: ("#settings-menu .popover", {"display": "none"})
 178
 179 // Now we go to the settings page to check that the CSS is loaded as expected.
 180 goto: "file://" + |DOC_PATH| + "/settings.html"
 181 wait-for: "#settings"
 182 assert-css: (".setting-line", {"position": "relative"})
 183
 184 assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
 185 compare-elements-position: (".sub form", "#settings", ("x"))
 186
 187 // We now check the display with JS disabled.
 188 assert-false: "noscript section"
 189 javascript: false
 190 reload:
 191 assert-css: ("noscript section", {"display": "block"})
 192 javascript: true
 193
 194 // Check for the display on small screen
 195 show-text: true
 196 reload:
 197 size: (300, 1000)
 198 click: "#settings-menu"
 199 wait-for: "#settings"
 200 assert-css: (".setting-line", {"position": "relative"})