testeranto 0.200.1 → 0.203.0

package/src/components/pure/TestPageView_utils.tsx

@@ -0,0 +1,287 @@
+import React from "react";
+
+type TestData = {
+  name: string;
+  givens: {
+    name: string;
+    whens: {
+      name: string;
+      error?: string;
+      features?: string[];
+      artifacts?: string[];
+    }[];
+    thens: {
+      name: string;
+      error?: string;
+      features?: string[];
+      artifacts?: string[];
+    }[];
+    features?: string[];
+    artifacts?: string[];
+  }[];
+};
+
+// Determine language from file extension
+export const getLanguage = (path: string) => {
+  const ext = path.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+      return "typescript";
+    case "tsx":
+      return "typescript";
+    case "js":
+      return "javascript";
+    case "json":
+      return "json";
+    case "md":
+      return "markdown";
+    case "py":
+      return "python";
+    default:
+      return "plaintext";
+  }
+};
+
+export const renderTestResults = (
+  testData: TestData,
+  buildErrors,
+  projectName,
+  testName,
+  runtime
+) => {
+  return (
+    <div className="test-results">
+      {testData.givens.map((given, i) => (
+        <div key={i} className="mb-4 card">
+          <div className="card-header bg-primary text-white">
+            <div className="d-flex justify-content-between align-items-center">
+              <div>
+                <h4>Given: {given.name}</h4>
+                {given.features && given.features.length > 0 && (
+                  <div className="mt-1">
+                    <small>Features:</small>
+                    <ul className="list-unstyled">
+                      {given.features.map((feature, fi) => (
+                        <li key={fi}>
+                          {feature.startsWith("http") ? (
+                            <a
+                              href={feature}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-white"
+                            >
+                              {new URL(feature).hostname}
+                            </a>
+                          ) : (
+                            <span className="text-white">{feature}</span>
+                          )}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+              {given.artifacts && given.artifacts.length > 0 && (
+                <div className="dropdown">
+                  <button
+                    className="btn btn-sm btn-light dropdown-toggle"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                  >
+                    Artifacts ({given.artifacts.length})
+                  </button>
+                  <ul className="dropdown-menu dropdown-menu-end">
+                    {given.artifacts.map((artifact, ai) => (
+                      <li key={ai}>
+                        <a
+                          className="dropdown-item"
+                          href={`reports/${projectName}/${testName
+                            .split(".")
+                            .slice(0, -1)
+                            .join(".")}/${runtime}/${artifact}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          {artifact.split("/").pop()}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="card-body">
+            {given.whens.map((when, j) => (
+              <div
+                key={`w-${j}`}
+                className={`p-3 mb-2 ${when.error ? "bg-danger text-white" : "bg-success text-white"
+                  }`}
+              >
+                <div className="d-flex justify-content-between align-items-start">
+                  <div>
+                    <div>
+                      <strong>When:</strong> {when.name}
+                      {when.features && when.features.length > 0 && (
+                        <div className="mt-2">
+                          <small>Features:</small>
+                          <ul className="list-unstyled">
+                            {when.features.map((feature, fi) => (
+                              <li key={fi}>
+                                {feature.startsWith("http") ? (
+                                  <a
+                                    href={feature}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    {new URL(feature).hostname}
+                                  </a>
+                                ) : (
+                                  feature
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                      {when.error && <pre className="mt-2">{when.error}</pre>}
+                    </div>
+                  </div>
+                  {when.artifacts && when.artifacts.length > 0 && (
+                    <div className="ms-3">
+                      <strong>Artifacts:</strong>
+                      <ul className="list-unstyled">
+                        {when.artifacts.map((artifact, ai) => (
+                          <li key={ai}>
+                            <a
+                              href={`reports/${projectName}/${testName
+                                .split(".")
+                                .slice(0, -1)
+                                .join(".")}/${runtime}/${artifact}`}
+                              target="_blank"
+                              className="text-white"
+                              rel="noopener noreferrer"
+                            >
+                              {artifact.split("/").pop()}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+            {given.thens.map((then, k) => (
+              <div
+                key={`t-${k}`}
+                className={`p-3 mb-2 ${then.error ? "bg-danger text-white" : "bg-success text-white"
+                  }`}
+              >
+                <div className="d-flex justify-content-between align-items-start">
+                  <div>
+                    <div>
+                      <strong>Then:</strong> {then.name}
+                      {then.features && then.features.length > 0 && (
+                        <div className="mt-2">
+                          <small>Features:</small>
+                          <ul className="list-unstyled">
+                            {then.features.map((feature, fi) => (
+                              <li key={fi}>
+                                {feature.startsWith("http") ? (
+                                  <a
+                                    href={feature}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    {new URL(feature).hostname}
+                                  </a>
+                                ) : (
+                                  feature
+                                )}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                      {then.error && <pre className="mt-2">{then.error}</pre>}
+                    </div>
+                  </div>
+                  {then.artifacts && then.artifacts.length > 0 && (
+                    <div className="ms-3">
+                      <strong>Artifacts:</strong>
+                      <ul className="list-unstyled">
+                        {then.artifacts.map((artifact, ai) => (
+                          <li key={ai}>
+                            <a
+                              href={`reports/${projectName}/${testName
+                                .split(".")
+                                .slice(0, -1)
+                                .join(".")}/${runtime}/${artifact}`}
+                              target="_blank"
+                              className="text-white"
+                              rel="noopener noreferrer"
+                            >
+                              {artifact.split("/").pop()}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+      {/* Render build errors and warnings */}
+      {(buildErrors.errors.length > 0 || buildErrors.warnings.length > 0) && (
+        <div className="mb-4 card border-danger">
+          <div className="card-header bg-danger text-white">
+            <h4>Build Errors and Warnings</h4>
+          </div>
+          <div className="card-body">
+            {buildErrors.errors.length > 0 && (
+              <>
+                <h5>Errors</h5>
+                <ul>
+                  {buildErrors.errors.map((error, idx) => (
+                    <li key={`build-error-${idx}`}>
+                      <strong>{error.text}</strong>
+                      {error.location && (
+                        <div>
+                          File: {error.location.file} Line:{" "}
+                          {error.location.line} Column: {error.location.column}
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {buildErrors.warnings.length > 0 && (
+              <>
+                <h5>Warnings</h5>
+                <ul>
+                  {buildErrors.warnings.map((warning, idx) => (
+                    <li key={`build-warning-${idx}`}>
+                      <strong>{warning.text}</strong>
+                      {warning.location && (
+                        <div>
+                          File: {warning.location.file} Line:{" "}
+                          {warning.location.line} Column:{" "}
+                          {warning.location.column}
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/pure/TestTable.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Table, Badge } from "react-bootstrap";
+import { TestStatusBadge } from "../TestStatusBadge";
+
+interface TestStatus {
+  testName: string;
+  testsExist: boolean;
+  runTimeErrors: number;
+  typeErrors: number;
+  staticErrors: number;
+  runTime: string;
+  runTimeTests: number;
+}
+
+interface TestTableProps {
+  testStatuses: TestStatus[];
+  projectName: string;
+}
+
+export const TestTable: React.FC<TestTableProps> = ({
+  testStatuses,
+  projectName,
+}) => {
+  return (
+    <Table striped bordered hover>
+      <thead>
+        <tr>
+          <th>Test</th>
+          <th>Runtime</th>
+          <th>Status</th>
+          <th>Total Tests</th>
+          <th>Type Errors</th>
+          <th>Lint Errors</th>
+        </tr>
+      </thead>
+      <tbody>
+        {testStatuses.map((test) => (
+          <tr key={test.testName} data-testid={`test-row-${test.testName}`}>
+            <td>
+              <a
+                href={`#/projects/${projectName}/tests/${encodeURIComponent(
+                  test.testName
+                )}/${test.runTime}`}
+              >
+                {test.testName}
+              </a>
+            </td>
+            <td>
+              <Badge bg="secondary" className="ms-2">
+                {test.runTime}
+              </Badge>
+            </td>
+            <td>
+              <TestStatusBadge
+                testName={test.testName}
+                testsExist={test.testsExist}
+                runTimeErrors={test.runTimeErrors}
+                typeErrors={test.typeErrors}
+                staticErrors={test.staticErrors}
+              />
+            </td>
+            <td>
+              {test.runTimeTests >= 0 ? test.runTimeTests : "N/A"}
+            </td>
+            <td>
+              <a
+                href={`#/projects/${projectName}/tests/${encodeURIComponent(
+                  test.testName
+                )}/${test.runTime}#types`}
+              >
+                {test.typeErrors > 0 ? `❌ ${test.typeErrors}` : "✅"}
+              </a>
+            </td>
+            <td>
+              <a
+                href={`#/projects/${projectName}/tests/${encodeURIComponent(
+                  test.testName
+                )}/${test.runTime}#lint`}
+              >
+                {test.staticErrors > 0 ? `❌ ${test.staticErrors}` : "✅"}
+              </a>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};

package/src/components/pure/ToastNotification.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ToastContainer, Toast } from "react-bootstrap";
+
+export const ToastNotification = ({ showToast, setShowToast, toastVariant, toastMessage }) => (
+  <ToastContainer position="top-end" className="p-3">
+    <Toast
+      show={showToast}
+      onClose={() => setShowToast(false)}
+      delay={3000}
+      autohide
+      bg={toastVariant}
+    >
+      <Toast.Header>
+        <strong className="me-auto">Command Status</strong>
+      </Toast.Header>
+      <Toast.Body className="text-white">{toastMessage}</Toast.Body>
+    </Toast>
+  </ToastContainer>
+);

package/src/components/pure/UserProfile.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Dropdown, Image, Nav } from 'react-bootstrap';
+import { githubAuthService } from '../../services/GitHubAuthService';
+
+export const UserProfile: React.FC = () => {
+  const user = githubAuthService.userInfo;
+
+  if (!githubAuthService.isAuthenticated || !user) {
+    return null;
+  }
+
+  const handleLogout = () => {
+    githubAuthService.logout();
+  };
+
+  return (
+    <Dropdown align="end">
+      <Dropdown.Toggle
+        variant="outline-light"
+        id="user-profile-dropdown"
+        className="d-flex align-items-center"
+      >
+        <Image
+          src={user.avatar_url}
+          roundedCircle
+          width="32"
+          height="32"
+          className="me-2"
+        />
+        {user.login}
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item href={`https://github.com/${user.login}`} target="_blank">
+          View on GitHub
+        </Dropdown.Item>
+        <Dropdown.Divider />
+        <Dropdown.Item onClick={handleLogout}>
+          Sign out
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};

package/src/components/stateful/AuthCallbackPage.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+import { Spinner, Container } from 'react-bootstrap';
+
+export const AuthCallbackPage: React.FC = () => {
+  useEffect(() => {
+    // This page is only used in the popup window
+    // The actual authentication handling is done via the message listener in App.tsx
+    // This component just shows a loading spinner and will be closed automatically
+  }, []);
+
+  return (
+    <Container className="d-flex justify-content-center align-items-center" style={{ minHeight: '50vh' }}>
+      <div className="text-center">
+        <Spinner animation="border" role="status" className="mb-3">
+          <span className="visually-hidden">Authenticating...</span>
+        </Spinner>
+        <h4>Completing GitHub authentication...</h4>
+      </div>
+    </Container>
+  );
+};