From 8a67901355a0a4fe230f23a003344e74a56bbf2d Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Wed, 6 Mar 2024 16:54:37 +0200
Subject: [PATCH] Updated test to check for Unsplash button in Admin (#19814)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref DES-167

https://linear.app/tryghost/issue/DES-167/🐛-unsplash-in-admin-x-not-styled-correctly
---
 apps/admin-x-design-system/src/global/form/ImageUpload.tsx      | 2 +-
 .../settings/site/designAndBranding/BrandSettings.tsx           | 2 +-
 apps/admin-x-settings/test/acceptance/site/design.test.ts       | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/form/ImageUpload.tsx b/apps/admin-x-design-system/src/global/form/ImageUpload.tsx
index 1e2ac42d76..dd7540e69e 100644
--- a/apps/admin-x-design-system/src/global/form/ImageUpload.tsx
+++ b/apps/admin-x-design-system/src/global/form/ImageUpload.tsx
@@ -174,7 +174,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
             <div className={`${buttonContainerClassName} ${unsplashEnabled ? 'relative' : ''}`}>
                 {
                     unsplashEnabled &&
-                        <button className={unsplashButtonClassName} type='button' onClick={openUnsplash}>
+                        <button className={unsplashButtonClassName} data-testid="toggle-unsplash-button" type='button' onClick={openUnsplash}>
                             {unsplashButtonContent}
                         </button>
                 }
diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
index 361e9fdcc7..2be76a8b76 100644
--- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
@@ -132,7 +132,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
                         unsplashButtonClassName='!top-1 !right-1 z-50'
                         unsplashEnabled={unsplashEnabled}
                         onDelete={() => updateSetting('cover_image', null)}
-                        onUpload={async (file) => {
+                        onUpload={async (file: any) => {
                             try {
                                 updateSetting('cover_image', getImageUrl(await uploadImage({file})));
                             } catch (e) {
diff --git a/apps/admin-x-settings/test/acceptance/site/design.test.ts b/apps/admin-x-settings/test/acceptance/site/design.test.ts
index 9f062e7443..7d8d9287ba 100644
--- a/apps/admin-x-settings/test/acceptance/site/design.test.ts
+++ b/apps/admin-x-settings/test/acceptance/site/design.test.ts
@@ -129,6 +129,7 @@ test.describe('Design settings', async () => {
         await expect(modal.frameLocator('[data-testid="theme-preview"] iframe[data-visible=true]').getByText('homepage preview')).toHaveCount(1);
 
         await modal.getByLabel('Site description').fill('new description');
+        await expect(modal.getByTestId('toggle-unsplash-button')).toBeVisible();
         // set timeout of 500ms to wait for the debounce
         await page.waitForTimeout(1000);
         await modal.getByRole('button', {name: 'Save'}).click();