Add some tests for formIndex route and remove HAR files

web/frontend/README.md

@@ -40,13 +40,3 @@ npx playwright test --ui
 ```
 
 this will open an user interface where you can interactively run and evaluate tests.
-
-## Update HAR files
-
-To update the HAR files, you need to make sure
-
-* that a complete D-Voting setup is running, as the API will be called for real, and
-* the `REACT_APP_SCIPER_ADMIN` of the D-Voting instance value is set to `123456` (i.e. the `SCIPER_ADMIN` value in the mocks).
-
-You then change the `UPDATE = false` value in `tests/mocks.ts` to `UPDATE = true` and execute
-the tests as usual. The tests that update the mocks will be run and the other tests will be skipped.

web/frontend/src/layout/NavBar.tsx

@@ -240,7 +240,7 @@ const NavBar: FC = () => {
   };
 
   return (
-    <nav className="w-full border-b">
+    <nav data-testid="navBar" className="w-full border-b">
       <div className="max-w-7xl mx-auto px-2 md:px-6 lg:px-8">
         <div className="relative flex items-center justify-between h-16">
           <MobileMenu authCtx={authCtx} handleLogout={handleLogout} fctx={fctx} t={t} />

web/frontend/src/pages/form/components/FormTable.tsx

@@ -27,6 +27,8 @@ const FormTable: FC<FormTableProps> = ({ forms, pageIndex, setPageIndex }) => {
 
     return [];
   };
+  // 1st page w/ empty list is always shown
+  const numPages = partitionArray(forms, FORM_PER_PAGE).length || 1;
 
   useEffect(() => {
     if (forms !== null) {
@@ -73,12 +75,13 @@ const FormTable: FC<FormTableProps> = ({ forms, pageIndex, setPageIndex }) => {
           </tbody>
         </table>
         <nav
+          data-testid="navPagination"
           className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
           aria-label="Pagination">
-          <div className="hidden sm:block text-sm text-gray-700">
+          <div data-testid="navPaginationMessage" className="hidden sm:block text-sm text-gray-700">
             {t('showingNOverMOfXResults', {
               n: pageIndex + 1,
-              m: partitionArray(forms, FORM_PER_PAGE).length,
+              m: numPages,
               x: `${forms !== null ? forms.length : 0}`,
             })}
           </div>
@@ -90,7 +93,7 @@ const FormTable: FC<FormTableProps> = ({ forms, pageIndex, setPageIndex }) => {
               {t('previous')}
             </button>
             <button
-              disabled={partitionArray(forms, FORM_PER_PAGE).length <= pageIndex + 1}
+              disabled={numPages <= pageIndex + 1}
               onClick={handleNext}
               className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
               {t('next')}

web/frontend/tests/footer.spec.ts

@@ -1,20 +1,16 @@
 import { expect, test } from '@playwright/test';
 import { default as i18n } from 'i18next';
 import { initI18n, setUp } from './shared';
-import { UPDATE, mockPersonalInfo } from './mocks';
+import { mockPersonalInfo } from './mocks';
 
 initI18n();
 
 test.beforeEach(async ({ page }) => {
-  if (UPDATE === true) {
-    return;
-  }
   await mockPersonalInfo(page);
   await setUp(page, '/about');
 });
 
 test('Assert copyright notice is visible', async ({ page }) => {
-  test.skip(UPDATE === true, 'Do not run regular tests when updating HAR files');
   const footerCopyright = await page.getByTestId('footerCopyright');
   await expect(footerCopyright).toBeVisible();
   await expect(footerCopyright).toHaveText(
@@ -23,7 +19,6 @@ test('Assert copyright notice is visible', async ({ page }) => {
 });
 
 test('Assert version information is visible', async ({ page }) => {
-  test.skip(UPDATE === true, 'Do not run regular tests when updating HAR files');
   const footerVersion = await page.getByTestId('footerVersion');
   await expect(footerVersion).toBeVisible();
   await expect(footerVersion).toHaveText(

web/frontend/tests/formIndex.spec.ts

@@ -0,0 +1,68 @@
+import { expect, test } from '@playwright/test';
+import { default as i18n } from 'i18next';
+import { assertHasFooter, assertHasNavBar, initI18n, setUp } from './shared';
+import { mockEvoting, mockPersonalInfo } from './mocks';
+
+initI18n();
+
+test.beforeEach(async ({ page }) => {
+  // mock empty list per default
+  await mockEvoting(page);
+  await mockPersonalInfo(page);
+  await setUp(page, '/form/index');
+});
+
+// main elements
+
+test('Assert navigation bar is present', async ({ page }) => {
+  await assertHasNavBar(page);
+});
+
+test('Assert footer is present', async ({ page }) => {
+  await assertHasFooter(page);
+});
+
+// pagination bar
+
+test('Assert pagination bar is present', async ({ page }) => {
+  await expect(page.getByTestId('navPagination')).toBeVisible();
+  await expect(page.getByRole('button', { name: i18n.t('previous') })).toBeVisible();
+  await expect(page.getByRole('button', { name: i18n.t('next') })).toBeVisible();
+});
+
+test('Assert pagination works correctly for empty list', async ({ page }) => {
+  await expect(page.getByTestId('navPaginationMessage')).toHaveText(
+    i18n.t('showingNOverMOfXResults', { n: 1, m: 1, x: 0 })
+  );
+  for (let key of ['next', 'previous']) {
+    await expect(page.getByRole('button', { name: i18n.t(key) })).toBeDisabled();
+  }
+});
+
+test('Assert pagination works correctly for non-empty list', async ({ page }) => {
+  // mock non-empty list w/ 11 elements i.e. 2 pages
+  await mockEvoting(page, false);
+  await page.reload();
+  const next = await page.getByRole('button', { name: i18n.t('next') });
+  const previous = await page.getByRole('button', { name: i18n.t('previous') });
+  // 1st page
+  await expect(page.getByTestId('navPaginationMessage')).toHaveText(
+    i18n.t('showingNOverMOfXResults', { n: 1, m: 2, x: 11 })
+  );
+  await expect(previous).toBeDisabled();
+  await expect(next).toBeEnabled();
+  await next.click();
+  // 2nd page
+  await expect(page.getByTestId('navPaginationMessage')).toHaveText(
+    i18n.t('showingNOverMOfXResults', { n: 2, m: 2, x: 11 })
+  );
+  await expect(next).toBeDisabled();
+  await expect(previous).toBeEnabled();
+  await previous.click();
+  // back to 1st page
+  await expect(page.getByTestId('navPaginationMessage')).toHaveText(
+    i18n.t('showingNOverMOfXResults', { n: 1, m: 2, x: 11 })
+  );
+  await expect(previous).toBeDisabled();
+  await expect(next).toBeEnabled();
+});