Add a playwright test that checks static generation (#2608)

* add a playwright test that checks static generation

* add playwright-static-generation to the workspace

* fix static-generation name in CLI

Cargo.lock

@@ -2704,6 +2704,15 @@ dependencies = [
  "tokio",
 ]
 
+[[package]]
+name = "dioxus-playwright-static-generation-test"
+version = "0.1.0"
+dependencies = [
+ "dioxus",
+ "serde",
+ "tokio",
+]
+
 [[package]]
 name = "dioxus-playwright-web-test"
 version = "0.0.1"

Cargo.toml

@@ -46,6 +46,7 @@ members = [
     # Playwright tests
     "packages/playwright-tests/liveview",
     "packages/playwright-tests/web",
+    "packages/playwright-tests/static-generation",
     "packages/playwright-tests/fullstack",
     "packages/playwright-tests/suspense-carousel",
     "packages/playwright-tests/nested-suspense",

packages/cli-config/src/config.rs

@@ -24,7 +24,7 @@ pub enum Platform {
     Fullstack,
 
     /// Targeting the static generation platform using SSR and Dioxus-Fullstack
-    #[cfg_attr(feature = "cli", clap(name = "fullstack"))]
+    #[cfg_attr(feature = "cli", clap(name = "static-generation"))]
     #[serde(rename = "static-generation")]
     StaticGeneration,
 }

packages/playwright-tests/playwright.config.js

@@ -89,6 +89,15 @@ module.exports = defineConfig({
       reuseExistingServer: !process.env.CI,
       stdout: "pipe",
     },
+    {
+      cwd: path.join(process.cwd(), "static-generation"),
+      command:
+        'cargo run --package dioxus-cli --release -- serve --force-sequential --platform static-generation --addr "127.0.0.1" --port 2222',
+      port: 2222,
+      timeout: 30 * 60 * 1000,
+      reuseExistingServer: !process.env.CI,
+      stdout: "pipe",
+    },
     {
       cwd: path.join(process.cwd(), "fullstack"),
       command:

packages/playwright-tests/static-generation.spec.js

@@ -0,0 +1,21 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+test("button click", async ({ page }) => {
+  await page.goto("http://localhost:2222");
+  await page.waitForTimeout(1000);
+
+  // Expect the page to contain the counter text.
+  const main = page.locator("#main");
+  await expect(main).toContainText("hello axum! 12345");
+
+  // Expect the page to contain the server data
+  await expect(main).toContainText('Server said: Ok("Hello from the server!")');
+
+  // Click the increment button.
+  let button = page.locator("button.increment-button");
+  await button.click();
+
+  // Expect the page to contain the updated counter text.
+  await expect(main).toContainText("hello axum! 12346");
+});

packages/playwright-tests/static-generation/.gitignore

@@ -0,0 +1,3 @@
+.dioxus
+dist
+target

packages/playwright-tests/static-generation/Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "dioxus-playwright-static-generation-test"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack"] }
+serde = "1.0.159"
+tokio = { workspace = true, features = ["full"], optional = true }
+
+[features]
+default = []
+server = ["dioxus/axum", "tokio"]
+web = ["dioxus/web"]

packages/playwright-tests/static-generation/src/main.rs

@@ -0,0 +1,29 @@
+// This test is used by playwright configured in the root of the repo
+// Tests:
+// - Static Generation
+// - Simple Suspense
+// - Hydration
+
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+
+fn main() {
+    LaunchBuilder::static_generation().launch(app);
+}
+
+fn app() -> Element {
+    let mut count = use_signal(|| 12345);
+    let server_data = use_server_future(get_server_data)?;
+
+    rsx! {
+        h1 { "hello axum! {count}" }
+        button { class: "increment-button", onclick: move |_| count += 1, "Increment" }
+        "Server said: {server_data:?}"
+    }
+}
+
+#[server(GetServerData)]
+async fn get_server_data() -> Result<String, ServerFnError> {
+    tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+    Ok("Hello from the server!".to_string())
+}