From d12b79e03609f9e3eb24ed515ec0ab9f928cd7bb Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 11 Apr 2024 13:09:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20First=20Promoter=20alway?=
 =?UTF-8?q?s=20showing=20Active=20(#20010)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref https://github.com/TryGhost/Ghost/issues/19797

- Fixed FirstPromoter always showing Active in Integration Settings list
- This was due to the position of the variable in the array being in the
wrong positon and indexed incorrectly.
- Added additional testing to avoid it from cropping up again.
---
 .../settings/advanced/Integrations.tsx        | 19 ++++++++--
 .../integrations/integrationsList.test.ts     | 37 +++++++++++++++++++
 2 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts

diff --git a/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx
index 225dd58aee..b27da6c76d 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx
@@ -81,7 +81,13 @@ const BuiltInIntegrations: React.FC = () => {
     const pinturaEditor = usePinturaEditor();
 
     const {settings} = useGlobalData();
-    const [ampEnabled, unsplashEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues<boolean>(settings, ['amp', 'unsplash', 'pintura', 'firstpromoter', 'slack_url', 'slack_username']);
+    const [ampEnabled, unsplashEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues<boolean>(settings, [
+        'amp',
+        'unsplash',
+        'firstpromoter',
+        'slack_url',
+        'slack_username'
+    ]);
 
     return (
         <List titleSeparator={false}>
@@ -102,6 +108,7 @@ const BuiltInIntegrations: React.FC = () => {
                 active={slackUrl && slackUsername}
                 detail='A messaging app for teams'
                 icon={<SlackIcon className='h-8 w-8' />}
+                testId='slack-integration'
                 title='Slack' />
 
             <IntegrationItem
@@ -111,6 +118,7 @@ const BuiltInIntegrations: React.FC = () => {
                 active={ampEnabled}
                 detail='Google AMP will be removed in Ghost 6.0'
                 icon={<AmpIcon className='h-8 w-8' />}
+                testId='amp-integration'
                 title='AMP' />
 
             <IntegrationItem
@@ -120,6 +128,7 @@ const BuiltInIntegrations: React.FC = () => {
                 active={unsplashEnabled}
                 detail='Beautiful, free photos'
                 icon={<UnsplashIcon className='h-8 w-8' />}
+                testId='unsplash-integration'
                 title='Unsplash' />
 
             <IntegrationItem
@@ -129,6 +138,7 @@ const BuiltInIntegrations: React.FC = () => {
                 active={firstPromoterEnabled}
                 detail='Launch your member referral program'
                 icon={<FirstPromoterIcon className='h-8 w-8' />}
+                testId='firstpromoter-integration'
                 title='FirstPromoter' />
 
             <IntegrationItem
@@ -136,9 +146,10 @@ const BuiltInIntegrations: React.FC = () => {
                     openModal('integrations/pintura');
                 }}
                 active={pinturaEditor.isEnabled}
-                detail='Advanced image editing' icon=
-                    {<PinturaIcon className='h-8 w-8' />} title
-                    ='Pintura' />
+                detail='Advanced image editing'
+                icon={<PinturaIcon className='h-8 w-8' />}
+                testId='pintura-integration'
+                title='Pintura' />
         </List>
     );
 };
diff --git a/apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts b/apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts
new file mode 100644
index 0000000000..f1f0074224
--- /dev/null
+++ b/apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts
@@ -0,0 +1,37 @@
+import {expect, test} from '@playwright/test';
+import {globalDataRequests} from '../../../utils/acceptance';
+import {mockApi, responseFixtures} from '@tryghost/admin-x-framework/test/acceptance';
+
+test.describe('Integrations List', async () => {
+    // This is a test for the integrations list, which is a list of integrations that can be toggled on and off
+    // To ensure the app logic shows the correct initial state, all integrations are disabled by default, except for Unsplash 
+    test('Only Unsplash Shows Active on initial new setup', async ({page}) => {
+        await mockApi({page, requests: {
+            ...globalDataRequests,
+            getSettingValue: {method: 'GET', path: '/settings/', response: responseFixtures.settings}
+        }});
+        await page.goto('/');
+        const section = page.getByTestId('integrations');
+        // const zapierElement = await section.getByText('Zapier').last();
+        const zapierElement = section.getByTestId('zapier-integration');
+        const slackElement = section.getByTestId('slack-integration');
+        const ampElement = section.getByTestId('amp-integration');
+        const unsplashElement = section.getByTestId('unsplash-integration');
+        const firstPromoterElement = section.getByTestId('firstpromoter-integration');
+        const pinturaElement = section.getByTestId('pintura-integration');
+
+        const zapierStatus = await zapierElement.getByText('Active');
+        const slackStatus = await slackElement.getByText('Active');
+        const ampStatus = await ampElement.getByText('Active');
+        const unsplashStatus = await unsplashElement.getByText('Active');
+        const firstPromoterStatus = await firstPromoterElement.getByText('Active');
+        const pinturaStatus = await pinturaElement.getByText('Active');
+
+        expect(await zapierStatus.isVisible()).toBe(false);
+        expect(await slackStatus.isVisible()).toBe(false);
+        expect(await ampStatus.isVisible()).toBe(false);
+        expect(await unsplashStatus.isVisible()).toBe(true); // Unsplash is the only active integration
+        expect(await firstPromoterStatus.isVisible()).toBe(false);
+        expect(await pinturaStatus.isVisible()).toBe(false);
+    });
+});