fix(ui): resolve Swagger UI initialization and spec detection

Fahl-Design · Fahl-Design · commit 1f82315d1605 · 2026-03-10T22:47:50.000+01:00
- Fix ReferenceError: SwaggerUIStandalonePreset is correctly named
- Implement dynamic spec URL detection (JSON/YAML) for Swagger UI
- Ensure specHandler serves correct Content-Type based on requested route
- Update acceptance tests to use public/index.php as router script
- Add SwaggerUICest and enhance JsonSpecCest for better coverage
- Update Dockerfile and compose.yml with correct image and paths
diff --git a/Dockerfile b/Dockerfile
@@ -44,7 +44,4 @@ COPY --from=composer_build /app/vendor /app/vendor
 COPY . /app
 
 # Set default environment variables
-ENV OPENAPI_SPEC=data/openapi.yaml
-
-# Expose port 80
-EXPOSE 80
+ENV OPENAPI_SPEC=/app/data/openapi.yaml
diff --git a/compose.yml b/compose.yml
@@ -3,7 +3,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: webproject/php-openapi-mock-server:latest
+    image: ghcr.io/webproject-xyz/php-openapi-mock-server:latest
     container_name: openapi-mock-server
     restart: unless-stopped
     ports:
@@ -12,9 +12,9 @@ services:
       # Path or URL to the OpenAPI specification
       - OPENAPI_SPEC=${OPENAPI_SPEC:-data/openapi.yaml}
       # Enable FrankenPHP watcher for hot-reload
-      - FRANKENPHP_WATCHER=1
-    volumes:
-      # Mount source code for hot-reload
-      - .:/app
-      # Map data if you want to use local spec files
-      - ./data:/app/data:ro
+    #  - FRANKENPHP_WATCHER=1
+  #  volumes:
+#      # Mount source code for hot-reload
+#      - .:/app
+#      # Map data if you want to use local spec files
+     # - ./data:/app/data:ro
diff --git a/config/routes.php b/config/routes.php
@@ -25,22 +25,23 @@
 
     $specHandler = static function (ServerRequestInterface $serverRequest) use ($specPath): ResponseInterface {
         try {
-            $path = $specPath;
+            $path = (string) $specPath;
 
-            if (str_starts_with((string) $path, 'http')) {
+            if (str_starts_with($path, 'http')) {
                 $content = file_get_contents($path, false, RemoteSpecificationLoader::createStreamContext());
             } else {
-                $content = file_exists((string) $path) ? file_get_contents((string) $path) : null;
+                $content = file_exists($path) ? file_get_contents($path) : null;
             }
 
             if ($content === false || $content === null) {
                 return new TextResponse('OpenAPI spec not found at ' . $path, 404);
             }
 
-            $contentType = str_ends_with((string) $path, '.json') ? 'application/json' : 'text/yaml';
-            if (str_ends_with($serverRequest->getUri()->getPath(), '.json')) {
-                $contentType = 'application/json';
-            }
+            $requestedPath = $serverRequest->getUri()->getPath();
+            $isJsonRequest = str_ends_with($requestedPath, '.json');
+
+            // Serve the correct Content-Type for the requested route.
+            $contentType = $isJsonRequest ? 'application/json' : 'text/yaml';
 
             return new TextResponse($content, 200, [
                 'Content-Type' => $contentType,
@@ -50,9 +51,9 @@
         }
     };
 
-    // Route to serve the raw OpenAPI specification
-    $application->get('/openapi.yaml', $specHandler);
-    $application->get('/openapi.json', $specHandler);
+    // Route registrations
+    $application->get('/openapi.yaml', $specHandler, 'openapi_yaml');
+    $application->get('/openapi.json', $specHandler, 'openapi_json');
 
     // Swagger UI at root
     $application->get('/', static function (ServerRequestInterface $serverRequest) use ($specPath): ResponseInterface {
@@ -65,6 +66,12 @@
             ]);
         }
 
+        // Determine the correct spec URL for Swagger UI
+        $path = (string) $specPath;
+        $parsedPath = parse_url($path, PHP_URL_PATH) ?: $path;
+        $extension = strtolower(pathinfo($parsedPath, PATHINFO_EXTENSION));
+        $specUrl = $extension === 'json' ? '/openapi.json' : '/openapi.yaml';
+
         $html = <<<HTML
 <!DOCTYPE html>
 <html lang="en">
@@ -87,12 +94,12 @@
 <script>
   window.onload = () => {
     window.ui = SwaggerUIBundle({
-      url: '/openapi.yaml',
+      url: '$specUrl',
       dom_id: '#swagger-ui',
       deepLinking: true,
       presets: [
         SwaggerUIBundle.presets.apis,
-        SwaggerStandalonePreset
+        SwaggerUIStandalonePreset
       ],
       plugins: [
         SwaggerUIBundle.plugins.DownloadUrl
@@ -105,5 +112,5 @@
 </html>
 HTML;
         return new HtmlResponse($html);
-    });
+    }, 'home');
 };
diff --git a/tests/Acceptance.suite.yml b/tests/Acceptance.suite.yml
@@ -12,4 +12,4 @@ coverage:
 extensions:
     enabled:
         - Codeception\Extension\RunProcess:
-            - php -S localhost:8080 -t public
+            - php -S localhost:8080 -t public public/index.php
diff --git a/tests/Acceptance/SwaggerUICest.php b/tests/Acceptance/SwaggerUICest.php
@@ -0,0 +1,44 @@
+<?php
+declare(strict_types=1);
+
+namespace WebProject\PhpOpenApiMockServer\Tests\Acceptance;
+
+use WebProject\PhpOpenApiMockServer\Tests\Support\AcceptanceTester;
+
+class SwaggerUICest
+{
+    public function _before(AcceptanceTester $I): void
+    {
+        // Give the built-in server some time to start on the first test
+        static $started = false;
+        if (!$started) {
+            usleep(1000000); // 1.0 second
+            $started = true;
+        }
+    }
+
+    public function testSwaggerUIHome(AcceptanceTester $I): void
+    {
+        $I->sendGet('/');
+        $I->seeResponseCodeIs(200);
+        $I->seeResponseContains('<title>OpenAPI Mock Server - Swagger UI</title>');
+        $I->seeResponseContains('swagger-ui-bundle.js');
+        $I->seeResponseContains('SwaggerUIStandalonePreset');
+    }
+
+    public function testSwaggerUISpecUrl(AcceptanceTester $I): void
+    {
+        // Default is yaml
+        $I->sendGet('/');
+        $I->seeResponseContains("url: '/openapi.yaml'");
+    }
+
+    public function testOpenApiYamlRoute(AcceptanceTester $I): void
+    {
+        $I->sendGet('/openapi.yaml');
+        $I->seeResponseCodeIs(200);
+        // Should contain some YAML-like content (default spec)
+        $I->seeResponseContains('openapi: 3.0.0');
+        $I->seeHttpHeader('Content-Type', 'text/yaml;charset=UTF-8');
+    }
+}
diff --git a/tests/FailureAcceptance.suite.yml b/tests/FailureAcceptance.suite.yml
@@ -12,4 +12,4 @@ coverage:
 extensions:
     enabled:
         - Codeception\Extension\RunProcess:
-            - OPENAPI_SPEC=https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/non-existent.yaml php -S localhost:8083 -t public
+            - OPENAPI_SPEC=https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/non-existent.yaml php -S localhost:8083 -t public public/index.php
diff --git a/tests/JsonAcceptance.suite.yml b/tests/JsonAcceptance.suite.yml
@@ -12,4 +12,4 @@ coverage:
 extensions:
     enabled:
         - Codeception\Extension\RunProcess:
-            - OPENAPI_SPEC=data/openapi.json php -S localhost:8081 -t public
+            - OPENAPI_SPEC=data/openapi.json php -S localhost:8081 -t public public/index.php
diff --git a/tests/JsonAcceptance/JsonSpecCest.php b/tests/JsonAcceptance/JsonSpecCest.php
@@ -26,4 +26,19 @@ public function testGetProductsFromJsonSpec(AcceptanceTester $acceptanceTester):
         $response = json_decode($acceptanceTester->grabResponse(), true);
         $acceptanceTester->assertIsArray($response);
     }
+
+    public function testSwaggerUIPointsToJson(AcceptanceTester $acceptanceTester): void
+    {
+        $acceptanceTester->sendGet('/');
+        $acceptanceTester->seeResponseCodeIs(200);
+        $acceptanceTester->seeResponseContains("url: '/openapi.json'");
+    }
+
+    public function testOpenApiJsonRoute(AcceptanceTester $acceptanceTester): void
+    {
+        $acceptanceTester->sendGet('/openapi.json');
+        $acceptanceTester->seeResponseCodeIs(200);
+        $acceptanceTester->seeHttpHeader('Content-Type', 'application/json');
+        $acceptanceTester->seeResponseContains('"openapi": "3.0.0"');
+    }
 }
diff --git a/tests/RemoteAcceptance.suite.yml b/tests/RemoteAcceptance.suite.yml
@@ -12,4 +12,4 @@ coverage:
 extensions:
     enabled:
         - Codeception\Extension\RunProcess:
-            - OPENAPI_SPEC=https://raw.githubusercontent.com/Redocly/openapi-template/gh-pages/openapi.yaml php -S localhost:8082 -t public
+            - OPENAPI_SPEC=https://raw.githubusercontent.com/Redocly/openapi-template/gh-pages/openapi.yaml php -S localhost:8082 -t public public/index.php
