rwsdk/dist/lib/smokeTests/templates/SmokeTestClient.template.js

Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime

export function getSmokeTestClientTemplate() {
    return `"use client";

import React, { useState } from "react";
import { smokeTestAction } from "./__smokeTestFunctions";
import clientStyles from "./smokeTestClientStyles.module.css";

interface SmokeTestStatus {
  status: string;
  verificationPassed: boolean;
  timestamp: number;
  rawResult?: unknown;
  error?: string;
}

interface SmokeTestResponse {
  status: string;
  timestamp?: number;
  [key: string]: unknown;
}

export const SmokeTestClient: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [lastCheck, setLastCheck] = useState<SmokeTestStatus | null>(null);

  const runSmokeTest = async () => {
    setLoading(true);
    const clientTimestamp = Date.now();

    try {
      // Update the server timestamp with our client timestamp
      const result = await smokeTestAction(clientTimestamp);
      const status = result.status || "error";
      const verificationPassed = result.timestamp === clientTimestamp;

      setLastCheck({
        status,
        verificationPassed,
        timestamp: clientTimestamp,
        rawResult: result,
      });
    } catch (error) {
      setLastCheck({
        status: "error",
        verificationPassed: false,
        timestamp: clientTimestamp,
        error: error instanceof Error ? error.message : String(error),
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      className="smoke-test-client"
      style={{
        margin: "20px 0",
        padding: "15px",
        border: "1px solid #ddd",
        borderRadius: "4px",
        background: "#f9f9f9",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      <h3>Manual Smoke Test</h3>
      <button
        data-testid="refresh-health"
        onClick={runSmokeTest}
        disabled={loading}
        style={{
          padding: "8px 16px",
          background: loading ? "#ccc" : "#0070f3",
          color: "white",
          border: "none",
          borderRadius: "4px",
          cursor: loading ? "not-allowed" : "pointer",
          fontWeight: "bold",
        }}
      >
        {loading ? "Checking..." : "Run Smoke Test"}
      </button>

      {/* Client Stylesheet Marker */}
      <div
        className="smoke-test-url-styles"
        data-testid="smoke-test-url-styles"
      >
        <p>A red box should appear above this text (from URL import)</p>
      </div>
      <div
        className={clientStyles.smokeTestClientStyles}
        data-testid="smoke-test-client-styles"
      >
        <p>A blue box should appear above this text (from CSS module)</p>
      </div>

      {/* HMR Testing Marker - Do not modify this comment */}
      <div
        id="client-hmr-marker"
        data-testid="client-hmr-marker"
        data-hmr-text="original"
        data-hmr-timestamp={Date.now()}
      >
        Client Component HMR: <span>Original Text</span>
      </div>

      {lastCheck && (
        <div style={{ marginTop: "15px" }}>
          <div
            style={{
              padding: "10px",
              borderRadius: "4px",
              background: lastCheck.status === "ok" ? "#e6f7ee" : "#ffeded",
              border: \`1px solid \${
                lastCheck.status === "ok" ? "#0c9" : "#f44"
              }\`,
            }}
          >
            <h4
              style={{
                margin: "0 0 10px 0",
                color: lastCheck.status === "ok" ? "#0c9" : "#f44",
              }}
            >
              Status: {lastCheck.status}
            </h4>
            <p>
              Server timestamp updated to: {lastCheck.timestamp}
            </p>
            <p>
              Timestamp verification:{" "}
              {lastCheck.verificationPassed ? "Passed ✅" : "Failed ⚠️"}
            </p>
            {lastCheck.error && (
              <p style={{ color: "#f44" }}>Error: {lastCheck.error}</p>
            )}
            <details style={{ marginTop: "10px" }}>
              <summary>Raw Result</summary>
              <pre
                style={{
                  background: "#f5f5f5",
                  padding: "10px",
                  borderRadius: "4px",
                  fontSize: "12px",
                  overflow: "auto",
                }}
              >
                {JSON.stringify(
                  {
                    timestamp: lastCheck.timestamp,
                    result: lastCheck.rawResult,
                    verificationPassed: lastCheck.verificationPassed,
                  },
                  null,
                  2
                )}
              </pre>
            </details>
          </div>
        </div>
      )}

      <div
        id="smoke-test-client-timestamp"
        data-client-timestamp={lastCheck?.timestamp ?? ""}
        data-status={lastCheck?.status ?? ""}
        data-verified={lastCheck?.verificationPassed ? "true" : "false"}
        style={{ display: "none" }}
      />
    </div>
  );
};`;
}