Merge pull request #75 from c4dt/69

Footer UI tests

web/frontend/package.json

@@ -47,6 +47,7 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
+    "dotenv": "^16.3.1",
     "eslint": "^8.16.0",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-prettier": "^8.3.0",

web/frontend/playwright.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig, devices } from '@playwright/test';
 
+/* import environment variables used in development instance */
+require("dotenv").config({ path: "./../../.env" });
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */

web/frontend/src/language/de.json

@@ -284,6 +284,11 @@
     "enterHintLg": "Geben Sie einen Hinweis auf Englisch ein (optional)",
     "enterHintLg2": "Geben Sie einen Hinweis auf Deutsch ein (optional)",
     "hint": "Hinweis",
-    "invalidInput": "Bitte geben Sie eine Zahl zwischen 1 und {{max}} ein."
+    "invalidInput": "Bitte geben Sie eine Zahl zwischen 1 und {{max}} ein.",
+    "footerCopyright": "DEDIS LAB -",
+    "footerUnknown": "?",
+    "footerVersion": "version:",
+    "footerBuild": "build:",
+    "footerBuildTime": "in:"
   }
 }

web/frontend/src/language/en.json

@@ -285,6 +285,11 @@
     "logoutWarning": "You are about to log out. If you are currently filling a form, we suggest you to export the form as a JSON, otherwise you will lose your modifications. Are you sure you want to continue?",
     "continue": "Continue",
     "invalidInput": "Please enter a number between 1 and {{max}}.",
-    "hint": "Hint"
+    "hint": "Hint",
+    "footerCopyright": "DEDIS LAB -",
+    "footerUnknown": "?",
+    "footerVersion": "version:",
+    "footerBuild": "build:",
+    "footerBuildTime": "in:"
   }
 }

web/frontend/src/language/fr.json

@@ -284,6 +284,11 @@
     "enterHintLg": "Entrer une indication en Anglais (optionnel)",
     "enterHintLg1": "Entrer une indication en Français (optionnel)",
     "enterHintLg2": "Entrer une indication en Allemand (optionnel)",
-    "invalidInput": "Entrer s'il vous plaît un nombre entre 1 et {{max}}"
+    "invalidInput": "Entrer s'il vous plaît un nombre entre 1 et {{max}}",
+    "footerCopyright": "DEDIS LAB -",
+    "footerUnknown": "?",
+    "footerVersion": "version:",
+    "footerBuild": "build:",
+    "footerBuildTime": "en:"
   }
 }

web/frontend/src/layout/Footer.tsx

@@ -1,34 +1,28 @@
-import ProxyInput from 'components/utils/proxy';
+import { useTranslation } from 'react-i18next';
 
-const Footer = () => (
-  <div className="flex flex-row border-t justify-center bg-white items-center w-full p-4 text-gray-300 text-xs">
-    <footer>
-      <div className="hidden sm:flex flex-row items-center max-w-7xl mx-auto py-2 px-4 overflow-hidden sm:px-6 lg:px-8">
-        <span className="text-gray-400"> &copy; 2022 DEDIS LAB - </span>
-        <a className="text-gray-600" href="https://github.com/c4dt/d-voting">
-          https://github.com/c4dt/d-voting
-        </a>
-        <div className="px-10">
-          <ProxyInput />
+const Footer = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-row border-t justify-center bg-white items-center w-full p-4 text-gray-300 text-xs">
+      <footer data-testid="footer">
+        <div className="hidden sm:flex flex-row items-center max-w-7xl mx-auto py-2 px-4 overflow-hidden sm:px-6 lg:px-8">
+          <span data-testid="footerCopyright" className="text-gray-400">
+            &copy; {new Date().getFullYear()} {t('footerCopyright')}&nbsp;
+            <a className="text-gray-600" href="https://github.com/c4dt/d-voting">
+              https://github.com/c4dt/d-voting
+            </a>
+          </span>
         </div>
-      </div>
-      <div className="flex sm:hidden flex-col items-center max-w-7xl mx-auto py-2 px-4 overflow-hidden sm:px-6 lg:px-8">
-        <span className="text-gray-400"> &copy; 2022 DEDIS LAB - </span>
-        <a className="text-gray-600" href="https://github.com/c4dt/d-voting">
-          https://github.com/c4dt/d-voting
-        </a>
-        <div className="pt-2">
-          <ProxyInput />
+        <div data-testid="footerVersion" className="text-center">
+          {t('footerVersion')} {process.env.REACT_APP_VERSION || t('footerUnknown')}
+          &nbsp;- {t('footerBuild')}&nbsp;
+          {process.env.REACT_APP_BUILD || t('footerUnknown')}
+          &nbsp;- {t('footerBuildTime')}
+          &nbsp;{process.env.REACT_APP_BUILD_TIME || t('footerUnknown')}
         </div>
-      </div>
-      <div className="text-center">
-        version:
-        {process.env.REACT_APP_VERSION || 'unknown'} - build{' '}
-        {process.env.REACT_APP_BUILD || 'unknown'} - on{' '}
-        {process.env.REACT_APP_BUILD_TIME || 'unknown'}
-      </div>
-    </footer>
-  </div>
-);
+      </footer>
+    </div>
+  );
+};
 
 export default Footer;

web/frontend/tests/footer.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+import { default as i18n } from 'i18next';
+import { initI18n, setUp, getFooter } from './shared';
+
+initI18n();
+
+test.beforeEach(async ({ page }) => {
+  await setUp(page, '/about');
+});
+
+test('Assert copyright notice is visible', async({ page }) => {
+  const footerCopyright = await page.getByTestId('footerCopyright');
+  await expect(footerCopyright).toBeVisible();
+  await expect(footerCopyright).toHaveText(
+    `© ${new Date().getFullYear()} ${i18n.t('footerCopyright')} https://github.com/c4dt/d-voting`
+  );
+});
+
+test('Assert version information is visible', async({ page }) => {
+  const footerVersion = await page.getByTestId('footerVersion');
+  await expect(footerVersion).toBeVisible();
+  await expect(footerVersion).toHaveText(
+    [
+      `${i18n.t('footerVersion')} ${process.env.REACT_APP_VERSION || i18n.t('footerUnknown')}`,
+      `${i18n.t('footerBuild')} ${process.env.REACT_APP_BUILD || i18n.t('footerUnknown')}`,
+      `${i18n.t('footerBuildTime')} ${process.env.REACT_APP_BUILD_TIME || i18n.t('footerUnknown')}`,
+    ].join(' - ')
+  );
+});

web/frontend/tests/navigation.spec.ts

@@ -13,10 +13,6 @@ import { SCIPER_ADMIN, SCIPER_USER, UPDATE, mockPersonalInfo, mockLogout } from
 initI18n();
 
 test.beforeEach(async ({ page }) => {
-  if (UPDATE === true) {
-    return;
-  }
-  await mockPersonalInfo(page);
   await setUp(page, '/about');
 });
 

web/frontend/tests/shared.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test';
 import en from './../src/language/en.json';
 import fr from './../src/language/fr.json';
 import de from './../src/language/de.json';
-import { SCIPER_ADMIN, SCIPER_USER, mockPersonalInfo, mockGetDevLogin, mockLogout } from './mocks';
+import { SCIPER_ADMIN, SCIPER_USER, UPDATE, mockPersonalInfo, mockGetDevLogin, mockLogout } from './mocks';
 
 export function initI18n () {
   i18n.init({
@@ -13,6 +13,10 @@ export function initI18n () {
 }
 
 export async function setUp(page: any, url: string) {
+  if (UPDATE === true) {
+    return;
+  }
+  await mockPersonalInfo(page);
   await mockGetDevLogin(page);
   await mockLogout(page);
   await page.goto(url);
@@ -38,3 +42,7 @@ export async function assertOnlyVisibleToAdmin (page: any, locator: any) {
   await logIn(page, SCIPER_ADMIN);
   await expect(locator).toBeVisible();    // assert is visible to admin user
 }
+
+export async function getFooter (page: any) {
+  return await page.getByTestId('footer');
+}