src/test/rustdoc-gui/settings.goml

   1 // This test ensures that the settings menu display is working as expected.
   2 goto: file://|DOC_PATH|/test_docs/index.html
   3 show-text: true // needed when we check for colors below.
   4 // First, we check that the settings page doesn't exist.
   5 assert-false: "#settings"
   6 // We now click on the settings button.
   7 click: "#settings-menu"
   8 wait-for: "#settings"
   9 assert-css: ("#settings", {"display": "block"})
  10 // Let's close it by clicking on the same button.
  11 click: "#settings-menu"
  12 wait-for-css: ("#settings", {"display": "none"})
  13
  14 // Let's check that pressing "ESCAPE" is closing it.
  15 click: "#settings-menu"
  16 wait-for-css: ("#settings", {"display": "block"})
  17 press-key: "Escape"
  18 wait-for-css: ("#settings", {"display": "none"})
  19
  20 // Let's click on it when the search results are displayed.
  21 focus: ".search-input"
  22 write: "test"
  23 // To be SURE that the search will be run.
  24 press-key: 'Enter'
  25 wait-for: "#alternative-display #search"
  26 click: "#settings-menu"
  27 wait-for-css: ("#settings", {"display": "block"})
  28 // Ensure that the search is still displayed.
  29 wait-for: "#alternative-display #search"
  30 assert: "#main-content.hidden"
  31
  32 // Now let's check the content of the settings menu.
  33 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
  34 reload:
  35 click: "#settings-menu"
  36 wait-for: "#settings"
  37
  38 // We check that the "Use system theme" is disabled.
  39 assert-property: ("#use-system-theme", {"checked": "false"})
  40 assert: "//*[@class='setting-line']//span[text()='Use system theme']"
  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 // First we check the "default" display.
  51 assert-css: (
  52     "#theme-dark",
  53     {
  54         "border-color": "rgb(221, 221, 221)",
  55         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  56     },
  57 )
  58 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
  59 // Let's start with the hover.
  60 move-cursor-to: "#theme-dark"
  61 assert-css: (
  62     "#theme-dark",
  63     {
  64         "border-color": "rgb(33, 150, 243)",
  65         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  66     },
  67 )
  68 move-cursor-to: "#theme-light"
  69 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
  70 move-cursor-to: "#theme-ayu"
  71 // Let's now check with the focus.
  72 focus: "#theme-dark"
  73 assert-css: (
  74     "#theme-dark",
  75     {
  76         "border-color": "rgb(221, 221, 221)",
  77         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  78     },
  79 )
  80 focus: "#theme-light"
  81 assert-css: (
  82     "#theme-light",
  83     {
  84         "border-color": "rgb(221, 221, 221)",
  85         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
  86     },
  87 )
  88 // Now we check we both focus and hover.
  89 move-cursor-to: "#theme-dark"
  90 focus: "#theme-dark"
  91 assert-css: (
  92     "#theme-dark",
  93     {
  94         "border-color": "rgb(33, 150, 243)",
  95         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  96     },
  97 )
  98 move-cursor-to: "#theme-light"
  99 focus: "#theme-light"
 100 assert-css: (
 101     "#theme-light",
 102     {
 103         "border-color": "rgb(33, 150, 243)",
 104         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 105     },
 106 )
 107
 108 // We now switch the display.
 109 click: "#use-system-theme"
 110 // Wait for the hidden element to show up.
 111 wait-for: ".setting-line:not(.hidden) #preferred-dark-theme"
 112 assert: ".setting-line:not(.hidden) #preferred-light-theme"
 113 // Check that the theme picking is hidden.
 114 assert: ".setting-line.hidden #theme"
 115
 116 // We check their text as well.
 117 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
 118 assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
 119
 120 // We now check that clicking on the "sliders"' text is like clicking on the slider.
 121 // To test it, we use the "Disable keyboard shortcuts".
 122 local-storage: {"rustdoc-disable-shortcuts": "false"}
 123 click: ".setting-line:last-child .toggle .label"
 124 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
 125
 126 // Make sure that "Disable keyboard shortcuts" actually took effect.
 127 press-key: "Escape"
 128 press-key: "?"
 129 assert-false: "#help-button .popover"
 130 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 131
 132 // Now turn keyboard shortcuts back on, and see if they work.
 133 click: ".setting-line:last-child .toggle .label"
 134 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
 135 press-key: "Escape"
 136 press-key: "?"
 137 wait-for-css: ("#help-button .popover", {"display": "block"})
 138 assert-css: ("#settings-menu .popover", {"display": "none"})
 139
 140 // Now we go to the settings page to check that the CSS is loaded as expected.
 141 goto: file://|DOC_PATH|/settings.html
 142 wait-for: "#settings"
 143 assert-css: (".setting-line .toggle .slider", {"width": "45px", "margin-right": "20px"})
 144
 145 // We now check the display with JS disabled.
 146 assert-false: "noscript section"
 147 javascript: false
 148 reload:
 149 assert-css: ("noscript section", {"display": "block"})
 150 javascript: true
 151
 152 // Check for the display on small screen
 153 show-text: true
 154 reload:
 155 size: (300, 1000)
 156 click: "#settings-menu"
 157 wait-for: "#settings"
 158 assert-css: ("#settings .slider", {"width": "45px"}, ALL)