Style fixes and test updates for app tour

NEWS.md

@@ -1,3 +1,9 @@
+# Development version
+
+### Minor new features and improvements
+
+- Tour works again in website live-demo mode
+
 # 0.5.1
 
 ### Major changes

inst/editor/build/index.html

@@ -26,7 +26,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Shiny UI Editor</title>
-    <script type="module" crossorigin src="./assets/index-11db4393.js"></script>
+    <script type="module" crossorigin src="./assets/index-cdb60eed.js"></script>
     <link rel="stylesheet" href="./assets/index-22085128.css">
   </head>
 

inst/editor/playwright/tour-mode.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from "@playwright/test";
+
+import { startupMockedApp } from "./utils/mockBackend";
+
+test("Live Demo loads and can be navigated", async ({ page }) => {
+  await startupMockedApp(page, { language: "R" });
+
+  // Select a template.
+  await page.locator(".template-container").first().click();
+
+  // Click button to proceed with template
+  await page
+    .getByRole("button", { name: "Start editor with selected template" })
+    .click();
+
+  // Make sure the main view has loaded by looking for the "Elements" section
+  await expect(page.getByRole("heading", { name: "Elements" })).toBeVisible();
+
+  // Click "Tour App" button
+  await page.getByRole("button", { name: "Tour App" }).click();
+
+  // Make sure that the tour has started
+  await expect(page.getByRole("alertdialog")).toBeVisible();
+
+  // Get the text content of the tour alert dialog so we can check that it changes in the next step
+  const tourText = await page.getByRole("alertdialog").textContent();
+
+  // Click the "Next" button
+  await page.getByRole("button", { name: "Next" }).click();
+
+  // Make sure that the tour has advanced to the next step by checking that the
+  // text content of the alert dialog has changed
+  const tourText2 = await page.getByRole("alertdialog").textContent();
+  expect(tourText2).not.toBe(tourText);
+
+  // Close the tour with the X button
+  await page.getByLabel("Close").click();
+
+  // Make sure that the tour has closed
+  await expect(page.getByRole("alertdialog")).not.toBeVisible();
+
+  // Re-opening the tour will start from the left off step
+  await page.getByRole("button", { name: "Tour App" }).click();
+  expect(await page.getByRole("alertdialog").textContent()).toBe(tourText2);
+
+  // Pressing the back button will go back to the first step
+  await page.getByRole("button", { name: "Back" }).click();
+  expect(await page.getByRole("alertdialog").textContent()).toBe(tourText);
+});

inst/editor/src/AppTour/index.tsx

@@ -7,6 +7,7 @@ import PngIcon from "../components/Icons";
 import Button from "../components/Inputs/Button/Button";
 import styles from "../DragAndDropHelpers/DropWatcherPanel.module.css";
 import { useMetaData } from "../state/metaData";
+import { mergeClasses } from "../utils/mergeClasses";
 
 export function AppTour() {
   const [stepIndex, setStepIndex] = React.useState(0);
@@ -82,13 +83,19 @@ export function AppTour() {
             </p>
             <p>
               In the app view, the areas available for the element to be dropped
-              in will pulse with an{" "}
+              in will pulse orange:{" "}
               <span
-                className={styles.can_accept_drop}
+                className={mergeClasses(
+                  styles.can_accept_drop,
+                  "text-transparent"
+                )}
+                // Ignore for screen readers
+                aria-hidden="true"
                 style={{ padding: "2px" }}
               >
-                orange outline.
+                drop
               </span>
+              .
             </p>
           </div>
         ),

inst/website/src/pages/live-demo.astro

@@ -11,6 +11,8 @@ import "@/styles/globals.css";
 import { internalLink } from "@/lib/utils";
 ---
 
+
+
 <FullPageLayout title="SUE | Live Demo">
   <Header showBorder={true} />
   <!-- Need min-h-0 to avoid growing over the allotted size  -->
@@ -24,3 +26,13 @@ import { internalLink } from "@/lib/utils";
 
   </main>
 </FullPageLayout>
+
+<script is:inline>
+// This is needed for various older packages that require the global
+// object to be defined because it typically was with older bundlers like
+// webpack
+if (typeof global === "undefined") {
+  global = window;
+}
+
+</script>

inst/website/tests/check-live-demo.spec.ts

@@ -25,4 +25,17 @@ test("Live Demo loads and can be navigated", async ({ page }) => {
 
   // Make sure the main view has loaded by looking for the "Elements" section
   await expect(page.getByRole("heading", { name: "Elements" })).toBeVisible();
+
+  // Make sure tour mode works
+  // Click "Tour App" button
+  await page.getByRole("button", { name: "Tour App" }).click();
+
+  // Make sure that the tour has started
+  await expect(page.getByRole("alertdialog")).toBeVisible();
+
+  // Close the tour with the X button
+  await page.getByLabel("Close").click();
+
+  // Make sure that the tour has closed
+  await expect(page.getByRole("alertdialog")).not.toBeVisible();
 });