Rollup merge of #123624 - GuillaumeGomez:theme-switch-tests, r=notriddle

[rustdoc] [GUI tests] Make theme switching closer to reality

Better to actually perform actions user do rather than only testing the change through local storage.

As for `browser-ui-test` update: I updated `puppeteer` version (to `0.19.4`) and fixed a bug when displaying the file if it came from an `include`.

r? `@notriddle`

Author: matthiaskrgr

src/ci/docker/host-x86_64/x86_64-gnu-tools/Dockerfile

@@ -78,16 +78,6 @@ ENV PATH="$NODE_FOLDER:${PATH}"
 
 COPY host-x86_64/x86_64-gnu-tools/browser-ui-test.version /tmp/
 
-# For now, we need to use `--unsafe-perm=true` to go around an issue when npm tries
-# to create a new folder. For reference:
-# https://github.com/puppeteer/puppeteer/issues/375
-#
-# We also specify the version in case we need to update it to go around cache limitations.
-#
-# The `browser-ui-test.version` file is also used by bootstrap to emit warnings in case
-# the local version of the package is different than the one used by the CI.
-RUN npm install -g browser-ui-test@$(head -n 1 /tmp/browser-ui-test.version) --unsafe-perm=true
-
 ENV RUST_CONFIGURE_ARGS \
   --build=x86_64-unknown-linux-gnu \
   --save-toolstates=/tmp/toolstate/toolstates.json \
@@ -100,6 +90,14 @@ COPY host-x86_64/dist-x86_64-linux/build-gccjit.sh /scripts/
 
 RUN /scripts/build-gccjit.sh /scripts
 
+# For now, we need to use `--unsafe-perm=true` to go around an issue when npm tries
+# to create a new folder. For reference:
+# https://github.com/puppeteer/puppeteer/issues/375
+#
+# We also specify the version in case we need to update it to go around cache limitations.
+#
+# The `browser-ui-test.version` file is also used by bootstrap to emit warnings in case
+# the local version of the package is different than the one used by the CI.
 ENV SCRIPT /tmp/checktools.sh ../x.py && \
-  NODE_PATH=`npm root -g` python3 ../x.py test tests/rustdoc-gui --stage 2 \
-    --test-args "'--no-sandbox --jobs 1'"
+  npm install browser-ui-test@$(head -n 1 /tmp/browser-ui-test.version) --unsafe-perm=true && \
+  python3 ../x.py test tests/rustdoc-gui --stage 2 --test-args "'--no-sandbox --jobs 1'"

src/ci/docker/host-x86_64/x86_64-gnu-tools/browser-ui-test.version

@@ -1 +1 @@
-0.17.1
+0.17.2

tests/rustdoc-gui/docblock-code-block-line-number.goml

@@ -2,23 +2,25 @@
 include: "utils.goml"
 go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
 
-// Otherwise, we can't check text color
-show-text: true
-
 // We check that without this setting, there is no line number displayed.
 assert-false: "pre.example-line-numbers"
 
+// We set the setting to show the line numbers on code examples.
+set-local-storage: {"rustdoc-line-numbers": "true"}
+reload:
+// We wait for the line numbers to be added into the DOM by the JS...
+wait-for: "pre.example-line-numbers"
+
+// Otherwise, we can't check text color
+show-text: true
+
 // Let's now check some CSS properties...
 define-function: (
     "check-colors",
     [theme, color],
     block {
-        // We now set the setting to show the line numbers on code examples.
-        set-local-storage: {"rustdoc-line-numbers": "true"}
         // Page will be reloaded in "switch-theme".
         call-function: ("switch-theme", {"theme": |theme|})
-        // We wait for the line numbers to be added into the DOM by the JS...
-        wait-for: "pre.example-line-numbers"
         // If the test didn't fail, it means that it was found!
         assert-css: (
             "pre.example-line-numbers",

tests/rustdoc-gui/scrape-examples-toggle.goml

@@ -9,6 +9,7 @@ define-function: (
     [theme, toggle_line_color, toggle_line_hover_color],
     block {
         call-function: ("switch-theme", {"theme": |theme|})
+        reload:
 
         // Clicking "More examples..." will open additional examples
         assert-attribute-false: (".more-examples-toggle", {"open": ""})
@@ -21,6 +22,8 @@ define-function: (
             ".toggle-line:hover .toggle-line-inner",
             {"background-color": |toggle_line_hover_color|},
         )
+        // We put the toggle in the original state.
+        click: ".more-examples-toggle"
         // Moving cursor away from the toggle line to prevent disrupting next test.
         move-cursor-to: ".search-input"
     },

tests/rustdoc-gui/search-result-color.goml

@@ -210,24 +210,21 @@ call-function: ("check-search-color", {
 
 // Check the alias.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
-// If the text isn't displayed, the browser doesn't compute color style correctly...
-show-text: true
+
+write-into: (".search-input", "thisisanalias")
+// To be SURE that the search will be run.
+press-key: 'Enter'
+// Waiting for the search results to appear...
+wait-for: "#search-tabs"
 
 define-function: (
     "check-alias",
     [theme, alias, grey],
     block {
         call-function: ("switch-theme", {"theme": |theme|})
-        write-into: (".search-input", "thisisanalias")
-        // To be SURE that the search will be run.
-        press-key: 'Enter'
-        // Waiting for the search results to appear...
-        wait-for: "#search-tabs"
         // Checking that the colors for the alias element are the ones expected.
         assert-css: (".result-name .path .alias", {"color": |alias|})
         assert-css: (".result-name .path .alias > .grey", {"color": |grey|})
-        // Leave the search results to prevent reloading with an already filled search input.
-        press-key: "Escape"
     },
 )
 

tests/rustdoc-gui/settings.goml

@@ -36,7 +36,12 @@ wait-for: "#alternative-display #search"
 assert: "#main-content.hidden"
 
 // Now let's check the content of the settings menu.
-call-function: ("switch-theme", {"theme": "dark"})
+// If we are on the settings page, the menu doesn't work the same so we set
+// the theme manually.
+set-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+// We reload the page so the local storage settings are being used.
+reload:
+
 click: "#settings-menu"
 wait-for: "#settings"
 

tests/rustdoc-gui/utils.goml

@@ -4,8 +4,15 @@ define-function: (
     [theme],
     block {
         // Set the theme.
-        set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
-        // We reload the page so the local storage settings are being used.
-        reload:
+        // Open the settings menu.
+        click: "#settings-menu"
+        // Wait for the popover to appear...
+        wait-for: "#settings"
+        // Change the setting.
+        click: "#theme-"+ |theme|
+        // Close the popover.
+        click: "#settings-menu"
+        // Ensure that the local storage was correctly updated.
+        assert-local-storage: {"rustdoc-theme": |theme|}
     },
 )