diff --git a/apps/admin-x-settings/test/acceptance/site/design.test.ts b/apps/admin-x-settings/test/acceptance/site/design.test.ts
deleted file mode 100644
index 78621c1e8e..0000000000
--- a/apps/admin-x-settings/test/acceptance/site/design.test.ts
+++ /dev/null
@@ -1,391 +0,0 @@
-import {
- chooseOptionInSelect,
- mockApi,
- mockSitePreview,
- responseFixtures,
- toggleLabsFlag,
- updatedSettingsResponse
-} from '@tryghost/admin-x-framework/test/acceptance';
-import {expect, test} from '@playwright/test';
-import {globalDataRequests} from '../../utils/acceptance';
-
-test.describe('Design settings', async () => {
- test('Working with the preview', async ({page}) => {
- await mockApi({page, requests: {
- ...globalDataRequests,
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: responseFixtures.customThemeSettings},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
- await mockSitePreview({
- page,
- url: responseFixtures.site.site.url,
- response: 'homepage preview
'
- });
- await mockSitePreview({
- page,
- url: responseFixtures.latestPost.posts[0].url,
- response: 'post preview
'
- });
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- // Homepage and post preview
-
- await expect(modal.frameLocator('[data-testid="theme-preview"] iframe[data-visible=true]').getByText('homepage preview')).toHaveCount(1);
-
- await modal.getByTestId('design-toolbar').getByRole('tab', {name: 'Post'}).click();
-
- await expect(modal.frameLocator('[data-testid="theme-preview"] iframe[data-visible=true]').getByText('post preview')).toHaveCount(1);
-
- // Desktop and mobile preview
-
- await modal.getByRole('button', {name: 'Mobile'}).click();
-
- await expect(modal.getByTestId('preview-mobile')).toBeVisible();
-
- await modal.getByRole('button', {name: 'Desktop'}).click();
-
- await expect(modal.getByTestId('preview-mobile')).not.toBeVisible();
- });
-
- test('Warns when leaving without saving', async ({page}) => {
- const {lastApiRequests} = await mockApi({page, requests: {
- ...globalDataRequests,
- editSettings: {method: 'PUT', path: '/settings/', response: responseFixtures.settings},
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: responseFixtures.customThemeSettings},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- // Brand setting
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- const accentColorPicker = modal.getByTestId('accent-color-picker');
- await accentColorPicker.getByRole('button').click();
- await accentColorPicker.getByRole('textbox').fill('#cd5786');
- // set timeout of 500ms to wait for the debounce
- await page.waitForTimeout(1000);
- await modal.getByRole('button', {name: 'Close'}).click();
-
- await expect(page.getByTestId('confirmation-modal')).toHaveText(/leave/i);
-
- await page.getByTestId('confirmation-modal').getByRole('button', {name: 'Leave'}).click();
-
- await expect(modal).toBeHidden();
-
- // Custom theme setting
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- await modal.getByTestId('design-setting-tabs').getByRole('tab', {name: 'Theme settings'}).click();
-
- await modal.getByLabel('Email signup text').fill('test');
-
- await modal.getByRole('button', {name: 'Close'}).click();
-
- await expect(page.getByTestId('confirmation-modal')).toHaveText(/leave/i);
-
- await page.getByTestId('confirmation-modal').getByRole('button', {name: 'Leave'}).click();
-
- await expect(modal).toBeHidden();
-
- expect(lastApiRequests.editSettings).toBeUndefined();
- });
-
- test('Editing brand settings', async ({page}) => {
- const {lastApiRequests} = await mockApi({page, requests: {
- ...globalDataRequests,
- editSettings: {method: 'PUT', path: '/settings/', response: responseFixtures.settings},
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: responseFixtures.customThemeSettings},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
- const lastPreviewRequest = await mockSitePreview({
- page,
- url: responseFixtures.site.site.url,
- response: 'homepage preview
'
- });
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- await expect(modal.frameLocator('[data-testid="theme-preview"] iframe[data-visible=true]').getByText('homepage preview')).toHaveCount(1);
-
- const accentColorPicker = modal.getByTestId('accent-color-picker');
- await accentColorPicker.getByRole('button').click();
- await accentColorPicker.getByRole('textbox').fill('#cd5786');
- 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();
-
- expect(lastPreviewRequest.previewHeader).toMatch(/c=\%23cd5786\&d/);
-
- expect(lastApiRequests.editSettings?.body).toEqual({
- settings: [
- {key: 'accent_color', value: '#cd5786'}
- ]
- });
- });
-
- test('Editing custom theme settings', async ({page}) => {
- const {lastApiRequests} = await mockApi({page, requests: {
- ...globalDataRequests,
- editCustomThemeSettings: {method: 'PUT', path: '/custom_theme_settings/', response: responseFixtures.customThemeSettings},
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: {
- custom_theme_settings: [{
- type: 'select',
- options: [
- 'Logo on cover',
- 'Logo in the middle',
- 'Stacked'
- ],
- default: 'Logo on cover',
- id: '648047658d265b0c8b33c591',
- value: 'Stacked',
- key: 'navigation_layout'
- }]
- }},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
- const lastPreviewRequest = await mockSitePreview({
- page,
- url: responseFixtures.site.site.url,
- response: 'homepage preview
'
- });
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- await modal.getByRole('tab', {name: 'Theme settings'}).click();
-
- await chooseOptionInSelect(modal.getByTestId('setting-select-navigation_layout'), 'Logo in the middle');
- await modal.getByRole('button', {name: 'Save'}).click();
-
- const expectedSettings = {navigation_layout: 'Logo in the middle'};
- const expectedEncoded = new URLSearchParams([['custom', JSON.stringify(expectedSettings)]]).toString();
- expect(lastPreviewRequest.previewHeader).toMatch(new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`));
-
- expect(lastApiRequests.editCustomThemeSettings?.body).toMatchObject({
- custom_theme_settings: [
- {key: 'navigation_layout', value: 'Logo in the middle'}
- ]
- });
- });
-
- test('Rendering with no custom theme settings', async ({page}) => {
- await mockApi({page, requests: {
- ...globalDataRequests,
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: {
- custom_theme_settings: []
- }},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
- const lastPreviewRequest = await mockSitePreview({
- page,
- url: responseFixtures.site.site.url,
- response: 'homepage preview
'
- });
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- const designSettingTabs = modal.getByTestId('design-setting-tabs');
-
- await expect(designSettingTabs.getByRole('tab', {name: 'Global'})).toBeHidden();
- await expect(designSettingTabs.getByRole('tab', {name: 'Theme settings'})).toBeHidden();
-
- // The tabs are not visible, but the global settings are still rendered
- await expect(designSettingTabs.getByTestId('accent-color-picker')).toBeVisible();
-
- const expectedEncoded = new URLSearchParams([['custom', JSON.stringify({})]]).toString();
-
- expect(lastPreviewRequest.previewHeader).toMatch(new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`));
- });
-
- test('Custom theme setting visibility', async ({page}) => {
- const {lastApiRequests} = await mockApi({page, requests: {
- ...globalDataRequests,
- editCustomThemeSettings: {method: 'PUT', path: '/custom_theme_settings/', response: responseFixtures.customThemeSettings},
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: {
- custom_theme_settings: [{
- type: 'select',
- options: [
- 'Logo on cover',
- 'Logo in the middle',
- 'Stacked'
- ],
- default: 'Logo on cover',
- id: '648047658d265b0c8b33c591',
- value: 'Stacked',
- key: 'navigation_layout'
- }, {
- type: 'boolean',
- default: 'false',
- id: '648047658d265b0c8b33c592',
- value: 'false',
- key: 'show_featured_posts',
- visibility: 'navigation_layout:[Stacked]'
- }]
- }},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
- const lastPreviewRequest = await mockSitePreview({
- page,
- url: responseFixtures.site.site.url,
- response: 'homepage preview
'
- });
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- await modal.getByRole('tab', {name: 'Theme settings'}).click();
-
- const showFeaturedPostsCustomThemeSetting = modal.getByLabel('Show featured posts');
-
- await expect(showFeaturedPostsCustomThemeSetting).toBeVisible();
-
- await chooseOptionInSelect(modal.getByTestId('setting-select-navigation_layout'), 'Logo in the middle');
-
- await expect(showFeaturedPostsCustomThemeSetting).not.toBeVisible();
-
- await modal.getByRole('button', {name: 'Save'}).click();
-
- const expectedSettings = {navigation_layout: 'Logo in the middle', show_featured_posts: null};
- const expectedEncoded = new URLSearchParams([['custom', JSON.stringify(expectedSettings)]]).toString();
- expect(lastPreviewRequest.previewHeader).toMatch(new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`));
-
- expect(lastApiRequests.editCustomThemeSettings?.body).toMatchObject({
- custom_theme_settings: [
- {key: 'navigation_layout', value: 'Logo in the middle'},
- {key: 'show_featured_posts', value: 'false'}
- ]
- });
- });
-
- test('Custom fonts', async ({page}) => {
- toggleLabsFlag('customFonts', true);
- await mockApi({page, requests: {
- ...globalDataRequests,
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: {
- custom_theme_settings: []
- }},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
- const lastPreviewRequest = await mockSitePreview({
- page,
- url: responseFixtures.site.site.url,
- response: 'homepage preview
'
- });
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- const designSettingTabs = modal.getByTestId('design-setting-tabs');
-
- await expect(designSettingTabs.getByTestId('accent-color-picker')).toBeVisible();
-
- await expect(designSettingTabs.getByText('Typography')).toBeVisible();
- await expect(designSettingTabs.getByTestId('heading-font-select')).toBeVisible();
- await expect(designSettingTabs.getByTestId('body-font-select')).toBeVisible();
-
- // select a different heading font
- const headingFontSelect = designSettingTabs.getByTestId('heading-font-select');
- await headingFontSelect.click();
- await headingFontSelect.getByText('Cardo').click();
-
- // select a different body font
- const bodyFontSelect = designSettingTabs.getByTestId('body-font-select');
- await bodyFontSelect.click();
- await bodyFontSelect.getByText('Inter').click();
-
- const expectedEncoded = new URLSearchParams([['bf', 'Inter'], ['hf', 'Cardo']]).toString();
-
- // Preview should have the new fonts
- await expect(lastPreviewRequest.previewHeader).toMatch(new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`));
- });
-
- test('Custom fonts setting back to default', async ({page}) => {
- toggleLabsFlag('customFonts', true);
- await mockApi({page, requests: {
- ...globalDataRequests,
- browseSettings: {...globalDataRequests.browseSettings, response: updatedSettingsResponse([
- {key: 'heading_font', value: 'Caro'},
- {key: 'body_font', value: 'Inter'}
- ])},
- browseCustomThemeSettings: {method: 'GET', path: '/custom_theme_settings/', response: {
- custom_theme_settings: []
- }},
- browseLatestPost: {method: 'GET', path: /^\/posts\/.+limit=1/, response: responseFixtures.latestPost}
- }});
- const lastPreviewRequest = await mockSitePreview({
- page,
- url: responseFixtures.site.site.url,
- response: 'homepage preview
'
- });
-
- await page.goto('/');
-
- const section = page.getByTestId('design');
-
- await section.getByRole('button', {name: 'Customize'}).click();
-
- const modal = page.getByTestId('design-modal');
-
- // The fonts should be set to the values in the settings
- await expect(modal.getByTestId('heading-font-select')).toHaveText('Caro');
- await expect(modal.getByTestId('body-font-select')).toHaveText('Inter');
-
- const designSettingTabs = modal.getByTestId('design-setting-tabs');
- // select a different heading font
- const headingFontSelect = designSettingTabs.getByTestId('heading-font-select');
- await headingFontSelect.click();
- await headingFontSelect.getByText('Theme default').click();
-
- // select a different body font
- const bodyFontSelect = designSettingTabs.getByTestId('body-font-select');
- await bodyFontSelect.click();
- await bodyFontSelect.getByText('Theme default').click();
-
- const expectedEncoded = new URLSearchParams([['bf', ''], ['hf', '']]).toString();
-
- // Preview should have the old fonts back
- await expect(lastPreviewRequest.previewHeader).toMatch(new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`));
- });
-});