studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🏗️(frontend) Footer configurable

Browse Source 
To have different footer per instance the
content of the footer is now configurable
from the theme customization file.

See THEME_CUSTOMIZATION_FILE_PATH env var.
This commit is contained in:
Anthony LC
2025-03-25 13:08:36 +01:00
parent 310154815b
commit b5630359ee
12 changed files with 451 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
View File

@@ -159,8 +159,8 @@ test.describe('Config: Not loggued', () => {
const jsonResponse = await response.json();
expect(jsonResponse.FRONTEND_THEME).toStrictEqual('default');
const footer = page.locator('footer').first();
const header = page.locator('header').first();
// alt 'Gouvernement Logo' comes from the theme
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
await expect(header.getByAltText('Gouvernement Logo')).toBeVisible();
});
});

154
src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts
View File

@@ -1,14 +1,115 @@
import { expect, test } from '@playwright/test';
import { overrideConfig } from './common';
test.describe('Footer', () => {
test.use({ storageState: { cookies: [], origins: [] } });
test('checks the footer is not displayed if no config', async ({ page }) => {
await overrideConfig(page, {
theme_customization: {},
});
await page.goto('/');
await expect(page.locator('footer')).toBeHidden();
});
test('checks all the elements are visible', async ({ page }) => {
await page.goto('/');
const footer = page.locator('footer').first();
await expect(footer.getByAltText('Docs Logo')).toBeVisible();
await expect(footer.getByRole('heading', { name: 'Docs' })).toBeVisible();
await expect(footer.getByText('BETA')).toBeVisible();
await expect(footer.getByRole('link', { name: 'Github' })).toBeVisible();
await expect(footer.getByRole('link', { name: 'DINUM' })).toBeVisible();
await expect(footer.getByRole('link', { name: 'ZenDiS' })).toBeVisible();
await expect(
footer.getByRole('link', { name: 'BlockNote.js' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Legal Notice' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Personal data and cookies' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Accessibility' }),
).toBeVisible();
await expect(
footer.getByText(
'Unless otherwise stated, all content on this site is under licence',
),
).toBeVisible();
// Check the translation
const header = page.locator('header').first();
await header.getByRole('button').getByText('English').click();
await page.getByLabel('Français').click();
await expect(
page.locator('footer').getByText('Mentions légales'),
).toBeVisible();
});
test('checks the footer is correctly overrided', async ({ page }) => {
await overrideConfig(page, {
theme_customization: {
footer: {
default: {
logo: {
src: '/assets/logo-gouv.svg',
width: '220px',
alt: 'Gouvernement Logo',
},
externalLinks: [
{
label: 'legifrance.gouv.fr',
href: '#',
},
{
label: 'info.gouv.fr',
href: '#',
},
],
legalLinks: [
{
label: 'Legal link',
href: '#',
},
],
bottomInformation: {
label: 'Some bottom information text',
link: {
label: 'a custom label',
href: '#',
},
},
},
fr: {
bottomInformation: {
label: "Text d'information en bas de page en français",
link: {
label: 'un label personnalisé',
href: '#',
},
},
},
},
},
});
await page.goto('/');
const footer = page.locator('footer').first();
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
await expect(footer.getByRole('heading', { name: 'Docs' })).toBeHidden();
await expect(footer.getByText('BETA')).toBeHidden();
await expect(
footer.getByRole('link', { name: 'legifrance.gouv.fr' }),
).toBeVisible();
@@ -18,53 +119,30 @@ test.describe('Footer', () => {
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'service-public.fr' }),
footer.getByRole('link', { name: 'Legal link' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'data.gouv.fr' }),
footer.getByText('Some bottom information text'),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Legal Notice' }),
footer.getByRole('link', { name: 'a custom label' }),
).toBeVisible();
// Check the translation
const header = page.locator('header').first();
await header.getByRole('button').getByText('English').click();
await page.getByLabel('Français').click();
await expect(
page
.locator('footer')
.getByText("Text d'information en bas de page en français"),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Personal data and cookies' }),
).toBeVisible();
await expect(
footer.getByRole('link', { name: 'Accessibility' }),
).toBeVisible();
await expect(
footer.getByText(
'Unless otherwise stated, all content on this site is under licence',
),
footer.getByRole('link', { name: 'un label personnalisé' }),
).toBeVisible();
});
const legalPages = [
{ name: 'Legal Notice', url: '/legal-notice/' },
{ name: 'Personal data and cookies', url: '/personal-data-cookies/' },
{ name: 'Accessibility', url: '/accessibility/' },
];
for (const { name, url } of legalPages) {
test(`checks ${name} page`, async ({ page }) => {
await page.goto('/');
const footer = page.locator('footer').first();
await footer.getByRole('link', { name }).click();
await expect(
page
.getByRole('heading', {
name,
})
.first(),
).toBeVisible();
await expect(page).toHaveURL(url);
});
}
});