Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Added acceptance test for custom fonts and preview

Browse source
This commit is contained in:
Aileen Booker 2024-10-23 15:00:21 +04:00
parent 34078f9582
commit 369b562cda
3 changed files with 59 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/admin-x-framework/src/test/responses/settings.json
View file

@ -327,6 +327,14 @@
{ {
"key": "support_email_address", "key": "support_email_address",
"value": "support@example.com" "value": "support@example.com"
},
{
"key": "heading_font",
"value": null
},
{
"key": "body_font",
"value": null
} }
], ],
"meta": { "meta": {

4
apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
View file

@ -257,13 +257,14 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
</div> </div>
</Form> </Form>
<BehindFeatureFlag flag="customFonts"> <BehindFeatureFlag flag="customFonts">
<Form className='-mt-4' data-testid='custom-fonts-section' gap='sm' margins='lg' title='Typography'> <Form className='-mt-4' gap='sm' margins='lg' title='Typography'>
<Select <Select
className={selectFont(selectedHeadingFont.label, true)} className={selectFont(selectedHeadingFont.label, true)}
hint={''} hint={''}
menuShouldScrollIntoView={true} menuShouldScrollIntoView={true}
options={customHeadingFonts} options={customHeadingFonts}
selectedOption={selectedHeadingFont} selectedOption={selectedHeadingFont}
testId='heading-font-select'
title={'Heading font'} title={'Heading font'}
onSelect={(option) => { onSelect={(option) => {
if (option?.value === DEFAULT_FONT) { if (option?.value === DEFAULT_FONT) {
@ -283,6 +284,7 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
menuShouldScrollIntoView={true} menuShouldScrollIntoView={true}
options={customBodyFonts} options={customBodyFonts}
selectedOption={selectedBodyFont} selectedOption={selectedBodyFont}
testId='body-font-select'
title={'Body font'} title={'Body font'}
onSelect={(option) => { onSelect={(option) => {
if (option?.value === DEFAULT_FONT) { if (option?.value === DEFAULT_FONT) {

49
apps/admin-x-settings/test/acceptance/site/design.test.ts
View file

@ -1,4 +1,4 @@
import {chooseOptionInSelect, mockApi, mockSitePreview, responseFixtures} from '@tryghost/admin-x-framework/test/acceptance'; import {chooseOptionInSelect, mockApi, mockSitePreview, responseFixtures, toggleLabsFlag} from '@tryghost/admin-x-framework/test/acceptance';
import {expect, test} from '@playwright/test'; import {expect, test} from '@playwright/test';
import {globalDataRequests} from '../../utils/acceptance'; import {globalDataRequests} from '../../utils/acceptance';
@ -286,4 +286,51 @@ test.describe('Design settings', async () => {
] ]
}); });
}); });
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: '<html><head><style></style></head><body><div>homepage preview</div></body></html>'
});
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, '\\+')}`));
});
}); });