Merge pull request #28 from mikebarlow/gregorysouzasilva/main

Livewire 3 update

Author: mikebarlow

.github/workflows/tests.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         operating-system: [ubuntu-20.04]
-        php: ['7.4', '8.0', '8.1']
+        php: ['8.1', '8.2']
 
     name: P${{ matrix.php }}
     steps:

CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.0.0] - 2023-09-11
+
+* Updated PHP requirement to 8.1 and above (7.4 and 8.0 dropped) [PR#28](https://github.com/mikebarlow/megaphone/pull/28)
+* Updated to Livewire 3 [PR#28](https://github.com/mikebarlow/megaphone/pull/28)
+* Updated Testbench and Pest [PR#28](https://github.com/mikebarlow/megaphone/pull/28)
+
 ## [1.2.0] - 2023-02-25
 
 * Removed `public $user` from component and changed loading of announcements to prevent user model data exposure. [PR #22](https://github.com/mikebarlow/megaphone/pull/22)

README.md

@@ -19,23 +19,48 @@ Before using Megaphone, a demo is available for you to view and try the Bell Ico
 
 [View the Megaphone Demo](https://megaphone.mikebarlow.co.uk)
 
+## Upgrade from 1.x
+
+Megaphone has been updated to support Livewire 3. This also means PHP requirements have been updated to match the requirements of Livewire 3 which means you need to be running PHP 8.1 or above (PHP 7.4 and 8.0 are no longer supported).
+Then make sure you follow the [Livewire upgrade guide](https://livewire.laravel.com/docs/upgrading).
+
+Update your Megaphone requirement to 2.* by running the following command in your terminal.
+
+```bash
+    composer require mbarlow/megaphone "^2.0"
+```
+
+### AlpineJS
+
+If you previously included AlpineJS specifically for Megaphone then you can now remove that from your JS include because it is now bundled with Livewire.
+
+### Template Changes
+
+If you are using the Admin component and are running with the Megaphone views published to your resources folder, you may wish to make these manual changes.
+
+Changes are all to `create-announcement.blade.php` which, if published, should be found at `resources/views/vendor/megaphone/admin/create-announcement.blade.php`.
+
+Find `wire:model="type"` and replace it with `wire:model.live="type"`.
+
+Find all instances of `wire:model.lazy` and replace it with `wire:model.blur`.
+
 ## Installation
 
 Simply require the package via composer into your Laravel app.
 
     composer require mbarlow/megaphone
 
-If you aren't already using Laravel Livewire in your app, Megaphone should include the package via its dependency. Once composer has finished installing, make sure you run the [Livewire installation steps](https://laravel-livewire.com/docs/2.x/installation).
+If you aren't already using Laravel Livewire in your app, Megaphone should include the package via its dependency. Once composer has finished installing, make sure you run the [Livewire installation steps](https://livewire.laravel.com/docs/installation).
 
-Once Livewire has been installed, if you haven't already, ensure the [Laravel Database Notifications have been installed](https://laravel.com/docs/9.x/notifications#database-prerequisites) into your app.
+Once Livewire has been installed, if you haven't already, ensure the [Laravel Database Notifications have been installed](https://laravel.com/docs/10.x/notifications#database-prerequisites) into your app.
 
 ```bash
 php artisan notifications:table
 
 php artisan migrate 
 ```
 
-This should create database table used to house your notifications. Next, make sure your User model (or relevant alternative model) has the notifiable trait added as mentioned in the [Laravel Documentation](https://laravel.com/docs/9.x/notifications#using-the-notifiable-trait) and also add the `HasMegaphone` trait provided by Megaphone.
+This should create database table used to house your notifications. Next, make sure your User model (or relevant alternative model) has the notifiable trait added as mentioned in the [Laravel Documentation](https://laravel.com/docs/10.x/notifications#using-the-notifiable-trait) and also add the `HasMegaphone` trait provided by Megaphone.
 
 ```php
 <?php
@@ -79,10 +104,6 @@ As default, Megaphone uses TailwindCSS to style the Bell Icon and the notificati
 <link rel="stylesheet" href="{{ asset('vendor/megaphone/css/megaphone.css') }}">
 ```
 
-### AlpineJS
-
-Megaphone requires AlpineJS to power some of its interactivity. If you are already using AlpineJS within your application, you can skip this step. If not you will need to [include AlpineJS into your application](https://alpinejs.dev/essentials/installation) for Megaphone to function properly.
-
 ## Sending Notifications
 
 As default, Megaphone will only load notifications that have been registered within the Megaphone config file. Notifications shipped with Megaphone will be within `config('megaphone.types')`. This will be merged with the key values of `config('megaphone.customTypes')` to create the list of supported notifications.
@@ -100,7 +121,7 @@ $notification = new \MBarlow\Megaphone\Types\Important(
 );
 ```
 
-Now, simply notify the required user of the notification as per the [Laravel Documentation](https://laravel.com/docs/9.x/notifications#using-the-notifiable-trait).
+Now, simply notify the required user of the notification as per the [Laravel Documentation](https://laravel.com/docs/10.x/notifications#using-the-notifiable-trait).
 
 ```php 
 $user = \App\Models\User::find(1);

composer.json

@@ -12,14 +12,16 @@
         }
     ],
     "require": {
-        "php": "^7.4 || ^8.0",
-        "livewire/livewire": "^2.0"
+        "php": "^8.1",
+        "livewire/livewire": "^3.0.1"
     },
     "require-dev": {
         "squizlabs/php_codesniffer": "^3.7",
-        "pestphp/pest-plugin-livewire": "^1.0",
-        "orchestra/testbench": "^6.0",
-        "pestphp/pest-plugin-faker": "^1.0"
+        "pestphp/pest-plugin-livewire": "^2.1",
+        "orchestra/testbench": "^8.10",
+        "pestphp/pest-plugin-faker": "^2.0",
+        "brianium/paratest": "^7.2",
+        "pestphp/pest": "2.16"
     },
     "autoload": {
         "psr-4": {

phpunit.xml

@@ -1,13 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" colors="true" bootstrap="vendor/autoload.php" xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/9.3/phpunit.xsd">
-    <coverage>
-        <include>
-            <directory suffix=".php">src/</directory>
-        </include>
-    </coverage>
-    <testsuites>
-        <testsuite name="mbarlow/megaphone tests">
-            <directory>tests/</directory>
-        </testsuite>
-    </testsuites>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" colors="true" bootstrap="vendor/autoload.php" xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/10.3/phpunit.xsd">
+  <coverage/>
+  <testsuites>
+    <testsuite name="mbarlow/megaphone tests">
+      <directory>tests/</directory>
+    </testsuite>
+  </testsuites>
+  <source>
+    <include>
+      <directory suffix=".php">src/</directory>
+    </include>
+  </source>
 </phpunit>

resources/views/admin/create-announcement.blade.php

@@ -12,7 +12,7 @@
         <div class="mb-6">
             <label for="type" class="block mb-2 text-sm font-medium text-gray-900">{{ __('Type') }}*</label>
             <select id="type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
-                @error('type') border-red-500 @enderror" wire:model="type">
+                @error('type') border-red-500 @enderror" wire:model.live="type">
                 <option>{{ __('Select Type') }}</option>
                 @foreach ($notifTypes as $type => $name)
                     <option value="{{ $type }}">
@@ -24,22 +24,22 @@
 
         <div class="mb-6">
             <label for="title" class="block mb-2 text-sm font-medium text-gray-900">{{ __('Title') }}*</label>
-            <input type="text" id="title" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 @error('title') border-red-500 @enderror" wire:model.lazy="title" >
+            <input type="text" id="title" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 @error('title') border-red-500 @enderror" wire:model.blur="title" >
         </div>
 
         <div class="mb-6">
             <label for="body" class="block mb-2 text-sm font-medium text-gray-900">{{ __('Body') }}*</label>
-            <input type="text" id="body" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 @error('body') border-red-500 @enderror" wire:model.lazy="body" >
+            <input type="text" id="body" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 @error('body') border-red-500 @enderror" wire:model.blur="body" >
         </div>
 
         <div class="mb-6">
             <label for="link" class="block mb-2 text-sm font-medium text-gray-900">{{ __('Link URL') }}</label>
-            <input type="text" id="link" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" wire:model.lazy="link" >
+            <input type="text" id="link" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" wire:model.blur="link" >
         </div>
 
         <div class="mb-6">
             <label for="linkText" class="block mb-2 text-sm font-medium text-gray-900">{{ __('Link Text') }}</label>
-            <input type="text" id="linkText" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" wire:model.lazy="linkText">
+            <input type="text" id="linkText" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" wire:model.blur="linkText">
         </div>
 
         <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">{{ __('Send') }}</button>

tests/MegaphoneComponentTest.php

@@ -72,9 +72,10 @@
     );
     $user->unreadNotifications->first()->markAsRead();
 
+
     $this->livewire(Megaphone::class)
         ->call('loadAnnouncements', $user)
-        ->assertSet('unread', $user->unreadNotifications()->get())
+        ->assertSet('unread', $user->announcements()->get()->whereNull('read_at'))
         ->assertSet('announcements', $user->readNotifications);
 });
 
@@ -95,7 +96,7 @@
 
     $this->livewire(Megaphone::class)
         ->call('markAsRead', $notification)
-        ->assertSet('unread', $user->unreadNotifications()->get())
+        ->assertSet('unread', $user->announcements()->get()->whereNull('read_at'))
         ->assertSet('announcements', $user->readNotifications);
 });
 

tests/Setup/TestCase.php

@@ -7,7 +7,7 @@
 use Livewire\LivewireServiceProvider;
 use MBarlow\Megaphone\MegaphoneServiceProvider;
 use Orchestra\Testbench\TestCase as BaseTestCase;
-use function Pest\Faker\faker;
+use function Pest\Faker\fake;
 
 class TestCase extends BaseTestCase
 {
@@ -22,7 +22,7 @@ protected function setUp(): void
 
     protected function createTestUser(): User
     {
-        $faker = faker();
+        $faker = fake();
         $user = new User();
         $user->name = $faker->name;
         $user->email = $faker->email;
@@ -34,7 +34,7 @@ protected function createTestUser(): User
 
     protected function createTestNotification($user, $notifClass)
     {
-        $faker = faker();
+        $faker = fake();
 
         $notification = new $notifClass(
             $faker->sentence,