feat: admin settings page UI/UX pass with WordPress-native patterns

- Header: h1 + logo in a wrapping flex row, hr.wp-header-end before the tabs, aria-current on the active tab; own CSS/JS enqueued only on this screen. - Verbindung: ordered "So verbindest du Claude" steps, copy button (core clipboard.js + wp.a11y.speak), Site-Health-style status list, German details. - Zugriff: roles as form-table fieldset, connections with site date format, empty-state row, confirm on revoke; ConnectionUsage records last use via WP_Application_Passwords::record_application_password_usage (once a day). - Tools: plain-language legend, counter as inline notice, groups as core postboxes (postbox.js toggles, per-user closed state, summary when closed), fixed column widths with new "Art" column, submit above and below. - Protokoll: site-timezone times with UTC tooltip, result icons, filters with labels in the list table nav, retention link to Limits. - Limits: short labels with units and descriptions; snapshot count hidden but preserved. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-26 16:50:58 +02:00
parent 5965e32acb
commit 843f45aeec
22 changed files with 1535 additions and 242 deletions
@@ -0,0 +1,76 @@
+<?php
+
+declare(strict_types=1);
+
+namespace LIT\MCP\Tests\Unit\Admin;
+
+use Brain\Monkey\Functions;
+use LIT\MCP\Admin\ConnectionStatus;
+use LIT\MCP\Admin\ConnectionTab;
+use LIT\MCP\Tests\Unit\TestCase;
+use Mockery;
+
+final class ConnectionTabTest extends TestCase
+{
+    /** @param list<array{label: string, ok: ?bool, message: string}> $checks */
+    private function render(array $checks): string
+    {
+        Functions\stubEscapeFunctions();
+        Functions\stubTranslationFunctions();
+        Functions\when('rest_url')->justReturn('https://kunde.de/wp-json/mcp/mcp-oauth-server');
+        Functions\when('admin_url')->alias(static fn (string $path = ''): string => 'https://kunde.de/wp-admin/' . $path);
+        Functions\when('add_query_arg')->alias(static fn (array $args, string $url): string => $url . '?' . http_build_query($args));
+        $status = Mockery::mock(ConnectionStatus::class);
+        $status->allows('checks')->with(true)->andReturn($checks);
+
+        ob_start();
+        (new ConnectionTab($status))->render();
+
+        return (string) ob_get_clean();
+    }
+
+    public function testExplainsTheConnectionAsAnOrderedSequenceLinkingToTheAccessTab(): void
+    {
+        $html = $this->render([]);
+
+        self::assertStringContainsString('So verbindest du Claude', $html);
+        self::assertSame(3, substr_count($html, '<li>'));
+        self::assertStringContainsString('<ol', $html);
+        self::assertStringContainsString('„Add custom connector“', $html);
+        self::assertStringContainsString('href="https://kunde.de/wp-admin/options-general.php?page=lit-mcp&tab=zugriff"', $html);
+    }
+
+    public function testServerUrlIsReadonlyWithACopyButton(): void
+    {
+        $html = $this->render([]);
+
+        self::assertMatchesRegularExpression(
+            '#<input[^>]+id="lit-mcp-url"[^>]+readonly[^>]+value="https://kunde.de/wp-json/mcp/mcp-oauth-server"#',
+            $html
+        );
+        self::assertStringContainsString('<label for="lit-mcp-url"', $html);
+        self::assertStringContainsString(
+            '<button type="button" class="button lit-mcp-copy" data-clipboard-target="#lit-mcp-url">URL kopieren</button>',
+            $html
+        );
+        self::assertStringContainsString('<span class="success hidden" aria-hidden="true">Kopiert!</span>', $html);
+    }
+
+    public function testStatusIsASiteHealthStyleListWithIconsPerState(): void
+    {
+        $html = $this->render([
+            ['label' => 'HTTPS', 'ok' => true, 'message' => 'aktiv'],
+            ['label' => 'Discovery', 'ok' => null, 'message' => 'noch nicht geprüft'],
+            ['label' => 'OAuth <b>', 'ok' => false, 'message' => 'deaktiviert'],
+        ]);
+
+        self::assertStringNotContainsString('<table', $html);
+        self::assertStringContainsString('<ul class="lit-mcp-status">', $html);
+        self::assertMatchesRegularExpression('#dashicons-yes-alt[^<]*"[^>]*></span>.*?HTTPS#s', $html);
+        self::assertMatchesRegularExpression('#dashicons-warning[^<]*"[^>]*></span>.*?Discovery#s', $html);
+        self::assertMatchesRegularExpression('#dashicons-dismiss[^<]*"[^>]*></span>.*?OAuth &lt;b&gt;#s', $html);
+        self::assertStringContainsString('<span class="screen-reader-text">In Ordnung:</span>', $html);
+        self::assertStringContainsString('<span class="screen-reader-text">Problem:</span>', $html);
+        self::assertStringContainsString('href="https://kunde.de/wp-admin/site-health.php"', $html);
+    }
+}