refactor: add dimension and alignment to UpdateProfilePhotoForm (#36)

Author: Highjhacker

resources/views/profile/update-profile-photo-form.blade.php

@@ -1,4 +1,10 @@
-<div x-data="{ isUploading: false, select() { document.getElementById('photo').click(); } }" x-on:livewire-upload-start="isUploading = true" x-on:livewire-upload-finish="isUploading = false" x-on:livewire-upload-error="isUploading = false" class="relative flex flex-col items-center mb-4 md:items-start">
+<div
+    x-data="{ isUploading: false, select() { document.getElementById('photo').click(); } }"
+    x-on:livewire-upload-start="isUploading = true"
+    x-on:livewire-upload-finish="isUploading = false"
+    x-on:livewire-upload-error="isUploading = false"
+    class="relative flex flex-col {{ $alignment ?? 'items-center mb-4 md:items-start' }}"
+>
     <form wire:submit.prevent="store" id="livewire-form">
         <div
             style="background-image: url('{{ $this->user->photo }}')"

src/Components/UpdateProfilePhotoForm.php

@@ -13,8 +13,12 @@ class UpdateProfilePhotoForm extends Component
     use InteractsWithUser;
     use WithFileUploads;
 
+    public $alignment;
+
     public $photo;
 
+    public $dimensions;
+
     /**
      * Render the component.
      *

tests/Components/UpdateProfilePhotoFormTest.php

@@ -8,7 +8,7 @@
 use Spatie\MediaLibrary\MediaCollections\FileAdderFactory;
 use Tests\MediaUser;
 
-it('can_upload_a_photo', function () {
+it('can upload a photo', function () {
     $this
         ->mock(FileAdderFactory::class)
         ->shouldReceive('createFromDisk->toMediaCollection')
@@ -21,7 +21,7 @@
         ->set('photo', $photo);
 });
 
-it('cannot_upload_a_photo_with_disallowed_extension', function () {
+it('cannot upload a photo with disallowed extension', function () {
     $photo = UploadedFile::fake()->create('logo.gif', 1000, 'image/gif');
 
     Livewire::actingAs(MediaUser::fake())
@@ -30,11 +30,33 @@
         ->assertHasErrors('photo');
 });
 
-it('cannot_upload_a_photo_that_is_too_large', function () {
+it('cannot upload a photo that is too large', function () {
     $photo = UploadedFile::fake()->image('logo.jpeg')->size(5000);
 
     Livewire::actingAs(MediaUser::fake())
         ->test(UpdateProfilePhotoForm::class)
         ->set('photo', $photo)
         ->assertHasErrors('photo');
 });
+
+it('can have custom dimensions', function () {
+    Livewire::actingAs(MediaUser::fake())
+        ->test(UpdateProfilePhotoForm::class)
+        ->assertSet('dimensions', null)
+        ->assertSee('w-48 h-48')
+        ->assertDontSee('w-24 h-24')
+        ->set('dimensions', 'w-24 h-24')
+        ->assertSet('dimensions', 'w-24 h-24')
+        ->assertSee('w-24 h-24');
+});
+
+it('can have a custom alignment', function () {
+    Livewire::actingAs(MediaUser::fake())
+        ->test(UpdateProfilePhotoForm::class)
+        ->assertSet('alignment', null)
+        ->assertSee('items-center mb-4 md:items-start')
+        ->set('alignment', 'items-end')
+        ->assertSet('alignment', 'items-end')
+        ->assertSee('items-end')
+        ->assertDontSee('items-center mb-4 md:items-start');
+});