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(settings, ['amp', 'unsplash', 'pintura', 'firstpromoter', 'slack_url', 'slack_username']); + const [ampEnabled, unsplashEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues(settings, [ + 'amp', + 'unsplash', + 'firstpromoter', + 'slack_url', + 'slack_username' + ]); return ( @@ -102,6 +108,7 @@ const BuiltInIntegrations: React.FC = () => { active={slackUrl && slackUsername} detail='A messaging app for teams' icon={} + testId='slack-integration' title='Slack' /> { active={ampEnabled} detail='Google AMP will be removed in Ghost 6.0' icon={} + testId='amp-integration' title='AMP' /> { active={unsplashEnabled} detail='Beautiful, free photos' icon={} + testId='unsplash-integration' title='Unsplash' /> { active={firstPromoterEnabled} detail='Launch your member referral program' icon={} + testId='firstpromoter-integration' title='FirstPromoter' /> { openModal('integrations/pintura'); }} active={pinturaEditor.isEnabled} - detail='Advanced image editing' icon= - {} title - ='Pintura' /> + detail='Advanced image editing' + icon={} + testId='pintura-integration' + title='Pintura' /> ); }; 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); + }); +});