From a54bcbcb1ee418ace77b03ff9869181f310960e8 Mon Sep 17 00:00:00 2001 From: daproclaima Date: Tue, 19 Mar 2024 10:57:41 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(app-desk)=20integrate=20design=204?= =?UTF-8?q?04=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Introduce a first draft of 404 page based on Johann's design. Please refer to the Figma file for more info. This page is tested through tests e2e. It closes the issue #112 --- .../apps/desk/src/assets/icons/icon-404.svg | 20 ++++++++++ .../apps/desk/src/i18n/translations.json | 3 ++ src/frontend/apps/desk/src/pages/404.tsx | 40 ++++++++++++++----- .../apps/e2e/__tests__/app-desk/404.spec.ts | 29 ++++++++++++++ .../__tests__/app-desk/teams-create.spec.ts | 6 ++- 5 files changed, 86 insertions(+), 12 deletions(-) create mode 100644 src/frontend/apps/desk/src/assets/icons/icon-404.svg create mode 100644 src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts diff --git a/src/frontend/apps/desk/src/assets/icons/icon-404.svg b/src/frontend/apps/desk/src/assets/icons/icon-404.svg new file mode 100644 index 0000000..fe70571 --- /dev/null +++ b/src/frontend/apps/desk/src/assets/icons/icon-404.svg @@ -0,0 +1,20 @@ + + + + + + + + \ No newline at end of file diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json index b22d8fa..495c226 100644 --- a/src/frontend/apps/desk/src/i18n/translations.json +++ b/src/frontend/apps/desk/src/i18n/translations.json @@ -19,6 +19,7 @@ "Add team icon": "Icône ajout de groupe", "Admin": "Admin", "Are you sure you want to delete {{teamName}} team?": "Êtes-vous sûr de vouloir supprimer le groupe {{teamName}}?", + "Back to home page": "Retour à la page d'accueil", "Cancel": "Annuler", "Cells icon": "Icône Cellules", "Choose a role": "Choisissez un rôle", @@ -47,6 +48,7 @@ "Groups": "Groupes", "Invitation sent to {{email}}": "Invitation envoyée à {{email}}", "Invite new members to {{teamName}}": "Invitez de nouveaux membres à rejoindre {{teamName}}", + "It seems that the page you are looking for does not exist or cannot be displayed correctly.": "Il semble que la page que vous cherchez n'existe pas ou ne puisse pas être affichée correctement.", "Language": "Langue", "Language Icon": "Icône de langue", "Last update at": "Dernière modification le", @@ -61,6 +63,7 @@ "New name...": "Nouveau nom...", "Open the member options modal": "Ouvrir les options de membre dans la fenêtre modale", "Open the team options": "Ouvrir les options de groupe", + "Ouch !": "Ooops !", "Owner": "Propriétaire", "People": "People", "People Description": "Description de People", diff --git a/src/frontend/apps/desk/src/pages/404.tsx b/src/frontend/apps/desk/src/pages/404.tsx index efe548a..8dfbfef 100644 --- a/src/frontend/apps/desk/src/pages/404.tsx +++ b/src/frontend/apps/desk/src/pages/404.tsx @@ -1,25 +1,43 @@ +import { Button } from '@openfun/cunningham-react'; import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; -import { Text } from '@/components'; +import Icon404 from '@/assets/icons/icon-404.svg'; +import { Box, StyledLink, Text } from '@/components'; import { NextPageWithLayout } from '@/types/next'; import MainLayout from './MainLayout'; +const StyledButton = styled(Button)` + width: fit-content; + padding-left: 2rem; + padding-right: 2rem; +`; + const Page: NextPageWithLayout = () => { const { t } = useTranslation(); return ( - - {t('404 - Page not found')} - + + + + + {t('Ouch !')} + + + + {t( + 'It seems that the page you are looking for does not exist or cannot be displayed correctly.', + )} + + + + + {t('Back to home page')} + + + ); }; diff --git a/src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts new file mode 100644 index 0000000..4e4fa70 --- /dev/null +++ b/src/frontend/apps/e2e/__tests__/app-desk/404.spec.ts @@ -0,0 +1,29 @@ +import { expect, test } from '@playwright/test'; + +import { keyCloakSignIn } from './common'; + +test.beforeEach(async ({ page, browserName }) => { + await page.goto('/'); + await keyCloakSignIn(page, browserName); + await page.goto('unknown-page404'); +}); + +test.describe('404', () => { + test('Checks all the elements are visible', async ({ page }) => { + await expect(page.getByLabel('Image 404')).toBeVisible(); + await expect(page.getByText('Ouch')).toBeVisible(); + await expect( + page.getByText( + 'It seems that the page you are looking for does not exist or cannot be displayed correctly.', + ), + ).toBeVisible(); + await expect(page.getByText('Back to home page')).toBeVisible(); + }); + + test('checks go back to home page redirects to home page', async ({ + page, + }) => { + await page.getByText('Back to home page').click(); + await expect(page).toHaveURL('/'); + }); +}); diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts index 66cf638..7365984 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts @@ -116,7 +116,11 @@ test.describe('Teams Create', () => { test('checks 404 on teams/[id] page', async ({ page }) => { await page.goto('/teams/some-unknown-team'); - await expect(page.getByText('404 - Page not found')).toBeVisible({ + await expect( + page.getByText( + 'It seems that the page you are looking for does not exist or cannot be displayed correctly.', + ), + ).toBeVisible({ timeout: 15000, }); });