Upgrade to Laravel Dashboard 3.x

.github/workflows/run-tests.yml

@@ -8,21 +8,10 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        php: ['8.3', '8.2', '8.1', '8.0', '7.4']
-        laravel: [8.*, 9.*, 10.*]
+        php: [8.3, 8.2, 8.1]
+        laravel: [10.*]
         dependency-version: [prefer-lowest, prefer-stable]
-        exclude:
-          - laravel: 10.*
-            php: 8.0
-          - laravel: 10.*
-            php: 7.4
-          - laravel: 9.*
-            php: 7.4
         include:
-          - laravel: 8.*
-            testbench: ^6.23
-          - laravel: 9.*
-            testbench: ^7.0
           - laravel: 10.*
             testbench: ^8.0
 

composer.json

@@ -18,15 +18,14 @@
         }
     ],
     "require": {
-        "php": "^7.4|^8.0",
+        "php": "^8.1",
         "consoletvs/charts": "^6.6.0",
-        "spatie/laravel-dashboard": "^2.1.4"
+        "spatie/laravel-dashboard": "^3.0"
     },
     "require-dev": {
         "mockery/mockery": "^1.4",
-        "nunomaduro/laravel-mojito": "^0.2.6",
-        "orchestra/testbench": "^6.0|^7.0|^8.0",
-        "phpunit/phpunit": "^9.3",
+        "orchestra/testbench": "^8.0",
+        "phpunit/phpunit": "^9.6",
         "vimeo/psalm": "^4.3"
     },
     "autoload": {

resources/views/chart_refresh.blade.php

@@ -4,12 +4,14 @@
 
 @push('scripts')
     <script>
-        window.livewire.on('chartDataRefreshed{{$wireId}}', function (newData) {
-            var chartObj = window.{{$chart->id}};
-            chartObj.data.labels = newData.labels;
-            chartObj.data.datasets = JSON.parse(newData.datasets);
-            chartObj.options = newData.options;
-            chartObj.update();
+        document.addEventListener('livewire:initialized', () => {
+            @this.on('{{$eventName}}', ({0: newData}) => {
+                var chartObj = window.{{$chart->id}};
+                chartObj.data.labels = newData.labels;
+                chartObj.data.datasets = JSON.parse(newData.datasets);
+                chartObj.options = newData.options;
+                chartObj.update();
+            });
         });
     </script>
 @endpush

resources/views/tile.blade.php

@@ -8,5 +8,9 @@
 </x-dashboard-tile>
 
 @push('scripts')
-    {!! $chart->script() !!}
+    {!! str_replace(
+        '<!--[if ENDBLOCK]><![endif]-->',
+        '',
+        str_replace('<!--[if BLOCK]><![endif]-->', '', $chart->script()),
+    ) !!}
 @endpush

src/Components/ChartComponent.php

@@ -21,6 +21,8 @@ class ChartComponent extends Component
 
     public string $wireId;
 
+    public string $eventName;
+
     public function mount(
         string $position = '',
         string $height = '100%',
@@ -33,7 +35,8 @@ public function mount(
         $this->position = $position;
         $this->chartFactory = $chartFactory ?? DefaultChartFactory::class;
         $this->chartFilters = $chartFilters;
-        $this->wireId = $wireId ?? $this->id;
+        $this->wireId = $wireId ?? $this->getId();
+        $this->eventName = 'chartDataRefreshed'.$this->wireId;
 
         $this->refreshIntervalInSeconds = $refreshIntervalInSeconds
             ?? config('dashboard.tiles.charts.refresh_interval_in_seconds', 300);
@@ -61,6 +64,7 @@ protected function viewData(): array
             'wireId' => $this->wireId,
             'chart' => $this->chart(),
             'chartFactory' => $this->chartFactory,
+            'eventName' => $this->eventName,
         ];
     }
 }

src/Components/ChartRefreshComponent.php

@@ -15,7 +15,7 @@ protected function chart(): Chart
     {
         $chart = parent::chart();
 
-        $this->emit('chartDataRefreshed'.$this->wireId, [
+        $this->dispatch($this->eventName, [
             'labels' => $chart->labels,
             'datasets' => $chart->formatDatasets(),
             'options' => $chart->options,

tests/TestCase.php

@@ -5,7 +5,6 @@
 use ConsoleTVs\Charts\ChartsServiceProvider;
 use Fidum\ChartTile\ChartTileServiceProvider;
 use Livewire\LivewireServiceProvider;
-use NunoMaduro\LaravelMojito\MojitoServiceProvider;
 use Orchestra\Testbench\TestCase as BaseTestCase;
 use Spatie\Dashboard\DashboardServiceProvider;
 
@@ -21,10 +20,9 @@ protected function getEnvironmentSetUp($app): void
     protected function getPackageProviders($app): array
     {
         return [
-            ChartsServiceProvider::class,
-            DashboardServiceProvider::class,
             LivewireServiceProvider::class,
-            MojitoServiceProvider::class,
+            DashboardServiceProvider::class,
+            ChartsServiceProvider::class,
             ChartTileServiceProvider::class,
         ];
     }

tests/Unit/Components/ChartComponentTest.php

@@ -7,59 +7,46 @@
 use Fidum\ChartTile\Factories\DefaultChartFactory;
 use Fidum\ChartTile\Tests\TestCase;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
-use NunoMaduro\LaravelMojito\ViewAssertion;
 
 class ChartComponentTest extends TestCase
 {
     public function testMount()
     {
-        $component = new ChartComponent('');
-        $component->mount('a1:a2', '100vh');
-
-        $this->assertSame('a1:a2', $component->position);
-        $this->assertSame(DefaultChartFactory::class, $component->chartFactory);
-        $this->assertSame($component->id, $component->wireId);
-        $this->assertSame($component->refreshIntervalInSeconds, 300);
+        Livewire::test(ChartComponent::class)
+            ->assertSet('position', '')
+            ->assertSet('chartFactory', DefaultChartFactory::class)
+            ->assertSet('refreshIntervalInSeconds', 300);
     }
 
     public function testRender()
     {
-        /** @var TestableLivewire $result */
-        $result = Livewire::test(ChartComponent::class)
-            ->set('position', 'a1:a2')
-            ->call('render');
+        $test = Livewire::test(ChartComponent::class);
 
-        $html = $result->lastRenderedDom;
-        $wireId = $result->id();
+        $wireId = $test->id();
 
-        $result->assertViewHas('chartFactory', DefaultChartFactory::class)
+        $test->assertViewHas('chartFactory', DefaultChartFactory::class)
             ->assertViewHas('refreshIntervalInSeconds', 300)
             ->assertViewHas('wireId', $wireId)
-            ->assertViewHas('height', '100%');
-
-        (new ViewAssertion($html))
-            ->contains('<canvas style="display: none;" id="chart_'.$wireId.'"  height=\'100%\' ></canvas>');
+            ->assertViewHas('height', '100%')
+            ->assertSeeHtml("chartDataRefreshed$wireId")
+            ->assertSeeHtml('<canvas style="display: none;" id="chart_'.$wireId.'"  height=\'100%\' ></canvas>');
     }
 
     public function testRenderCustomProperties()
     {
-        /** @var TestableLivewire $result */
-        $result = Livewire::test(ChartComponent::class)
-            ->set('chartFactory', ExamplePieChart::class)
-            ->set('refreshIntervalInSeconds', 60)
-            ->set('wireId', 'abc')
-            ->set('height', '75vh')
-            ->call('render');
-
-        $html = $result->lastRenderedDom;
-
-        $result->assertViewHas('chartFactory', ExamplePieChart::class)
+        $test = Livewire::test(ChartComponent::class, [
+            'position' => 'a1:a2',
+            'height' => '75vh',
+            'chartFactory' => ExamplePieChart::class,
+            'wireId' => $wireId = 'abc',
+            'refreshIntervalInSeconds' => 60,
+        ]);
+
+        $test
+            ->assertViewHas('chartFactory', ExamplePieChart::class)
             ->assertViewHas('refreshIntervalInSeconds', 60)
-            ->assertViewHas('wireId', 'abc')
-            ->assertViewHas('height', '75vh');
-
-        (new ViewAssertion($html))
-            ->contains('<canvas style="display: none;" id="chart_abc"  height=\'75vh\' ></canvas>');
+            ->assertViewHas('height', '75vh')
+            ->assertSeeHtml("chartDataRefreshed$wireId")
+            ->assertSeeHtml('<canvas style="display: none;" id="chart_'.$wireId.'"  height=\'75vh\' ></canvas>');
     }
 }

tests/Unit/Components/ChartRefreshComponentTest.php

@@ -7,64 +7,47 @@
 use Fidum\ChartTile\Factories\DefaultChartFactory;
 use Fidum\ChartTile\Tests\TestCase;
 use Livewire\Livewire;
-use Livewire\Testing\TestableLivewire;
-use NunoMaduro\LaravelMojito\ViewAssertion;
 
 class ChartRefreshComponentTest extends TestCase
 {
     public function testMount()
     {
-        $component = new ChartRefreshComponent('');
-        $component->mount('a1:a2', '100vh');
-
-        $this->assertSame('a1:a2', $component->position);
-
-        $this->assertSame(DefaultChartFactory::class, $component->chartFactory);
-        $this->assertSame('100vh', $component->height);
-        $this->assertSame($component->id, $component->wireId);
+        Livewire::test(ChartRefreshComponent::class)
+            ->assertSet('position', '')
+            ->assertSet('height', '100%')
+            ->assertSet('chartFactory', DefaultChartFactory::class)
+            ->assertSet('refreshIntervalInSeconds', 300);
     }
 
     public function testRender()
     {
-        /** @var TestableLivewire $result */
-        $result = Livewire::test(ChartRefreshComponent::class)
-            ->set('position', 'a1:a2')
-            ->call('render');
-
-        $html = $result->lastRenderedDom;
-        $wireId = $result->id();
-
-        $result->assertEmitted('chartDataRefreshed'.$wireId)
+        $test = Livewire::test(ChartRefreshComponent::class);
+        $wireId = $test->id();
+        $test->assertDispatched('chartDataRefreshed'.$wireId)
             ->assertViewHas('chartFactory', DefaultChartFactory::class)
             ->assertViewHas('refreshIntervalInSeconds', 300)
             ->assertViewHas('wireId', $wireId)
-            ->assertViewHas('height', '100%');
-
-        (new ViewAssertion($html))
-            ->contains('wire:id="'.$wireId.'"')
-            ->contains('class="hidden" wire:poll.300s');
+            ->assertViewHas('height', '100%')
+            ->assertSeeHtml('wire:id="'.$wireId.'"')
+            ->assertSeeHtml("chartDataRefreshed$wireId")
+            ->assertSeeHtml('class="hidden" wire:poll.300s');
     }
 
     public function testRenderCustomProperties()
     {
-        /** @var TestableLivewire $result */
-        $result = Livewire::test(ChartRefreshComponent::class)
-            ->set('chartFactory', ExamplePieChart::class)
-            ->set('refreshIntervalInSeconds', 60)
-            ->set('wireId', 'abc')
-            ->set('height', '75vh')
-            ->call('render');
-
-        $html = $result->lastRenderedDom;
-        $wireId = $result->id();
-
-        $result->assertEmitted('chartDataRefreshedabc')
+        Livewire::test(ChartRefreshComponent::class, [
+            'position' => 'a1:a2',
+            'height' => '75vh',
+            'chartFactory' => ExamplePieChart::class,
+            'wireId' => $wireId = 'abc',
+            'refreshIntervalInSeconds' => 60,
+        ])
+            ->assertDispatched('chartDataRefreshed'.$wireId)
             ->assertViewHas('chartFactory', ExamplePieChart::class)
             ->assertViewHas('refreshIntervalInSeconds', 60)
             ->assertViewHas('wireId', 'abc')
-            ->assertViewHas('height', '75vh');
-
-        (new ViewAssertion($html))
-            ->contains('<div wire:id="'.$wireId.'" class="hidden" wire:poll.60s></div>');
+            ->assertViewHas('height', '75vh')
+            ->assertSeeHtml("chartDataRefreshed$wireId")
+            ->assertSeeHtml('class="hidden" wire:poll.60s');
     }
 }