/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const exampleTests = { basic: `// Test a simple addition function const result = module.add(2, 3); if (result !== 5) { throw new Error(\`Expected 5, but got \${result}\`); } return "Basic addition test passed!";`, async: `// Test an async function that fetches data const data = await module.fetchData(); if (!Array.isArray(data) || data.length === 0) { throw new Error("Expected non-empty array"); } return \`Fetched \${data.length} items successfully\`;`, error: `// Test error handling try { module.throwError(); } catch (error) { if (error.message !== "Expected error") { throw new Error(\`Unexpected error message: \${error.message}\`); } return "Error handling test passed!"; } throw new Error("Expected function to throw an error");`, }; function App() { const [valUrl, setValUrl] = useState(""); const [testCode, setTestCode] = useState(""); const [results, setResults] = useState(null); const [selectedExample, setSelectedExample] = useState(""); const runTests = async () => { try { const response = await fetch("/run-tests", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ valUrl, testCode }), }); const data = await response.json(); setResults(data); } catch (error) { console.error("Error running tests:", error); setResults({ success: false, error: "An error occurred while running the tests." }); } }; const handleExampleChange = (e) => { const example = e.target.value; setSelectedExample(example); setTestCode(exampleTests[example] || ""); }; return (

JavaScript Code Tester

Val URL: setValUrl(e.target.value)} placeholder="https://esm.town/v/username/valname" />

Select an example:

Test Code:

setTestCode(e.target.value)}
          placeholder="Write your test code here or select an example above..."
          rows={10}
        />
      </div>
      <button onClick={runTests}>Run Tests</button>
      {results && (
        <div className={`results ${results.success ? 'success' : 'error'}`}>
          <h2>Test Results:</h2>
          {results.success ? (
            <pre>{JSON.stringify(results.results, null, 2)}</pre>
          ) : (
            <div className="error-message">
              <p>Error: {results.error}</p>
              {results.error.includes("Module not found") && (
                <p>The module at the specified URL could not be found or accessed. Please check the following:</p>
              )}
              {results.error.includes("Module not found") && (
                <ul>
                  <li>Ensure the Val URL is correct and points to a valid JavaScript module.</li>
                  <li>Verify that the module is publicly accessible.</li>
                  <li>Check if there are any CORS issues preventing the module from being imported.</li>
                </ul>
              )}
            </div>
          )}
        </div>
      )}
      <div className="footer">
        <a href={import.meta.url.replace("esm.town", "val.town")} target="_top">View Source</a>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

async function runTests(valUrl: string, testCode: string) {
  try {
    const module = await import(valUrl);
    const testFunction = new Function('module', testCode);
    const testResults = testFunction(module);
    return { success: true, results: testResults };
  } catch (error) {
    console.error("Error in runTests:", error);
    if (error instanceof TypeError && error.message.includes("Failed to fetch dynamically imported module")) {
      return { 
        success: false, 
        error: "Module not found or inaccessible. Please check the Val URL and ensure the module is publicly available."
      };
    }
    return { success: false, error: error.message };
  }
}

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/run-tests") {
    const { valUrl, testCode } = await request.json();
    const results = await runTests(valUrl, testCode);
    return new Response(JSON.stringify(results), {
      headers: { "Content-Type": "application/json" },
    });
  }

return new Response(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript Code Tester</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
  {
    headers: {
      "content-type": "text/html",
    },
  });
}

const css = `
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
}

.input-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
textarea,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.results {
  margin-top: 20px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
}

.results.error {
  background-color: #fff0f0;
  border-color: #ffcccb;
}

.results.success {
  background-color: #f0fff0;
  border-color: #90ee90;
}

.error-message {
  color: #d8000c;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.footer {
  margin-top: 20px;
  text-align: center;
}

.footer a {
  color: #007bff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}
`;</article></body></html>

test_explorer