diff --git a/resources/views/livewire/project/application/analytics.blade.php b/resources/views/livewire/project/application/analytics.blade.php index 8cfeb299bb..143fa29e23 100644 --- a/resources/views/livewire/project/application/analytics.blade.php +++ b/resources/views/livewire/project/application/analytics.blade.php @@ -39,192 +39,197 @@ $approxBadge = fn (string $tooltip) => ' @else - @if ($live) - - @endif + {{-- Keyed so the lazy-load morph replaces the placeholder skeleton, which has the same + sections, instead of patching it in place: Alpine does not start the x-data + components (Locations toggle and globe, table pagers) on reused skeleton nodes. --}} +
+ @if ($live) + + @endif - - -
-
- - diff --git a/tests/v4/Browser/TrafficGeoCitiesTest.php b/tests/v4/Browser/TrafficGeoCitiesTest.php index 882c3e131f..3cb392b19e 100644 --- a/tests/v4/Browser/TrafficGeoCitiesTest.php +++ b/tests/v4/Browser/TrafficGeoCitiesTest.php @@ -17,6 +17,9 @@ class FakeBrowserCityTrafficClient extends SentinelTrafficClient 'latency' => ['p50' => 12.5, 'p95' => 45.2, 'p99' => 90.1], 'unique_visitors' => 320, ], + '/traffic/paths' => [ + ['path' => '/', 'requests' => 900, 'bytes_out' => 20000], + ], '/traffic/breakdown/country' => [ ['value' => 'DE', 'requests' => 600, 'bytes_out' => 15000], ['value' => 'FR', 'requests' => 400, 'bytes_out' => 10000], @@ -65,3 +68,24 @@ it('switches the Locations card between countries and cities and remembers the s ->assertNoJavaScriptErrors() ->screenshot(filename: 'analytics-locations-cities'); }); + +// The lazy placeholder of this tab has the same sections as the loaded view. The Top paths +// row makes the loaded view start Alpine components, which a morph of the skeleton broke. +it('switches the Locations card between countries and cities on the application analytics tab', function () { + $application = createBrowserApplication($this->stack, ['uuid' => 'app-geo-cities', 'name' => 'Geo App']); + loginAndSkipBoarding(); + + $url = applicationConfigurationUrl($this->stack['project'], $this->stack['environment'], $application); + + $page = visit("{$url}/analytics"); + + $page->assertSee('Locations') + ->assertSee('Germany') + ->assertDontSee('BE, Germany') + ->click('button:visible:has-text("Cities")') + ->assertSee('BE, Germany') + ->assertSee('IDF, France') + ->assertScript("Boolean(document.getElementById('application-analytics-globe')._trafficGlobe)") + ->assertNoJavaScriptErrors() + ->screenshot(filename: 'application-analytics-locations-cities'); +});