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 wait-for: "#alternative-display #search"
  24 click: "#settings-menu"
  25 wait-for-css: ("#settings", {"display": "block"})
  26 // Ensure that the search is still displayed.
  27 wait-for: "#alternative-display #search"
  28 assert: "#main-content.hidden"
  29
  30 // Now let's check the content of the settings menu.
  31 local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
  32 reload:
  33 click: "#settings-menu"
  34 wait-for: "#settings"
  35
  36 // We check that the "Use system theme" is disabled.
  37 assert-property: ("#use-system-theme", {"checked": "false"})
  38 assert: "//*[@class='setting-line']//span[text()='Use system theme']"
  39 // Meaning that only the "theme" menu is showing up.
  40 assert: ".setting-line:not(.hidden) #theme"
  41 assert: ".setting-line.hidden #preferred-dark-theme"
  42 assert: ".setting-line.hidden #preferred-light-theme"
  43
  44 // We check that the correct theme is selected.
  45 assert-property: ("#theme .choices #theme-dark", {"checked": "true"})
  46
  47 // Some style checks...
  48 // First we check the "default" display.
  49 assert-css: (
  50     "#theme-dark",
  51     {
  52         "border-color": "rgb(221, 221, 221)",
  53         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  54     },
  55 )
  56 assert-css: ("#theme-light", {"border-color": "rgb(221, 221, 221)", "box-shadow": "none"})
  57 // Let's start with the hover.
  58 move-cursor-to: "#theme-dark"
  59 assert-css: (
  60     "#theme-dark",
  61     {
  62         "border-color": "rgb(33, 150, 243)",
  63         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset",
  64     },
  65 )
  66 move-cursor-to: "#theme-light"
  67 assert-css: ("#theme-light", {"border-color": "rgb(33, 150, 243)", "box-shadow": "none"})
  68 move-cursor-to: "#theme-ayu"
  69 // Let's now check with the focus.
  70 focus: "#theme-dark"
  71 assert-css: (
  72     "#theme-dark",
  73     {
  74         "border-color": "rgb(221, 221, 221)",
  75         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  76     },
  77 )
  78 focus: "#theme-light"
  79 assert-css: (
  80     "#theme-light",
  81     {
  82         "border-color": "rgb(221, 221, 221)",
  83         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
  84     },
  85 )
  86 // Now we check we both focus and hover.
  87 move-cursor-to: "#theme-dark"
  88 focus: "#theme-dark"
  89 assert-css: (
  90     "#theme-dark",
  91     {
  92         "border-color": "rgb(33, 150, 243)",
  93         "box-shadow": "rgb(53, 53, 53) 0px 0px 0px 3px inset, rgb(33, 150, 243) 0px 0px 2px 2px",
  94     },
  95 )
  96 move-cursor-to: "#theme-light"
  97 focus: "#theme-light"
  98 assert-css: (
  99     "#theme-light",
 100     {
 101         "border-color": "rgb(33, 150, 243)",
 102         "box-shadow": "rgb(33, 150, 243) 0px 0px 1px 1px",
 103     },
 104 )
 105
 106 // We now switch the display.
 107 click: "#use-system-theme"
 108 // Wait for the hidden element to show up.
 109 wait-for: ".setting-line:not(.hidden) #preferred-dark-theme"
 110 assert: ".setting-line:not(.hidden) #preferred-light-theme"
 111 // Check that the theme picking is hidden.
 112 assert: ".setting-line.hidden #theme"
 113
 114 // We check their text as well.
 115 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
 116 assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
 117
 118 // We now check that clicking on the "sliders"' text is like clicking on the slider.
 119 // To test it, we use the "Disable keyboard shortcuts".
 120 local-storage: {"rustdoc-disable-shortcuts": "false"}
 121 click: ".setting-line:last-child .toggle .label"
 122 assert-local-storage: {"rustdoc-disable-shortcuts": "true"}
 123
 124 // Make sure that "Disable keyboard shortcuts" actually took effect.
 125 press-key: "Escape"
 126 press-key: "?"
 127 assert-false: "#help-button .popover"
 128 wait-for-css: ("#settings-menu .popover", {"display": "block"})
 129
 130 // Now turn keyboard shortcuts back on, and see if they work.
 131 click: ".setting-line:last-child .toggle .label"
 132 assert-local-storage: {"rustdoc-disable-shortcuts": "false"}
 133 press-key: "Escape"
 134 press-key: "?"
 135 wait-for-css: ("#help-button .popover", {"display": "block"})
 136 assert-css: ("#settings-menu .popover", {"display": "none"})
 137
 138 // Now we go to the settings page to check that the CSS is loaded as expected.
 139 goto: file://|DOC_PATH|/settings.html
 140 wait-for: "#settings"
 141 assert-css: (".setting-line .toggle .slider", {"width": "45px", "margin-right": "20px"})
 142
 143 // We now check the display with JS disabled.
 144 assert-false: "noscript section"
 145 javascript: false
 146 reload:
 147 assert-css: ("noscript section", {"display": "block"})